/* SchoolOS v0.2 — Leadership Intelligence design system (spec §11).
   Restrained, premium, calm. Status never relies on colour alone — every
   status also carries a text label and a glyph. */

:root{
  /* --- surfaces & ink -------------------------------------------------- */
  /* Retinted from forest-green to a dark teal-navy so the app reads as the
     same brand as nordiceducationacademy.com (navy chrome, teal accent),
     while keeping the warm-paper reading surface. Still near-black as text,
     so contrast is unchanged and AA holds. */
  --ink:#12303A;          /* dark teal-navy — chrome and primary text */
  --ink-2:#20454F;
  /* Nordic brand accent. --teal is dark enough for white button text (AA);
     --teal-bright is the site's CTA teal, used for marks and on-dark accents
     where large or decorative; --teal-light sits on the dark chrome. */
  --teal:#17727f;
  --teal-bright:#2395a4;
  --teal-light:#71c8c7;
  --ink-soft:#5A6B66;     /* secondary text */
  /* Tertiary text. Was #8A968F, which read 2.79:1 on the paper and failed
     WCAG AA everywhere it was used. Sweeping the operator and Head screens for
     elements that actually carry this colour found five distinct grounds —
     --card, --paper, --paper-2, --info-bg and a 5.5% teal wash — and this is
     the lightest tone that clears 4.5:1 against all of them (worst case 4.60:1,
     on --paper-2). Lightest on purpose: --ink-soft is 5.12:1 on the paper, so
     every step darker here closes the gap between secondary and tertiary text
     that the hierarchy depends on. */
  --ink-faint:#626D64;    /* tertiary text */
  --paper:#F6F4EE;        /* warm off-white background */
  --paper-2:#EFEDE4;      /* recessed surface */
  --card:#FFFFFF;         /* raised surface */
  --line:#E5E1D5;         /* hairline */
  --line-soft:#EEEBE1;    /* softer hairline */
  --topbar:#3A3632;       /* warm charcoal header */

  /* --- semantic washes: felt before noticed ---------------------------- */
  /* Near-paper tints, hairlines one step off neutral, text mixed toward
     ink. ~95% of any page stays neutral; these carry the last 5%, and the
     page must still read perfectly in grayscale. */
  --ok:#3D6B54;    --ok-bg:#F2F5F0;   --ok-line:#DDE5DE;
  --watch:#7D6230; --watch-bg:#F7F3E9; --watch-line:#EAE1CC;
  --risk:#82504B;  --risk-bg:#F6F1F0;  --risk-line:#E9DCD9;   /* dusty rose, rare */
  --info:#4A5E70;  --info-bg:#F1F3F5;  --info-line:#DFE4E8;
  --sand:#B9A96F;  --sand-light:#D8CFA8;   /* strategic / orientation accent */

  /* --- shape ------------------------------------------------------------ */
  --radius:14px;          /* large containers */
  --radius-sm:10px;       /* panels, inputs */
  --radius-xs:6px;        /* tags, small chips */
  --shadow:0 1px 2px rgba(23,42,38,.04), 0 8px 24px rgba(23,42,38,.05);
  --shadow-lg:0 2px 4px rgba(23,42,38,.05), 0 18px 48px rgba(23,42,38,.08);

  /* --- rhythm ------------------------------------------------------------ */
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:26px; --s6:40px; --s7:64px;
  --w-page:1080px;        /* one page width everywhere */
  --w-measure:70ch;       /* long-form reading width */
  --speed:160ms;          /* one interaction tempo */

  /* --- type scale --------------------------------------------------------
     Editorial display (Fraunces) carries identity; functional UI text
     (Source Sans 3) carries information. Sizes come from this scale —
     no ad-hoc values without a reason. */
  --t-display:34px;       /* page titles */
  --t-title:19px;         /* object titles */
  --t-body:16px;          /* default reading text */
  --t-meta:13px;          /* metadata, dates */
  --t-label:11.5px;       /* eyebrow labels (caps) */
}

/* ---------- Fallback faces with matched metrics ----------
   Both webfonts load with `display=swap`, so text is visible from the first
   paint. The cost of swap is the reflow when the real face lands: Georgia sets
   the same sentence 18% wider than Fraunces, and the reading column is 66ch —
   a unit defined as the width of the digit zero, so the column itself was
   changing width by 140px when the fonts arrived.

   Each fallback is therefore a LOCAL font with its metrics scaled to match the
   webfont it stands in for. Zero bytes: these are fonts already on the machine.

   The two size-adjust values were chosen by measurement, not by formula, and
   they answer different questions. For the sans the number that matters is the
   advance of "0", because that is what 66ch resolves against — Source Sans 3
   497.02 / Helvetica Neue 556.00 = 89.4%, which lands the column on the same
   pixel in both states. For the serif, anything from 87% up gave an identical
   layout, so it is set where Georgia's x-height comes closest to Fraunces's
   (0.727em against 0.736em): the zero ratio, 589.90 / 613.77 = 96.1%.

   Ascent and descent are the webfont's, divided by the size-adjust because
   size-adjust scales those too. Measured with the swap suppressed and compared
   against the settled page: cumulative displacement of the five section
   landmarks fell from 918px to 162px, document height from 244px to 53px, and
   the column from 140px to 0.

   Engines without size-adjust ignore the whole face and fall through to plain
   Georgia, exactly as before. */
@font-face{
  font-family:"Fraunces Fallback";
  src:local("Georgia"),local("Times New Roman"),local("Times");
  size-adjust:96.1%;ascent-override:101.9%;descent-override:27.1%;line-gap-override:0%;
}
@font-face{
  font-family:"Source Sans 3 Fallback";
  src:local("Helvetica Neue"),local("Helvetica"),local("Arial");
  size-adjust:89.4%;ascent-override:114.1%;descent-override:44.7%;line-gap-override:0%;
}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font:16px/1.62 "Source Sans 3","Source Sans 3 Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.serif,h1,h2.section,.hero h2,.dim-name,.attn h3,.card-figure{
  font-family:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;font-weight:520;
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--w-page);margin:0 auto;padding:34px 32px 96px}
.narrow{max-width:820px}
a{color:var(--ink)}
hr.rule{border:0;border-top:1px solid var(--line);margin:28px 0}

/* ---------- Top bar ----------
   Navigation should disappear: low height, quiet hover, an underline for
   the current page instead of a boxed pill. It must never compete with the
   page title beneath it. */
.topbar{background:var(--topbar);color:#EDEAE0}
.topbar .row{max-width:var(--w-page);margin:0 auto;padding:14px 32px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
/* The wordmark is a lockup, not two labels: the product at full weight, the
   company beneath it at a fraction of the size and none of the emphasis. The
   product's own subdomain should say the product's own name first. */
.topbar .brand{display:inline-flex;flex-direction:column;line-height:1.05;
  text-decoration:none;color:#fff}
.topbar .brand-name{font-family:"Fraunces",Georgia,serif;font-weight:560;
  font-size:18px;letter-spacing:.01em;color:#fff}
.topbar .brand .dot{color:var(--teal-light)}
.topbar .brand-by{font-size:10.5px;font-weight:500;letter-spacing:.03em;
  color:#8FA79A;margin-top:2px}
.topbar nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.topbar nav a,.topbar nav form button{
  color:#C9D6CE;text-decoration:none;font-size:14.5px;font-weight:600;
  padding:6px 12px 7px;border-radius:var(--radius-xs);background:transparent;border:0;
  cursor:pointer;font-family:inherit;position:relative;
  transition:color var(--speed) ease,background var(--speed) ease}
.topbar nav a:hover,.topbar nav form button:hover{color:#fff;background:rgba(255,255,255,.08)}
.topbar nav a.current{color:#fff}
.topbar nav a.current::after{content:"";position:absolute;left:12px;right:12px;bottom:0;
  height:2px;background:var(--sand-light);border-radius:1px}
.topbar .who{color:#93A49C;font-size:12.5px}
/* The identity + Log out group is positioned and styled by the account
   cluster rules in the design-port section at the end of this file. */

/* ---------- Header block ---------- */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.pagehead .eyebrow{color:var(--ink-soft);font-size:var(--t-label);font-weight:600;letter-spacing:.13em;text-transform:uppercase}
h1{font-size:var(--t-display);line-height:1.12;letter-spacing:-.015em;margin-top:5px}
.pagehead .sub{color:var(--ink-soft);font-size:15px;margin-top:7px}
.util{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--card);
  color:var(--ink);text-decoration:none;cursor:pointer;font-family:inherit;line-height:1.2;
  transition:border-color var(--speed) ease,background var(--speed) ease}
.btn:hover{border-color:var(--ink-faint)}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-primary:hover{background:#12606b}

/* ---------- Section headings ---------- */
h2.section{font-size:var(--t-label);letter-spacing:.005em;color:var(--ink-soft);
  font-family:"Source Sans 3",sans-serif;font-weight:600;margin:var(--s7) 0 var(--s4);
  display:flex;align-items:center;gap:10px}
h2.section .count{color:var(--ink-faint);font-weight:400;letter-spacing:.02em;text-transform:none;font-size:12.5px}

/* ---------- Executive synthesis hero ---------- */
.hero{background:linear-gradient(180deg,#1B322C 0%,#172A26 100%);color:#F2EFE6;
  border-radius:var(--radius);padding:34px 36px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hero .eyebrow{color:var(--teal-light);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero h2{font-size:25px;line-height:1.34;margin-top:12px;color:#F6F3EA;font-weight:480;max-width:60ch}
.hero .synth-src{margin-top:16px;color:#9FB4AB;font-size:12.5px}
.hero .baseline{margin-top:14px;color:#CFE0D6;font-size:14px;line-height:1.55;max-width:66ch;
  border-left:2px solid #4E6B5E;padding-left:14px}
.footnote{color:var(--ink-faint);font-size:11.5px;margin-top:9px;font-style:italic}

.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;box-shadow:var(--shadow)}
.scard .k{font-size:12.5px;font-weight:700;letter-spacing:.005em;color:var(--ink-soft);
  display:flex;align-items:center;gap:7px}
.scard .v{font-family:"Fraunces",Georgia,serif;font-size:27px;line-height:1.05;margin-top:9px;letter-spacing:-.01em}
.scard .d{color:var(--ink-soft);font-size:13.5px;margin-top:3px}
.scard.tone-risk{border-color:var(--risk-line)} .scard.tone-risk .k{color:var(--risk)}
.scard.tone-watch{border-color:var(--watch-line)} .scard.tone-watch .k{color:var(--watch)}
.scard.tone-ok{border-color:var(--ok-line)} .scard.tone-ok .k{color:var(--ok)}

/* ---------- Status pill (label + glyph, never colour alone) ---------- */
/* Status reads as text first; the tint accelerates recognition, it does not
   provide the hierarchy. Nothing here may become the loudest thing on a
   page — concern especially stays a near-paper whisper, because the words
   are the statement. */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  letter-spacing:.03em;border-radius:999px;padding:2px 10px;white-space:nowrap;border:1px solid transparent}
.pill .g{font-size:11px;line-height:1}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.watch{background:var(--watch-bg);color:var(--watch)}
.pill.risk{background:var(--risk-bg);color:var(--risk)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.mute{background:transparent;color:var(--ink-soft);border-color:var(--line)}

/* ---------- Dimension card (operator preview) ---------- */
.dim{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.dim::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--line)}
.dim.s-ok::before{background:var(--ok)} .dim.s-watch::before{background:var(--watch)}
.dim.s-risk::before{background:var(--risk)} .dim.s-none::before{background:var(--line)}
.dim .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dim-name{font-size:19px;line-height:1.2}
.dim .interp{color:var(--ink-2);font-size:14.5px;margin-top:10px}
.dim .facts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.dim .facts li{font-size:13.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:baseline}
.dim .facts li .b{color:var(--ink);font-weight:700}
.dim .facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-faint);flex:none;position:relative;top:6px}
.dim details{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:12px}

/* ---------- Drawer (Why this matters) ---------- */
details.drawer{margin-top:0}
details.drawer>summary{cursor:pointer;color:var(--info);font-size:13.5px;font-weight:700;list-style:none;
  display:inline-flex;align-items:center;gap:6px}
details.drawer>summary::-webkit-details-marker{display:none}
details.drawer>summary .chev{transition:transform .15s;display:inline-block}
details.drawer[open]>summary .chev{transform:rotate(90deg)}
.drawer-body{margin-top:12px}
.drawer-body .lede{font-size:12.5px;font-weight:700;letter-spacing:.005em;color:var(--ink-soft);margin:14px 0 6px}
.drawer-body .lede:first-child{margin-top:0}
.research{background:var(--info-bg);border:1px solid var(--info-line);border-radius:var(--radius-sm);padding:13px 15px}
.research .cite{font-weight:700;color:var(--info)}
.research .val{font-family:"Fraunces",Georgia,serif;font-size:var(--t-body);line-height:1.6}
.research .caveat{color:var(--ink-soft);font-size:var(--t-body);line-height:1.6;font-style:italic;margin-top:7px}
.drawer-body ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:14px}
.drawer-body ul li{margin:4px 0}
.consider{background:var(--paper-2);border-radius:var(--radius-sm);padding:12px 15px;font-size:14px;color:var(--ink-2)}

/* ---------- Leadership decisions required ---------- */
.decisions{display:flex;flex-direction:column;gap:12px}
.dec{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:var(--radius-sm);padding:18px 20px;box-shadow:var(--shadow)}
.dec .dn{display:flex;gap:12px;align-items:baseline}
.dec .num{font-family:"Source Sans 3",sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--ink-faint);flex:none;padding-top:3px}
.dec h3{font-family:"Fraunces",Georgia,serif;font-weight:520;font-size:19px;line-height:1.3;letter-spacing:-.01em}
.dec .because{color:var(--ink-2);font-size:14px;margin-top:8px}
.dec .opts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.dec .opts li{font-size:12.5px;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.dec .opts li::before{content:"○ ";color:var(--ink-faint)}
.dec .lnk{margin-top:12px}

/* ---------- Leadership Intelligence Map (all 7 lenses together) ---------- */
.map{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.map-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;
  padding:11px 20px;background:var(--paper);border-bottom:1px solid var(--line)}
.map-head span{font-size:12.5px;font-weight:700;letter-spacing:.005em;color:var(--ink-soft)}
.map-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;
  padding:13px 20px 13px 17px;border-bottom:1px solid var(--line-soft);border-left:3px solid transparent}
.map-row:last-child{border-bottom:0}
.map-row.s-risk{border-left-color:var(--risk)}
.map-row.s-watch{border-left-color:var(--watch)}
.map-row.s-ok{border-left-color:var(--ok)}
.map-row.s-mute{border-left-color:var(--line)}
.map-name{font-family:"Fraunces",Georgia,serif;font-weight:520;font-size:16.5px;line-height:1.25}
.map-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.map-interp{color:var(--ink-2);font-size:13.5px;line-height:1.48;margin-top:7px}
.map-ind{display:flex;flex-direction:column;gap:8px;padding-top:1px}
.ind .ind-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ind .ind-k{font-size:12.5px;font-weight:700;letter-spacing:.005em;color:var(--ink-soft);flex:none}
.ind .ind-v{font-size:11.5px;color:var(--ink-soft);text-align:right;line-height:1.35}
.bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--paper-2);margin-top:4px}
.bar .seg{display:block;height:100%}
/* Open-and-within-date work is neutral slate, NOT amber — on-time work must
   never read as caution. Amber/red are reserved for genuine pressure. */
.bar .seg.done{background:var(--ok)} .bar .seg.open{background:#B9C4BE} .bar .seg.over{background:var(--risk)}
.pips{display:flex;gap:4px;margin-top:5px}
.pips i{width:16px;height:6px;border-radius:2px;background:var(--paper-2);display:block}
.pips i.on{background:var(--info)}
.dots{display:flex;gap:4px;margin-top:5px;align-items:center;min-height:6px}
.dots i{width:6px;height:6px;border-radius:50%;display:block}
.dots i.c{background:var(--risk)} .dots i.p{background:var(--ok)}
.dots .none{font-size:11px;color:var(--ink-faint)}
.map-row details.drawer{grid-column:1/-1;margin-top:9px;border-top:1px solid var(--line-soft);padding-top:9px}
.map-row details.drawer>summary{font-size:12.5px}
details.sub{margin-top:10px}
details.sub>summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--info);
  list-style:none;display:inline-flex;gap:6px;align-items:center}
details.sub>summary::-webkit-details-marker{display:none}
.meaning{font-size:var(--t-body);color:var(--ink-2);line-height:1.6}
.basis{margin-top:10px;background:var(--info-bg);border:1px solid var(--info-line);
  border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--t-body);line-height:1.6;color:var(--ink-2)}
.basis .cite{font-weight:700;color:var(--info)}
.basis .metric{background:none;border:0;padding:0;display:inline}
.basis .caveat{color:var(--ink-soft);font-size:var(--t-body);line-height:1.6;font-style:italic;margin-top:7px}

/* ---------- Strategy page (Phase B) ---------- */
/* Compact on screen, fuller in print: a living strategy document, not a tracker. */
.direction{margin-top:22px;background:linear-gradient(180deg,#1B322C 0%,#172A26 100%);
  color:#F2EFE6;border-radius:var(--radius);padding:26px 30px;box-shadow:var(--shadow-lg)}
.direction .eyebrow{color:var(--teal-bright);font-size:12.5px;font-weight:700;letter-spacing:.005em;
  font-family:"Source Sans 3",sans-serif;margin:0}
.dir-vision{font-size:22px;line-height:1.36;margin-top:11px;color:#F6F3EA;font-weight:480;max-width:58ch}
.dir-values{margin-top:14px;color:#B9CEC2;font-size:14px;letter-spacing:.02em}
.direction details.drawer{margin-top:16px;border-top:1px solid rgba(255,255,255,.12);padding-top:13px}
.direction details.drawer>summary{color:var(--teal-bright)}
.direction .drawer-body{color:#D5E2DA}
.direction .lede{color:#9FB4AB}
.direction .meaning{color:#E4EDE7;font-size:var(--t-body);line-height:1.6}
.direction .idsrc{margin-top:14px;color:#9FB4AB;font-size:11.5px}
.valdefs{margin:0}
.valdefs dt{font-family:"Fraunces",Georgia,serif;font-size:15px;color:#F2EFE6;margin-top:9px}
.valdefs dd{margin:3px 0 0;font-size:13px;color:#C6D6CC;line-height:1.5}
.valdefs .vbeh{color:#9FB4AB;font-style:italic}

.sp{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow);margin-bottom:16px}
.sp-title{font-family:"Fraunces",Georgia,serif;font-weight:520;font-size:22px;line-height:1.24}
.sp-title a{text-decoration:none}
.sp-title a:hover{text-decoration:underline}
.sp-meta{color:var(--ink-faint);font-size:12.5px;margin-top:5px}

.oc{margin-top:18px;padding:17px 19px;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm)}
.oc-title{font-family:"Fraunces",Georgia,serif;font-weight:520;font-size:18px;line-height:1.34;
  max-width:64ch}

/* Status vs signal: labelled, never colour alone, never one overwriting the other. */
.sline{display:flex;gap:26px;flex-wrap:wrap;margin-top:13px}
.sitem{display:flex;flex-direction:column;gap:3px;min-width:0}
.skey{font-size:12.5px;font-weight:700;letter-spacing:.005em;color:var(--ink-soft)}
.sval{font-size:15px;font-weight:600;color:var(--ink)}
.sval-sm{font-size:13px;color:var(--ink-soft)}
.sval .g,.ms-meta .g{margin-right:6px;font-size:11px}
.sig-ok{color:var(--ok)} .sig-risk{color:var(--risk)}
.sig-watch{color:var(--watch)} .sig-mute{color:var(--ink-soft)}
.swhy{margin-top:11px;font-size:12.5px;color:var(--ink-soft);background:var(--paper-2);
  border-radius:8px;padding:9px 12px;line-height:1.5}
.swhy b{color:var(--ink-2);font-weight:700;margin-right:5px}

.ms-list{margin-top:15px}
.ms-list .lede{font-size:12.5px;font-weight:700;letter-spacing:.005em;
  color:var(--ink-soft);margin:0 0 8px}
.ms{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:8px}
.ms-date{font-size:12px;font-weight:700;color:var(--ink-2)}
.ms-title{font-size:14.5px;color:var(--ink)}
.ms-meta{font-size:12px;color:var(--ink-soft);margin-top:3px}
.ms-status{color:var(--ink-2);font-weight:600}
.ms-link{font-size:12px;color:var(--info);text-decoration:none;font-weight:600;white-space:nowrap}
.ms-link:hover{text-decoration:underline}

.measures{display:flex;flex-direction:column;gap:10px}
.measure{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.m-name{font-size:13.5px;color:var(--ink);font-weight:600}
.m-nums{display:flex;gap:20px;flex-wrap:wrap;margin-top:7px;align-items:baseline}
.m-nums span{font-family:"Fraunces",Georgia,serif;font-size:17px;color:var(--ink)}
.m-nums i{display:block;font-family:"Source Sans 3",sans-serif;font-style:normal;font-size:12.5px;
  font-weight:700;letter-spacing:.005em;color:var(--ink-soft);margin-bottom:2px}
.m-nums .m-unit{font-family:"Source Sans 3",sans-serif;font-size:12px;color:var(--ink-soft)}
.m-qual{font-size:12.5px;color:var(--ink-soft);margin-top:5px;font-style:italic}

.evlist{list-style:none;margin:0;padding:0}
.evlist li{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;color:var(--ink-2);
  padding:6px 0;border-bottom:1px solid var(--line-soft)}
.evlist li:last-child{border-bottom:0}
.evlist .evdate{color:var(--ink-faint);font-size:12px;white-space:nowrap}

@media (max-width:760px){
  .ms{grid-template-columns:1fr;gap:6px}
  .ms-link{justify-self:start}
  .sline{gap:16px}
  .dir-vision{font-size:19px}
}

.comingup{display:flex;flex-direction:column;gap:6px}
.cu{display:flex;gap:16px;align-items:baseline;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:9px 13px}
.cu-date{font-size:12px;font-weight:700;color:var(--ink-2);min-width:56px}
.cu-title{font-size:14px;color:var(--ink)}

.needs-review{margin-top:9px;font-size:12.5px;color:var(--watch);background:var(--watch-bg);
  border:1px solid var(--watch-line);border-radius:8px;padding:9px 12px;line-height:1.5}
.needs-review b{margin-right:5px}
.needs-review a{color:var(--info);font-weight:600}
.needs-review-inline{color:var(--watch);font-weight:600}

/* ---------- Share with SchoolOS (Phase F) ---------- */
.share{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;margin-top:22px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow)}
.share .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.005em;
  color:var(--ink-soft);font-family:"Source Sans 3",sans-serif;margin:0}
.share-copy{font-size:13.5px;color:var(--ink-soft);margin-top:7px;max-width:62ch;line-height:1.5}
.share-form{margin-top:13px;display:flex;flex-direction:column;gap:9px}
.share-row{display:flex;gap:9px;flex-wrap:wrap}
.share-file{position:relative;overflow:hidden;display:inline-flex}
.share-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.share-file-btn{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;
  padding:9px 15px;border:1px dashed var(--ink-faint);border-radius:9px;color:var(--ink-2);
  background:var(--paper)}
.share-type{width:auto;min-width:200px;padding:8px 10px;font-size:13px}
.share-text{font-size:13.5px;resize:vertical}
.share-form .btn{align-self:flex-start}
.share-guide{position:relative}
.share-guide>summary{cursor:pointer;list-style:none;font-size:13px;color:var(--info)}
.share-guide>summary::-webkit-details-marker{display:none}
.share-guide[open]>summary{margin-bottom:0}
.share-guide-body{position:absolute;bottom:100%;left:0;z-index:10;width:100%;max-width:420px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;box-shadow:var(--shadow-lg);margin-bottom:6px}
.share-guide-lead{font-size:13px;color:var(--ink-soft);margin:0 0 10px}
.share-guide-list{font-size:12.5px;margin:0}
.share-guide-list>div{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid var(--line-soft)}
.share-guide-list>div:last-of-type{border-bottom:0}
.share-guide-list dt{font-weight:600;color:var(--ink)}
.share-guide-list dd{margin:0;color:var(--ink-2)}
.share-recent{border-left:1px solid var(--line-soft);padding-left:20px}
.rec{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;font-size:13px}
.rec:last-of-type{border-bottom:0}
/* A long unbroken file name must never push the status word out of the
   column: truncate the name with an ellipsis so the row always fits the
   Recent column, whatever the viewport width. */
.rec-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink)}
.rec-state{font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.rec-working,.rec-read_empty,.rec-archived{color:var(--ink-faint)}
.rec-review{color:var(--info)} .rec-approved{color:var(--ok)}
.rec-failed{color:var(--watch)}
.prop-strategy{border-left-color:var(--info)}
.prop-gov{border-left-color:var(--watch)}
.prop-evidence{border-left-color:var(--ink)}
.prop-measure{border-left-color:var(--ok)}
.prop-title-static{font-size:15px;font-weight:600;color:var(--ink);margin-top:4px}
.inp-num{width:90px;display:inline-block;font-family:"Fraunces",Georgia,serif;font-size:17px}
.cmp-existing{font-size:12.5px;color:var(--ink-soft);background:var(--paper-2);
  border-radius:8px;padding:8px 11px;margin-bottom:8px}
.matched{font-size:12.5px;color:var(--info);background:var(--info-bg);border:1px solid var(--info-line);
  border-radius:8px;padding:8px 11px;margin-bottom:8px}
/* The duplicate choice: two plain options in the same notice, stacked so the
   default is read before the alternative. No emphasis on either — one of them
   is right and the page does not know which. */
.dup-choice p{margin:0 0 6px}
.dup-choice label{display:block;margin-top:4px;color:var(--ink-2)}
.dup-choice .inp{margin:4px 0 2px;max-width:420px;font-size:13px;padding:6px 9px}
@media (max-width:860px){.share{grid-template-columns:1fr}.share-recent{border-left:0;padding-left:0;
  border-top:1px solid var(--line-soft);padding-top:14px}}

/* ---------- Meeting review (Phase E) ---------- */
.follows{font-size:12.5px;color:var(--ok);margin:0 0 8px;display:flex;gap:7px;align-items:baseline}
.follows b{font-weight:600}
.follows.unclear{color:var(--watch)}
.follows-arrow{font-size:14px;flex:none}
.prop{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--info);
  border-radius:var(--radius-sm);padding:16px 18px;box-shadow:var(--shadow);margin-bottom:12px}
.prop-sub{border-left-color:var(--ok);margin-left:22px}
.prop-open{border-left-color:var(--watch)}
.prop-sig{border-left-color:var(--ink-faint)}
.prop-keep{font-size:12.5px;font-weight:700;letter-spacing:.005em;
  color:var(--ink-soft);display:flex;gap:7px;align-items:center;margin-bottom:8px}
.prop-title{font-size:15px;font-weight:600}
.prop-src{font-size:11.5px;color:var(--ink-faint);font-style:italic;margin-top:6px}
.prop-hint{font-size:12.5px;color:var(--info);margin-top:8px}
.prop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:11px}
.prop-grid label{font-size:12.5px;font-weight:700;letter-spacing:.005em;
  color:var(--ink-soft);display:flex;flex-direction:column;gap:4px}
.prop-grid .inp{font-size:13px;padding:7px 9px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.miss{color:var(--watch);font-weight:700;text-transform:none;letter-spacing:0;font-size:10.5px}
.prop-values{margin-top:11px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.prop-values label{font-size:13px;display:flex;gap:6px;align-items:center;color:var(--ink-2)}
.prop-actions{margin-top:18px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}

/* ---------- Optional meeting guide (phase 5) ---------- */
/* Collapsed by default and visibly optional: pasted notes are the norm. */
.guide{margin:0 0 14px;border-top:1px solid var(--line-soft);padding-top:12px}
.guide>summary{cursor:pointer;list-style:none;font-size:13px;color:var(--teal);
  display:inline-flex;align-items:center;gap:7px;padding:2px 0}
.guide>summary::-webkit-details-marker{display:none}
.guide>summary::before{content:"›";display:inline-block;transition:transform .15s}
.guide[open]>summary::before{transform:rotate(90deg)}
.guide-body{padding-top:10px;display:grid;gap:10px;max-width:66ch}
.guide-prompts{margin:0;padding-left:20px;display:grid;gap:7px}
.guide-prompts li{font-size:13.5px;color:var(--ink-2)}
.guide-prompts b{display:block;color:var(--ink);font-weight:600}
.guide-prompts span{display:block;color:var(--ink-soft);font-size:12.5px;
  overflow-wrap:anywhere}
@media (max-width:560px){
  .guide-body{max-width:100%}
  .guide-body .btn{width:100%}
}

/* ---------- Connected leadership record + record provenance (phase 4) ---- */
.rec-source{margin:2px 0 0;font-size:11.5px;color:var(--ink-faint)}
.ag-focus{display:flex;gap:9px;align-items:flex-start;margin:8px 0 0 27px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer}
.ag-focus input{margin-top:3px;flex:none;accent-color:var(--teal)}
.ag-focus b{color:var(--teal);font-weight:600}
.ag-focus-why{display:block;color:var(--ink-faint);font-size:11.5px;margin-top:2px}
.rec-thread{margin-top:var(--s5)}
.thread{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:1px}
.thr{display:grid;grid-template-columns:132px 92px 1fr;gap:14px;align-items:baseline;
  padding:10px 0;border-top:1px solid var(--line-soft)}
.thr-kind{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft)}
.thr-evidence .thr-kind{color:var(--sage)}
.thr-when{font-size:12.5px;color:var(--ink-faint);white-space:nowrap}
.thr-title{font-size:14.5px;line-height:1.45;color:var(--ink);min-width:0;
  overflow-wrap:anywhere}
.thr-src{grid-column:3;font-size:11.5px;color:var(--ink-faint);margin-top:2px}
@media (max-width:640px){
  .thr{grid-template-columns:1fr;gap:2px}
  .thr-src{grid-column:1}
  .ag-focus{margin-left:0}
}

/* ---------- Agenda-topic review cards (phase 3) ---------- */
.carry.ag-decision{border-left-color:var(--teal)}
.carry.ag-action{border-left-color:var(--ok)}
.carry.ag-quiet{border-left-color:var(--line)}
/* Compact by design: the leader should understand the page without expanding
   anything, and nothing may overflow horizontally on a phone. */
.ag-topic{display:block;font-size:12px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px;
  overflow-wrap:anywhere}
.ag-outcome{display:block;font-size:15px;line-height:1.45;color:var(--ink);
  overflow-wrap:anywhere}
.ag-meta{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.ag-source{margin:6px 0 0 27px;font-size:11.5px;color:var(--ink-faint)}
.ag-why{display:grid;gap:6px;padding-top:6px}
.ag-why-r{margin:0;font-size:13px;color:var(--ink-2)}
.ag-why-x{margin:0;font-size:13px;color:var(--ink-soft);font-style:italic;
  border-left:2px solid var(--line);padding-left:10px;overflow-wrap:anywhere}
/* Kept in the minutes: one compact line per topic, never an editable card. */
.ag-kept{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:1px}
.ag-kept li{display:flex;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.ag-kept li:last-child{border-bottom:0}
.ag-kept-t{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.ag-kept-k{flex:none;font-size:11.5px;color:var(--ink-faint);white-space:nowrap}
@media (max-width:560px){
  .ag-source{margin-left:0}
  .ag-kept li{flex-direction:column;gap:2px}
  .ag-kept-k{white-space:normal}
}

/* ---------- Multi-meeting import selection (phase 1b) ---------- */
/* Safe metadata only: dates, agenda-topic titles and counts — never excerpts. */
.imp-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.imp-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow)}
.imp-pick{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;cursor:pointer}
.imp-pick input{margin-top:4px;flex:none;width:16px;height:16px;accent-color:var(--teal)}
.imp-main{display:grid;gap:5px;min-width:0}
.imp-date{font-size:15px;font-weight:600;color:var(--ink)}
.imp-count{font-size:12.5px;color:var(--ink-soft)}
.imp-topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.imp-topic{font-size:12px;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line-soft);border-radius:999px;padding:2px 9px;
  max-width:100%;overflow-wrap:anywhere}
.imp-topic.imp-more{color:var(--ink-faint)}
.imp-conflict{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
@media (max-width:560px){
  .imp-pick{padding:12px 13px}
  .imp-conflict .btn{width:100%}
}

/* ---------- Approval by exception (Phase 3) ---------- */
/* One quiet list of clear items, at most two questions, minutes tucked away.
   The reader confirms; they do not repair a form field by field. */
.carry-sec{margin-top:var(--s5)}
.carry{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--radius-sm);padding:12px 15px;margin-top:10px;box-shadow:var(--shadow)}
.carry.a-decision{border-left-color:var(--teal)}
.carry.a-action{border-left-color:var(--ok)}
.carry.a-signal{border-left-color:var(--ink-faint)}
.carry-q{border-left-color:var(--watch);background:var(--watch-bg)}
.carry-keep{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.carry-keep input[type=checkbox]{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--teal)}
.carry-line{flex:1;font-size:14.5px;line-height:1.45;color:var(--ink)}
.carry-tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:2px}
.carry-follows{font-size:12.5px;color:var(--ink-soft);margin:6px 0 0 27px;font-style:italic}
/* A quiet strategy suggestion — never a claim, never auto-linked. */
.carry-focus{font-size:12px;color:var(--ink-soft);margin:6px 0 0 27px}
.carry-focus span{color:var(--teal);font-weight:600}
.carry-focus-note{color:var(--ink-faint);font-weight:400}
.carry-ask{font-size:13.5px;font-weight:600;color:var(--watch);margin:6px 0 9px}
.carry-answer{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.carry-answer .inp{max-width:240px}
.carry-keep-inline{display:flex;gap:7px;align-items:center;font-size:13px;color:var(--ink-2);cursor:pointer}
.carry-keep-inline input{accent-color:var(--teal)}
/* Edit is opt-in: the detail grid is invisible until the reader asks for it. */
.carry-edit{margin-top:9px}
.carry-edit>summary{font-size:12px;color:var(--teal);cursor:pointer;list-style:none;
  display:inline-block;padding:2px 0;border-bottom:1px dotted var(--teal-light)}
.carry-edit>summary::-webkit-details-marker{display:none}
.carry-edit[open]>summary{margin-bottom:4px}
/* Minutes: present, preserved, but plainly not a list to be worked through. */
.minutes-kept{margin-top:var(--s5);border-top:1px solid var(--line-soft);padding-top:14px}
.minutes-kept>summary{font-size:13px;color:var(--ink-soft);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:7px}
.minutes-kept>summary::before{content:"›";font-size:15px;transition:transform .15s}
.minutes-kept[open]>summary::before{transform:rotate(90deg)}
.minutes-kept>summary::-webkit-details-marker{display:none}
.minutes-body{margin-top:12px}
.minutes-text{white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.6;
  color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:14px 16px;margin-top:8px;overflow-x:auto}

.since{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.since-b{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px 17px;box-shadow:var(--shadow)}
.since-i{font-size:13.5px;color:var(--ink-2);padding:5px 0;border-bottom:1px solid var(--line-soft)}
.since-i:last-child{border-bottom:0}
.since-i .tick{color:var(--ok);font-weight:700;margin-right:6px}
.since-i .ring{color:var(--ink-faint);margin-right:6px}

/* ---------- How we operate / decisions (Phase D) ---------- */
/* Variance is amber, never red: something differed, understand why. */
table.rights td{vertical-align:top}
.r-bound{font-size:11.5px;color:var(--ink-soft);margin-top:4px;font-style:italic}
.rev-var{border-left-color:var(--watch)}
.rev-title a{text-decoration:none}
.rev-title a:hover{text-decoration:underline}
.cmp{display:flex;gap:26px;flex-wrap:wrap;margin-top:9px}
.cmp .skey{display:block}
/* Expected vs recorded process: a comparison of two readings, not two objects,
   so it drops the white card + shadow that says "independent thing" and sits on
   a recessed panel divided by a hairline. The labels are quiet role words, not
   field headers. A genuine variance still marks its second column, by tint. */
.cmp-block{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:14px;
  background:var(--paper-2);border-radius:var(--radius-sm);overflow:hidden}
.cmp-col{padding:18px 22px}
.cmp-col+.cmp-col{border-left:1px solid var(--line)}
.cmp-var .cmp-col:last-child{background:var(--watch-bg)}
.cmp-row{display:flex;gap:12px;align-items:baseline;font-size:14px;color:var(--ink);
  padding:6px 0;border-bottom:1px solid var(--line-soft)}
.cmp-row:last-of-type{border-bottom:0}
.cmp-row i{flex:none;width:64px;font-style:normal;font-size:13px;font-weight:400;
  letter-spacing:.005em;color:var(--ink-soft)}
.cmp-src{margin-top:11px;font-size:12.5px;color:var(--ink-soft);font-style:italic}
@media (max-width:640px){.cmp-block{grid-template-columns:1fr}
  .cmp-col+.cmp-col{border-left:0;border-top:1px solid var(--line)}}

.variance{margin-top:16px;background:var(--watch-bg);border:1px solid var(--watch-line);
  border-left:3px solid var(--watch);border-radius:var(--radius-sm);padding:16px 18px}
.var-head{font-family:"Fraunces",Georgia,serif;font-size:17px;color:var(--watch)}
.var-head .g{margin-right:7px;font-size:13px}
.var-why{font-size:13.5px;color:var(--ink-2);margin-top:8px;line-height:1.55;max-width:78ch}
.var-resolved{margin-top:12px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;font-size:13px;color:var(--ink-2)}
.var-resolved .evdate{display:block;color:var(--ink-faint);font-size:11.5px;margin-top:4px}
.var-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.var-form .skey{width:100%}
.var-form .inp{width:auto;min-width:210px;padding:7px 10px;font-size:13px}
.var-form input[name=note]{flex:1;min-width:260px}
.notice.ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.valdefs-light dt{color:var(--ink);font-size:15px}
.valdefs-light dd{color:var(--ink-soft);font-size:13px}

/* ---------- Leadership Clock (Phase C) ---------- */
.reviews{display:flex;flex-direction:column;gap:10px}
.rev{background:var(--card);border:1px solid var(--watch-line);border-left:3px solid var(--watch);
  border-radius:var(--radius-sm);padding:15px 17px;box-shadow:var(--shadow);
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;justify-content:space-between}
.rev-title{font-family:"Fraunces",Georgia,serif;font-size:16.5px;line-height:1.3}
.rev-meta{font-size:12px;color:var(--ink-faint);margin-top:3px}
.rev-ask{font-size:13px;color:var(--ink-2);margin-top:8px;max-width:70ch;line-height:1.5}
.rev-form{display:flex;gap:8px;align-items:center;flex:none}
.rev-form .inp{width:auto;min-width:190px;padding:7px 10px;font-size:13px}

.per{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.per-now{border-color:var(--ok-line)}
.per-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 20px;background:var(--paper);border-bottom:1px solid var(--line);flex-wrap:wrap}
.per-now .per-head{background:var(--ok-bg);border-bottom-color:var(--ok-line)}
.per-next{border-color:var(--info-line)}
.per-next .per-head{background:var(--info-bg);border-bottom-color:var(--info-line)}
.per-flag-next{color:var(--info);border-color:var(--info-line)}
.per-name{font-family:"Fraunces",Georgia,serif;font-weight:520;font-size:18px}
.per-dates{font-size:12px;color:var(--ink-soft);display:flex;gap:10px;align-items:center}
.per-flag{font-size:12.5px;font-weight:700;letter-spacing:.005em;
  color:var(--ok);background:var(--card);border:1px solid var(--ok-line);border-radius:999px;padding:2px 9px}
.per-body{padding:6px 20px 14px}

.ce{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line-soft)}
.ce:last-child{border-bottom:0}
.ce-date{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.ce-past .ce-date{color:var(--ink-faint)}
.ce-title{font-size:14.5px;color:var(--ink)}
.ce-meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.ce-kind{font-weight:700;letter-spacing:.005em;font-size:12.5px;color:var(--ink-soft)}
.ce-review .ce-kind{color:var(--info)}
.ce-outcome .ce-kind{color:var(--ok)}
.ce-state{display:flex;flex-direction:column;gap:2px;text-align:right;font-size:12px}
.ce-status{color:var(--ink-2);font-weight:600}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .ce{grid-template-columns:1fr;gap:5px}
  .ce-state{text-align:left;flex-direction:row;gap:12px;flex-wrap:wrap}
  .rev-form{width:100%}
}

/* ---------- Observed → mechanism → research ---------- */
.mechanism{margin-top:12px;background:var(--info-bg);border:1px solid var(--info-line);
  border-radius:var(--radius-sm);padding:13px 15px;display:flex;flex-direction:column;gap:7px}
.mechanism .mrow{display:flex;gap:12px;align-items:baseline;font-size:13.5px;color:var(--ink-2)}
.mechanism .mk{flex:none;width:82px;font-size:12.5px;font-weight:700;letter-spacing:.005em;
  color:var(--info)}
.chain-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--info);
  background:var(--info-bg);border:1px solid var(--info-line);border-radius:6px;padding:1px 8px;margin-right:6px}

/* ---------- Move variants ---------- */
.move-healthy{background:var(--info-bg)!important;border-color:var(--info-line)!important}
.move-healthy .lede{color:var(--info)!important}
.move-because{margin-top:9px;font-size:12px;color:var(--ink-soft);font-style:italic}

/* ---------- Collapsible full records ---------- */
details.records>summary{cursor:pointer;color:var(--info);font-size:13.5px;font-weight:700;
  list-style:none;padding:10px 0}
details.records>summary::-webkit-details-marker{display:none}
details.records>summary::before{content:"› ";display:inline-block}

/* ---------- Attention cards ---------- */
.attn{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow);margin-bottom:16px}
.attn .head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.attn h3{font-size:22px;line-height:1.25;letter-spacing:-.01em;max-width:58ch}
.attn .block{margin-top:18px}
.attn .block .lede{font-size:12.5px;font-weight:700;letter-spacing:.005em;color:var(--ink-soft);margin-bottom:7px}
.attn .facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.attn .facts li{font-size:14.5px;color:var(--ink-2);display:flex;gap:9px;align-items:baseline}
.attn .facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-faint);flex:none;position:relative;top:7px}
.attn .move{background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--radius-sm);
  padding:13px 16px;font-size:15px;color:var(--ink-2)}
.attn .move .lede{color:var(--ok)}
.attn .why-inline{font-size:14.5px;color:var(--ink-2)}

/* ---------- What's working ---------- */
.working{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.win{background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--radius-sm);padding:16px 18px}
.win .k{color:var(--ok);font-weight:700;font-size:12.5px;letter-spacing:.005em;display:flex;gap:7px;align-items:center}
.win .t{color:var(--ink-2);font-size:14.5px;margin-top:8px}

/* ---------- Timeline ---------- */

/* ---------- Questions ---------- */
.questions{display:flex;flex-direction:column;gap:12px}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 18px;font-family:"Fraunces",Georgia,serif;font-size:18px;line-height:1.4;color:var(--ink);
  display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow)}
.q .n{font-family:"Source Sans 3",sans-serif;font-size:12px;font-weight:700;color:var(--info);
  background:var(--info-bg);border:1px solid var(--info-line);border-radius:8px;padding:4px 9px;flex:none;line-height:1.3}

/* ---------- Generic cards / tables ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);margin-bottom:16px}
.card h3{font-family:"Fraunces",Georgia,serif;font-weight:520;font-size:19px;margin-bottom:4px}
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
th{font-size:12.5px;letter-spacing:.005em;color:var(--ink-soft);
  text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);background:var(--paper);font-weight:700}
td{padding:11px 15px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
td.due{color:var(--risk);font-weight:700}
.table-wrap{overflow-x:auto}

.why-status{background:var(--paper-2);border-radius:var(--radius-sm);padding:12px 15px;font-size:13.5px;color:var(--ink-2);margin-top:12px}
.why-status .lede{font-weight:700;color:var(--ink);display:block;margin-bottom:5px}
.why-status ul{margin:0;padding-left:18px}

.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip-dim{font-size:12px;font-weight:600;color:var(--info);background:var(--info-bg);
  border:1px solid var(--info-line);border-radius:999px;padding:3px 11px;text-decoration:none}

/* ---------- Forms (operator) ---------- */
.form-row{margin-bottom:16px}
.form-row label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.form-row input[type=text],.form-row input[type=date],.form-row input[type=url],
.form-row textarea,.form-row select,.inp{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;color:var(--ink);background:var(--card)}
.form-row textarea{resize:vertical}
.form-row .hint{color:var(--ink-soft);font-size:12.5px;margin-top:5px}
fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:16px}
fieldset legend{font-size:12.5px;font-weight:700;letter-spacing:.005em;color:var(--ink-soft);padding:0 6px}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.checks label{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:500}

.notice{border-radius:var(--radius-sm);padding:13px 16px;font-size:14px;margin-bottom:16px}
.notice.err{background:var(--risk-bg);border:1px solid var(--risk-line);color:var(--risk)}
.notice.ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.notice.info{background:var(--info-bg);border:1px solid var(--info-line);color:var(--info)}

.verify-flag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:var(--watch);background:var(--watch-bg);border:1px solid var(--watch-line);border-radius:7px;padding:2px 8px}

/* ---------- Operator list ---------- */
.olist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.otile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:block}
.otile:hover{border-color:var(--ink-faint);box-shadow:var(--shadow-lg)}
.otile .n{font-family:"Fraunces",Georgia,serif;font-size:19px}
.otile .m{color:var(--ink-soft);font-size:13.5px;margin-top:6px}

.back{color:var(--ink-soft);font-size:13.5px;text-decoration:none;font-weight:600}
.back:hover{color:var(--ink)}

.foot{margin-top:64px;color:var(--ink-soft);font-size:12.5px;border-top:1px solid var(--line);
  padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.empty{color:var(--ink-soft);font-size:14.5px;font-style:italic}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .map-head{display:none}
  .map-row{grid-template-columns:1fr;gap:12px}
  .map-ind{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
}
@media (max-width:720px){
  .wrap{padding:24px 18px 72px}
  h1{font-size:27px}
  .hero{padding:26px 22px}
  .hero h2{font-size:21px}
  .topbar .row{padding:10px 18px}
  .dec .opts{flex-direction:column}
}

/* ---------- Print / PDF ---------- */
@media print{
  .topbar,.util,.back,.noprint{display:none!important}
  body{background:#fff}
  .wrap{padding:0;max-width:100%}
  .hero{background:#fff;color:#111;border:1px solid #ccc;box-shadow:none}
  .hero .eyebrow{color:#555} .hero h2{color:#111} .hero .synth-src{color:#666}
  .dim,.attn,.card,.scard,.q,.win,.dec{break-inside:avoid;box-shadow:none}
  /* The printed brief stays 4-6 pages: drawers are drill-down, not print copy. */
  details.drawer,details.sub{display:none!important}
  .map{break-inside:auto}
  .map-row{break-inside:avoid;padding-top:11px;padding-bottom:11px}
  .map-interp{font-size:12.5px}
  h2.section{margin:24px 0 12px}
  .timeline{gap:10px}
}


/* ---- F.2: draft agreement awaiting adoption ---------------------------- */
.draft-panel{border:1px solid var(--info-line);background:var(--info-bg);
  border-radius:var(--radius-sm);padding:15px 18px;margin-bottom:22px}
.draft-panel .eyebrow{color:var(--info);margin-bottom:10px}
.draft-row{display:flex;gap:18px;align-items:center;justify-content:space-between;
  padding:8px 0;border-top:1px solid var(--info-line)}
.draft-row:first-of-type{border-top:0}
.draft-title{font-weight:600;font-size:15px}
.draft-meta{font-size:13px;color:var(--ink-soft);margin-top:3px}
.draft-note{font-size:12.5px;color:var(--ink-soft);margin-top:4px;font-style:italic}

.adopt-form{border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 20px;background:var(--card)}
.adopt-form .date-row{display:flex;gap:10px;align-items:center}
.adopt-form .date-row input{flex:0 0 auto;width:auto;min-width:190px;max-width:240px}
.adopt-form .date-row .btn{flex:0 0 auto;white-space:nowrap}
.adopt-form .hint{font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.adopt-form .confirm{display:flex;gap:11px;align-items:flex-start;margin:18px 0;
  font-size:14px;line-height:1.5;max-width:74ch}
.adopt-form .confirm input{margin-top:3px;flex:0 0 auto}

.adopted{max-width:62ch;margin:26px auto 0;text-align:left}
.adopted h1{font-size:34px;margin:6px 0 2px}
.adopted .adopted-name{color:var(--ink-soft);font-size:15px;margin-bottom:20px}
.adopted-facts{display:grid;grid-template-columns:150px 1fr;margin:0;
  border-top:1px solid var(--line)}
.adopted-facts dt{padding:11px 0;border-bottom:1px solid var(--line);font-size:12.5px;
  letter-spacing:.005em;color:var(--ink-soft)}
.adopted-facts dd{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;margin:0}
.adopted-facts .ad-note{display:block;color:var(--ink-soft);font-size:13.5px;margin-top:3px}

/* adoption approach + change summary */
.modes{display:grid;gap:10px;margin-bottom:8px}
.mode{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--card);cursor:pointer}
.mode.on{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.mode input{margin-top:4px;flex:0 0 auto}
.mode b{display:block;font-size:14.5px}
.mode em{display:block;font-style:normal;font-size:13px;color:var(--ink-soft);
  margin-top:3px;line-height:1.5;max-width:80ch}
.chg-summary{margin-bottom:16px}
.chg-lists{display:grid;gap:14px;margin-bottom:8px}
.chg{border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 16px;background:var(--card)}
.chg ul{list-style:none;padding:0;margin:8px 0 0}
.chg li{padding:7px 0;border-top:1px solid var(--line-soft);font-size:14px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.chg li:first-child{border-top:0}
.chg .was{color:var(--ink-soft);font-size:13px}
.chg .rm{margin-left:auto;font-size:13px;color:var(--ink-soft);display:flex;gap:6px;align-items:center}
.chg-removed{border-color:var(--risk-line);background:var(--risk-bg)}
.inp-sm{font-size:13px;padding:5px 8px;max-width:280px;margin-left:auto}


/* ---- Phase G: Home ----------------------------------------------------- */
.thisweek h2{font-size:24px;line-height:1.45;max-width:62ch}
.home-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 8px}
@media (max-width:820px){.home-cols{grid-template-columns:1fr}}
.hcard{border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px 18px;
  background:var(--card)}
.hcard .eyebrow{margin-bottom:10px}
.hcard-ok{border-color:var(--ok-line);background:var(--ok-bg)}
.hcard ul{list-style:none;padding:0;margin:0}
.upnext{display:block}
.upnext li{display:grid;grid-template-columns:60px 1fr;gap:12px;padding:9px 0;
  border-top:1px solid var(--line-soft);font-size:14.5px}
.upnext li:first-child{border-top:0}
.up-when{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:13px;padding-top:2px}
.att li{padding:9px 0;border-top:1px solid var(--line-soft);font-size:14.5px}
.att li:first-child{border-top:0}
.att .pill{margin-right:8px}
.att-why{color:var(--ink-soft);font-size:13px;margin-top:3px;line-height:1.5;max-width:62ch}
.chg-list li{display:grid;grid-template-columns:16px 1fr;gap:9px;padding:9px 0;
  border-top:1px solid var(--line-soft);font-size:14.5px;line-height:1.5}
.chg-list li:first-child{border-top:0}
.mk{flex:0 0 auto;font-size:12px;line-height:1.6}
.mk-ok{color:var(--ok)}
.mk-watch{color:var(--watch)}
.mk-info{color:var(--ink-soft)}
.dec-title{font-weight:600;font-size:15.5px}
.dec-why{color:var(--ink-2);font-size:14px;line-height:1.55;margin:4px 0 0;max-width:74ch}
.dec-ctx{color:var(--ink-soft);font-size:12.5px;margin-top:5px;letter-spacing:.02em}
.strat-table td{vertical-align:top}
.muted{color:var(--ink-soft)}
.empty-note{color:var(--ink-soft);font-size:14px;padding:12px 0 4px;max-width:70ch}

.hero .synth-src a,.thisweek a{color:#D8CFA8;text-decoration:underline}
.dec{align-items:flex-start}

.emailpreview{border:1px dashed var(--line);border-radius:var(--radius-sm);padding:15px 18px;
  margin-top:22px;background:var(--paper-2)}
.emailpreview .ep-subject{font-weight:600;font-size:14.5px;margin-bottom:8px}
.emailpreview ul{margin:0;padding-left:20px;font-size:14px;color:var(--ink-2);line-height:1.7}
.questions{padding-left:22px;font-size:15px;line-height:1.7;max-width:76ch}
.questions li{margin-bottom:8px}
.foryou li{padding:11px 0}

/* ---- authentication pages --------------------------------------------- */
.authpage{max-width:430px;margin:6vh auto 0}
.authpage .eyebrow{color:var(--ink-soft);font-size:13px;font-weight:700;
  letter-spacing:.005em}
.authpage h1{margin-top:6px}
.authpage .authsub{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:10px 0 0;
  max-width:56ch}
.authpage .card{margin-top:20px}
.authpage .authbtn{width:100%;justify-content:center;padding:11px}


/* ======================================================================
   Phase G UX — Home. Progressive disclosure: the answer first, the detail
   on request. Hierarchy carries the meaning, not colour or badges.
   ====================================================================== */
.hometop{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;
  padding:34px 0 6px}
.greeting{font-size:15px;color:var(--ink-soft);margin:0 0 4px}
.hometop .eyebrow{margin-bottom:8px}
/* DISPLAY. The one line on Home that is allowed to be large, and it is the
   line that orients a person rather than the one that summarises the data. */
.home-greeting{font-family:Fraunces,Georgia,serif;font-weight:500;
  font-size:clamp(30px,3.4vw,38px);line-height:1.15;letter-spacing:-.015em;
  margin:0 0 10px;color:var(--ink)}
/* BODY, not display: the situation sentence supports the greeting instead of
   competing with it. */
.home-orient{font-size:16.5px;line-height:1.6;max-width:62ch;margin:0;
  color:var(--ink-2)}

.section-lead{margin-bottom:14px}
.section-note{color:var(--ink-soft);font-size:14px;margin:4px 0 0;max-width:62ch}
h2.section.quiet-h{color:var(--ink-soft)}

/* ---- Focus this year ---- */
.focus{display:grid;gap:2px}
.foc{border-bottom:1px solid var(--line);padding:20px 0}
.foc-head{display:grid;grid-template-columns:56px 1fr;gap:8px}
.foc-n{font-family:Fraunces,Georgia,serif;font-size:26px;color:var(--sand);
  line-height:1.1;font-weight:500}
.foc-title{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:19px;
  letter-spacing:-.01em;margin:0 0 6px;line-height:1.25}
.foc-title a{color:inherit;text-decoration:none}
.foc-title a:hover{text-decoration:underline}
.foc-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.foc-state{font-size:14px;font-weight:600}
.foc-note{font-size:13px;color:var(--ink-soft)}
.foc-facts{display:grid;gap:5px;margin:0}
.foc-facts>div{display:grid;grid-template-columns:132px 1fr;gap:12px}
.foc-facts dt{font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);padding-top:2px}
.foc-facts dd{margin:0;font-size:15px;line-height:1.5}
.foc-more{margin:12px 0 0 56px}
.foc-more>summary{cursor:pointer;font-size:13.5px;color:var(--ink-soft);
  list-style:none;display:inline-flex;gap:7px;align-items:center}
.foc-more>summary::-webkit-details-marker{display:none}
.foc-more>summary::before{content:"›";display:inline-block;transition:transform .15s ease}
.foc-more[open]>summary::before{transform:rotate(90deg)}
.foc-more>summary:hover{color:var(--ink)}
.foc-detail{padding:12px 0 0;display:grid;gap:9px;max-width:78ch}

/* ---------- Focus: single full-width detail panel below the row (Phase 6) ---- */
/* The toggle is a button, not a link — it controls a region, so it carries
   aria-expanded / aria-controls. Hidden until JS confirms the disclosure works;
   without JS the panels read as plain full-width sections. */
.focus-section .foc-toggle{display:none}
.focus-section.focus-js .foc-toggle{display:inline-flex;align-items:center;gap:7px;
  margin:12px 0 0 56px;background:none;border:0;padding:2px 0;cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--ink-soft)}
.focus-section.focus-js .foc-toggle:hover{color:var(--ink)}
.foc-toggle::before{content:"›";display:inline-block;transition:transform .15s ease}
.foc-toggle[aria-expanded="true"]::before{transform:rotate(90deg)}
.foc-toggle .foc-toggle-less{display:none}
.foc-toggle[aria-expanded="true"] .foc-toggle-more{display:none}
.foc-toggle[aria-expanded="true"] .foc-toggle-less{display:inline}
.foc.is-open{background:var(--paper-2)}
.focus-panels{margin-top:4px}
.focus-detail-panel{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--accent,var(--teal));border-radius:var(--radius-sm);
  padding:18px 22px;margin-top:12px;box-shadow:var(--shadow);max-width:100%}
.focus-detail-panel .fdp-head{display:flex;align-items:baseline;gap:12px;
  margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.fdp-title{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:19px;margin:0}
.focus-detail-panel .foc-detail{max-width:82ch;padding-top:0}
@media (max-width:720px){
  .focus-section.focus-js .foc-toggle{margin-left:0}
  .focus-detail-panel{padding:16px 16px}
}
.fd{display:grid;grid-template-columns:190px 1fr;gap:12px}
.fd dt{font-size:12.5px;letter-spacing:.005em;color:var(--ink-soft)}
.fd dd{margin:0;font-size:14.5px;line-height:1.55}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.ticks li{font-size:14.5px}
.tick{color:var(--ink-soft);margin-right:6px}
.tick.on{color:var(--ok)}
.areatag{display:inline-block;font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:3px;padding:1px 6px;
  margin-left:12px;vertical-align:1px;white-space:nowrap}

/* ---- Needs you ---- */
.needs,.worth{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.needs li{display:grid;grid-template-columns:168px 1fr;gap:16px;padding:15px 16px;
  margin:0 -16px;border-bottom:1px solid var(--line);
  background:linear-gradient(to right,var(--watch-bg),transparent 70%);
  border-left:2px solid var(--watch-line)}
.need-label{font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);padding-top:3px}
/* The consolidated card quotes a priority title, so this line is longer than
   it used to be. A grid track defaults to min-width:auto — a long unbroken
   name would push the whole row past a phone screen. */
.need-title{font-size:17px;line-height:1.35;font-weight:600;
  min-width:0;overflow-wrap:anywhere}
.need-title a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.need-title a:hover{border-color:var(--ink)}
.need-why{margin:5px 0 0;font-size:var(--t-body);color:var(--ink-2);line-height:1.6;max-width:70ch}
.need-ctx{margin-top:6px;font-size:12.5px;letter-spacing:.02em;color:var(--ink-soft)}
.worth li{padding:14px 0;border-bottom:1px solid var(--line)}
.allclear{font-size:16px;color:var(--ink-2);padding:16px 0 4px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- Coming up ---- */
.coming{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.coming li{display:grid;grid-template-columns:86px 1fr;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:16px}
.c-date{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:14px;padding-top:2px}
.c-what a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.c-what a:hover{border-color:var(--ink)}

/* ---- Latest movement: quiet by default ---- */
.movement{margin:34px 0 8px;border-top:1px solid var(--line);padding-top:14px}
.movement>summary{cursor:pointer;list-style:none;color:var(--ink-soft);font-size:14px}
.movement>summary::-webkit-details-marker{display:none}
.movement>summary::after{content:" ›";display:inline-block}
.movement[open]>summary::after{content:" ⌄"}
.movement>summary:hover{color:var(--ink)}
.mv-body{padding-top:16px}

@media (max-width:720px){
  .hometop{flex-direction:column;gap:14px}
  .foc-head{grid-template-columns:40px 1fr}
  .foc-more{margin-left:40px}
  .foc-facts>div,.fd{grid-template-columns:1fr;gap:2px}
  .needs li{grid-template-columns:1fr;gap:6px}
  .coming li{grid-template-columns:62px 1fr}
}


/* ---- North Star: Vision → Mission → Values → Direction (§10, §38) ----
   It was one dark slab with everything stacked at the left. It is now four
   full-width bands that read as a sequence: what we are becoming, why we
   exist, what we stand for, and what must change — ending on the band that
   hands over to this year's priorities. Each band keeps a visible label, so
   the order survives with the colour removed (print) or unseen. */
.northstar{margin:22px 0 30px}
.northstar .eyebrow{color:var(--ink-soft);margin-bottom:14px}
.ns-row{display:grid;grid-template-columns:minmax(150px,210px) 1fr;
  gap:8px 28px;align-items:start;padding:20px clamp(16px,2vw,26px);
  border:1px solid var(--line);border-bottom:0}
.ns-row:first-of-type{border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius)}
.ns-row:last-of-type{border-bottom:1px solid var(--line);
  border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}
.ns-side{min-width:0}
.ns-key{font-size:var(--t-label);letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft)}
.ns-horizon{display:inline-block;margin-left:6px;color:var(--ink-faint);
  letter-spacing:.04em;text-transform:none;font-weight:500}
.ns-note{font-size:12.5px;color:var(--ink-faint);line-height:1.45;margin-top:3px}
.ns-text{font-family:Fraunces,Georgia,serif;line-height:1.3;margin:0;
  letter-spacing:-.008em;color:var(--ink)}
.ns-empty{color:var(--ink-faint);font-family:inherit;font-size:14px;
  line-height:1.5}

/* Vision leads in the cool teal family; Mission answers a step quieter in a
   related blue-green. Tints only — the statement stays ink, so contrast is the
   same as body text. */
.ns-vision{background:rgba(23,114,127,.055);border-color:rgba(23,114,127,.20)}
.ns-vision .ns-key{color:var(--teal)}
.ns-vision .ns-text{font-size:clamp(23px,2.5vw,31px)}
.ns-mission{background:var(--slate-wash);border-color:var(--slate-line)}
.ns-mission .ns-key{color:var(--slate)}
.ns-mission .ns-text{font-size:clamp(17px,1.75vw,21px)}

/* Values: a slim connecting strip, not another card and not a row of pills. */
.ns-valrow{padding-top:13px;padding-bottom:13px;background:var(--paper-2);
  border-color:var(--line)}
.ns-values{margin:0;font-size:14px;letter-spacing:.03em;color:var(--ink-2);
  line-height:1.6}

/* The direction is the bridge into the year: ink, with the muted-gold accent
   as a rule and a label — never a yellow block. */
.ns-band{background:var(--ink);border-color:var(--ink);
  box-shadow:inset 0 3px 0 var(--sand)}
.ns-band .ns-key{color:var(--sand-light)}
.ns-band .ns-horizon{color:rgba(246,244,238,.6)}
.ns-band .ns-note{color:rgba(246,244,238,.6)}
.ns-band .ns-text{color:var(--paper);font-size:clamp(16px,1.5vw,19.5px)}
.ns-band .ns-empty{color:rgba(246,244,238,.6)}
.ns-bandmain{min-width:0}
.ns-bridge{margin:12px 0 0;font-family:"Source Sans 3",sans-serif;font-size:13px;
  color:rgba(246,244,238,.62);letter-spacing:.01em}
.northstar .idsrc{color:var(--ink-faint);font-size:12px;margin:12px 0 0}

@media (max-width:760px){
  .ns-row{grid-template-columns:1fr;gap:6px;padding:16px 16px}
  .ns-vision .ns-text{font-size:21px}
  .ns-mission .ns-text{font-size:17px}
  .ns-band .ns-text{font-size:16px}
}

/* Print: the colour goes, the sequence must not. Labels, borders and spacing
   carry it, and the ink band inverts to paper so it stays readable. */
@media print{
  .ns-row{background:none !important;border-color:#bbb !important;
    box-shadow:none !important;break-inside:avoid}
  .ns-band{border-top:2px solid #666 !important}
  .ns-band .ns-key,.ns-band .ns-note,.ns-band .ns-text,.ns-band .ns-empty,
  .ns-bridge{color:#000 !important}
  .ns-key{color:#000 !important}
}

/* ---- Leadership Clock: a year orientation, not a calendar (§15, §38) ---- */
.year{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0 18px;margin:24px 0 30px}
.year-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;margin-bottom:16px}
.year-now{font-size:13.5px;color:var(--ink-soft);display:flex;gap:7px;align-items:center}
.nowdot{color:var(--sand)}
.areafilter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.af{font-size:13px;text-decoration:none;color:var(--ink-soft);border:1px solid var(--line);
  border-radius:999px;padding:4px 12px}
.af:hover{border-color:var(--ink-soft);color:var(--ink)}
.af.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.months{list-style:none;display:grid;grid-template-columns:repeat(11,1fr);gap:4px;
  margin:0;padding:0}
.mo a{display:block;text-align:center;text-decoration:none;color:var(--ink-soft);
  padding:9px 2px 8px;border-radius:var(--radius-sm);border:1px solid transparent}
.mo a:hover{background:var(--paper-2);color:var(--ink)}
.mo-label{display:block;font-size:14.5px;letter-spacing:.005em;font-weight:500}
.mo-marks{display:flex;gap:4px;justify-content:center;min-height:14px;margin-top:9px}
.dot{width:4px;height:4px;border-radius:50%;background:var(--sand);opacity:.75;display:inline-block}
.dot-past{background:var(--line)}
.mo-now a{color:var(--ink);font-weight:700;border-bottom:2px solid var(--sand)}
.mo-sel a{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mo-sel .dot{background:var(--sand-light)}

.moments{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.moments li{display:grid;grid-template-columns:118px 62px 1fr auto;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.moments li.mo-done{opacity:.55}
.mm-area{font-size:12.5px;letter-spacing:.005em;color:var(--ink-soft)}
.mm-date{font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink-soft)}
.mm-title{font-size:16px;line-height:1.35}
.mm-title a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.mm-title a:hover{border-color:var(--ink)}
.mm-meta{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
@media (max-width:820px){
  .months{grid-template-columns:repeat(6,1fr)}
  .moments li{grid-template-columns:1fr;gap:3px}
  .mm-date{order:-1}
}


/* ---- Meetings: leadership rhythm (§21–§25) ---- */
.nextmeeting{background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:20px 24px;margin:22px 0 30px}
.nm-when{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(19px,2.2vw,23px);
  letter-spacing:-.01em;margin:6px 0 12px}
.nm-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;
  font-size:14.5px;color:var(--ink-2)}
.beforelist{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.beforelist li{display:grid;grid-template-columns:62px 168px 1fr;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:15.5px;align-items:baseline}
.bl-date{font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink-soft)}
.bl-late{color:var(--watch);font-weight:600}
.bl-who{font-size:14px;color:var(--ink-soft)}
.bl-what a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.bl-what a:hover{border-color:var(--ink)}
.sincegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  border-top:1px solid var(--line);padding-top:16px}
.sg .skey{font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);margin-bottom:9px}
.sg-i{font-size:14.5px;padding:4px 0;line-height:1.45}
.sg-i a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.rhythm{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.rhythm li{display:grid;grid-template-columns:1fr 110px 140px 130px;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:15px;align-items:baseline}
.rh-cadence,.rh-area,.rh-when{font-size:13.5px;color:var(--ink-soft)}
@media (max-width:820px){
  .sincegrid{grid-template-columns:1fr;gap:20px}
  .beforelist li{grid-template-columns:60px 1fr}
  .beforelist .bl-who{grid-column:2}
  .rhythm li{grid-template-columns:1fr 1fr}
}


/* ---- How we operate: the living leadership map (§27–§32) ---- */
.viewswitch{display:flex;gap:6px;margin:20px 0 26px}
.vs{font-size:14px;text-decoration:none;color:var(--ink-soft);border:1px solid var(--line);
  border-radius:999px;padding:6px 16px}
.vs:hover{color:var(--ink);border-color:var(--ink-soft)}
.vs.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* Superseded by the role-card block further down (design pass §6); the type
   and the disclosure behaviour stay, the full-width row does not. */
.pe-name{font-family:Fraunces,Georgia,serif;letter-spacing:-.01em;margin:0}
.pe-more{margin-top:10px}
.pe-more>summary{cursor:pointer;font-size:13.5px;color:var(--ink-soft);list-style:none;
  display:inline-flex;gap:7px;align-items:center}
.pe-more>summary::-webkit-details-marker{display:none}
.pe-more>summary::before{content:"›";display:inline-block;transition:transform .15s ease}
.pe-more[open]>summary::before{transform:rotate(90deg)}
.pe-more>summary:hover{color:var(--ink)}
.pe-detail{padding:14px 0 4px;display:grid;gap:10px;max-width:80ch}
.plain{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.plain a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}


/* ======================================================================
   Coherence pass — one product, not screens from different generations.
   Section labels, disclosure, rules, empty states and secondary material
   share one treatment across Home, Strategy, Clock, Meetings and How We
   Operate.
   ====================================================================== */

/* Secondary headings inside a disclosure. Deliberately quieter than h2.section
   so folded detail never competes with the page it sits under. */
h3.subsection{font-family:"Source Sans 3",sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.005em;color:var(--ink-soft);
  margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
h3.subsection:first-child{margin-top:0}
h3.subsection .count{letter-spacing:.02em;text-transform:none;font-weight:400;
  color:var(--ink-faint)}

/* Everything inside a fold is secondary: one step down in contrast. */
.mv-body{color:var(--ink-2)}
.mv-body .reviews{border-top:1px solid var(--line)}
.mv-body .rev{background:none;border:0;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none;padding:14px 0;display:grid;
  grid-template-columns:1fr auto;gap:16px;align-items:start}
.mv-body .rev-title{font-size:15.5px;font-weight:600;line-height:1.35}
.mv-body .rev-meta{font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);margin-bottom:4px}
.mv-body .rev-ask{font-size:14px;color:var(--ink-2);margin:5px 0 0;max-width:70ch;
  line-height:1.55}
.mv-body table{width:100%;border-collapse:collapse}
.mv-body table th{font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);font-weight:700;text-align:left;padding:0 14px 8px 0;
  border-bottom:1px solid var(--line)}
.mv-body table td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line-soft);
  font-size:14.5px;vertical-align:top}
.mv-body .table-wrap{overflow-x:auto}

/* The agreement, as part of the leadership map rather than a second hero. */
.agreement-panel{border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);padding:20px 22px;margin-bottom:24px}
.ap-culture{font-family:Fraunces,Georgia,serif;font-size:17px;line-height:1.45;
  letter-spacing:-.008em;margin:0;max-width:70ch;color:var(--ink)}
.ap-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ap-key{font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);margin-bottom:6px}
.ap-text{font-size:14.5px;line-height:1.6;max-width:70ch;margin:0}
.ap-values{margin:14px 0 0;font-size:13.5px;letter-spacing:.03em;color:var(--ink-soft)}
.agreement-panel .idsrc{margin-top:10px;font-size:12px;color:var(--ink-faint)}

/* One disclosure treatment everywhere. */
details.movement{margin:36px 0 10px;border-top:1px solid var(--line);padding-top:16px}
details.movement>summary,.foc-more>summary,.pe-more>summary{cursor:pointer;
  list-style:none;color:var(--ink-soft);font-size:13.5px}
details.movement>summary::-webkit-details-marker,
.foc-more>summary::-webkit-details-marker,
.pe-more>summary::-webkit-details-marker{display:none}
details.movement>summary:focus-visible,.foc-more>summary:focus-visible,
.pe-more>summary:focus-visible,a:focus-visible,button:focus-visible,
select:focus-visible,input:focus-visible{outline:2px solid var(--ink);
  outline-offset:3px;border-radius:3px}

/* One empty state. */
.empty-note,.empty,.mv-body .empty{color:var(--ink-soft);font-size:14.5px;
  padding:14px 0 4px;max-width:70ch;font-style:normal}

/* One page width and rhythm. */
.wrap{max-width:1080px}
h2.section{margin-top:52px}
h2.section:first-of-type{margin-top:30px}
section+section{margin-top:4px}

/* The wordmark is one unit: its dot must never wrap to its own line. */
.topbar .brand{white-space:nowrap}
.topbar nav{row-gap:6px}

/* "Why?" — the full explanation, deferred rather than removed. */
details.why{margin-top:5px}
details.why>summary{cursor:pointer;list-style:none;font-size:13px;color:var(--ink-soft);
  display:inline-flex;gap:6px;align-items:center}
details.why>summary::-webkit-details-marker{display:none}
details.why>summary::before{content:"›";display:inline-block;transition:transform .15s ease}
details.why[open]>summary::before{transform:rotate(90deg)}
details.why>summary:hover{color:var(--ink)}
details.why .need-why{margin-top:5px}

/* "Why am I seeing this?" — school facts, one per line, quietly (§10). */
.whyfacts{list-style:none;margin:8px 0 0;padding:10px 14px;display:grid;gap:5px;
  background:var(--paper-2);border-radius:var(--radius-sm);max-width:64ch}
.whyfacts li{font-size:13.5px;color:var(--ink-2);line-height:1.5;
  padding-left:14px;position:relative}
.whyfacts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;
  background:var(--sand)}


/* ---- First-run onboarding (§13): calm and guided, not administrative ---- */
.onb{max-width:620px;margin:7vh auto 60px}
.onb h1{font-size:clamp(26px,4vw,34px);margin:8px 0 0}
.onb-lede{color:var(--ink-2);font-size:15.5px;line-height:1.65;margin:14px 0 0;max-width:56ch}
.onb-progress{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:10px}
.onb-progress span{display:block;height:100%;background:var(--sand)}
.onb-step{font-size:12.5px;letter-spacing:.005em;color:var(--ink-soft);
  margin:0 0 22px}
.onb-form{margin-top:26px;display:grid;gap:18px}
.onb-form .form-row{margin:0}
.onb-form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.onb-form .three{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;margin-bottom:8px}
.onb-form fieldset{border:0;padding:0;margin:0}
.onb-form legend{font-size:14px;font-weight:600;margin-bottom:10px}
.onb-checks{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px}
.check{font-size:14.5px;display:inline-flex;gap:7px;align-items:center}
.onb-actions{display:flex;gap:10px;margin-top:10px}
.onb-priority{border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);padding:14px 18px}
.onb-priority>summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none}
.onb-priority>summary::-webkit-details-marker{display:none}
.onb-priority>summary::before{content:"› ";color:var(--ink-soft)}
.onb-priority[open]>summary::before{content:"⌄ "}
.onb-priority[open]>summary{margin-bottom:14px}
.onb-priority .form-row{margin-bottom:12px}
.onb-welcome{max-width:660px}
.onb-choices{display:grid;gap:14px;margin-top:30px}
.onb-choice{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--card);padding:20px 24px;
  transition:border-color 140ms ease}
.onb-choice:hover{border-color:var(--ink-soft)}
.oc-title{display:block;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:18px;
  letter-spacing:-.01em}
.oc-note{display:block;font-size:14px;color:var(--ink-soft);line-height:1.55;margin-top:6px}
.onb-how{margin:20px 0 8px;padding-left:20px;display:grid;gap:6px;font-size:14.5px;
  color:var(--ink-2)}
@media (max-width:560px){.onb-form .two,.onb-form .three{grid-template-columns:1fr}}


/* ---- Leadership Brief: designed for the table, not the screen (§15, §38) ---- */
.lb-wrap{max-width:860px}
.lb{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:clamp(26px,4vw,44px);margin:16px 0 50px}
.lb-brand{font-family:Fraunces,Georgia,serif;font-size:14px;color:var(--ink-soft)}
.lb-brand span{color:var(--sand)}
.lb-head h1{font-size:30px;margin:4px 0 4px}
.lb-meta{font-size:13px;color:var(--ink-soft);margin:0}
.lb-s{margin-top:26px}
.lb-s h2{font-family:"Source Sans 3",sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.005em;color:var(--ink-soft);
  border-bottom:1px solid var(--line);padding-bottom:7px;margin:0 0 12px}
.lb-s h2 span{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--ink-faint)}
.lb-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.lb-focus{display:grid;gap:12px}
.lb-f{display:grid;grid-template-columns:40px 1fr;gap:6px}
.lb-n{font-family:Fraunces,Georgia,serif;font-size:19px;color:var(--sand)}
.lb-ft{font-family:Fraunces,Georgia,serif;font-size:16.5px;letter-spacing:-.008em}
.lb-fm{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.lb-item{padding:9px 12px;border-radius:6px;margin-bottom:8px}
.lb-warm{background:var(--watch-bg);border-left:2px solid var(--watch-line)}
.lb-it{font-weight:600;font-size:13.5px}
.lb-iw{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.5}
.lb-line{font-size:13px;padding:5px 0;border-bottom:1px solid var(--line-soft);
  line-height:1.5}
.lb-mk{color:var(--ink-soft);margin-right:4px}
.lb-when{color:var(--ink-faint);font-size:11.5px;margin-left:6px;white-space:nowrap}
.lb-next{display:grid;gap:6px}
.lb-nx{font-size:13.5px}
.lb-nd{display:inline-block;min-width:52px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;font-size:12.5px}
.lb-area{font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:3px;padding:0 4px;
  margin-left:8px}
.lb-empty{font-size:13px;color:var(--ink-soft);margin:4px 0}
.lb-foot{display:flex;justify-content:space-between;gap:16px;margin-top:30px;
  padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-faint)}
@media (max-width:680px){.lb-cols{grid-template-columns:1fr}}
@media print{
  .lb{border:0;padding:0;margin:0}
  .lb-warm{background:none;border-left:2px solid var(--ink-soft)}
  .lb-s{break-inside:avoid}
  body{background:#fff}
}

/* Calm error pages (§34): what happened, whether data is safe, what next. */
.errpage{max-width:560px;margin:12vh auto 0}
.errpage h1{font-size:clamp(24px,3.4vw,32px);margin:10px 0 0}
.err-lede{color:var(--ink-2);font-size:15.5px;line-height:1.65;margin:14px 0 0}
.err-next{color:var(--ink-soft);font-size:14px;line-height:1.65;margin:12px 0 0;
  max-width:56ch}


/* ======================================================================
   Presentation pass — Home composition (§4–§7).
   Focus rows carry only the first-scan facts; Needs you and Coming up sit
   as one deliberate two-column composition; everything else recedes.
   ====================================================================== */
.exec-cols{display:grid;grid-template-columns:2fr 1fr;gap:clamp(28px,4vw,56px);
  align-items:start}
@media (max-width:860px){.exec-cols{grid-template-columns:1fr}}

/* Coming up: the dates are the scanning axis; no boxes (§6). */
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:13px 0 12px;
  border-bottom:1px solid var(--line-soft);align-items:baseline}
.tl-date{font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:600;
  color:var(--ink);white-space:nowrap}
.tl-what{font-size:14.5px;line-height:1.45}
.tl-what a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.tl-what a:hover{border-color:var(--ink)}
.tl-area{display:inline-block;font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:3px;padding:0 5px;
  margin-left:8px;vertical-align:1px}

/* Worth your attention: present, but visually junior to Needs you (§7). */
.worth-quiet{margin-top:22px;padding-top:14px;border-top:1px solid var(--line-soft)}
.worth-quiet .eyebrow{margin-bottom:8px}
.wq{font-size:var(--t-body);padding:6px 0;line-height:1.6;max-width:66ch}
.wq-t a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.wq-t{font-weight:600}

/* Needs-you rows tighten: label column narrows, one meta line (§6, §9). */
.needs li{grid-template-columns:148px 1fr}
.need-why{font-size:13.5px;color:var(--ink-soft);margin-top:4px}

/* Focus rows breathe (§5). */
.foc{padding:22px 0}
.foc-facts{gap:6px}
.foc-facts>div{grid-template-columns:64px 1fr}
.foc-facts dt{font-size:11.5px}
.foc-facts dd{font-size:15px}

/* §14: restrained micro-interactions, killed under reduced motion. */
a,.btn,.needs li,.foc-title a,summary{transition:color 160ms ease,background 160ms ease,
  border-color 160ms ease}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* The five improvement questions, first on every priority (§purpose). */
.fiveq{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:20px 24px;margin:22px 0 8px}
.fq{margin:0;display:grid;gap:12px}
.fq-i dt{font-size:12.5px;letter-spacing:.005em;color:var(--ink-soft);
  margin-bottom:3px}
.fq-i dd{margin:0;font-size:15px;line-height:1.55;max-width:78ch}

/* Meetings: the middle question — what must happen before we meet again —
   carries the page; the record of the last meeting recedes (§12). */
.beforelist li{grid-template-columns:62px 150px 1fr;padding:14px 16px;margin:0 -16px;
  background:linear-gradient(to right,var(--watch-bg),transparent 65%);
  border-left:2px solid var(--watch-line);border-bottom:1px solid var(--line)}
.beforelist li:first-child{border-top:1px solid var(--line)}
.sincegrid{opacity:.92}
.sincegrid .sg-i{font-size:14px}
.nextmeeting{border-radius:var(--radius)}

/* Demo-only orientation (§16–§18). Never rendered outside demo mode. */
.demo-bar{display:flex;justify-content:center;gap:18px;align-items:center;
  background:var(--info-bg);border-bottom:1px solid var(--info-line);
  font-size:12.5px;color:var(--info);padding:6px 16px;letter-spacing:.02em}
.demo-tourlink{background:none;border:0;color:var(--info);cursor:pointer;
  font:inherit;text-decoration:underline;padding:0}
/* An author `display` rule beats the UA stylesheet's [hidden] {display:none},
   so the dialogs must opt out explicitly or they paint while "hidden". */
[hidden]{display:none !important}
/* The tour a leader chose to open. The first-visit welcome that used to share
   this rule is gone: an invitation belongs on the page, not over it. */
.demo-tour{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(23,42,38,.34);padding:20px}
.demo-tour .di-card{max-width:430px}
.di-card{background:var(--paper);border-radius:var(--radius);max-width:480px;width:100%;
  padding:30px 34px;box-shadow:var(--shadow-lg);position:relative}
.di-card h2{font-size:22px;margin:8px 0 0;line-height:1.3}
.di-card p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:12px 0 0}
.di-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.di-skip{background:none;border:0;color:var(--ink-soft);cursor:pointer;font:inherit;
  font-size:13px;margin-top:14px;padding:0;text-decoration:underline}

/* A human status and a SchoolOS signal are different claims and must never read
   as one string — separated now by treatment rather than by two field labels,
   so they sit on ONE line. Grid here put each span on its own row, which
   stranded the separator on a line of its own. */
.foc-status{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;
  font-size:14px;margin:0 0 10px}
.statline{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.statk{font-size:12.5px;letter-spacing:.005em;color:var(--ink-soft);
  min-width:96px;display:inline-block}
.mm-sig .statk{min-width:0;margin-right:6px}

/* Provenance and possible responses are different kinds of statement (§3):
   the facts are what SchoolOS knows; the responses are choices a person makes. */
.responses{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.resp-k{font-size:12.5px;letter-spacing:.005em;color:var(--ink-soft);
  margin-bottom:6px}
.resp{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.resp li{font-size:13.5px;color:var(--ink-2);padding-left:14px;position:relative;
  line-height:1.5}
.resp li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:1px;
  background:var(--line)}
.resp-note{font-size:12px;color:var(--ink-faint);margin:8px 0 0;font-style:italic}

/* ======================================================================
   Responsive repair — rules later in this file were overriding the media
   queries above them (same specificity, later source order). Everything
   viewport-dependent now ends the cascade, so nothing can cancel it.
   ====================================================================== */
@media (max-width:720px){
  .needs li{grid-template-columns:1fr;gap:6px;margin:0;padding:14px 12px}
  .foc-facts>div,.fd{grid-template-columns:1fr;gap:2px}
  .beforelist li{grid-template-columns:56px 1fr;margin:0;padding:12px 10px}
  .beforelist .bl-who{grid-column:2}
  .statk{min-width:0;margin-right:2px}
  .home-orient{font-size:18px}
  .hometop{padding-top:20px}
}
@media (max-width:640px){
  /* One quiet row that scrolls, instead of wrapping into the page. */
  .topbar .row{flex-wrap:nowrap;gap:10px;padding:9px 14px}
  .topbar nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:2px}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a,.topbar nav form button{padding:6px 9px;font-size:13px;white-space:nowrap}
  .topbar .who{display:none}
}

/* ======================================================================
   Evening perfection pass — per-screen refinements (§8–§17).
   ====================================================================== */

/* Home header: the orientation sentence owns the viewport; the two summary
   destinations become quiet labelled links, not competing buttons (§17). */
.quiet-util{display:flex;flex-direction:column;gap:7px;align-items:flex-end;
  padding-top:34px;flex:none}
.quiet-util a{font-size:13px;color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:1px;white-space:nowrap;
  transition:color var(--speed) ease,border-color var(--speed) ease}
.quiet-util a::after{content:" →";color:var(--ink-faint)}
.quiet-util a:hover{color:var(--ink);border-color:var(--ink-soft)}
@media (max-width:720px){
  /* Four links laid out in one nowrap row are wider than a phone. They wrap
     rather than push the whole page sideways. */
  .quiet-util{flex-direction:row;align-items:baseline;gap:18px;padding-top:0;
    flex-wrap:wrap;row-gap:9px;flex:1 1 100%;max-width:100%}
}

/* The share panel earns its place quietly: part of the page, not a raised
   application inside it (§7). */
.share{background:transparent;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none;padding:26px 0 0;margin-top:56px}
.share-file-btn{background:transparent}
.share-recent{border-left-color:var(--line)}

/* Focus rows: the number column becomes a fine editorial motif rather than
   a heavy ornament; more air between priorities (§6, §8). */
.foc{padding:26px 0}
.foc-n{font-size:22px;opacity:.85}
.foc-title{font-size:20px}
.foc-more>summary{color:var(--ink-soft)}

/* Needs you: the wash stays atmospheric — a breath of warmth, not a block
   of amber (§5). */
.needs li{background:linear-gradient(to right,var(--watch-bg),transparent 46%);
  border-left:2px solid var(--watch-line)}

/* Priority detail (§11): the executive frame on top, the analysis beneath. */
.ph-status{display:grid;gap:6px;justify-items:end;align-content:start}
.ph-status .statk{min-width:0;margin-right:2px}
@media (max-width:720px){.ph-status{justify-items:start}}

/* The five questions carry the page: editorial, unboxed, generous (§7). */
.fiveq{border:0;border-radius:0;background:transparent;padding:10px 0 4px;
  margin:30px 0 10px;border-top:1px solid var(--line)}
.fq{gap:18px}
.fq-i dt{font-size:var(--t-label);color:var(--ink-faint)}
.fq-i dd{font-family:Fraunces,Georgia,serif;font-size:17px;line-height:1.5;
  letter-spacing:-.005em;max-width:var(--w-measure)}
.fq-i dd .muted{font-family:"Source Sans 3",sans-serif;font-size:14px}

/* Delivery picture: facts in rows, never stat cards (§3, §11). */
.dpict{margin:0;display:grid;gap:0;border-top:1px solid var(--line);max-width:78ch}
.dpict>div{display:grid;grid-template-columns:150px 1fr;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line-soft)}
.dpict dt{font-size:var(--t-label);letter-spacing:.005em;
  color:var(--ink-soft);padding-top:2px}
.dpict dd{margin:0;font-size:15px;line-height:1.5}
@media (max-width:600px){.dpict>div{grid-template-columns:1fr;gap:2px}}

/* Outcome under a priority: hairlines instead of a box-in-box (§7). */
.oc{background:transparent;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:18px 0 6px}
.ms{background:transparent;border:0;border-bottom:1px solid var(--line-soft);
  border-radius:0;padding:10px 0;margin-bottom:0}
.ms:first-of-type{border-top:1px solid var(--line-soft)}

/* History: the vertical story line, renamed so Home's coming-up list and
   this never collide again. */
.timeline-story{border-left:2px solid var(--line);margin-left:6px;padding-left:22px;
  display:flex;flex-direction:column;gap:16px}
.timeline-story .tl{position:relative}
.timeline-story .tl::before{content:"";position:absolute;left:-29px;top:4px;width:11px;
  height:11px;border-radius:50%;background:var(--card);border:2px solid var(--ink-faint)}
.timeline-story .tl.k-decision::before{border-color:var(--info)}
.timeline-story .tl.k-action::before{border-color:var(--ok)}
.timeline-story .tl.k-evidence::before{border-color:var(--ink)}
.timeline-story .tl.k-signal-concern::before{border-color:var(--risk)}
.timeline-story .tl.k-signal-positive::before{border-color:var(--ok)}
.timeline-story .when{font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--ink-soft)}
.timeline-story .what{font-size:14.5px;color:var(--ink-2);margin-top:2px}

/* Meetings (§15): three questions, three weights. The next meeting orients
   in one line; what must happen before it carries the page; the record of
   the last one is context, not competition. */
.nextmeeting{background:transparent;border:0;border-radius:0;padding:26px 0 0;
  margin:6px 0 8px}
.nm-when{font-size:clamp(21px,2.4vw,26px)}
.before-primary .beforelist li{font-size:16px;padding:15px 16px}
.before-primary .bl-what{font-weight:500}
.sincegrid{opacity:1;color:var(--ink-2)}
.sincegrid .sg-i{font-size:13.5px}
.sincegrid .skey{color:var(--ink-faint)}

/* Leadership Clock (§13): the year is a journey. The past recedes, the
   present is certain without being bright, the future waits. Selection is
   typographic — no dark pill sitting in the strip. */
.months{gap:2px}
.mo a{padding:14px 4px 13px;border-radius:0;border:0;border-bottom:2px solid transparent;
  transition:color var(--speed) ease,border-color var(--speed) ease,background var(--speed) ease}
.mo a:hover{background:var(--paper-2);color:var(--ink);border-bottom-color:var(--ink-soft)}
.mo-past a{color:var(--ink-faint)}
.mo-past .dot{background:var(--line)}
.mo-now a{color:var(--ink);font-weight:700;border-bottom-color:var(--sand)}
.mo-sel a{background:transparent;color:var(--ink);border-color:transparent;
  font-weight:700;border-bottom:2px solid var(--ink)}
.mo-sel .dot{background:var(--sand)}
.mo-now.mo-sel a{border-bottom-color:var(--ink)}

/* The area filter whispers (§13): text, not pills. */
.af{border:0;border-radius:0;padding:3px 2px;margin-right:14px;
  border-bottom:1px solid transparent}
.af:hover{border-bottom-color:var(--line)}
.af.on{background:transparent;color:var(--ink);font-weight:600;
  border-bottom:1px solid var(--ink)}

/* The lower confirmation area joins the design language (§14): flat rows,
   fine rules, quiet headings — secondary to the year above it. */
.per{background:transparent;border:0;border-radius:0;box-shadow:none;
  margin-bottom:10px;overflow:visible}
.per-head{background:transparent;border-bottom:1px solid var(--line);
  padding:12px 0 8px}
.per-now .per-head{background:transparent;border-bottom-color:var(--ink)}
.per-next .per-head{background:transparent;border-bottom-color:var(--line)}
.per-body{padding:4px 0 10px}
.per-flag{background:transparent;border-color:var(--line)}

/* Strategy (§12): question-length labels get a column that fits them. The
   north-star overrides that lived here are gone: the padding belongs to each
   band now, and one flat .ns-text size would undo the Vision/Mission scale. */
.focus-strategy .foc-facts>div{grid-template-columns:190px 1fr}
@media (max-width:720px){.focus-strategy .foc-facts>div{grid-template-columns:1fr}}

/* How we operate (§16): the People/Priorities switch whispers; a map of
   responsibility, not an app chrome element. */
.vs{border:0;border-radius:0;padding:4px 2px;margin-right:16px;
  border-bottom:2px solid transparent;transition:color var(--speed) ease}
.vs:hover{border-bottom-color:var(--line)}
.vs.on{background:transparent;color:var(--ink);font-weight:600;
  border-bottom:2px solid var(--ink)}
.person{padding:20px 0}
.pe-name{font-size:19px}

/* Leadership Brief (§31): premium advisory, not warning slabs. Attention
   items keep one warm rule; everything else is typography. */
.lb-item{padding:8px 0 8px 14px;border-radius:0;margin-bottom:6px}
.lb-warm{background:transparent;border-left:2px solid var(--watch-line)}
.lb-head{border-bottom:1px solid var(--line);padding-bottom:18px}
.lb-head h1{font-size:32px}
@media print{.lb-warm{background:none}}

/* §19: disclosure opens as a continuation of the page, not a pop. */
@media (prefers-reduced-motion:no-preference){
  details[open]>*:not(summary){animation:disclose 180ms ease}
  @keyframes disclose{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
}

/* The 90-second tour (§22): a low card and a lifted section — the product
   itself is the slide. */
.demo-tour{background:rgba(23,42,38,.10);place-items:end center;
  padding-bottom:34px;pointer-events:none}
.demo-tour .di-card{pointer-events:auto;box-shadow:var(--shadow-lg);
  border:1px solid var(--line)}
/* The scrim stays feather-light, so the ring alone does the pointing —
   no z-index contest between page, scrim and card. */
.tour-spot{box-shadow:0 0 0 12px var(--paper),0 0 0 13.5px var(--sand);
  border-radius:2px}

/* §36: recession must never cost readability — the past recedes to the
   darkest tone that still passes AA at this size. */
.mo-past a{color:var(--ink-soft)}
.footnote{font-size:12.5px;font-style:normal}

/* Surgical polish 1 (§final): the outcome area speaks in one editorial
   voice. Status, confirmation and signal are quiet supporting facts under
   the outcome sentence — labelled, never pictorial. */
.oc-facts{display:grid;gap:4px;margin-top:10px}
.oc-facts .statk{min-width:118px}
.oc-state{font-size:14px;font-weight:600}
.oc-sig{font-size:14px;font-weight:600}
.oc-conf{font-size:13px;color:var(--ink-soft)}
.ms-sigk{font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft)}
.ms .ms-date{font-weight:500;color:var(--ink-soft)}
@media (max-width:600px){.oc-facts .statk{min-width:0;margin-right:4px}}

/* The five questions, five shapes (§final): scannable hierarchy from
   typography, whitespace and content shape — grayscale-clear, ~5% colour.
   No icons, no cards, no pills. */
.fq{gap:30px}
.fq-i dt{margin-bottom:6px}
.fq-i dd + dd{margin-top:4px}
.fq-meta{font-family:"Source Sans 3",sans-serif !important;
  font-size:13px !important;color:var(--ink-soft) !important;line-height:1.55}
/* 1 · Intended impact: the strongest section — one forest edge, a breath
   of sage, larger editorial type. */
.fq-hero{background:linear-gradient(to right,var(--ok-bg),transparent 78%);
  border-left:2px solid var(--ink);padding:14px 18px 15px;margin-left:-20px}
.fq-hero .fq-lead{font-size:20px;line-height:1.42}
/* 4 · Leadership: a name, then a next step with its date on one quiet row. */
.fq-next{font-family:"Source Sans 3",sans-serif !important;
  font-size:14.5px !important;color:var(--ink-2) !important}
.fq-nextk{font-size:12.5px;letter-spacing:.005em;
  color:var(--ink-soft);margin-right:8px}
.fq-date{color:var(--ink-soft)}
/* 5 · Learning: the current evidence conclusion — a whisper of warm sand. */
.fq-learn{background:linear-gradient(to right,var(--watch-bg),transparent 82%);
  border-left:2px solid var(--watch-line);padding:13px 18px 14px;margin-left:-20px}
@media (max-width:720px){.fq-hero,.fq-learn{margin-left:0;padding-left:14px}}

/* Priority header side: the record-a-decision entry above the state facts. */
.ph-side{display:grid;gap:12px;justify-items:end;align-content:start}
.quiet-link{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.quiet-link:hover{color:var(--ink);border-color:var(--ink-soft)}
@media (max-width:720px){.ph-side{justify-items:start}}

/* A carried commitment says which priority it serves and where it stands —
   without that context a leader cannot act on it. */
.carry-meta{display:block;font-size:12.5px;color:var(--ink-soft);margin-left:22px}

/* Progressive disclosure inside a form: the default is three questions;
   depth stays available without being asked for (§9). */
details.more-fields{margin:14px 0 4px;border-top:1px solid var(--line-soft);
  padding-top:12px}
details.more-fields>summary{cursor:pointer;list-style:none;font-size:13.5px;
  color:var(--ink-soft);display:inline-flex;gap:7px;align-items:center}
details.more-fields>summary::-webkit-details-marker{display:none}
details.more-fields>summary::before{content:"+";display:inline-block;
  font-size:15px;line-height:1;transition:transform var(--speed) ease}
details.more-fields[open]>summary::before{content:"–"}
details.more-fields>summary:hover{color:var(--ink)}
.more-body{display:grid;gap:18px;padding-top:16px}

/* "Where does this decision belong?" — the strategic focuses, then the honest
   alternative. Radios rather than a select so every option is equally visible
   and reachable by keyboard, and so the topic field can be revealed without a
   line of JavaScript. */
fieldset.where-group{border:0;padding:0;margin:0;min-width:0}
fieldset.where-group>legend{padding:0;font-size:13.5px;font-weight:600;
  color:var(--ink);margin-bottom:10px}
.where-opt{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;
  border:1px solid var(--line-soft);border-radius:var(--radius);
  margin-bottom:8px;background:var(--surface);
  transition:border-color var(--speed) ease}
.where-opt:hover{border-color:var(--line)}
.where-opt>input[type=radio]{margin:2px 0 0;flex:0 0 auto}
.where-opt>label{margin:0;font-weight:400;cursor:pointer;font-size:14.5px;
  line-height:1.45}
/* The focus ring belongs on the whole option, not just the dot. */
.where-opt:has(>input[type=radio]:focus-visible){outline:2px solid var(--accent);
  outline-offset:2px}
.where-opt:has(>input[type=radio]:checked){border-color:var(--ink-soft)}
.where-other{margin-top:12px}

/* Revealed by CSS alone. Note the direction: the field is VISIBLE by default
   and hidden only once a strategic focus is chosen. A browser without :has()
   support, or with CSS off, therefore shows it — never hides a field the
   server may require. */
.topic-reveal{padding:2px 0 0}
fieldset.where-group:has(input[name="priority_id"]:checked:not(#dn-where-other))
  .topic-reveal{display:none}
@media (prefers-reduced-motion: reduce){
  .where-opt{transition:none}
}

/* Decision history: a thread, not a dashboard. One column, date first, and no
   status colour — every row is a recorded fact of equal weight. */
ol.dhist{list-style:none;margin:14px 0 0;padding:0;max-width:76ch}
.dhist-row{display:grid;grid-template-columns:104px 1fr;gap:14px;
  padding:12px 0;border-top:1px solid var(--line-soft)}
.dhist-row:first-child{border-top:0}
.dhist-when{font-size:13px;color:var(--ink-soft);padding-top:1px}
.dhist-rel{font-size:12.5px;color:var(--ink-soft);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:3px}
.dhist-sum{font-size:15px;line-height:1.45}
.dhist-now .dhist-sum{font-weight:600}
.dhist-tag{font-size:12px;color:var(--ink-soft);margin-left:6px;
  white-space:nowrap}
.dhist-meta,.dhist-focus{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
@media (max-width:560px){
  .dhist-row{grid-template-columns:1fr;gap:2px}
  .dhist-when{padding-top:0}
}

/* The exits. Closing an open question and completing a commitment are ordinary
   acts, so the controls are quiet and sit with the record — not in a dashboard. */
.rescard{border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:16px 18px;margin:14px 0;background:var(--card);max-width:720px}
.res-h{font-size:15px;margin:0 0 4px}
.res-p{font-size:13.5px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5}
.rescard .form-row{margin-bottom:12px}

details.act-ctl{margin-top:6px}
details.act-ctl>summary{cursor:pointer;list-style:none;font-size:12.5px;
  color:var(--ink-soft)}
details.act-ctl>summary::-webkit-details-marker{display:none}
details.act-ctl>summary:hover{color:var(--ink)}
.act-body{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;
  padding:10px 0 2px}
.act-form{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.act-form label{font-size:12px;color:var(--ink-soft);margin:0}
.act-form input[type=date]{min-width:0}

.dup-warn{font-size:13px;line-height:1.5;color:var(--ink-soft);
  border-left:2px solid var(--line);padding:6px 0 6px 12px;margin:8px 0}
.rev-side{flex:0 0 auto;margin-left:auto;padding-left:12px}

@media (max-width:560px){
  .act-body{flex-direction:column;align-items:stretch}
  .act-form{flex-direction:column;align-items:stretch}
  .rev-side{margin-left:0;padding-left:0;margin-top:8px}
}

/* Movement, grouped by month. The TEXT label carries the type; the left accent
   and the icon only support it, so a reader who sees neither loses nothing. */
.mt-month{font-family:"Source Sans 3";font-size:12px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-soft);margin:22px 0 8px;font-weight:600}
ol.mmonth{list-style:none;margin:0;padding:0}
.mev{display:grid;grid-template-columns:66px 22px 1fr;gap:10px;
  padding:9px 0 9px 10px;border-left:2px solid var(--line-soft);
  align-items:start}
.mev-decision{border-left-color:var(--ink-soft)}
.mev-action{border-left-color:var(--teal)}
.mev-evidence{border-left-color:var(--ink-faint)}
.mev-milestone{border-left-color:var(--teal-bright)}
.mev-when{font-size:12.5px;color:var(--ink-soft);padding-top:2px}
.mev-node{color:var(--ink-faint);padding-top:2px}
.mev-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mev-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-soft);font-weight:600}
.mev-text{font-size:14.5px;line-height:1.45}
.mev-meta{font-size:12px;color:var(--ink-faint)}

/* Coming up: the type label sits above the title, same discipline. */
.tl-kind,.cu-kind{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-soft);font-weight:600}

@media (max-width:560px){
  .mev{grid-template-columns:1fr;gap:2px;padding-left:10px}
  .mev-node{display:none}
}

/* The Leadership Brief. A live view and a reviewed record must never be
   mistaken for one another, so each says which it is in words. */
.rv-state{font-size:14px;line-height:1.55;max-width:76ch;
  border-left:3px solid var(--line);padding:8px 0 8px 14px;margin:10px 0 0}
.rv-live{border-left-color:var(--teal)}
.rv-reviewed{border-left-color:var(--ink-soft);background:var(--paper-2)}
.rv-period{margin:20px 0 6px}
.rv-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;margin-bottom:12px}
.rv-dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin-top:12px}
.rv-d{border:1px solid var(--line-soft);border-radius:var(--radius);padding:12px 14px}
.rv-dt{font-size:15px;line-height:1.4}
.rv-dm{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
ul.rv-att{list-style:none;margin:12px 0 0;padding:0;max-width:76ch}
.rv-att>li{display:grid;grid-template-columns:132px 1fr;gap:12px;
  padding:10px 0;border-top:1px solid var(--line-soft)}
.rv-att>li:first-child{border-top:0}
.rv-al{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-soft);font-weight:600;padding-top:2px}
.rv-ax{display:flex;flex-direction:column;gap:2px;min-width:0}
.rv-ac,.rv-aw{font-size:12.5px;color:var(--ink-soft)}
.rv-save{margin-top:14px;max-width:720px}
ol.rv-hist{list-style:none;margin:14px 0 0;padding:0;max-width:76ch}
.rv-h{padding:12px 0;border-top:1px solid var(--line-soft)}
.rv-h:first-child{border-top:0}
.rv-hp{font-size:16px}
.rv-hm{font-size:12.5px;color:var(--ink-soft);margin-top:2px}

@media (max-width:560px){
  .rv-row{grid-template-columns:1fr}
  .rv-dir{grid-template-columns:1fr}
  .rv-att>li{grid-template-columns:1fr;gap:2px}
}

/* Who may see this meeting. One badge, stated in words — never colour alone. */
.aud-badge{display:inline-block;font-size:12.5px;line-height:1.5;
  color:var(--ink-soft);border:1px solid var(--line-soft);border-radius:999px;
  padding:5px 13px;margin:14px 0 0;max-width:100%}
.aud-leadership{border-color:var(--teal);color:var(--ink)}
.aud-when{color:var(--ink-faint)}
details.aud-change{max-width:720px}
@media (max-width:560px){
  .aud-badge{display:block;border-radius:var(--radius);text-align:left}
}

/* Home · Focus this year as an editorial composition (§4).
   Three priorities across the width instead of three full-width rows, so the
   first viewport can also carry Needs you. Column counts follow the real
   content: 2 → two, 3 → three, 4 → two-by-two. */
@media (min-width:1100px){
  .focus-grid{display:grid;gap:0 clamp(26px,3vw,44px);border-top:1px solid var(--line)}
  .focus-grid.focus-of-2{grid-template-columns:repeat(2,1fr)}
  .focus-grid.focus-of-3{grid-template-columns:repeat(3,1fr)}
  .focus-grid.focus-of-4{grid-template-columns:repeat(2,1fr)}
  .focus-grid .foc{border-bottom:0;padding:22px 0 26px}
  .focus-grid.focus-of-4 .foc:nth-child(-n+2){border-bottom:1px solid var(--line)}
  /* A hairline between columns instead of a card around each. */
  .focus-grid .foc + .foc{border-left:1px solid var(--line);
    padding-left:clamp(26px,3vw,44px)}
  .focus-grid.focus-of-4 .foc:nth-child(3){border-left:0;padding-left:0}
  .focus-grid .foc-head{grid-template-columns:1fr;gap:0}
  .focus-grid .foc-n{font-size:18px;display:block;margin-bottom:2px}
  .focus-grid .foc-title{font-size:18px;line-height:1.3}
  .focus-grid .foc-facts>div{grid-template-columns:52px 1fr}
  .focus-grid .foc-facts dd{font-size:14.5px}
  .focus-grid .foc-more{margin-left:0}
  .focus-grid .statk{min-width:52px}
  .focus-grid .foc-status{gap:3px}
}
@media (min-width:760px) and (max-width:1099px){
  .focus-grid{display:grid;grid-template-columns:repeat(2,1fr);
    gap:0 30px;border-top:1px solid var(--line)}
  .focus-grid .foc{padding:20px 0 24px}
  .focus-grid .foc-head{grid-template-columns:1fr;gap:0}
  .focus-grid .foc-n{font-size:18px;display:block}
  .focus-grid .foc-title{font-size:18px}
  .focus-grid .foc-more{margin-left:0}
}

/* Worth your attention: SchoolOS has noticed a pattern; it is not asking for
   action. Legible enough to read, quiet enough to stay second to Needs you. */
.worth-quiet{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.worth-quiet .eyebrow{margin-bottom:10px;color:var(--ink-soft)}
.wq{font-size:15px;padding:8px 0;line-height:1.55;max-width:70ch}
.wq-t{font-weight:600}
.wq-note{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px}

/* Term review: an answer to one question, laid out to be read on paper. */
.term-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0 22px;margin:0}
.term-totals>div{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.term-totals dt{font-size:var(--t-label);letter-spacing:.005em;
  color:var(--ink-soft)}
.term-totals dd{margin:4px 0 0;font-family:Fraunces,Georgia,serif;font-size:24px;
  line-height:1.1}
.term-p h2{display:flex;gap:10px;align-items:baseline;text-transform:none;
  letter-spacing:normal;font-family:Fraunces,Georgia,serif;font-size:18px;
  font-weight:500;color:var(--ink)}
.term-block{margin-top:14px}
.term-k{display:block;font-size:var(--t-label);letter-spacing:.005em;
  color:var(--ink-soft);margin-bottom:5px}
.term-block .plain li{font-size:14.5px;padding:3px 0;line-height:1.5}
@media print{.term-p{break-inside:avoid}}

/* ======================================================================
   HOME DESIGN REFOCUS — scan-first.
   The diagnosis (design/HOME-DIAGNOSIS.md) was that the three section
   headings rendered smaller and lighter than the body beneath them, so the
   page had no anchors and read as one grey field. Everything below exists
   to invert that: real headings, less grey, one warm surface, fewer words.
   ====================================================================== */

/* --- 1 · The anchors. Editorial serif, full ink, air above. ------------- */
.section-major{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:21px;
  letter-spacing:-.012em;color:var(--ink);margin:var(--s7) 0 var(--s4);
  padding-bottom:10px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px;text-transform:none}
.section-major:first-of-type{margin-top:var(--s5)}
.section-major .count{font-family:"Source Sans 3",sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.02em;color:var(--ink-soft);
  background:var(--paper-2);border-radius:999px;padding:1px 9px}
.section-minor{font-family:"Source Sans 3",sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.005em;color:var(--ink-soft);
  margin:0 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.exec-cols>section>.section-major{margin-top:var(--s5)}

/* One line under a heading saying what that register is FOR. A reader could
   not tell why an item was in one section rather than another; the answer is
   a sentence, not a legend. Sits below the rule, above the list, and never
   competes with either. */
.reg-note{font-size:13px;color:var(--ink-soft);margin:-6px 0 14px;max-width:60ch}

/* Needs you, Coming up and What's working now read in sequence rather than as
   a two-column composition, so the ten-second read is one column down the
   page. Each keeps the treatment it already had. */
.needs-section .section-major,
.coming-section .section-major,
.working-section .section-major{margin-top:var(--s6)}
.coming-section,
.working-section{max-width:720px}
.working-section .chg-list{margin-top:0}

/* --- 2 · Less grey. Reading text is ink; grey is for metadata only. ----- */
.greeting{color:var(--ink-2)}
.need-why{color:var(--ink-2);font-size:var(--t-body);line-height:1.6}
.wq{color:var(--ink-2)}
.wq-note{font-family:"Source Sans 3",sans-serif;font-size:12px;font-weight:400;
  letter-spacing:.01em;text-transform:none;color:var(--ink-faint)}
.tl-what{color:var(--ink)}
.foc-facts dd{color:var(--ink)}
.movement>summary{color:var(--ink-2)}

/* --- 3 · Warmth and anchoring. One surface, where the weight belongs. --- */
/* Needs you is the centre of gravity: a warm panel, not a wash on rows. */
.exec-main .needs{border-top:0;background:linear-gradient(180deg,#FBF8F0,#F8F5EC);
  border:1px solid var(--watch-line);border-radius:var(--radius);
  padding:4px 20px;margin:0}
.exec-main .needs li{background:none;border-left:0;margin:0;padding:16px 0;
  border-bottom:1px solid rgba(197,178,133,.30);grid-template-columns:132px 1fr}
.exec-main .needs li:last-child{border-bottom:0}
.need-label{color:var(--watch);font-weight:600;font-size:11.5px}
.need-title{font-size:16.5px;line-height:1.35}
.allclear{background:var(--ok-bg);border:1px solid var(--ok-line);
  border-radius:var(--radius);padding:20px 22px;font-size:var(--t-body);line-height:1.6}

/* Coming up is a date-led strip — unmistakably not a list of demands. */
.exec-side .timeline{border-top:0}
.exec-side .timeline li{grid-template-columns:54px 1fr;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line-soft);align-items:start}
.exec-side .tl-date{font-family:Fraunces,Georgia,serif;font-size:16px;font-weight:500;
  color:var(--ink);line-height:1.2;letter-spacing:-.01em}
.exec-side .tl-what{font-size:14px;line-height:1.45}
.exec-side .tl-what a{border-bottom:0}
.exec-side .tl-what a:hover{border-bottom:1px solid var(--ink)}

/* Focus columns get a sand rule above the number: three quiet anchors. */
@media (min-width:1100px){
  .focus-grid{border-top:0}
  .focus-grid .foc{border-top:2px solid var(--sand-light);padding-top:16px}
  .focus-grid .foc + .foc{border-left:0;padding-left:0}
  .focus-grid{gap:0 clamp(22px,2.6vw,38px)}
}

/* --- 4 · The always-visible action area. -------------------------------- */
.home-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  padding-top:30px;flex:none}
.addmenu{position:relative}
.addmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:7px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;
  padding:9px 18px;border-radius:var(--radius-sm);white-space:nowrap;
  transition:background var(--speed) ease}
.addmenu>summary::-webkit-details-marker{display:none}
.addmenu>summary:hover{background:var(--ink-2)}
.addmenu>summary span{font-size:16px;line-height:1}
.addmenu-body{position:absolute;right:0;top:calc(100% + 8px);z-index:20;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);min-width:220px;padding:6px;display:grid;gap:1px}
.addmenu-body a{display:block;padding:9px 13px;font-size:14px;color:var(--ink);
  text-decoration:none;border-radius:var(--radius-xs)}
.addmenu-body a:hover{background:var(--paper-2)}
.home-actions .quiet-util{padding-top:0;gap:5px}

@media (max-width:720px){
  .home-actions{flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;padding-top:4px;flex-wrap:wrap;gap:12px}
  .addmenu-body{right:auto;left:0}
  .section-major{font-size:19px;margin-top:var(--s6)}
  .exec-main .needs{padding:4px 14px}
  .exec-main .needs li{grid-template-columns:1fr;gap:5px}
}

/* --- Home: leadership panels -------------------------------------------- */
.home-board{display:grid;gap:var(--s6)}
.home-panel{padding:var(--s5)}
.home-panel .section-major{margin-top:0;border-bottom:0;padding-bottom:0}
.home-panel .reg-note{margin-top:4px}
.needs-panel{border-left:4px solid var(--watch-line)}
.home-panel .needs{background:none;border:0;padding:0}
.focus-panel{border-top:4px solid var(--sand)}
.coming-panel .timeline li:first-child{padding-top:0}
@media (min-width:860px){
  .home-focus-row{display:grid;grid-template-columns:2fr 1fr;gap:var(--s5)}
}

/* The SchoolOS flag sits on the label's line and wraps as one unit, so a
   long flag cannot push a focus column out of step with its neighbours. */
.focus-grid .foc-status .statline{align-items:baseline}
.focus-grid .foc-status .pill{white-space:normal;line-height:1.35;padding:3px 10px}
.focus-grid .statk{flex:none}

/* ======================================================================
   SCHOOLOS DESIGN SYSTEM — final art direction.
   One grammar for every screen. Read this block before changing a page.

   COLOUR ROLES
     forest   titles, primary actions, navigation emphasis
     paper    the page
     cream    secondary surfaces that carry weight
     sage     practice and positive movement
     sand     strategy, orientation, priority identity
     slate    evidence and informational context
     rose     rare, genuine concern
     grey     METADATA ONLY — never important content

   TYPE ROLES — four, and no intermediates
     .t-display  a page's one strategic idea      Fraunces  clamp 28–38
     .t-section  a visual anchor                  Fraunces  21
     .t-body     normal explanation               Sans      15
     .t-meta     provenance, date, context        Sans      12.5  grey
   ====================================================================== */
:root{
  --forest:#172A26;
  --cream:#F2EFE4;          /* secondary surface with weight */
  --cream-2:#EDE9DC;
  --sage:#4A7358;      --sage-wash:#F0F4EE;   --sage-line:#D6E1D5;
  --sand-ink:#8A7434;  --sand-wash:#F8F4E8;   --sand-line:#E6DCC0;
  --slate:#4A5E70;     --slate-wash:#F0F3F5;  --slate-line:#DCE3E8;
  --rose:#82504B;      --rose-wash:#F8F2F1;   --rose-line:#E9DCD9;
}

/* --- type roles ------------------------------------------------------- */
.t-display{font-family:Fraunces,Georgia,serif;font-weight:500;
  font-size:clamp(28px,3.4vw,38px);line-height:1.1;letter-spacing:-.02em;
  color:var(--forest);margin:0}
.t-section{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:21px;
  line-height:1.2;letter-spacing:-.012em;color:var(--forest);margin:0}
.t-body{font-size:var(--t-body);line-height:1.6;color:var(--ink)}
.t-meta{font-size:12.5px;line-height:1.5;color:var(--ink-soft);
  letter-spacing:.01em}

/* --- surfaces --------------------------------------------------------- */
.surface{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius)}
.surface-cream{background:linear-gradient(180deg,#FBF9F2,var(--cream));
  border:1px solid var(--cream-2);border-radius:var(--radius)}
.surface-forest{background:var(--forest);color:var(--paper);
  border-radius:var(--radius)}

/* --- priority accent identity (§5) ------------------------------------ */
/* A quiet way to recognise which strategic stream you are inside. Applied
   as a top rule and to the number — never as a status colour. */
.a-sand{--accent:var(--sand);--accent-ink:var(--sand-ink);--accent-wash:var(--sand-wash)}
.a-sage{--accent:var(--sage-line);--accent-ink:var(--sage);--accent-wash:var(--sage-wash)}
.a-slate{--accent:var(--slate-line);--accent-ink:var(--slate);--accent-wash:var(--slate-wash)}
.accent-rule{border-top:2px solid var(--accent,var(--line))}
.accent-num{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:20px;
  line-height:1;color:var(--accent-ink,var(--ink-faint));letter-spacing:.02em}

/* --- the improvement pathway (§3, §4, §9) ------------------------------ */
/* A connected editorial sequence, not a flowchart. One hairline track runs
   behind the nodes so the eye reads them as one chain of reasoning. */
.pathway{list-style:none;margin:18px 0 0;padding:0;position:relative}
.pathway::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;
  width:1px;background:var(--line)}
.pw{position:relative;padding:0 0 16px 26px}
.pw:last-child{padding-bottom:0}
.pw::before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;
  border-radius:50%;background:var(--paper);
  border:1.5px solid var(--accent,var(--line))}
.pw-k{display:block;font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--accent-ink,var(--ink-soft));margin-bottom:3px}
.pw-v{font-size:15.5px;line-height:1.5;color:var(--ink)}
.pw-d{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.pw-missing .pw-v{color:var(--ink-faint);font-style:italic}
.pw-missing::before{border-style:dashed;border-color:var(--line)}

/* Horizontal pathway where the width allows it to read as one sequence. */
@media (min-width:1100px){
  .pathway-across{display:grid;grid-template-columns:repeat(5,1fr);gap:0 18px}
  .pathway-across::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px}
  .pathway-across .pw{padding:22px 0 0}
  .pathway-across .pw::before{top:0;left:0}
  .pathway-across .pw-v{font-size:14.5px;line-height:1.45}
}

/* One calm setup state instead of five negatives (§12). */
.setup-state{background:var(--sand-wash);border:1px solid var(--sand-line);
  border-radius:var(--radius-sm);padding:16px 20px;margin-top:16px}
.setup-lede{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0;
  max-width:64ch}
.setup-next{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:14px;font-weight:600;color:var(--forest);text-decoration:none;
  border-bottom:1px solid var(--sand);padding-bottom:1px}
.setup-next:hover{border-color:var(--forest)}

/* --- progress told as a story, never a gauge (§11) --------------------- */
.storyline{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.storyline li{display:grid;grid-template-columns:18px 1fr;gap:9px;
  font-size:14.5px;line-height:1.5;color:var(--ink)}
.sl-mark{color:var(--sage);font-size:13px;line-height:1.6}
.sl-mark.sl-evidence{color:var(--slate)}
.sl-mark.sl-next{color:var(--sand-ink)}
.storyline .t-meta{display:inline}

/* --- one restrained icon vocabulary (§13) ------------------------------ */
/* Line icons at text size, inheriting colour. They aid scanning; they never
   decorate. Defined once as an inline sprite in base.html. */
.ico{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-2px}
.ico-sm{width:13px;height:13px;vertical-align:-1px}

/* --- Strategy: priorities as reasoning, not records --------------------- */
.priorities{display:grid;gap:34px;margin-top:20px}
.pri{padding-top:0;border:1px solid var(--line);border-radius:var(--radius)}
.pri-head{display:grid;grid-template-columns:38px 1fr;gap:0 14px;
  align-items:start;padding-top:14px}
.pri-head .t-section a{color:inherit;text-decoration:none}
.pri-head .t-section a:hover{text-decoration:underline}
.pri-state{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:5px 0 0;
  font-size:14px}
/* Human status: ink, medium. A person decided this. */
.pri-status{font-weight:600;color:var(--ink-2)}
/* The computed reading in the priority hero. Same restraint as a status,
   different name, so the two are never read as the same kind of claim. */
.pri-signal{font-weight:600;color:var(--ink-2)}
/* SchoolOS signal: read from records, never overwrites the above. Distinguished
   by colour and weight rather than by a second field label. */
.sig-risk{color:var(--rose);font-weight:500}
.sig-watch{color:var(--sand-ink);font-weight:500}
.sep{color:var(--ink-faint)}
.pri .pathway,.pri .setup-state{margin-left:52px}
@media (max-width:1099px){.pri .pathway,.pri .setup-state{margin-left:0}}

/* --- Priority detail: the school-improvement logic, made obvious -------- */
.pri-hero{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--radius)}
.pri-hero-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  gap:0 16px;padding-top:18px;align-items:start}
.pri-hero .accent-num{font-size:24px;padding-top:6px}
.pri-hero .t-display{font-size:clamp(26px,3vw,34px)}
.pri-hero .pri-state{margin-top:8px;gap:14px}
.pri-actions{display:grid;gap:7px;justify-items:end;padding-top:6px}
.pri-actions a{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:2px;white-space:nowrap;
  transition:color var(--speed) ease,border-color var(--speed) ease}
.pri-actions a:hover{color:var(--forest);border-color:var(--accent-ink,var(--ink-soft))}
.pri-chain{margin:26px 0 0;padding:22px 0 4px;border:1px solid var(--line);border-radius:var(--radius)}
.pri-chain .pathway{margin-top:0}
.pri-chain .pw-k{display:inline-flex;align-items:center;gap:6px}
.pri-story{margin-top:8px}
@media (max-width:820px){
  .pri-hero-top{grid-template-columns:38px 1fr}
  .pri-actions{grid-column:1/-1;justify-items:start;
    grid-auto-flow:column;gap:16px;padding-top:12px}
}

/* --- Home: distinct object types, not text after text (§7) -------------- */
.focus .foc.a-sand,.focus .foc.a-sage,.focus .foc.a-slate{
  border-top:2px solid var(--accent);border-bottom:0;padding-top:16px}
.foc-setup{font-size:var(--t-body);line-height:1.6;color:var(--ink-2);margin:2px 0 0;
  max-width:34ch}
.mv-facts{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.mv-fact{display:inline-flex;align-items:center;gap:7px;font-size:14px;
  color:var(--ink-2)}
.mv-fact b{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:17px;
  color:var(--forest);line-height:1}
.mv-fact .ico{color:var(--ink-faint)}
.movement>summary:has(.mv-facts)::after{content:""}
.mv-facts::after{content:"›";color:var(--ink-faint);font-size:15px;
  margin-left:2px}

/* --- the same grammar on every remaining screen (§16) ------------------- */
/* Page heads: one display size, one lede, one action position. */
.pagehead h1{font-family:Fraunces,Georgia,serif;font-weight:500;
  font-size:clamp(28px,3.4vw,36px);letter-spacing:-.02em;color:var(--forest)}
.pagehead .sub{font-size:15px;color:var(--ink-2);max-width:62ch}
.cap-lede{margin:8px 0 0;max-width:68ch;color:var(--ink-2)}

/* Capture flows: forms are surfaces, not bare fields on paper. */
form.onb-form{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(20px,3vw,30px)}
form.onb-form .onb-form{background:none;border:0;border-radius:0;padding:0}
.narrow .onb-form .form-row label{font-size:13.5px;font-weight:600;
  color:var(--ink)}
.narrow .onb-actions{margin-top:4px}

/* Clock, Meetings, How we operate: the section anchor and the meta voice. */
.moments li,.beforelist li,.person,.coming li{color:var(--ink)}
.mm-date,.bl-date,.c-date{font-family:Fraunces,Georgia,serif;font-size:15px;
  font-weight:500;color:var(--ink);letter-spacing:-.01em}
.mm-meta,.bl-who,.pe-sub,.carry-meta{font-size:12.5px;color:var(--ink-soft)}
.mo-now a{border-bottom-color:var(--sand)}

/* Briefs and the term review speak the same type roles. */
.lb-head h1{font-family:Fraunces,Georgia,serif;font-weight:500;
  color:var(--forest);letter-spacing:-.02em}
.lb-s h2,.term-p h2{color:var(--ink-2)}

/* --- Artefact 2: latest evidence as a real artefact (§XVII, §XXIX) ------ */
.ev-artefact{margin-top:8px}
.ev-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;
  background:var(--slate-wash);border:1px solid var(--slate-line);
  border-radius:var(--radius);padding:20px 22px;align-items:start}
.ev-doc{width:56px;height:64px;border:1px solid var(--slate-line);
  border-radius:5px;background:var(--card);display:grid;place-items:center;
  color:var(--slate);position:relative;overflow:hidden}
.ev-doc::after{content:"";position:absolute;left:10px;right:10px;bottom:9px;
  height:1px;background:var(--slate-line);box-shadow:0 -4px 0 var(--slate-line)}
.ev-title{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:17px;
  letter-spacing:-.01em;margin:0;color:var(--forest)}
.ev-finding{font-size:15px;line-height:1.55;color:var(--ink);margin:6px 0 8px;
  max-width:70ch}

/* --- PART XV: understanding above, investigation below ------------------ */
details.fullstory{margin:44px 0 0;border-top:1px solid var(--line);
  padding-top:18px}
details.fullstory>summary{cursor:pointer;list-style:none;
  font-family:Fraunces,Georgia,serif;font-size:17px;color:var(--forest);
  display:inline-flex;align-items:center;gap:9px}
details.fullstory>summary::-webkit-details-marker{display:none}
details.fullstory>summary::after{content:"↓";font-family:"Source Sans 3",sans-serif;
  font-size:15px;color:var(--ink-faint);transition:transform var(--speed) ease}
details.fullstory[open]>summary::after{transform:rotate(180deg)}
details.fullstory>summary:hover{color:var(--ink-2)}
.fs-body{padding-top:10px;color:var(--ink-2)}
.fs-body .section-major{font-size:18px}

/* --- Artefact 1: movement this term (§XI, §XXIX) ------------------------
   A date axis with nodes on a connected track. Real records only: a quiet
   term shows a short line rather than an invented one. */
.movement-term{margin-top:6px}
.mtrack{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.mt{display:grid;grid-template-columns:64px 22px minmax(0,1fr);gap:0 14px;
  align-items:start;padding:12px 0;position:relative}
.mt::before{content:"";position:absolute;left:74px;top:26px;bottom:-12px;
  width:1px;background:var(--line)}
.mt:last-child::before{display:none}
.mt-when{font-family:Fraunces,Georgia,serif;font-size:15px;font-weight:500;
  color:var(--ink);letter-spacing:-.01em;padding-top:2px;text-align:right}
.mt-node{width:22px;height:22px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-soft);position:relative;z-index:1}
.mt-label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--ink-soft)}
.mt-text{display:block;font-size:15px;line-height:1.45;color:var(--ink);
  margin-top:2px}
.mt-text a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.mt-text a:hover{border-color:var(--ink)}
/* The moment ahead reads as ahead. */
.mt-next .mt-node{border-color:var(--sand);border-style:dashed;color:var(--sand-ink)}
.mt-next .mt-label{color:var(--sand-ink)}
@media (min-width:1100px){
  /* Across the width, the dates form one horizontal axis. */
  .mtrack{grid-auto-flow:column;grid-auto-columns:1fr;gap:0 20px}
  .mt{grid-template-columns:1fr;gap:0;padding:0}
  .mt::before{left:11px;right:-20px;top:32px;bottom:auto;width:auto;height:1px}
  .mt-when{text-align:left;padding-top:0}
  .mt-node{margin:10px 0 12px}
  .mt-text{font-size:14.5px}
}
@media (max-width:720px){.mt{grid-template-columns:52px 22px 1fr}.mt::before{left:62px}}

/* --- Artefact 4: before → now → next (§XXVI, §XXIX) --------------------- */
.bnn{display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px;
  margin:14px 0 4px;position:relative}
.bnn::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;
  background:var(--line)}
.bnn-col{position:relative;padding-top:22px}
.bnn-col::before{content:"";position:absolute;left:0;top:2px;width:11px;height:11px;
  border-radius:50%;background:var(--paper);border:1.5px solid var(--sand)}
.bnn-col:nth-child(2)::before{border-color:var(--sage)}
.bnn-col:nth-child(3)::before{border-color:var(--slate-line)}
.bnn-k{display:block;font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--ink-soft);margin-bottom:6px}
.bnn-v{font-size:14.5px;line-height:1.5;color:var(--ink);margin:0;max-width:38ch}
.bnn-none{color:var(--ink-faint);font-style:italic}
.bnn-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.bnn-list li{font-size:14.5px;line-height:1.45;color:var(--ink);
  padding-left:15px;position:relative}
.bnn-list li::before{content:"";position:absolute;left:0;top:.65em;width:8px;
  height:1px;background:var(--line)}
.bnn-learn{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:9px 0 2px;
  padding-left:11px;border-left:2px solid var(--sage-line)}
@media (max-width:820px){
  .bnn{grid-template-columns:1fr;gap:20px}
  .bnn::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
}
@media print{.bnn{break-inside:avoid}}

/* --- How SchoolOS works: the improvement model -------------------------- */
.im-flow{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;
  position:relative}
.im-step{position:relative;padding:0 0 20px 26px}
.im-step:last-child{padding-bottom:0}
.im-step::before{content:"";position:absolute;left:5px;top:20px;bottom:0;width:1px;
  background:var(--line)}
.im-step:last-child::before{display:none}
.im-step::after{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;
  border-radius:50%;background:var(--paper);border:1.5px solid var(--sage)}
.im-step:nth-of-type(2)::after{border-color:var(--sand)}
.im-step:nth-of-type(3)::after{border-color:var(--slate-line)}
.im-k{display:block;font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--ink-soft);margin-bottom:3px}
.im-v{font-family:Fraunces,Georgia,serif;font-size:17px;line-height:1.45;
  color:var(--forest);letter-spacing:-.008em}

.im-connector{display:none}

/* Horizontal flow where width allows it to read as one sequence. */
@media (min-width:900px){
  .im-flow{
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:8px 18px;
    align-items:stretch}

  .im-step{
    padding:22px 0 0;
    border-top:3px solid var(--sage)}

  .im-step:nth-of-type(1){border-color:var(--sage)}
  .im-step:nth-of-type(2){border-color:var(--sand)}
  .im-step:nth-of-type(3){border-color:var(--slate-line)}

  .im-step::before,
  .im-step::after{display:none}

  .im-connector{
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-soft);font-family:Fraunces,Georgia,serif;font-size:22px;
    padding-top:22px}
}

.im-lede{max-width:68ch}

.im-lenses{
  margin:24px 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px}

.im-lens{
  background:var(--paper-2);
  border-left:3px solid var(--lens-accent);
  padding:18px}

.im-lens-sand{--lens-accent:var(--sand);--lens-wash:var(--sand-wash)}
.im-lens-sage{--lens-accent:var(--sage);--lens-wash:var(--sage-wash)}
.im-lens-slate{--lens-accent:var(--slate);--lens-wash:var(--slate-wash)}

.im-lens dt{
  font-size:16px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:12px}

.im-lens-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--lens-wash);border:1.5px solid var(--lens-accent);
  font-family:Fraunces,Georgia,serif;font-size:13px;color:var(--ink);
  flex-shrink:0}

.im-lens dd{
  margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}

.im-principles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px;
  margin-top:24px}

.im-p{border-top:2px solid var(--sand-line);padding-top:12px}

.im-pk{display:block;font-family:Fraunces,Georgia,serif;font-size:16px;
  color:var(--forest);margin-bottom:5px;letter-spacing:-.008em}

.im-p p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:44ch}

@media (max-width:900px){
  .im-lenses{grid-template-columns:repeat(2,1fr)}
  .im-principles{grid-template-columns:repeat(2,1fr)}}

@media (max-width:720px){
  .im-lenses{grid-template-columns:1fr}
  .im-principles{grid-template-columns:1fr}
  .im-connector{display:none}}
.addmenu-body{min-width:264px;padding:7px}
.addmenu-body a{padding:10px 13px;font-weight:600;font-size:14.5px}
.add-desc{display:block;font-weight:400;font-size:12.5px;color:var(--ink-soft);
  margin-top:1px}
.movement-detail{margin:22px 0 0;border-top:1px solid var(--line-soft);padding-top:14px}

/* First use of Meetings: explain the workflow once, then one clear way in. */
.firstuse{margin:6px 0 10px}
.fu-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px;
  max-width:64ch}
.fu-steps li{display:grid;grid-template-columns:28px 1fr;gap:14px;
  font-size:15px;line-height:1.55;color:var(--ink-2)}
.fu-steps b{color:var(--ink);font-weight:600}
.fu-n{font-family:Fraunces,Georgia,serif;font-size:17px;color:var(--sand-ink);
  line-height:1.35}
.fu-then{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:20px 0 20px;
  max-width:64ch}

/* ======================================================================
   430px release fixes — verified in a real browser, not headless.
   ====================================================================== */
@media (max-width:720px){
  /* DEFECT: the commitment title was auto-placed into the 56px date column,
     so every title broke one word per line. Date and owner share a line;
     the title gets the full width beneath them. */
  .beforelist li,.before-primary .beforelist li{grid-template-columns:auto 1fr;
    gap:4px 12px;padding:14px 12px}
  .beforelist .bl-date{grid-column:1;grid-row:1}
  .beforelist .bl-who{grid-column:2;grid-row:1;justify-self:start}
  .beforelist .bl-what{grid-column:1/-1;grid-row:2}

  /* The section rule and the first accent rule sat a few pixels apart and
     read as one doubled line. */
  .focus-grid{margin-top:14px}

  /* The nav scrolls by design; say so rather than appearing cut off. */
  .topbar .row{position:relative}
  .topbar nav{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent)}
}

/* ======================================================================
   DECISION IMPACT — "How might this improve the school?"
   Optional depth. Level 1 is the decision; this is level 2; the research
   basis inside is level 3. Uses the established connected-line grammar —
   no cards inside cards, no status indicators, no scores.
   ====================================================================== */
details.impact{margin:22px 0 0;border-top:1px solid var(--line);padding-top:16px}
details.impact>summary{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:8px;font-family:Fraunces,Georgia,serif;font-size:17px;
  color:var(--forest);letter-spacing:-.008em;
  transition:color var(--speed) ease}
details.impact>summary::-webkit-details-marker{display:none}
details.impact>summary::after{content:"→";font-family:"Source Sans 3",sans-serif;
  font-size:14px;color:var(--ink-faint);transition:transform var(--speed) ease}
details.impact[open]>summary::after{transform:rotate(90deg)}
details.impact>summary:hover{color:var(--ink-2)}
.imp-star{color:var(--sand-ink);font-size:13px}
.imp-body{padding-top:18px;display:grid;gap:26px;max-width:76ch}
.imp-block{display:grid;gap:5px}

/* Corpus v2: the compact four-part card — short label/value rows, not panels. */
.imp-card{gap:0}
.imp-row{display:grid;grid-template-columns:150px 1fr;gap:12px;
  padding:11px 0;border-top:1px solid var(--line-soft);align-items:baseline}
.imp-row:first-child{border-top:0}
.imp-lbl{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:2px}
.imp-val{font-size:15px;line-height:1.55;color:var(--ink);margin:0}
.imp-val .t-meta{display:block;margin-top:3px}
.imp-ev-line{margin:0 0 8px}.imp-ev-line:last-child{margin-bottom:0}
.imp-nomatch{margin:0;color:var(--ink-2);font-style:italic}
.imp-judge .imp-val b{color:var(--teal)}
.imp-local.imp-none_yet .imp-lbl,.imp-local.imp-too_early .imp-lbl{color:var(--ink-faint)}
.imp-why{margin-top:6px}
.imp-why>summary{cursor:pointer;list-style:none;font-size:12.5px;color:var(--teal);
  padding:8px 0 0;border-top:1px solid var(--line-soft)}
.imp-why>summary::-webkit-details-marker{display:none}
.imp-why-body{display:grid;gap:10px;padding-top:10px}
.imp-why-lede{margin:0;font-size:var(--t-body);line-height:1.6;color:var(--ink-2);max-width:70ch}
@media (max-width:560px){
  .imp-row{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .imp-lbl{padding-top:0}
}
.imp-k{font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--ink-soft)}
.imp-v{font-size:15.5px;line-height:1.6;color:var(--ink);margin:0;max-width:68ch}
.imp-missing{color:var(--ink-faint);font-style:italic}
.imp-none{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 18px;
  max-width:64ch}

/* The chain: one hairline track, nodes tinted by where each step comes from. */
.imp-chain{list-style:none;margin:8px 0 0;padding:0;position:relative}
.imp-chain::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;
  width:1px;background:var(--line)}
.imc{position:relative;padding:0 0 15px 26px}
.imc:last-child{padding-bottom:0}
.imc::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;
  border-radius:50%;background:var(--paper);border:1.5px solid var(--line)}
.imc-leadership::before{border-color:var(--forest)}
.imc-priority::before{border-color:var(--sand)}
.imc-schoolos::before{border-color:var(--slate);border-style:dashed;opacity:.55}
.imc-k{display:block;font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--ink-soft);margin-bottom:2px}
.imc-v{font-size:15px;line-height:1.5;color:var(--ink)}
.imp-caveat{font-size:13px;line-height:1.55;color:var(--ink-soft);margin:12px 0 0;
  padding-left:26px;max-width:62ch}
.imp-first{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px}
.imp-first li{font-size:14.5px;line-height:1.5;color:var(--ink);
  padding-left:15px;position:relative}
.imp-first li::before{content:"";position:absolute;left:0;top:.65em;width:8px;
  height:1px;background:var(--line)}

/* Local evidence: its own surface, so it can never read as research. */
.imp-local{background:var(--slate-wash);border:1px solid var(--slate-line);
  border-radius:var(--radius-sm);padding:16px 18px;gap:6px}
.imp-state{font-family:Fraunces,Georgia,serif;font-size:16px;color:var(--forest);
  margin:0;letter-spacing:-.008em}
.imp-local.imp-none_yet,.imp-local.imp-too_early{background:var(--paper-2);
  border-color:var(--line)}
.imp-local.imp-implemented_only{background:var(--sand-wash);border-color:var(--sand-line)}
.imp-ev{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}
.imp-ev li{font-size:14.5px;line-height:1.5;color:var(--ink)}

details.imp-research{border-top:1px solid var(--line-soft);padding-top:14px}
details.imp-research>summary{cursor:pointer;font-size:14px;color:var(--ink-2)}
.imp-research-body{padding-top:12px;display:grid;gap:14px}
.imp-src{display:grid;gap:3px;padding-left:13px;border-left:2px solid var(--slate-line)}
.imp-src-t{font-size:var(--t-body);line-height:1.6;color:var(--ink)}
.imp-src-c{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft);font-style:italic}
@media (max-width:600px){.imp-caveat{padding-left:0}}
.imp-link{display:inline-block;margin-top:5px;font-size:13px;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid var(--line)}
.imp-link:hover{color:var(--forest);border-color:var(--sand)}
.imp-link span{color:var(--sand-ink)}

/* --- The optional leadership meeting format (§15) ----------------------- */
.mf{margin-top:22px}
.mf-head{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:10px 14px;
  align-items:baseline;padding-bottom:20px;border-bottom:1px solid var(--line)}
.mf-k{font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--ink-soft)}
.mf-rule{border-bottom:1px solid var(--line);height:1.4em}
.mf-list{list-style:none;margin:0;padding:0;counter-reset:mf}
.mf-list li{counter-increment:mf;padding:26px 0 24px 46px;position:relative;
  border-bottom:1px solid var(--line-soft)}
.mf-list li:last-child{border-bottom:0}
.mf-list li::before{content:counter(mf);position:absolute;left:0;top:26px;
  font-family:Fraunces,Georgia,serif;font-size:20px;color:var(--sand-ink)}
.mf-help{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:6px 0 0;
  max-width:62ch}
@media print{.mf-list li{padding-bottom:80px}.mf-help{color:#555}}

/* --- School knowledge: an occasional area, not a weekly one ------------- */
.intake{margin-top:28px}
.intake-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px 26px;margin-top:16px}
.intake-g{border-top:2px solid var(--sand-line);padding-top:12px}
.ig-k{display:block;font-family:Fraunces,Georgia,serif;font-size:16px;
  color:var(--forest);margin-bottom:5px}
.intake-g p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* ===========================================================================
   SIGNATURE COMPOSITIONS
   Added in the final design pass. These are the artefacts that make SchoolOS
   recognisable; every one of them carries product meaning, and none is a chart
   drawn to look sophisticated.
   =========================================================================== */

/* --- School Memory Map (School Understanding) ----------------------------
   Four dimensions of ONE school. What holds them together is a shared top
   rule and a common baseline grid — not four bordered cards, which would say
   "four unrelated widgets" exactly where the page needs to say "one school". */
.memory-head{margin-top:10px;border:0;padding-bottom:0}
.memory-anchor{font-family:"Fraunces",Georgia,serif;font-size:19px;line-height:1.5;
  color:var(--ink-2);max-width:34em;margin:10px 0 0}
.memmap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:2px solid var(--ink);margin:34px 0 46px}
.mm{padding:22px 26px 26px 0;border-right:1px solid var(--line);
  display:flex;flex-direction:column}
.mm:last-child{border-right:0;padding-right:0}
.mm+.mm{padding-left:26px}
.mm-h{font-family:"Fraunces",Georgia,serif;font-size:20px;font-weight:600;
  color:var(--ink);margin:0}
.mm-q{font-size:13.5px;color:var(--ink-soft);margin:3px 0 16px;line-height:1.45}
.mm-body{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 8px}
.mm-meta,.mm-pending{font-size:13px;line-height:1.55;color:var(--ink-soft);margin:0}
/* Proposed information reads as unfinished, never as an error: sand, the
   orientation accent, and never rose. */
.mm-pending{color:var(--sand-ink)}
.mm-empty{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 8px}
.mm-link{display:inline-block;margin-top:auto;padding-top:14px;font-size:13.5px;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);
  align-self:flex-start;transition:border-color var(--speed)}
.mm-link:hover{border-bottom-color:var(--ink)}
.mm-priorities{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:11px}
.mm-priorities li{display:grid;grid-template-columns:26px 1fr;gap:8px;
  align-items:baseline}
.mm-num{font-family:"Fraunces",Georgia,serif;font-size:14px;color:var(--sand-ink)}
.mm-priorities .a-sage .mm-num{color:var(--sage)}
.mm-priorities .a-slate .mm-num{color:var(--slate)}
.mm-title{font-size:14.5px;line-height:1.45;color:var(--ink)}
.mm-moments{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.mm-moments li{font-size:14px;line-height:1.45;color:var(--ink-2)}
.mm-when{display:block;font-size:12.5px;color:var(--ink-soft)}
/* Evidence as artefact, not as a count. Each one names what was learned, when,
   and which priority it informs. */
.mm-evidence-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:13px}
.mm-ev-title{display:block;font-size:14.5px;line-height:1.45;color:var(--ink)}

/* --- Decision thread (the story so far) ---------------------------------- */
.thread{list-style:none;margin:18px 0 40px;padding:0}
.thread-item{position:relative;padding:0 0 24px 26px;border-left:1px solid var(--line)}
.thread-item:last-child{border-left-color:transparent;padding-bottom:0}
.thread-item::before{content:"";position:absolute;left:-4.5px;top:6px;width:8px;
  height:8px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--sand)}
.thread-when{font-size:12.5px;color:var(--ink-soft);margin:0 0 3px}
.thread-decision{font-family:"Fraunces",Georgia,serif;font-size:17px;line-height:1.4;
  margin:0 0 5px}
.thread-decision a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line)}
.thread-decision a:hover{border-bottom-color:var(--ink)}
.thread-why{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 5px;
  max-width:56em}
.thread-follow{font-size:13.5px;color:var(--ink-soft);margin:0}
/* A gap in the record is stated plainly, not flagged as a fault. */
.thread-gap{font-style:italic}

/* --- Carried-forward list ------------------------------------------------ */
.carried{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:26px}
.carried>li{display:grid;gap:5px;max-width:62em}
.carried-title{font-size:16px;line-height:1.45;margin:0;color:var(--ink)}
.carried-title a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.carried-fact{font-size:13px;color:var(--ink-soft);margin:0}
.carried-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
/* Carrying forward is the commonest answer and the least consequential, so it
   leads — but quietly, because it is not a recommendation. */
.btn-quiet{background:var(--paper-2)}

@media (max-width:1100px){
  .memmap{grid-template-columns:repeat(2,1fr)}
  .mm:nth-child(2){border-right:0}
  .mm:nth-child(3),.mm:nth-child(4){border-top:1px solid var(--line);
    margin-top:-1px;padding-top:22px}
  .mm:nth-child(3){padding-left:0}
}
@media (max-width:720px){
  /* A horizontal relationship becomes a vertical narrative — recomposed, not
     shrunk. The top rule stays so the four still read as one thing. */
  .memmap{grid-template-columns:1fr}
  .mm{border-right:0;padding:20px 0}
  .mm+.mm{padding-left:0;border-top:1px solid var(--line)}
  .mm-link{margin-top:12px}
  .memory-anchor{font-size:17px}
}
/* Names the state before describing it, so a Head reading only the first line
   of this column still knows they are looking at a proposal. */
.mm-state{font-size:13px;font-weight:600;color:var(--sand-ink);margin:0 0 6px}

/* --- Commitments (what followed a decision) -------------------------------
   Was a four-column table. A commitment is a sentence somebody made; the owner
   and the date are its metadata, not peer columns. */
.commitments{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px}
.commitments>li{max-width:62em}
.cm-title{font-size:15.5px;line-height:1.5;margin:0 0 3px;color:var(--ink)}
.cm-meta{font-size:13px;color:var(--ink-soft);margin:0}
.cm-state{color:var(--ink-2)}
.cm-overdue,.cm-needs-review,.cm-needs-verification,.cm-needs-date{color:var(--rose)}
.cm-completed{color:var(--sage)}
/* A match is reassurance, not an alert. It gets a sentence, not a green band. */
.process-match{font-size:14px;color:var(--ink-soft);margin:14px 0 0}

.mm-evidence-list .mm-meta{display:block;margin-top:3px;line-height:1.45}

/* ---------- Status review on Priority detail (the card's destination) -------
   Home consolidates several confirmations into one calm request; this is the
   page it lands on, so each confirmation must still read — and act — as its
   own. Warm attention tint, one hairline, no boxes inside boxes. */
.statrev{margin-top:var(--s6)}
.sr{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;
  padding:16px 18px;margin-top:12px;background:var(--watch-bg);
  border:1px solid var(--watch-line);border-left:2px solid var(--watch);
  border-radius:var(--radius-sm)}
.sr-kind{font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;
  color:var(--watch)}
.sr-title{font-size:var(--t-title);font-weight:600;margin-top:2px;min-width:0;
  overflow-wrap:anywhere}
.sr-ask{margin-top:5px;font-size:var(--t-body);color:var(--ink-2);max-width:70ch}
.sr-meta{margin-top:4px;font-size:var(--t-meta);color:var(--ink-soft)}
.sr-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sr-form .inp{min-width:190px}
@media (max-width:720px){
  .sr{grid-template-columns:1fr;align-items:start;gap:12px}
  .sr-form{width:100%}
  .sr-form .inp{flex:1 1 100%;min-width:0}
}

/* ======================================================================
   Semantic presentation aliases (design pass §1).

   Four meanings, named once, mapped onto the palette that already exists.
   Colour is always the SECOND signal: every place these are used also
   carries a word, and most carry an icon. The page still reads in
   grayscale, and nothing here is a score, a ratio or a judgement.

     attention / judgment ....... warm gold   (--watch)
     upcoming / scheduled ....... teal-slate  (--info)
     evidence / completed ....... green       (--ok)
     decision / recorded ........ ink-slate   (--ink-soft)
   ====================================================================== */
:root{
  --sem-attention:var(--watch); --sem-attention-bg:var(--watch-bg);
  --sem-attention-line:var(--watch-line);
  --sem-scheduled:var(--info);  --sem-scheduled-bg:var(--info-bg);
  --sem-scheduled-line:var(--info-line);
  --sem-evidence:var(--ok);     --sem-evidence-bg:var(--ok-bg);
  --sem-evidence-line:var(--ok-line);
  --sem-record:var(--ink-soft); --sem-record-bg:var(--paper-2);
  --sem-record-line:var(--line);
}

/* Needs you keeps the warm attention family; the kind label carries it so the
   row itself stays quiet. */
.needs .need-label{color:var(--sem-attention);font-weight:600;
  letter-spacing:.02em}

/* Coming up is scheduled, not urgent: cooler, lighter, and read as a list of
   dates rather than a list of problems. */
.timeline.sched{border-top-color:var(--sem-scheduled-line)}
.timeline.sched li{border-bottom-color:var(--sem-scheduled-line);
  align-items:start}
.timeline.sched .tl-date{color:var(--sem-scheduled)}
.timeline.sched .tl-kind{color:var(--sem-scheduled)}
.tl-title{display:block;font-size:15px;line-height:1.4;margin-top:1px;
  min-width:0;overflow-wrap:anywhere}
/* The focus is context on its own line. It used to be a bordered pill cut at
   28 characters, which at narrow widths said "Strengthen MYP unit plannin…". */
.tl-area{display:block;border:0;padding:0;margin:3px 0 0;
  font-size:12.5px;line-height:1.35;color:var(--ink-soft);
  min-width:0;overflow-wrap:anywhere}

/* Movement: the timeline keeps the width it needs; the counts sit beside it. */
.mvt-cols{display:grid;grid-template-columns:1fr 232px;
  gap:clamp(24px,3vw,44px);align-items:start}
.mvt-main{min-width:0}
.mvt-rail{position:sticky;top:18px;padding:14px 16px;
  background:var(--paper-2);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm)}
.mvt-sum-h{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-soft);font-weight:600;font-family:"Source Sans 3"}
.mvt-sum{margin:10px 0 0}
.mvt-sum-row{display:grid;grid-template-columns:1fr auto;gap:10px;
  align-items:baseline;padding:7px 0 7px 9px;
  border-left:2px solid var(--sem-record-line)}
.mvt-sum-row+.mvt-sum-row{border-top:1px solid var(--line-soft)}
.mvt-sum-row dt{font-size:13px;color:var(--ink-2);min-width:0;
  overflow-wrap:anywhere}
.mvt-sum-row dd{font-variant-numeric:tabular-nums;font-size:17px;font-weight:600}
.mvt-sum-row.sem-decision{border-left-color:var(--sem-record)}
.mvt-sum-row.sem-evidence{border-left-color:var(--sem-evidence)}
.mvt-sum-row.sem-action{border-left-color:var(--sem-evidence)}
.mvt-sum-row.sem-milestone{border-left-color:var(--sem-scheduled)}
.mvt-sum-note{margin-top:9px;font-size:12px;color:var(--ink-faint)}

/* Month headings become a real division of the year, not a faint eyebrow. */
.mt-month{font-size:12.5px;letter-spacing:.1em;color:var(--ink-2);
  margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.mt-month:first-of-type{margin-top:14px}

/* Event kinds, carried by the accent AND the label above the title. */
.mev-decision{border-left-color:var(--sem-record)}
.mev-evidence{border-left-color:var(--sem-evidence)}
.mev-action{border-left-color:var(--sem-evidence)}
.mev-milestone{border-left-color:var(--sem-scheduled)}
.mev-decision .mev-label{color:var(--sem-record)}
.mev-evidence .mev-label,.mev-action .mev-label{color:var(--sem-evidence)}
.mev-milestone .mev-label{color:var(--sem-scheduled)}
.mev-when{font-variant-numeric:tabular-nums}

@media (max-width:860px){
  /* One column, and the counts come first: a summary after a long list is a
     summary nobody reads. Source order is timeline-then-rail because that is
     the desktop layout; `order` moves the rail up, and only here. */
  .mvt-cols{grid-template-columns:1fr}
  .mvt-rail{position:static;order:-1}
  .mvt-main{order:1}
}

/* ---------- Meeting intake (design pass §4) --------------------------------
   Three quiet decisions on one form: how to write the notes, who may see the
   record, and whether a document is coming. None of them should shout. */

/* The guide is a question a person can answer, not a filing-cabinet label. */
.guide-callout{background:var(--sem-scheduled-bg);
  border:1px solid var(--sem-scheduled-line);border-radius:var(--radius-sm);
  padding:12px 14px;margin:18px 0}
.guide-callout>summary{list-style:none;cursor:pointer;display:flex;gap:7px;
  flex-wrap:wrap;align-items:baseline;font-size:var(--t-body)}
.guide-callout>summary::-webkit-details-marker{display:none}
.guide-q{color:var(--ink-2)}
.guide-a{color:var(--sem-scheduled);font-weight:600;
  border-bottom:1px solid var(--sem-scheduled-line)}
.guide-callout[open]>summary{margin-bottom:8px}
.guide-callout>summary:focus-visible{outline:2px solid var(--teal);
  outline-offset:3px;border-radius:var(--radius-xs)}

/* Audience: two cards, native radios, the selected one plainly selected. */
.aud-group{border:0;padding:0;margin:22px 0 0}
.aud-group>legend{padding:0;font-size:var(--t-body);font-weight:600}
.aud-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:12px;margin-top:10px}
.aud-card{display:block;position:relative;padding:13px 15px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);transition:border-color var(--speed) ease,
  background var(--speed) ease}
.aud-card:hover{border-color:var(--ink-faint)}
.aud-card input{position:absolute;top:14px;left:15px;margin:0}
.aud-body{display:block;padding-left:26px}
.aud-ico{color:var(--ink-faint);display:inline-block;vertical-align:-2px;
  margin-right:6px}
.aud-name{font-weight:600;font-size:var(--t-body)}
.aud-rec{font-weight:400;color:var(--ink-soft)}
.aud-who{display:block;margin-top:3px;font-size:var(--t-meta);color:var(--ink-2)}
.aud-note{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;
  color:var(--ink-soft)}
.aud-card:has(input:checked){border-color:var(--teal);background:var(--sem-scheduled-bg)}
.aud-card:has(input:checked) .aud-ico{color:var(--teal)}
.aud-card:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}

/* Upload: the native input stays; the panel only names what was chosen. The
   row needs air after the audience cards, and the browser's default button is
   the plainest control on the page unless it is dressed to match. */
.upload-row{margin-top:26px}
.upload{margin-top:6px}
.upload-input::file-selector-button{font:inherit;font-size:13.5px;
  background:var(--paper-2);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--radius-xs);padding:7px 13px;margin-right:11px;
  cursor:pointer}
.upload-input::file-selector-button:hover{border-color:var(--ink-soft)}
.upload-hint{margin-top:6px}
.upload-chosen{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:9px;padding:8px 11px;background:var(--paper-2);
  border:1px solid var(--line-soft);border-radius:var(--radius-xs)}
.upload-name{font-size:var(--t-meta);word-break:break-all;min-width:0}
.btn-quiet{background:transparent;border:1px solid var(--line);
  color:var(--ink-2);padding:4px 10px;font-size:12.5px}
.btn-quiet:hover{border-color:var(--ink-soft)}

/* ---------- Unconfirmed review: a calm ending, and a way out (§5) ---------- */
.nothing-found{margin-top:22px;padding:20px 22px;background:var(--paper-2);
  border:1px solid var(--line-soft);border-left:2px solid var(--sem-record);
  border-radius:var(--radius-sm)}
.nothing-found h2{font-size:21px;line-height:1.3}
.nothing-found p{margin-top:8px;font-size:var(--t-body);color:var(--ink-2);
  max-width:70ch}
.nf-src{margin-top:10px;font-size:var(--t-meta);color:var(--ink-soft)}
.nf-exits{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.nf-exits form{margin:0}
/* A destructive action must not look like a way forward. */
.btn-danger-quiet{background:transparent;border:1px solid var(--risk-line);
  color:var(--risk);padding:7px 12px;font-size:13px}
.btn-danger-quiet:hover{border-color:var(--risk);background:var(--risk-bg)}
.capture-exit{margin-top:18px;padding-top:12px;border-top:1px solid var(--line-soft);
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.capture-exit .t-meta{color:var(--ink-soft)}

@media (max-width:560px){
  .aud-cards{grid-template-columns:1fr}
  .nf-exits{flex-direction:column;align-items:stretch}
  .nf-exits .btn{width:100%}
}

/* ---------- How we operate: role cards (design pass §6) --------------------
   Full-width rows left half the screen empty and gave a role carrying nothing
   the same weight as a role carrying the year. Compact cards, two columns,
   and the facts each on their own labelled line. Nothing here is invented:
   a card only prints a line the records can fill. */
.peoplelist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;margin-top:14px;align-items:start}
.person{padding:15px 17px;background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm)}
.pe-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pe-name{font-size:var(--t-title);font-weight:600;min-width:0;
  overflow-wrap:anywhere}
/* The person under the role, bound from a matching role_title on an active
   user. Quiet by design: the role leads, the name just makes it a person. */
.pe-person{font-size:14px;color:var(--ink-soft);margin-top:2px}
.pe-facts{margin-top:10px}
.pe-fact{display:grid;grid-template-columns:132px 1fr;gap:10px;
  padding:6px 0 6px 9px;border-left:2px solid var(--line);align-items:baseline}
.pe-fact+.pe-fact{border-top:1px solid var(--line-soft)}
.pe-fact dt{font-size:12px;letter-spacing:.02em;color:var(--ink-soft)}
.pe-fact dd{font-size:var(--t-meta);color:var(--ink-2);min-width:0;
  overflow-wrap:anywhere}
.pe-fact dd a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--line)}
/* Ownership, current work and what is coming read differently at a glance —
   and each still says which it is in words. */
.pe-focus{border-left-color:var(--sem-record)}
.pe-work{border-left-color:var(--sem-attention)}
.pe-next{border-left-color:var(--sem-scheduled)}
.pe-rights{border-left-color:var(--line)}
/* --- Person markers, pills and detail-row coding (visual pass) ----------
   Recognition without ranking: the monogram hue is a stable name-tag
   colour derived from the person's name; it says nothing about seniority
   or workload. Colour stays the SECOND signal — every row also carries
   words, and the page still reads in grayscale. */
.person .pe-head{align-items:center}
.pe-mono{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:.04em;border:1px solid}
.pe-mono-team{border-style:dashed;border-radius:12px}
.h0{background:#E7F0F1;color:var(--teal);border-color:#CFE0E2}
.h1{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.h2{background:var(--watch-bg);color:var(--watch);border-color:var(--watch-line)}
.h3{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.h4{background:#F5F1E4;color:#6E5F2E;border-color:#E4DCC2}
.h5{background:var(--paper-2);color:var(--ink-soft);border-color:var(--line)}
/* Decision rights read as quiet tags — one glance, one right per pill.
   The pills hug their text (flex, not grid) and take the person's own
   monogram tint: colour says WHOSE, never how important. */
.pe-rights-list{display:flex;flex-wrap:wrap;margin-top:6px;gap:6px}
.pe-rights-list li{flex:0 0 auto;background:var(--paper-2);
  border:1px solid var(--line);color:var(--ink-2);border-radius:999px;
  padding:3.5px 12px;font-size:13.5px;font-weight:500;line-height:1.4}
.pe-rights-list.h0 li{background:#E7F0F1;border-color:#CFE0E2;color:var(--teal)}
.pe-rights-list.h1 li{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.pe-rights-list.h2 li{background:var(--watch-bg);border-color:var(--watch-line);color:var(--watch)}
.pe-rights-list.h3 li{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}
.pe-rights-list.h4 li{background:#F5F1E4;border-color:#E4DCC2;color:#6E5F2E}
.pe-rights-list.h5 li{background:var(--paper-2);border-color:var(--line);color:var(--ink-soft)}
/* The detail rows keep the same colour meanings the card facts use. */
.pe-detail .fd{border-left:3px solid var(--line);padding-left:12px}
.pe-detail .fd-focus{border-left-color:var(--sem-record)}
.pe-detail .fd-carry{border-left-color:var(--sem-attention)}
.pe-detail .fd-done{border-left-color:var(--sem-evidence)}
.pe-detail .fd-rights{border-left-color:var(--ink-soft)}
.pe-detail .fd-consult{border-left-color:var(--line)}
.pe-detail .fd-next{border-left-color:var(--sem-scheduled)}
/* An empty row is visibly quieter than a full one — absence, not content. */
.pe-detail .fd .muted{font-style:italic}
.pe-when{color:var(--sem-scheduled);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.pe-more{margin-top:11px}

/* An open profile takes the full grid width: long content in a narrow column
   is how a compact card stops being compact. */
.person:has(.pe-more[open]){grid-column:1 / -1}

/* Roles the agreement names that carry nothing right now: present, quiet, and
   never a full row containing only a dash. */
.other-roles{margin-top:18px;padding:12px 15px;background:var(--paper-2);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
.other-roles>summary{cursor:pointer;font-size:var(--t-body)}
.other-roles>summary:focus-visible{outline:2px solid var(--teal);
  outline-offset:3px;border-radius:var(--radius-xs)}
.other-body{margin-top:10px}
.other-list{list-style:none;margin:10px 0 0;padding:0}
.other-list li{padding:7px 0;border-top:1px solid var(--line-soft);
  display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.other-name{font-weight:600;font-size:var(--t-meta)}
.other-note{font-size:12.5px;color:var(--ink-soft)}

@media (max-width:720px){
  .peoplelist{grid-template-columns:1fr}
  .pe-fact{grid-template-columns:1fr;gap:1px;padding-left:9px}
}
@media print{
  .peoplelist{grid-template-columns:1fr 1fr}
  .other-roles{border:0;background:transparent;padding:0}
  .other-body{display:block}
}

/* ---------- One door into Shared sources (coherence pass) ------------------
   The workflow already existed and nothing linked to it. These are quiet
   text links beside the page's own controls, never a second upload form. */
.src-link{font-size:var(--t-meta);color:var(--teal);text-decoration:none;
  border-bottom:1px solid var(--sem-scheduled-line);padding-bottom:1px;
  white-space:nowrap}
.src-link:hover{border-color:var(--teal)}
.viewswitch-row{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
  justify-content:space-between}
.src-map{margin-top:26px;padding:14px 16px;background:var(--paper-2);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
.src-map-list{list-style:none;margin:8px 0 0;padding:0}
.src-map-list li{font-size:var(--t-meta);color:var(--ink-2);padding:4px 0 4px 9px;
  border-left:2px solid var(--line)}
.src-map-note{margin-top:8px;font-size:12.5px;color:var(--ink-soft)}
@media (max-width:560px){ .src-link{white-space:normal} }

/* ---------- Clock: two views of one set of records ------------------------ */
.clockview{display:flex;gap:2px;background:var(--paper-2);border-radius:999px;
  padding:3px;border:1px solid var(--line-soft)}
.cv{font-size:12.5px;padding:5px 13px;border-radius:999px;color:var(--ink-soft);
  text-decoration:none;white-space:nowrap}
.cv.on{background:var(--card);color:var(--ink);font-weight:600;
  box-shadow:0 1px 2px rgba(23,42,38,.06)}
.cv:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.year-top{flex-wrap:wrap;gap:12px}
.clock-reviews{margin-top:var(--s6)}
/* An empty period is a fact about the year, not a panel about itself. */
.per-empty{font-size:var(--t-meta);color:var(--ink-faint);padding:2px 0 4px}
.ce-src{font-size:12px;color:var(--ink-faint);margin-top:2px}
@media (max-width:560px){
  .clockview{align-self:flex-start}
}

/* ---------- How we operate · Priorities: the People vocabulary ------------- */
.pri-card>summary{list-style:none;cursor:pointer}
.pri-card>summary::-webkit-details-marker{display:none}
.pri-card>summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;
  border-radius:var(--radius-xs)}
.pri-card .pe-head{display:flex;gap:10px;align-items:baseline}
.pri-card .accent-num{font-size:15px}
.pri-sum{display:block;margin-top:10px}
.pri-sum-i{display:grid;grid-template-columns:150px 1fr;gap:10px;
  align-items:baseline;padding:6px 0 6px 9px;border-left:2px solid var(--line);
  font-size:var(--t-meta);color:var(--ink-2)}
.pri-sum-i+.pri-sum-i{border-top:1px solid var(--line-soft)}
.pri-sum-i:nth-child(1){border-left-color:var(--sem-record)}
.pri-sum-i:nth-child(2){border-left-color:var(--sem-record)}
.pri-sum-i:nth-child(3){border-left-color:var(--sem-evidence)}
.pri-sum-i:nth-child(4){border-left-color:var(--sem-scheduled)}
.pri-k{font-size:12px;letter-spacing:.02em;color:var(--ink-soft)}
.pri-body{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
  display:grid;gap:10px}
.pri-open{margin-top:4px;font-size:var(--t-meta)}
.person:has(.pri-card[open]){grid-column:1 / -1}
@media (max-width:720px){
  .pri-sum-i{grid-template-columns:1fr;gap:1px}
}

/* An agreed milestone can be corrected by the person who agreed it. */
.ms-edit{margin-left:9px;font-size:12px;color:var(--teal);text-decoration:none;
  border-bottom:1px solid var(--sem-scheduled-line)}
.ms-src{font-size:12px;color:var(--ink-faint);margin-top:2px}

/* Two quiet text links in one header run read as one phrase without a mark
   between them. The separator is decoration, so it is hidden from assistive
   technology. */
.util-sep{color:var(--ink-soft);font-size:var(--t-meta)}

/* ---------------------------------------------------------------------------
   Current research context — the same panel wherever a leader is looking at a
   proposed decision. Same row grammar as the decision card (.imp-row), so the
   two never read as two different products. It is context, not a verdict:
   quiet surface, no accent bar, no state colour.
   ------------------------------------------------------------------------- */
.rescx{margin-top:22px;padding:18px 20px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--paper-2);max-width:76ch}
.rescx-h{font-family:var(--serif);font-size:19px;font-weight:500;margin:0;
  color:var(--ink)}
.rescx-lede{margin:6px 0 4px;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  max-width:62ch}
.rescx-row{display:grid;grid-template-columns:170px 1fr;gap:12px;
  padding:11px 0;border-top:1px solid var(--line-soft);align-items:baseline}
.rescx-k{font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:2px}
.rescx-v{font-size:15px;line-height:1.55;color:var(--ink);margin:0}
.rescx-v .t-meta{display:block;margin-top:3px}
.rescx-ev{margin:0 0 8px}.rescx-ev:last-child{margin-bottom:0}
.rescx-nomatch{margin:0;color:var(--ink-2);font-style:italic}
.rescx-lim,.rescx-q{margin:0;padding-left:18px}
.rescx-lim li,.rescx-q li{margin-bottom:5px}
.rescx-lim li:last-child,.rescx-q li:last-child{margin-bottom:0}
.rescx-judge .rescx-v{color:var(--ink-2)}
.rescx .footnote{margin:12px 0 0}

/* The ask itself stays subordinate to "Record decision" — a quiet button and a
   sentence saying it costs nothing. */
.rescx-ask{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.rescx-ask-note{font-size:12.5px;color:var(--ink-soft);max-width:54ch}
.rescx-problem{margin-top:16px;font-size:14px;color:var(--ink-2)}

@media (max-width:640px){
  .rescx{padding:16px}
  .rescx-row{grid-template-columns:1fr;gap:3px;padding:10px 0}
}

/* "Current research context available" — a review screen is about what the
   meeting contained, so this stays shut and stays quiet, and never shares a
   line with "Why this?". */
.rescx-avail{margin-top:10px;border-top:1px solid var(--line-soft);padding-top:8px}
.rescx-avail>summary{cursor:pointer;list-style:none;font-size:12.5px;
  color:var(--teal);padding:2px 0}
.rescx-avail>summary::-webkit-details-marker{display:none}
.rescx-avail>summary::before{content:"› ";color:var(--ink-soft)}
.rescx-avail[open]>summary::before{content:"⌄ "}
.rescx-avail>summary:hover{color:var(--ink-2)}
.rescx-avail .rescx{margin-top:10px}

/* The dynamic-retrieval caption inside the decision card: a label and a meta
   line, no value — it says what the rows below are, not what they conclude. */
.imp-dyn .imp-val{color:var(--ink-soft)}
.imp-dyn .t-meta{margin-top:0}

/* The full period, inside the disclosure that already existed: the same rows
   without the month headings or the node rail, so it reads as a list rather
   than competing with the preview above it. */
.mmonth-all{margin:6px 0 18px}
.mmonth-all .mev{grid-template-columns:56px 1fr}

/* A recorded fact in the priority hero: the same restraint the signal had, with
   nothing to interpret. */
.pri-fact{font-weight:600;color:var(--ink-2)}

/* Ownership in the pathway: two labelled lines, never badges. The label is
   what distinguishes the two jobs, so it leads and the role follows. */
.pw-own{display:block;font-size:14.5px;line-height:1.45;color:var(--ink)}
.pw-own+.pw-own{margin-top:5px}
.pw-ownk{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--ink-faint)}

/* The structure beneath a priority: one quiet disclosure, one line per
   outcome. It says a priority has strands and who carries them — the complete
   record is a link away. */
.pri-structure{margin-top:14px}
.pri-structure>summary{cursor:pointer;list-style:none;font-size:13px;
  color:var(--teal);padding:6px 0}
.pri-structure>summary::-webkit-details-marker{display:none}
.pri-structure>summary:hover{color:var(--ink-2)}
.ostruct{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line-soft)}
.ostruct-i{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.ostruct-t{display:block;font-size:15px;color:var(--ink);line-height:1.4}
.ostruct-m{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-soft);
  line-height:1.6}
.pri-structure .footnote{margin:10px 0 0}

/* Manage strategy: a quiet editing workspace, not an admin panel. No table, no
   row of buttons, no status colour — one card per priority, reading in the
   same order the Strategy page does. */
.mgp{max-width:860px}
.mgp-t{font-family:"Fraunces",Georgia,serif;font-weight:520;font-size:21px;
  line-height:1.25;margin:2px 0 0}
.mgp-d{margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.55;max-width:60ch}
.mgp-own{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 34px}
.mgp-own dt{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--ink-faint)}
.mgp-own dd{margin:2px 0 0;font-size:15px;color:var(--ink)}
.mgp-empty{color:var(--ink-soft);font-size:14px}
.mgp-owner{margin-top:12px;font-size:14.5px;color:var(--ink)}
.mgp-k{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--ink-faint)}
.mgp-note{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.mgp-out{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft)}
.mgp-h{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--ink-faint);margin-bottom:6px}
.mgo{list-style:none;margin:0;padding:0}
.mgo-i{padding:9px 0;border-bottom:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.mgo-t{flex:1 1 260px;font-size:15px;color:var(--ink);line-height:1.4}
.mgo-m{font-size:12.5px;color:var(--ink-soft)}
.mgo-e{font-size:13px;color:var(--teal)}
.mgp-ms{margin-top:10px}
.mgp-a{margin-top:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.mgp-classify{padding-top:14px;border-top:1px solid var(--line-soft)}
@media (max-width:640px){
  .mgp-own{gap:10px 22px}
  /* Stacked, the title's flex-basis would become a HEIGHT and open a hole
     between an outcome and its own status line. */
  .mgo-i{flex-direction:column;gap:2px}
  .mgo-t{flex:0 1 auto}
}

/* ===========================================================================
   THE LEADERSHIP BRIEF  ·  an authored document, not a dashboard
   ---------------------------------------------------------------------------
   Everything here is scoped under .brief-page so no other surface can inherit
   it. The register is a typeset memo: one measure, generous leading, hairlines
   instead of boxes, and colour used only where it carries meaning.

   Type roles are the ones the product already owns — Fraunces for anything
   that speaks, Source Sans 3 for anything that reports. No new families, so
   nothing new to download and nothing to fall back from.
   ======================================================================== */
/* Contrast, measured rather than intended. Walking every text style on this
   page found one failure and it was systemic: --ink-faint, which fourteen
   tertiary styles here use — .bp-since, .bp-meta, .bp-by, .bp-when, .bp-month,
   .bp-evk, .bp-evm, .bp-foot, .ev-cue, .ev-k, .ev-w, .ev-ctx, the footer and the
   tools legend. The token itself now clears AA app-wide, so there is nothing to
   override here; the step down from --ink-soft is smaller than it was, which is
   the real cost of AA at 10–13px and is affordable on this page because its
   hierarchy is carried by size, weight and capitals before it is carried by
   tone.

   --bp-cue-line is the underline under an openable claim — the only thing that
   says "this opens". As --line it read 1.20:1, below the 3:1 that WCAG 1.4.11
   asks of a control's visual indicator. #8C8980 reads 3.18:1 and still sits
   back as a hairline rather than coming forward as a link. */
.brief-page{--bp-measure:66ch;--bp-cue-line:#8C8980}
.bp{max-width:var(--bp-measure);margin:0 auto;padding:0 0 64px}
.bp-back{max-width:var(--bp-measure);margin:0 auto 18px}

/* --- letterhead: quiet, confident, no logo bigger than a wordmark -------- */
.bp-head{padding:36px 0 0;text-align:center}
.bp-school{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft)}
.bp-title{font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-weight:400;font-size:clamp(34px,6vw,46px);
  line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:14px 0 0;text-wrap:balance}
.bp-period{font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-style:italic;font-size:19px;
  color:var(--ink-2);margin:8px 0 0}
.bp-rule{height:1px;background:var(--line);margin:26px auto 0;max-width:120px}
.bp-meta{font-size:12.5px;color:var(--ink-faint);margin:16px 0 0;line-height:1.7}
.bp-by{display:block;font-style:italic}
.bp-note{font-size:13.5px;color:var(--ink-soft);border-left:2px solid var(--line);
  padding-left:14px;margin:30px 0 0;max-width:60ch}

/* --- sections: separated by air and one hairline, never by a card ------- */
.bp-sec{margin-top:52px}
.bp-h{font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-weight:500;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 22px;padding-bottom:9px;border-bottom:1px solid var(--line)}

/* --- a claim: the sentence leads, its reading follows ------------------- */
.bp-claim{margin:0 0 26px}
.bp-ct{font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-weight:480;font-size:20px;
  line-height:1.35;color:var(--ink);margin:0 0 5px;text-wrap:pretty}
.bp-cl{font-size:14.5px;color:var(--ink-soft);margin:0;line-height:1.6}
.bp-kind{font-family:"Source Sans 3","Source Sans 3 Fallback",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--watch);
  display:block;margin-bottom:3px}

/* Status: the word, and nothing else. This surface ruled out coloured verdict
   indicators — a dot beside a priority is a grade a leader did not ask for.
   The word carries the meaning; weight and one accent tone carry the urgency.
   "steady" and "quiet" stay plain, because a reader should not have to notice
   them at all. */
.bp-state{font-family:"Source Sans 3","Source Sans 3 Fallback",sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  margin-right:9px;vertical-align:2px}
.bp-attention{font-weight:700;color:var(--watch)}
.bp-steady,.bp-quiet{font-weight:500;color:var(--ink-faint)}

/* --- the evidence reveal: lifting a layer, in place --------------------- */
.ev{margin:0}
.ev-s{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;padding:1px 0;border-radius:2px}
.ev-s::-webkit-details-marker{display:none}
.ev-claim{font-size:14.5px;color:var(--ink-soft);line-height:1.6;
  border-bottom:1px solid var(--bp-cue-line);transition:border-color 140ms ease}
.ev-cue{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);opacity:0;transition:opacity 140ms ease;flex:none}
.ev-s:hover .ev-claim,.ev[open] .ev-claim{border-bottom-color:var(--teal)}
.ev-s:hover .ev-cue,.ev[open] .ev-cue,.ev-s:focus-visible .ev-cue{opacity:1}
.ev-s:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* The reveal: <details> gives the height instantly and correctly, and the
   motion is a short fade-and-rise on the content itself. Animating height
   here meant either measuring it in JS (which raced the first paint) or
   sizing a grid row inside <details> (which resolved against the wrong box).
   Both were fragile for 150ms of easing that this achieves outright. */
.ev-body{overflow:hidden}
.ev-inner{padding:14px 0 2px 18px;margin-top:10px;
  border-left:1px solid var(--line)}
/* No fill-mode: if the animation never runs the content is simply visible.
   `both` would hold the from-state and leave the evidence at opacity 0. */
.ev[open] .ev-inner{animation:ev-rise 160ms cubic-bezier(.22,.61,.36,1)}
@keyframes ev-rise{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}}
.ev-list{list-style:none;margin:0;padding:0}
.ev-row{display:grid;grid-template-columns:74px 1fr auto;gap:4px 12px;
  padding:7px 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-bottom:1px solid var(--line-soft)}
.ev-row:last-child{border-bottom:0}
/* A row in the attention section carries only its sentence — no record kind and
   no date — so it landed in the 74px column meant for the kind and wrapped into
   a ribbon one or two words wide. A lone sentence takes the whole row. */
.ev-row > .ev-t:only-child{grid-column:1 / -1}
.ev-k{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:3px}
.ev-w{font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ev-late .ev-w{color:var(--watch);font-weight:600}
.ev-ctx{font-size:12.5px;color:var(--ink-faint);margin:10px 0 0;font-style:italic}
@media (prefers-reduced-motion:reduce){.ev[open] .ev-inner{animation:none}}


/* --- movement and what is coming: a dated column ------------------------ */
.bp-month{font-family:"Source Sans 3","Source Sans 3 Fallback",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  margin:24px 0 8px}
.bp-mov{list-style:none;margin:0;padding:0}
.bp-ev{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--line-soft);align-items:baseline}
.bp-ev:last-child{border-bottom:0}
.bp-when{font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-faint);
  white-space:nowrap}
.bp-what{font-size:15px;line-height:1.5;color:var(--ink)}
.bp-evk{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px}
.bp-evm{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.bp-foot,.bp-empty{font-size:13px;color:var(--ink-faint);line-height:1.65;
  margin:16px 0 0;max-width:58ch}
.bp-empty{font-style:italic}

/* --- the ending: one observation, set apart ----------------------------- */
.bp-close{margin:56px 0 0;padding:26px 0 0;border-top:1px solid var(--line);
  text-align:center}
.bp-close p{font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-style:italic;font-weight:400;
  font-size:19px;line-height:1.6;color:var(--ink-2);margin:0 auto;max-width:52ch;
  text-wrap:pretty}
.bp-end{margin-top:56px;padding-top:14px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-faint)}

/* --- the working controls, deliberately outside the document ------------ */
.bp-tools{max-width:var(--bp-measure);margin:64px auto 0;padding-top:26px;
  border-top:1px dashed var(--line)}
.bp-tools legend{font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.bp-tools fieldset{border:0;padding:0;margin:0 0 22px}
.bp-save{margin-top:8px}
.bp-print{margin-top:18px}

@media (max-width:620px){
  .bp-head{padding-top:22px}
  .bp-sec{margin-top:40px}
  .bp-ev{grid-template-columns:1fr;gap:2px}
  .bp-when{font-size:12px}
  .ev-row{grid-template-columns:1fr;gap:1px}
  .ev-w{white-space:normal}
  .ev-inner{padding-left:13px}
}

/* --- print: this is the format Heads actually forward ------------------- */
@media print{
  .brief-page .bp{max-width:none;padding:0}
  .bp-head{padding-top:0}
  .bp-title{font-size:30pt}
  .bp-period{font-size:13pt}
  /* A break must never leave a heading stranded at the foot of a page. Three
     things can sit between a heading and its first item — the heading itself,
     the "current, not historical" note, and a month label — so all three carry
     break-after:avoid, and the items themselves stay whole. Verified by
     printing the 8-priority stress brief and reading each page boundary. */
  .bp-h,.bp-since,.bp-month{break-after:avoid}
  .bp-h{font-size:9pt}
  .bp-ct{font-size:13pt;break-after:avoid}
  .bp-claim,.bp-ev,.ev-row{break-inside:avoid}
  .bp-sec{margin-top:26pt;break-inside:auto}
  .bp-close{break-inside:avoid}
  .bp-note,.bp-foot,.bp-empty,.bp-first,.bp-cl{orphans:2;widows:2}
  /* Paper has no interaction, so every reveal has to print open — otherwise a
     forwarded brief is a page of claims with the records stripped out. Chrome
     hides collapsed content with content-visibility on ::details-content;
     older engines hid the children directly. Both are answered here, and the
     rule stays intact so the evidence still reads as subordinate. */
  .ev::details-content{content-visibility:visible !important;
    block-size:auto !important;overflow:visible !important}
  .ev:not([open]) > .ev-body{display:block !important}
  .ev-inner{animation:none !important}
  .ev-cue{display:none}
  .ev-claim{border-bottom:0}
  .bp-tools,.bp-back{display:none !important}
  .bp-end{border-top:1px solid #ccc}
}
/* Closing: hold the panel open for one transition, then let details close. */
/* "current, not historical" — the sections that describe today rather than the
   period. Small enough to skim past, present enough that nobody mistakes a
   live reading for history. */
.bp-since{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);margin:-14px 0 20px}
/* A first edition. Same weight as an empty state, different meaning: nothing
   is missing, there is simply nothing earlier to compare against. */
.bp-first{font-size:13.5px;color:var(--ink-soft);line-height:1.65;
  margin:14px 0 0;max-width:58ch;font-style:italic}

/* ======================================================================
   Shared sources — where a page sits, and where it goes back to.
   A source page is three steps down from Home and every step is a real
   link, so the way out is the same on the review screen, on a reading
   that found nothing and on one that failed.
   ====================================================================== */
.crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
  font-size:13px;color:var(--ink-soft);margin:0 0 4px}
.crumbs a{color:var(--ink-soft);text-decoration:none;font-weight:600;
  border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--line)}
.crumb-sep{color:var(--ink-faint)}
/* The page you are on is named, not linked: a link to here is a dead end. */
.crumb-here{color:var(--ink-2);font-weight:600;max-width:38ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* The school's name in an eyebrow is the other way home, and reads as one. */
.eyebrow-home{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.eyebrow-home:hover{border-bottom-color:currentColor}

/* Each outcome carries its own actions rather than sharing one row at the
   foot of the page: what to do next depends on what happened. */
.state-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:14px}
.state-actions form{margin:0}
@media (max-width:560px){
  .state-actions{flex-direction:column;align-items:stretch}
  .state-actions .btn,.state-actions form,.state-actions button{width:100%}
  .crumb-here{max-width:100%}
}


/* Shared-source upload: native first, progressively enhanced. The file input
   remains visible until script has attached every interaction. */
.share-main,.share-recent{min-width:0}
.share-upload{min-width:0}
.share-drop{
  display:block;border:1px dashed var(--ink-soft);border-radius:12px;
  padding:20px;text-align:center;background:var(--paper-2);cursor:pointer;
  transition:border-color .15s ease,background .15s ease
}
.share-drop:hover,.share-drop:focus-visible,.share-upload.is-dragging .share-drop{
  border-color:var(--teal);background:var(--info-bg);outline:0
}
.share-drop:focus-visible{box-shadow:0 0 0 3px rgba(23,114,127,.2)}
.share-drop-title{display:block;font-weight:650;color:var(--ink)}
.share-choose{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.share-drop-note{display:block;margin-top:5px;color:var(--ink-soft);font-size:13px}
.share-native{display:block;max-width:100%;margin-top:10px;color:var(--ink)}
.share-upload.is-enhanced .share-native{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.share-picked{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:10px;padding:12px 14px;border:1px solid var(--ok-line);
  border-radius:10px;background:var(--ok-bg)
}
.share-picked[hidden]{display:none}
.share-picked-copy{min-width:0;overflow-wrap:anywhere}
.share-picked-size{color:var(--ink-soft)}
.share-ready{display:block;margin-top:3px;color:var(--ok);font-size:13px;font-weight:650}
.share-picked-actions{display:flex;gap:7px;flex:0 0 auto}
.share-type{width:100%;max-width:100%}
.source-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.source-table{min-width:680px}
.source-group {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
}
.source-group-header {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--paper-2);
  border-bottom: 1px solid transparent;
  font-size: var(--t-title);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 520;
  transition: background var(--speed) ease;
}
.source-group-header::-webkit-details-marker { display: none; }
.source-group-header:hover { background: var(--line-soft); }
.source-group[open] > .source-group-header { border-bottom-color: var(--line); }
.source-group-name { color: var(--ink); }
.source-group-count {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}
.source-group > .table-wrap {
  border-radius: 0;
  border: 0;
}
.source-group .source-table { width: 100%; }
.addmenu-body a{
  border-radius:8px;transition:background .15s ease,box-shadow .15s ease
}
.addmenu-body a:hover,.addmenu-body a:focus-visible{
  background:var(--paper-2);outline:0;box-shadow:inset 3px 0 0 var(--teal)
}
.add-title{display:block;font-weight:650;color:var(--ink)}
@media(max-width:640px){
  .topbar .row{min-width:0}
  .topbar .brand{flex:0 0 auto}
  .topbar nav{flex:1 1 auto;min-width:0;max-width:100%}
  .share-picked{align-items:flex-start;flex-direction:column}
  .share-picked-actions{width:100%;flex-wrap:wrap}
  .share-picked-actions .btn{flex:1 1 auto}
}

/* ---------- Partner-login auth pages ----------
   Nordic Education Academy palette: warm cream paper, dark navy ink,
   Fraunces for display, Inter for body. Scoped to .auth-page so the rest of
   the app keeps its existing design system. */

.wrap.auth-page{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:10vh 20px 8vh;
  background:#faf8f4;
  color:#16213a;
  font-family:"Inter", "Source Sans 3", sans-serif;
}

.auth-card{
  width:100%;
  max-width:420px;
  background:#ffffff;
  border-radius:var(--radius);
  box-shadow:0 2px 4px rgba(22,33,58,.04), 0 18px 48px rgba(22,33,58,.08);
  padding:var(--s6) var(--s5);
}

.auth-header{
  margin-bottom:var(--s5);
}

.auth-eyebrow{
  font-size:var(--t-meta);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#5a6b66;
  margin-bottom:var(--s2);
}

.auth-title{
  font-family:"Fraunces", Georgia, serif;
  font-size:var(--t-display);
  font-weight:500;
  line-height:1.15;
  color:#16213a;
  margin:0 0 var(--s2);
}

.auth-sub{
  font-size:var(--t-body);
  color:#5a6b66;
  margin:0;
  line-height:1.5;
}

.auth-form .form-row{
  margin-bottom:var(--s4);
}

.auth-form label{
  display:block;
  font-size:var(--t-meta);
  font-weight:600;
  color:#16213a;
  margin-bottom:var(--s1);
}

.auth-form input[type="text"],
.auth-form input[type="email"]{
  width:100%;
  padding:11px 14px;
  font-size:var(--t-body);
  color:#16213a;
  background:#ffffff;
  border:1px solid #e5e1d5;
  border-radius:var(--radius-sm);
  font-family:"Inter", "Source Sans 3", sans-serif;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.auth-form input:focus{
  outline:0;
  border-color:#16213a;
  box-shadow:0 0 0 3px rgba(22,33,58,.08);
}

.field-error{
  display:block;
  margin-top:var(--s1);
  font-size:var(--t-meta);
  color:#82504b;
}

.auth-submit{
  width:100%;
  justify-content:center;
  padding:13px 20px;
  margin-top:var(--s2);
  background:#16213a;
  color:#ffffff;
  border:0;
  border-radius:var(--radius-sm);
  font-family:"Inter", "Source Sans 3", sans-serif;
  font-size:var(--t-body);
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}

.auth-submit:hover,
.auth-submit:focus-visible{
  background:#1f2d4d;
}

.auth-submit:active{
  transform:translateY(1px);
}

.auth-footnote{
  margin-top:var(--s4);
  font-size:var(--t-meta);
  color:#5a6b66;
  text-align:center;
}

.auth-footnote a{
  color:#16213a;
  text-decoration:underline;
  font-weight:600;
}

.auth-page .notice{
  margin-bottom:var(--s4);
}

@media(max-width:480px){
  .wrap.auth-page{
    padding:6vh 16px;
  }
  .auth-card{
    padding:var(--s5) var(--s4);
  }
}

/* ==============================================================================
   DESIGN PORT — apply the demo's landed visual language to production
   ------------------------------------------------------------------------------
   CSS-only: no markup moves, no wording changes, no URL or view changes.
   Adds demo tokens, Inter/Fraunces scale, boxed nav buttons, paper-card
   surfaces, status words with dots, and a board-paper print stylesheet.
   ============================================================================== */

/* --- demo tokens ---------------------------------------------------------- */
:root{
  --demo-cream:#F6F1E8;
  --demo-white:#FFFFFF;
  --demo-ink:#1B2A4A;
  --demo-ink-soft:#5C6578;
  --demo-border:#E4D9C8;
  --demo-stuck:#9A3B1A;
  --demo-moving:#1B2A4A;
  --demo-achieved:#3D5A4C;
  --demo-radius:8px;
  --demo-page:1160px;
}

/* --- global surfaces + body type ------------------------------------------ */
body{
  background:var(--demo-cream);
  color:var(--demo-ink);
  font-family:Inter,"Source Sans 3","Source Sans 3 Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.wrap{max-width:var(--demo-page)}
a{color:var(--demo-ink)}

/* --- typography scale ----------------------------------------------------- */
h1,.pagehead h1,.t-display{
  font-family:Fraunces,"Fraunces Fallback",Georgia,"Times New Roman",serif;
  font-weight:550;
  font-size:40px;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--demo-ink)}
.hero h2,.dim-name,.attn h3,.card-figure{
  font-family:Fraunces,"Fraunces Fallback",Georgia,"Times New Roman",serif;
  font-weight:550;
  color:var(--demo-ink)}
.hero h2{font-size:24px;line-height:1.3;letter-spacing:-0.01em}
.attn h3{font-size:20px;line-height:1.3}
h2,.section-major,.t-section{
  font-family:Fraunces,"Fraunces Fallback",Georgia,"Times New Roman",serif;
  font-weight:550;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-0.01em;
  text-transform:none;
  color:var(--demo-ink)}
h3{font-family:Fraunces,"Fraunces Fallback",Georgia,"Times New Roman",serif;
  font-weight:550;font-size:20px;line-height:1.3;color:var(--demo-ink)}
.pagehead .eyebrow,.hero .eyebrow,.direction .eyebrow{
  font-family:Inter,"Source Sans 3",sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--demo-ink-soft)}
body,p,li,.t-body{
  font-family:Inter,"Source Sans 3","Source Sans 3 Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  color:var(--demo-ink)}
.t-meta,.footnote,.sub,.synth-src,.baseline,.map-interp,.dim .facts li,
.scard .d,.scard .k,.evlist li,.cu-date,.cu-title,.m-nums i,.m-qual,
.share-copy,.rec,.prop-src,.prop-hint,.guide-prompts li{
  color:var(--demo-ink-soft)}

/* --- topbar nav: boxed buttons on the existing dark chrome ---------------- */
.topbar nav{gap:8px}
.topbar nav a,.topbar nav form button{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border:1px solid var(--demo-border);
  border-radius:var(--demo-radius);
  background:var(--demo-cream);
  color:var(--demo-ink);
  text-decoration:none;
  font-family:Inter,"Source Sans 3",sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1.4}
.topbar nav a:hover,.topbar nav form button:hover{
  background:#EFE8D8;
  color:var(--demo-ink);
  text-decoration:none}
.topbar nav a.current{
  background:var(--demo-ink);
  color:var(--demo-cream);
  border-color:var(--demo-ink)}
.topbar nav a.current::after{display:none}

/* --- account cluster: Log out alone, flush right at the end of the nav ------ */
.topbar nav .acct-cluster{margin-left:auto;display:flex;align-items:center;
  gap:14px}

/* --- paper-card surfaces -------------------------------------------------- */
.scard,.card,.dim,.prop,.sp,.map,.share,.surface,.surface-cream,
.home-panel,.focus-detail-panel,.dec,.attn,.working,.questions,.comingup,
.exec-main,.exec-side,.oc,.needs,.allclear,.notice,.setup-state{
  background:var(--demo-white);
  border:1px solid var(--demo-border);
  border-radius:var(--demo-radius);
  box-shadow:0 1px 2px rgba(27,42,74,.04)}
.hero,.direction{
  background:var(--demo-white);
  color:var(--demo-ink);
  border:1px solid var(--demo-border);
  border-radius:var(--demo-radius);
  box-shadow:0 1px 2px rgba(27,42,74,.04)}
.hero .eyebrow,.direction .eyebrow{color:var(--demo-ink-soft)}
.hero h2,.direction .dir-vision{color:var(--demo-ink)}
.hero .baseline,.hero .synth-src,.direction .idsrc,.direction .valdefs dd,
.direction .valdefs .vbeh{color:var(--demo-ink-soft)}
.summary{gap:16px}
.scard .v{color:var(--demo-ink)}
.scard .k,.scard .d{color:var(--demo-ink-soft)}

/* --- buttons -------------------------------------------------------------- */
.btn,.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--demo-ink);
  color:var(--demo-cream);
  border:1px solid var(--demo-ink);
  border-radius:var(--demo-radius);
  padding:8px 16px;
  font-family:Inter,"Source Sans 3",sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer}
.btn:hover,.btn-primary:hover{
  background:var(--demo-white);
  color:var(--demo-ink);
  border-color:var(--demo-ink)}
.util .btn{background:var(--demo-white);color:var(--demo-ink);border-color:var(--demo-border)}
.util .btn-primary{background:var(--demo-ink);color:var(--demo-cream);border-color:var(--demo-ink)}

/* --- status words with dot ------------------------------------------------ */
.pill,.foc-state,.oc-state,.pri-status,.paper-status,.sig-ok,.sig-risk,.sig-watch,.sig-mute{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  font-family:Inter,"Source Sans 3",sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--demo-ink-soft)}
.pill .g,.foc-state .g,.oc-state .g,.pri-status .g{margin-right:6px}
.pill::before,.foc-state::before,.oc-state::before,.pri-status::before,
.sig-ok::before,.sig-risk::before,.sig-watch::before,.sig-mute::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle}
/* green: moving / on track / achieved / progressing */
.pill.ok,.sig-ok,
.foc-state[data-status="moving"],.foc-state[data-status="progressing"],.foc-state[data-status="achieved"],
.pri-status[data-status="moving"],.pri-status[data-status="progressing"],.pri-status[data-status="achieved"],
.oc-state[data-status="moving"],.oc-state[data-status="progressing"],.oc-state[data-status="achieved"]{
  color:var(--demo-achieved)}
.pill.ok::before,.sig-ok::before,
.foc-state[data-status="moving"]::before,.foc-state[data-status="progressing"]::before,.foc-state[data-status="achieved"]::before,
.pri-status[data-status="moving"]::before,.pri-status[data-status="progressing"]::before,.pri-status[data-status="achieved"]::before,
.oc-state[data-status="moving"]::before,.oc-state[data-status="progressing"]::before,.oc-state[data-status="achieved"]::before{
  background:var(--demo-achieved)}
/* rust: stuck / blocked / risk / overdue / concern */
.pill.risk,.sig-risk,
.foc-state[data-status="stuck"],.foc-state[data-status="blocked"],
.pri-status[data-status="stuck"],.pri-status[data-status="blocked"],
.oc-state[data-status="stuck"],.oc-state[data-status="blocked"]{
  color:var(--demo-stuck)}
.pill.risk::before,.sig-risk::before,
.foc-state[data-status="stuck"]::before,.foc-state[data-status="blocked"]::before,
.pri-status[data-status="stuck"]::before,.pri-status[data-status="blocked"]::before,
.oc-state[data-status="stuck"]::before,.oc-state[data-status="blocked"]::before{
  background:var(--demo-stuck)}
/* ink-soft: watch / info / mute / planned / replanned / dropped */
.pill.watch,.pill.info,.pill.mute,.sig-watch,.sig-mute{color:var(--demo-ink-soft)}
.pill.watch::before,.pill.info::before,.pill.mute::before,.sig-watch::before,.sig-mute::before{background:var(--demo-ink-soft)}

/* --- auth pages: unify with demo cream/navy ------------------------------- */
.wrap.auth-page{
  background:var(--demo-cream);
  color:var(--demo-ink);
  font-family:Inter,"Source Sans 3","Source Sans 3 Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.auth-card{
  background:var(--demo-white);
  border:1px solid var(--demo-border);
  border-radius:var(--demo-radius);
  box-shadow:0 1px 2px rgba(27,42,74,.04)}
.auth-eyebrow,.auth-sub,.auth-footnote{color:var(--demo-ink-soft)}
.auth-title{color:var(--demo-ink)}
.auth-form label{color:var(--demo-ink)}
.auth-form input[type="text"],.auth-form input[type="email"]{
  color:var(--demo-ink);
  border-color:var(--demo-border);
  font-family:Inter,"Source Sans 3",sans-serif}
.auth-form input:focus{border-color:var(--demo-ink)}
.auth-submit{
  background:var(--demo-ink);
  color:var(--demo-cream);
  font-family:Inter,"Source Sans 3",sans-serif}
.auth-submit:hover,.auth-submit:focus-visible{background:#2a3d63}
.auth-footnote a{color:var(--demo-ink)}

/* --- print: board-paper brief --------------------------------------------- */
@media print{
  .brief-page .topbar,.brief-page .util,.brief-page .btn,.brief-page .noprint,
  .brief-page .back,.brief-page .action-controls{display:none !important}
  body.brief-page{background:#fff;color:var(--demo-ink)}
  .brief-page .wrap{max-width:none;padding:0}
  .brief-page .pagehead{border-bottom:1px solid var(--demo-border);
    padding-bottom:14px;margin-bottom:26px}
  .brief-page .pagehead h1{font-family:Fraunces,Georgia,serif;font-size:26pt;line-height:1.15}
  .brief-page .pagehead .sub{font-size:12pt;color:var(--demo-ink-soft)}
  .brief-page .hero{background:#fff;border:0;padding:0;margin:0 0 22px;box-shadow:none}
  .brief-page .hero h2{font-family:Fraunces,Georgia,serif;font-size:18pt}
  .brief-page .summary{display:block;gap:0}
  .brief-page .scard{background:#fff;border:0;border-top:1px solid #ddd;
    border-radius:0;box-shadow:none;padding:10px 0;margin:0}
  .brief-page .dec,.brief-page .map-row,.brief-page .attn,.brief-page .working,
  .brief-page .comingup,.brief-page .questions,.brief-page .timeline{
    background:#fff;border:0;box-shadow:none;padding:0;margin:14px 0}
  .brief-page .map,.brief-page .decisions,.brief-page .working,
  .brief-page .comingup,.brief-page .questions{display:block}
  .brief-page section,.brief-page .attn,.brief-page .map-row,
  .brief-page .dec{break-inside:avoid}
  .brief-page .pill{border:1px solid #999;background:#fff;color:var(--demo-ink)}
  .brief-page .foot{border-top:1px solid var(--demo-border);
    padding-top:12px;margin-top:30px;font-size:10pt;color:var(--demo-ink-soft)}
}