/* The Library Shoals — the shell both pages wear.
 *
 * Extracted from home.html the moment there were two pages, rather than after they had
 * drifted. Served with Cache-Control: no-cache, so an edit here shows up on the next load.
 */
/* The same palette ZenSwept's front door uses, from products/zenswept/public/css/zs.css, so the
   two signature screens are one product and not two lookalikes.

   ONE DEPARTURE, and it is deliberate: there are no category colours here. The first cut gave
   each of the three groups its own hue, which failed the categorical palette checks on the dark
   panel (a near-white third slot reads as grey, and the only remaining candidates were the amber
   and red that mean severity everywhere else in this suite). The groups are already named by
   their own section headings, so colour was carrying nothing a reader needed. Brand green is the
   single accent, and the one pillar that differs — XII, which is not scored — is set apart by an
   outline and a label rather than by a hue, which is what it actually needs said about it. */
:root{
  --bg:#1F1E20; --panel:#2B2A2C; --ink:#EBEBEC; --mute:#939598; --line:#434244;
  --green:#9ACA3C; --green-dim:#5A902F; --lamp:#CFE88A;
  --sea:#17262B; --sea-deep:#101C20; --water-line:#6E8A92;
  --display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --body:'Source Sans 3',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body)}
body{font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px 72px}

/* The suite bar. Same shape and same place as ZenSwept's and ZenTrends': back to the chart on the
   left, at the top, then this product's own sections. */
.zj-seasbar{position:sticky;top:0;z-index:9999;display:flex;align-items:center;gap:14px;
  padding:0 16px;height:44px;background:#1F1E20;border-bottom:1px solid #434244;
  font:600 13.5px/1 Seravek,"Source Sans 3",system-ui,sans-serif;overflow-x:auto}
.zj-seasbar a{text-decoration:none;white-space:nowrap;color:#C9CACC;padding:5px 2px}
.zj-seasbar a:hover{color:#EBEBEC}
.zj-seasbar a.zj-seas{color:#9ACA3C;font-weight:700}
.zj-seasbar a.zj-seas:hover{color:#B5DB6A}
.zj-seasbar a.on{color:#fff;box-shadow:inset 0 -2px 0 #9ACA3C}
.zj-seasbar .zj-sep{width:1px;height:18px;background:#434244;flex:none}
.zj-seasbar a:focus-visible{outline:3px solid #71AF3A;outline-offset:2px;border-radius:4px}
@media print{.zj-seasbar{display:none}}

header.top{display:flex;align-items:center;gap:14px;padding:22px 0 10px;flex-wrap:wrap}
header.top .mark{width:46px;height:46px;flex:none}
header.top h1{font-family:var(--display);font-size:24px;margin:0;font-weight:700}
header.top h1 span{color:var(--green)}
header.top .sub{color:var(--mute);font-size:14px;margin:0}
header.top .acts{margin-left:auto;display:flex;gap:10px;align-items:center}
button.act{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
button.act:hover{border-color:var(--green)}
button.act[aria-pressed="true"]{background:var(--green);color:#1E1D1F;border-color:var(--green)}
.badge{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--green);border:1px solid var(--green-dim);border-radius:999px;padding:3px 10px}

.lede{font-family:var(--display);font-size:clamp(28px,4.2vw,46px);line-height:1.1;margin:18px 0 6px;
  text-wrap:balance;max-width:22ch}
.lede em{font-style:normal;color:var(--green)}
.say{color:var(--mute);margin:0 0 18px;max-width:64ch;min-height:3em}

.stage{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden}
.stage svg{display:block;width:100%;height:auto}
.hint{position:absolute;left:18px;bottom:14px;font-size:12.5px;color:var(--mute)}
/* Below about a tablet the stage is short enough that an absolutely-positioned caption lands on
   the water, across the beacons and the soundings. Put it under the chart instead of over it. */
@media (max-width:720px){
  .stage{overflow:visible}
  .hint{position:static;margin:10px 2px 0;display:block}
}

.score{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:18px 0 0}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.tile .k{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);
  font-weight:700;margin:0 0 6px}
.tile .v{font-family:var(--display);font-size:38px;font-weight:700;margin:0;line-height:1;
  color:var(--green);font-variant-numeric:tabular-nums}
.tile .n{color:var(--mute);font-size:14px;margin:8px 0 0}

.cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:26px 0 0}
a.go{display:inline-block;font-weight:700;font-size:16px;text-decoration:none;background:var(--green);
  color:#1E1D1F;border-radius:10px;padding:13px 24px}
a.go:hover{filter:brightness(1.08)}
a.plain{color:var(--green);font-weight:600;text-decoration:none}
a.plain:hover{text-decoration:underline}

/* ---- the chart room ---- */
h2.group{font-family:var(--display);font-size:22px;margin:44px 0 2px;display:flex;align-items:baseline;
  gap:12px;flex-wrap:wrap}
h2.group .count{font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);font-weight:700}
p.grouphint{color:var(--mute);margin:0 0 16px;max-width:64ch}
.room{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.guide{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  display:flex;flex-direction:column;gap:10px}
.guide .num{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.1em;
  color:var(--green);margin:0}
.guide h3{font-family:var(--display);font-size:19px;margin:0;line-height:1.2;text-wrap:balance}
.guide .why{color:var(--mute);font-size:14.5px;margin:0;flex:1}
.guide .links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:2px}
.guide .links a{font-size:14px;font-weight:600;text-decoration:none;color:var(--green)}
.guide .links a:hover{text-decoration:underline}
.guide .links a.locked{color:var(--mute);cursor:default}
.guide .links a.locked:hover{text-decoration:none}
/* XII. Not a colour — an outline and a label, because "this one is not scored" is a fact about
   the pillar and has to survive being printed, screenshotted or read by someone colourblind. */
.guide.unscored{background:transparent;border-style:dashed}
.chip{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--mute);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}

.foot{color:var(--mute);font-size:13px;margin:34px 0 0;max-width:78ch}
.foot a{color:var(--green)}

a:focus-visible,button:focus-visible{outline:3px solid var(--green-dim);outline-offset:2px;
  border-radius:6px}