/* rectangle.llc — paper is the default edition; html[data-dark] is moon.
   Never routed on prefers-color-scheme: the reader's choice, or paper.
   Every ink/ground pair below was computed to >=4.5:1 before it was written.
   The name is the motif: the test is two rectangles per section, the plan is
   rectangles in proportion, a score range is a rectangle on a scale. */

:root{
  --bg:#FCFBF8; --panel:#F4F2EC; --line:#E4E0D5; --line2:#CFC9B8;
  --ink:#181A14; --ink2:#4C5044; --ink3:#5E6355;
  --acc:#3B5D3A; --onacc:#FFFFFF; --acc2:#8C4A1F; --warn:#8A5A00; --bad:#9B2226;
  --accq:rgba(59,93,58,.10); --warnq:rgba(138,90,0,.10);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:min(1180px,100% - 2.5rem);
}
html[data-dark]{
  --bg:#12140F; --panel:#1A1D16; --line:#2A2E23; --line2:#3B4132;
  --ink:#EEF0E8; --ink2:#AEB4A4; --ink3:#949A8A;
  --acc:#8FC98D; --onacc:#12140F; --acc2:#E0A06A; --warn:#E3B44C; --bad:#FF8A8A;
  --accq:rgba(143,201,141,.12); --warnq:rgba(227,180,76,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--sans);
  font-synthesis-weight:none;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--acc);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.012em;margin:0;text-wrap:balance}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sep{color:var(--ink3);padding:0 .3em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--onacc);padding:.6rem 1rem;z-index:60}
.skip:focus{left:0}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 .7rem}

/* ---- masthead -------------------------------------------------------- */
.mast{border-bottom:1px solid var(--line2);background:var(--bg)}
.mastin{width:var(--wrap);margin:0 auto;padding:.9rem 0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.wordmark{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;
  font-family:var(--serif);font-weight:600;font-size:1.1rem;letter-spacing:-.02em;flex:none}
.wordmark .mk{width:26px;height:19px;stroke:var(--ink);flex:none}
.wordmark .mk .half{fill:var(--acc);stroke:none}
.wordmark i{font-style:normal;color:var(--ink3);font-weight:400}
.mastnav{display:flex;gap:.95rem;flex-wrap:wrap}
.mastnav a{color:var(--ink2);text-decoration:none;font-size:.86rem;font-weight:500;padding:.2rem 0;
  border-bottom:2px solid transparent}
.mastnav a:hover{color:var(--ink);border-bottom-color:var(--acc)}
.mastnow{margin-left:auto;font-size:.82rem;color:var(--ink3);flex:none}
.mastnow b{color:var(--ink);font-weight:700}
.pill{display:inline-flex;border:1px solid var(--line2);border-radius:2px;background:var(--panel);padding:2px;gap:2px;flex:none}
.pill button{font:inherit;font-size:12px;line-height:1;cursor:pointer;border:0;border-radius:1px;
  background:transparent;color:var(--ink3);width:26px;height:22px;display:grid;place-items:center;padding:0}
.pill button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.nojs .pill{display:none}

/* ---- shell ----------------------------------------------------------- */
.app{width:var(--wrap);margin:0 auto;padding:2.4rem 0 3.4rem}
.hero{max-width:60ch}
.hero h1{font-size:clamp(2.1rem,5.6vw,3.3rem);line-height:1.05;letter-spacing:-.025em}
.lede{font-size:1.08rem;color:var(--ink2);margin:.9rem 0 0;max-width:70ch;font-family:var(--serif)}
.lede b{color:var(--ink);font-weight:600}
.sub{font-size:.86rem;color:var(--ink3);margin:.5rem 0 0;max-width:74ch}
.view>h2{font-size:1.3rem;margin:3rem 0 .4rem}
.crumbs{margin:0 0 1.2rem}
.crumbs ol{list-style:none;display:flex;gap:.4rem;margin:0;padding:0;font-size:.8rem;color:var(--ink3)}
.crumbs li+li::before{content:"/";padding-right:.4rem;color:var(--line2)}
.crumbs a{color:var(--ink3)}

.prose{max-width:74ch}
.prose p{margin:1rem 0 0;color:var(--ink2)}
.prose p b{color:var(--ink);font-weight:600}
.prose h2{margin-top:2.8rem}
.prose h3{font-size:1.05rem;margin:0 0 .3rem}
.bul{margin:1rem 0 0;padding-left:1.15rem;color:var(--ink2)}
.bul li{margin:.45rem 0}
.bul b{color:var(--ink)}

/* ---- the clock ------------------------------------------------------- */
.clock{display:grid;gap:1px;margin:2.2rem 0 0;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  background:var(--line2);border:1px solid var(--line2)}
.cl{background:var(--panel);padding:1rem 1.1rem}
.cl span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.cl b{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:600;line-height:1.1;margin:.2rem 0 0;letter-spacing:-.02em}
.cl.big b{font-size:2.5rem;color:var(--acc)}
.cl i{display:block;font-style:normal;font-size:.82rem;color:var(--ink3);margin-top:.15rem}
.st-open{color:var(--acc)} .st-late{color:var(--warn)} .st-closed{color:var(--bad)}

/* ---- cards ----------------------------------------------------------- */
/* each card carries its own border, so a row that does not fill leaves no
   orphaned block of grid background behind it */
.cards{display:grid;gap:.7rem;margin:1rem 0 0;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.card{background:var(--panel);border:1px solid var(--line2);padding:1rem 1.1rem;
  text-decoration:none;color:var(--ink);display:block}
.card b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600}
.card span{display:block;font-size:.88rem;color:var(--ink3);margin-top:.3rem}
.card:hover{background:var(--bg)}
.card:hover b{color:var(--acc)}

/* ---- the two-module figure: the site's own motif --------------------- */
.mods{margin:1.4rem 0 0;padding:0}
.mods figcaption{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 .5rem}
.mods .modnote{margin:.55rem 0 0;text-transform:none;letter-spacing:0;font-weight:400;font-size:.84rem}
.modrow{display:flex;align-items:stretch;gap:.7rem;flex-wrap:wrap}
.mod{flex:1 1 240px;border:1.5px solid var(--ink);background:var(--panel);padding:.85rem .95rem}
.mod.m2{border-style:dashed;border-color:var(--acc)}
.mod b{display:block;font-family:var(--serif);font-size:1rem}
.mod span{display:block;font-family:var(--mono);font-size:.78rem;color:var(--ink2);margin:.2rem 0}
.mod i{display:block;font-style:normal;font-size:.82rem;color:var(--ink3)}
.modarrow{align-self:center;color:var(--ink3);font-size:1.2rem;flex:none}

/* ---- sourced figures ------------------------------------------------- */
.fig{white-space:nowrap;font-weight:600;color:var(--ink);border-bottom:1px dotted var(--line2)}
.fig a{text-decoration:none;color:var(--acc);font-size:.8em;vertical-align:super;margin-left:.1em}

/* ---- ledger / domains / questions ------------------------------------ */
.ledger{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line2)}
.ledger li{display:flex;gap:.9rem;align-items:baseline;padding:.6rem .9rem;background:var(--panel);
  color:var(--ink2);font-size:.92rem}
.ledger li b{flex:none;min-width:9ch;font-weight:600;color:var(--ink)}

.domains{display:grid;gap:1px;margin:1.2rem 0 0;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  background:var(--line2);border:1px solid var(--line2)}
.dom{background:var(--panel);padding:1.1rem 1.15rem}
.dom .w{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--acc);margin:0 0 .1rem;letter-spacing:-.02em}
.dom p{font-size:.9rem;margin:.6rem 0 0;color:var(--ink2)}
.dom p b{color:var(--ink)}

.qs{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.7rem}
.q{border:1px solid var(--line2);background:var(--panel);padding:1rem 1.1rem;border-left:3px solid var(--acc)}
.qt{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin:0}
.q p{margin:.55rem 0 0;font-family:var(--serif);font-size:1rem;color:var(--ink)}
.q .opts{font-family:var(--mono);font-size:.9rem;color:var(--ink2)}
.q details{margin:.7rem 0 0}
.q summary{cursor:pointer;font-size:.84rem;font-weight:700;color:var(--acc);width:max-content}
.q details p{font-size:.92rem;color:var(--ink2);font-family:var(--sans)}

/* ---- study plan ------------------------------------------------------ */
.phases{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1px;background:var(--line2);
  border:1px solid var(--line2)}
.phase{background:var(--panel);display:grid;grid-template-columns:8px 1fr;gap:0}
.pbar{background:var(--acc);opacity:.85}
.phase:nth-child(2) .pbar{opacity:.7} .phase:nth-child(3) .pbar{opacity:.55}
.phase:nth-child(4) .pbar{opacity:.4} .phase:nth-child(5) .pbar{opacity:.25}
.pbody{padding:.9rem 1.1rem}
.pbody h2{font-size:1.05rem;margin:0;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.pbody h2 span{font-family:var(--mono);font-size:.8rem;color:var(--ink3);font-weight:400}
.pwhen{font-family:var(--mono);font-size:.76rem;color:var(--ink3);margin:.2rem 0 0}
.pbody p{margin:.5rem 0 0;font-size:.92rem;color:var(--ink2)}

/* ---- score scale ----------------------------------------------------- */
.scale{position:relative;height:64px;margin:1.2rem 0 0;background:var(--panel);border:1px solid var(--line2)}
.scale .band{position:absolute;top:16px;height:22px;left:var(--a);width:var(--b);background:var(--acc);opacity:.85}
.scale span{position:absolute;font-family:var(--mono);font-size:.74rem;color:var(--ink3)}
.scale .t400{left:6px;bottom:5px} .scale .t1600{right:6px;bottom:5px}
.scale .lo,.scale .hi{top:2px;left:var(--p);transform:translateX(-50%);color:var(--ink);font-weight:600}

/* ---- tables, forms, gauges ------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;margin:1.1rem 0 0;font-size:.9rem;display:table}
.tbl caption{text-align:left;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);padding-bottom:.5rem}
.tbl th,.tbl td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--line)}
.tbl thead th{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line2)}
.tbl tbody th{font-weight:500;color:var(--ink)}
.tbl tbody th i{display:block;font-style:normal;font-size:.76rem;color:var(--ink3)}
.tbl td{color:var(--ink2)}
.tbl td.ok{color:var(--acc);font-weight:600} .tbl td.warn{color:var(--warn);font-weight:600}
.tbl .stand.within{color:var(--acc);font-weight:600}
.tbl .stand.above{color:var(--acc2);font-weight:600}
.tbl .stand.below{color:var(--ink3)}
.tbl.wide{display:block;overflow-x:auto;white-space:nowrap}
.tbl.wide tbody th{white-space:normal;min-width:22ch}

.scoreform{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;margin:1.5rem 0 0;padding:1rem;
  background:var(--panel);border:1px solid var(--line2)}
.scoreform label{font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);
  display:block;margin-bottom:.3rem}
.scoreform input,.scoreform select{font:inherit;font-size:16px;padding:.42rem .6rem;border:1px solid var(--line2);
  background:var(--bg);color:var(--ink);border-radius:2px}
.scoreform button{font:inherit;font-size:.9rem;font-weight:600;padding:.45rem 1.1rem;border:1px solid var(--acc);
  background:var(--acc);color:var(--onacc);border-radius:2px;cursor:pointer}

.gauges{display:grid;gap:1px;margin:1.6rem 0 0;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  background:var(--line2);border:1px solid var(--line2)}
.gauge{background:var(--panel);padding:.9rem 1rem}
.gauge span{display:block;font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.gauge b{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:600;line-height:1.1;margin:.15rem 0 0;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.gauge i{display:block;font-style:normal;font-size:.78rem;color:var(--ink3)}

.rg{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line2)}
.rg li{display:flex;align-items:baseline;gap:1rem;padding:.6rem .9rem;background:var(--panel);flex-wrap:wrap}
.rgn{flex:1 1 auto}
.rgn b{font-family:var(--serif);font-size:1rem;font-weight:600}
.rgn i{font-style:normal;font-size:.8rem;color:var(--ink3);margin-left:.5rem}
.rgc{font-size:.84rem;color:var(--ink3)}

.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0 0}
.tg{font:inherit;font-size:.84rem;font-weight:500;text-decoration:none;border:1px solid var(--line2);
  border-radius:2px;padding:.32rem .75rem;background:var(--panel);color:var(--ink2);
  display:inline-flex;align-items:center;gap:.4rem}
.tg span{font-family:var(--mono);font-size:.8rem;color:var(--ink3)}
.tg:hover{color:var(--ink);border-color:var(--ink3)}
.tg.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tg.is-on span{color:var(--bg);opacity:.7}

.note{margin:1.5rem 0 0;padding:.95rem 1.1rem;background:var(--accq);border-left:3px solid var(--acc)}
.note p{margin:0;color:var(--ink2);font-size:.92rem}
.note p b{color:var(--ink)}
.note.warn{background:var(--warnq);border-left-color:var(--warn)}

.empty{background:var(--panel);border:1px solid var(--line2);padding:1.6rem;margin:1.8rem 0 0;text-align:center}
.actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.actions a{text-decoration:none;font-weight:600;font-size:.9rem;border:1px solid var(--line2);
  padding:.4rem .95rem;color:var(--ink);border-radius:2px}
.actions a.pri{background:var(--acc);border-color:var(--acc);color:var(--onacc)}

.foot{border-top:1px solid var(--line2);margin-top:2.5rem}
.footin{width:var(--wrap);margin:0 auto;padding:1.8rem 0 3.2rem;font-size:.84rem;color:var(--ink3)}
.foot p{margin:.75rem 0 0;max-width:84ch}
.foot p:first-child{margin-top:0}
.foot a{color:var(--ink2)}
.fmeta{font-variant-numeric:tabular-nums}

@media (max-width:720px){
  :root{--wrap:min(1180px,100% - 1.6rem)}
  .mastnav{order:4;width:100%;gap:.8rem}
  .mastnow{order:2}
  .modarrow{transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}