/* Docket — editorial public-ledger design system
   Newsreader (serif: display + reading) · Courier Prime (mono: ledger data)
   Ink on archival paper · oxblood "red-ink" accent · muted ledger-green for settled */

:root{
  /* surfaces — archival off-white, faint cool tint (deliberately NOT cream) */
  --paper:   oklch(0.985 0.004 255);
  --paper-2: oklch(0.965 0.006 255);
  --paper-3: oklch(0.945 0.007 255);

  /* ink ramp */
  --ink:   oklch(0.235 0.012 265);
  --ink-2: oklch(0.435 0.012 265);
  --ink-3: oklch(0.545 0.010 265);

  /* rules */
  --hair:  oklch(0.890 0.006 265);
  --hair-2:oklch(0.820 0.008 265);

  /* red-ink accent (oxblood) — brand, stalled, overdue */
  --ox:      oklch(0.470 0.150 25);
  --ox-deep: oklch(0.390 0.150 27);
  --ox-soft: oklch(0.955 0.030 25);

  /* settled (muted ledger green) */
  --set:      oklch(0.480 0.090 155);
  --set-soft: oklch(0.955 0.028 155);

  /* open / active (amber, used sparingly) */
  --amb:      oklch(0.560 0.110 70);
  --amb-soft: oklch(0.955 0.040 75);

  --measure: 40rem;
  --page: 72rem;

  --z-sticky: 100; --z-modal: 300; --z-toast: 500;

  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 200ms;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Newsreader", Georgia, "Times New Roman", serif;
  font-optical-sizing:auto;
  font-size:18px; line-height:1.62; letter-spacing:0.003em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.mono{font-family:"Courier Prime", ui-monospace, "SFMono-Regular", Menlo, monospace;}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:500; line-height:1.08; letter-spacing:-0.018em; margin:0; text-wrap:balance;}
h1{font-size:clamp(2.6rem, 6vw, 4.7rem); font-weight:420; line-height:1.02;}
h2{font-size:clamp(1.7rem, 3.3vw, 2.5rem);}
h3{font-size:1.35rem; letter-spacing:-0.01em;}
p{margin:0 0 1.1em; text-wrap:pretty;}
a{color:var(--ox-deep); text-underline-offset:3px; text-decoration-thickness:1px;}
a:hover{color:var(--ox);}
em{font-style:italic;}
strong{font-weight:600;}

.kicker{font-family:"Courier Prime",monospace; font-size:0.74rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-3);}

/* ---------- layout ---------- */
.wrap{max-width:var(--page); margin:0 auto; padding:0 clamp(1.1rem, 4vw, 3.2rem);}
.prose{max-width:var(--measure);}
.lede{font-size:clamp(1.25rem,2.3vw,1.6rem); line-height:1.5; color:var(--ink); max-width:34ch;}
section{padding:clamp(3rem,7vw,6rem) 0;}
.rule{height:0; border:0; border-top:1px solid var(--hair); margin:0;}
.rule-2{border-top:2px solid var(--ink);}

/* dotted leader rule, ledger-style */
.leader{flex:1; border-bottom:1px dotted var(--hair-2); transform:translateY(-0.3em); margin:0 0.6rem;}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink); padding-top:1.4rem;}
.masthead .row{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:0.7rem;}
.wordmark{font-weight:560; font-size:1.45rem; letter-spacing:-0.03em;}
.wordmark b{color:var(--ox);}
.dateline{font-family:"Courier Prime",monospace; font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-2); text-transform:uppercase;}
.navlinks{display:flex; gap:1.3rem; font-family:"Courier Prime",monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;}
.navlinks a{color:var(--ink-2); text-decoration:none;}
.navlinks a:hover{color:var(--ox);}

/* ---------- status vocabulary (mark + word + color; never color alone) ---------- */
.stat{font-family:"Courier Prime",monospace; font-size:0.7rem; letter-spacing:0.05em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:0.4ch; white-space:nowrap;}
.stat::before{font-size:0.85em; line-height:1;}
.stat.settled{color:var(--set);}     .stat.settled::before{content:"✓";}
.stat.open{color:var(--amb);}         .stat.open::before{content:"●"; font-size:0.6em;}
.stat.lapsed{color:var(--ink-3);}     .stat.lapsed::before{content:"—";}
.stat.overdue{color:var(--ox);}       .stat.overdue::before{content:"▲"; font-size:0.7em;}

/* ---------- ledger entries ---------- */
.ledger{border-top:1px solid var(--ink);}
.entry{border-bottom:1px solid var(--hair); }
.entry .head{display:grid; grid-template-columns:1fr auto; gap:0.4rem 1.2rem; align-items:baseline;
  padding:0.85rem 0.2rem; cursor:pointer; transition:background var(--t) var(--e-out);}
.entry .head:hover{background:var(--paper-2);}
.entry .title{font-size:1.12rem; font-weight:480; letter-spacing:-0.01em;}
.entry .meta{font-family:"Courier Prime",monospace; font-size:0.72rem; color:var(--ink-2);
  display:flex; gap:0.9rem; align-items:baseline; flex-wrap:wrap;}
.entry .dur{color:var(--ink-3);}
.entry .right{display:flex; gap:1.1rem; align-items:baseline; justify-self:end;}
.entry .body{display:grid; grid-template-rows:0fr; transition:grid-template-rows 260ms var(--e-out);}
.entry.open-row .body{grid-template-rows:1fr;}
.entry .body>div{overflow:hidden;}
.timeline{padding:0.2rem 0.2rem 1.1rem; max-width:54rem;}
.tl-row{display:grid; grid-template-columns:5.2rem 1fr; gap:0.8rem; padding:0.38rem 0;
  border-bottom:1px dotted var(--hair); font-size:0.96rem; line-height:1.45;}
.tl-row .tlm{font-family:"Courier Prime",monospace; font-size:0.72rem; color:var(--ink-3); padding-top:0.18em;}
.tl-row .tlc{color:var(--set); font-family:"Courier Prime",monospace; font-size:0.72rem;}

/* ---------- controls ---------- */
.controls{position:sticky; top:0; z-index:var(--z-sticky); background:var(--paper);
  border-bottom:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:0.5rem 0.7rem; align-items:center;
  padding:0.7rem 0; margin-bottom:0.2rem;}
.seg{display:inline-flex; border:1px solid var(--hair-2); border-radius:2px; overflow:hidden;}
.seg button{font-family:"Courier Prime",monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;
  background:var(--paper); color:var(--ink-2); border:0; padding:0.4rem 0.7rem; cursor:pointer;
  border-right:1px solid var(--hair); transition:background var(--t),color var(--t);}
.seg button:last-child{border-right:0;}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper);}
.seg button:hover:not([aria-pressed="true"]){background:var(--paper-2); color:var(--ink);}
select,input[type=search]{font-family:"Courier Prime",monospace; font-size:0.74rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--hair-2); border-radius:2px; padding:0.42rem 0.55rem;}
input[type=search]{min-width:13rem; flex:1;}
.count{font-family:"Courier Prime",monospace; font-size:0.72rem; color:var(--ink-3); margin-left:auto;}

/* ---------- figure strip (counts as ledger prose, not stat cards) ---------- */
.tally{display:flex; flex-wrap:wrap; gap:0 1.6rem; align-items:baseline; font-family:"Courier Prime",monospace;
  font-size:0.86rem; color:var(--ink-2); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  padding:0.8rem 0;}
.tally b{font-family:"Newsreader",serif; font-size:1.7rem; font-weight:420; color:var(--ink); letter-spacing:-0.02em; margin-right:0.4ch;}
.tally .u{display:flex; align-items:baseline; gap:0.45ch;}
.tally .u.ox b{color:var(--ox);} .tally .u.set b{color:var(--set);}

/* ---------- pull / aside ---------- */
.pull{font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.22; font-weight:420; letter-spacing:-0.015em;
  color:var(--ink); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:1.4rem 0; margin:2.2rem 0;}
.pull em{color:var(--ox); font-style:italic;}

/* two-column reading at wide widths */
.cols{display:grid; grid-template-columns:1fr; gap:2.4rem;}
@media(min-width:60rem){ .cols.two{grid-template-columns:1.05fr 0.95fr; gap:clamp(2.4rem,5vw,5rem);} }

/* plan table — ledger of task / tool / human */
.plan{width:100%; border-collapse:collapse; font-size:0.98rem;}
.plan th,.plan td{text-align:left; vertical-align:top; padding:0.8rem 1rem 0.8rem 0; border-bottom:1px solid var(--hair);}
.plan thead th{font-family:"Courier Prime",monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--ink-3); border-bottom:1px solid var(--ink); padding-bottom:0.5rem;}
.plan td:first-child{font-weight:560; width:24%;}
.plan .human{color:var(--set);}

/* month strip (transparency record) */
.months{display:flex; flex-wrap:wrap; gap:3px;}
.mo{font-family:"Courier Prime",monospace; font-size:0.62rem; padding:0.32rem 0.34rem; min-width:3.7rem; text-align:center;
  border:1px solid var(--hair); color:var(--ink-3); border-radius:1px;}
.mo.has{color:var(--ink); border-color:var(--hair-2); background:var(--paper-2);}
.mo.miss{color:var(--ox); border-color:var(--ox); background:var(--ox-soft); font-weight:700;}

/* callout (limits / what it's not) */
.note{border:1px solid var(--hair-2); background:var(--paper-2); padding:1.3rem 1.5rem; border-radius:3px;}
.note h3{font-size:1.05rem; margin-bottom:0.6rem;}
.note ul{margin:0; padding-left:1.1rem;}
.note li{margin:0.35rem 0; font-size:0.98rem;}

/* CTA */
.cta-row{display:flex; gap:0.8rem; flex-wrap:wrap; align-items:center; margin-top:1.6rem;}
.btn{display:inline-flex; align-items:center; gap:0.5ch; font-family:"Courier Prime",monospace; font-size:0.8rem;
  letter-spacing:0.04em; text-transform:uppercase; text-decoration:none; padding:0.7rem 1.1rem; border-radius:2px;
  transition:transform var(--t) var(--e-out), background var(--t);}
.btn.primary{background:var(--ink); color:var(--paper);}
.btn.primary:hover{background:var(--ox); transform:translateY(-1px); color:var(--paper);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--hair-2);}
.btn.ghost:hover{border-color:var(--ink); transform:translateY(-1px);}

footer{border-top:2px solid var(--ink); padding:2.4rem 0 4rem; font-size:0.86rem; color:var(--ink-2);}
footer .prose{max-width:60ch;}

/* reveal (enhances already-visible content) */
.rise{opacity:1; transform:none;}
@media(prefers-reduced-motion:no-preference){
  .js .rise{opacity:0; transform:translateY(14px); transition:opacity 600ms var(--e-out), transform 600ms var(--e-out);}
  .js .rise.in{opacity:1; transform:none;}
}

::selection{background:var(--ox-soft); color:var(--ox-deep);}
:focus-visible{outline:2px solid var(--ox); outline-offset:2px;}

/* ---------- CORA pipeline / process flow ---------- */
.pipeline{list-style:none; margin:0; padding:0; display:grid; gap:1px;
  grid-template-columns:repeat(5,1fr); background:var(--hair); border:1px solid var(--hair);}
.pipeline li{background:var(--paper); padding:1.2rem 1rem 1rem; position:relative; display:flex; flex-direction:column; min-height:11rem;}
.pipeline .step{font-family:"Courier Prime",monospace; font-size:0.74rem; font-weight:700; color:var(--paper);
  background:var(--ox); width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center; margin-bottom:0.7rem;}
.pipeline h3{font-size:1.05rem; margin-bottom:0.4rem;}
.pipeline p{font-size:0.88rem; line-height:1.42; color:var(--ink-2); margin:0;}
.pipeline .who{margin-top:auto; padding-top:0.7rem; font-family:"Courier Prime",monospace; font-size:0.64rem;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3);}
.pipeline .who.human-step{color:var(--set);}
@media(max-width:54rem){ .pipeline{grid-template-columns:1fr;} .pipeline li{min-height:0;} }

/* ---------- citizen tools ---------- */
.civic{display:grid; gap:1px; grid-template-columns:repeat(3,1fr); background:var(--hair); border:1px solid var(--hair); border-top:2px solid var(--ink);}
.civic article{background:var(--paper); padding:1.4rem 1.3rem 1.5rem; display:flex; flex-direction:column;}
.civic h3{font-size:1.2rem; margin-bottom:0.2rem;}
.civic .legal{font-family:"Courier Prime",monospace; font-size:0.66rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ox); margin-bottom:0.8rem;}
.civic p{font-size:0.92rem; line-height:1.45; color:var(--ink-2); margin:0 0 0.9rem;}
.civic ul{list-style:none; margin:auto 0 0; padding:0.9rem 0 0; border-top:1px dotted var(--hair-2);}
.civic li{font-family:"Courier Prime",monospace; font-size:0.74rem; color:var(--ink-2); padding:0.18rem 0; display:flex; gap:0.5ch;}
.civic li::before{content:"›"; color:var(--ox);}
@media(max-width:54rem){ .civic{grid-template-columns:1fr;} }

/* ---------- two-surface loop ---------- */
.loop{display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center;}
.loop-side{border:1px solid var(--hair-2); border-radius:3px; padding:1.1rem 1.2rem; background:var(--paper-2);}
.loop-side ul{list-style:none; margin:0.6rem 0 0; padding:0;}
.loop-side li{font-size:0.92rem; padding:0.2rem 0; color:var(--ink-2);}
.loop-mid{font-family:"Courier Prime",monospace; font-size:0.66rem; text-align:center; color:var(--ink-3); line-height:1.7; letter-spacing:0.04em;}
@media(max-width:48rem){ .loop{grid-template-columns:1fr;} .loop-mid{transform:rotate(90deg); padding:0.6rem 0;} }

/* ---------- open-source banner ---------- */
.oss{border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:2rem 0; display:grid; gap:1.4rem; grid-template-columns:auto 1fr; align-items:center;}
.oss .glyph{font-family:"Courier Prime",monospace; font-size:2.4rem; color:var(--ox); line-height:1;}
.oss p{margin:0; font-size:1.12rem;}
@media(max-width:40rem){ .oss{grid-template-columns:1fr;} }

/* ---------- closing ---------- */
.closing{font-size:clamp(1.8rem,4.2vw,3rem); line-height:1.18; font-weight:380; letter-spacing:-0.02em; color:var(--ink); max-width:20ch; margin:0 auto; text-wrap:balance;}
.closing em{color:var(--ox); font-style:italic;}

/* transparency-record disclosure */
details.rec{margin-top:1.6rem; border-top:1px solid var(--hair); padding-top:1rem;}
details.rec>summary{font-family:"Courier Prime",monospace; font-size:0.76rem; letter-spacing:0.04em;
  color:var(--ink-2); cursor:pointer; list-style:none; display:flex; align-items:center; gap:0.6ch;}
details.rec>summary::-webkit-details-marker{display:none;}
details.rec>summary::before{content:"+"; color:var(--ox); font-weight:700;}
details.rec[open]>summary::before{content:"–";}
details.rec>summary:hover{color:var(--ox);}