/* Brand: Heritage Navy leads, Heritage Gold accents state, Warm Stone structures, Warm Cream is the canvas. */
:root {
  --navy: #2F4057; --navy-2: #3B5070; --gold: #B48A2E; --gold-ink: #8A6116; --stone: #A79F93;
  --cream: #F3EBDD; --white: #FFFFFF; --charcoal: #222427; --muted: #7A746A; --line: #E3DDD2;
  /* status: each paired with a label */
  --proven-bg: #EAF4EC; --proven: #1F6B3A; --proven-bar: #2E7D4A;
  --built-bg: #E8EDF4; --built: #2F4057; --built-bar: #5A7299;
  --prog-bg: #F7EEDB; --prog: #8A6116; --prog-bar: #B48A2E;
  --none-bg: #F3EBDD; --none: #7A746A; --none-bar: #D6CFC3;
  --blocked-bg: #F7E6E2; --blocked: #8E2F22; --blocked-bar: #B0503F;
  --gone-bg: #EFEDEA; --gone: #8B857C; --gone-bar: #BDB7AE;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.6 var(--sans); color: var(--charcoal); background: var(--cream); }
a { color: var(--gold-ink); text-underline-offset: 2px; }
a:hover { color: var(--navy); }
h1 { font: 600 28px/1.25 var(--serif); color: var(--navy); margin: .2em 0 .35em; }
h2 { font: 600 20px/1.3 var(--serif); color: var(--navy); margin: 1.8em 0 .5em; }
h3 { font: 600 16px/1.35 var(--serif); color: var(--navy); margin: 0 0 .4em; }
code, .mono { font-family: var(--mono); font-size: .9em; }
.lead { font: 400 17px/1.6 var(--serif); max-width: 62em; }
.muted { color: var(--muted); font-size: 12.5px; }
.label { font: 600 10.5px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.error { background: var(--blocked-bg); border: 1px solid #E2B8AF; padding: .6em .9em; border-radius: 4px; }
.ok { background: var(--proven-bg); border: 1px solid #B9D8C2; padding: .6em .9em; border-radius: 4px; }

/* header */
.top { background: var(--navy); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem;
  padding: .65rem 20px; position: sticky; top: 0; z-index: 5; }
.brand a { color: #fff; font: 600 18px var(--serif); text-decoration: none; }
.brand span { color: rgba(255,255,255,.55); font-size: 12px; margin-left: .8em; }
.top nav { display: flex; flex-wrap: wrap; gap: .15rem; flex: 1; }
.top nav a { color: rgba(255,255,255,.62); text-decoration: none; padding: .35em .7em; border-radius: 4px; font-size: 13px; font-weight: 500;
  border-bottom: 2px solid transparent; }
.top nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.top nav a.on { color: #fff; border-bottom-color: var(--gold); background: rgba(180,138,46,.14); border-radius: 4px 4px 0 0; }
.who { display: flex; align-items: center; gap: .8em; font-size: 12.5px; }
.who a { color: rgba(255,255,255,.75); }
.who form { margin: 0; }
button.link { background: none; border: 0; color: rgba(255,255,255,.55); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

main { max-width: 1160px; margin: 0 auto; padding: 28px 20px 48px; }
main.narrow { max-width: 440px; }
main.wide { max-width: 1440px; }
.foot { max-width: 1440px; margin: 0 auto; padding: 0 20px 28px; color: var(--muted); font-size: 12px; }

/* controls */
.button, button { display: inline-block; font: 500 13px var(--sans); letter-spacing: .02em; padding: 7px 14px; border-radius: 4px;
  border: 1px solid var(--stone); background: transparent; color: var(--navy); text-decoration: none; cursor: pointer; }
.button:hover, button:hover { background: rgba(167,159,147,.14); }
.button.primary, button.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.button.primary:hover, button.primary:hover { background: var(--navy-2); }
.button.small, button.small { font-size: 12px; padding: 4px 10px; }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea { font: inherit; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--charcoal); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
label { display: block; font-weight: 600; font-size: 13px; }
label input, label select, label textarea { margin-top: .3em; font-weight: 400; }
.stack { display: grid; gap: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
.row label { flex: 1 1 180px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 18px 22px; margin: 1rem 0; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
fieldset.kinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
fieldset.kinds legend { font-weight: 600; font-size: 13px; margin-bottom: .4rem; padding: 0; }
.pill { display: inline-flex; align-items: center; gap: .35em; font-weight: 400; border: 1px solid var(--line);
  border-radius: 4px; padding: .3em .8em; background: #fff; cursor: pointer; }
.pill input { width: auto; margin: 0; }
.tag { display: inline-block; font: 500 11px var(--mono); background: var(--cream); color: var(--gold-ink); border: 1px solid var(--line);
  border-radius: 2px; padding: 0 .5em; }

/* status badges */
.st, .ps, .rs { display: inline-block; font: 600 10.5px/1.7 var(--sans); text-transform: uppercase; letter-spacing: .06em;
  border-radius: 2px; padding: 0 7px; white-space: nowrap; border: 1px solid transparent; }
.st-proven, .ps-passing, .rs-proven { background: var(--proven-bg); color: var(--proven); border-color: #C5DECD; }
.st-built, .ps-scripted, .rs-scripted { background: var(--built-bg); color: var(--built); border-color: #CBD5E3; }
.st-in-progress, .rs-partial { background: var(--prog-bg); color: var(--prog); border-color: #E6D2A6; }
.st-not-started, .ps-planned, .rs-planned, .rs-none, .st-none { background: var(--none-bg); color: var(--none); border-color: var(--stone); }
.st-blocked, .ps-failing, .rs-failing { background: var(--blocked-bg); color: var(--blocked); border-color: #E2B8AF; }
.st-withdrawn, .rs-deferred { background: var(--gone-bg); color: var(--gone); border-color: var(--line); text-decoration: line-through; text-decoration-thickness: 1px; }
.rs-deferred { text-decoration: none; }
.verdict { font: 600 11px var(--mono); }
.verdict.PASS { color: var(--proven); } .verdict.FAIL, .verdict.KNOWN { color: var(--blocked); }
.verdict.SKIP, .verdict.MISSING, .verdict.NOT { color: var(--muted); }
.ab { font: 500 11.5px var(--mono); color: var(--gold-ink); }
.id { font: 500 12.5px var(--mono); color: var(--navy); white-space: nowrap; }

/* stacked bars */
.bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; background: var(--line); gap: 1px; }
.bar .seg { display: block; min-width: 3px; }
.seg.empty { background: var(--line); }
.st-proven.seg, .seg.st-proven, .seg.ps-passing, .seg.rs-proven { background: var(--proven-bar); }
.seg.st-built, .seg.ps-scripted, .seg.rs-scripted { background: var(--built-bar); }
.seg.st-in-progress, .rs-partial { background: var(--prog-bar); }
.seg.st-not-started, .seg.ps-planned, .seg.rs-planned, .seg.rs-none { background: var(--none-bar); }
.seg.st-blocked, .seg.ps-failing, .seg.rs-failing { background: var(--blocked-bar); }
.seg.st-withdrawn, .seg.rs-deferred { background: var(--gone-bar); }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: 12px; color: var(--muted); margin: .5rem 0 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35em; vertical-align: -1px; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.2rem 0; }
.tile { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 4px; padding: 18px 20px; }
.tile:hover { border-top-color: var(--gold); }
.tile .v { font: 600 32px/1.1 var(--sans); color: var(--navy); font-variant-numeric: tabular-nums; margin: .25rem 0 .1rem; }
.tile .v small { font-size: 15px; color: var(--muted); font-weight: 500; }
.tile p { margin: .5rem 0 0; font-size: 12.5px; color: var(--muted); }
.tile .bar { margin-top: .7rem; }

/* summary: feature board */
.fboard { display: grid; gap: 10px; }
.frow { display: grid; grid-template-columns: 54px minmax(0, 1fr) 260px 110px; gap: 4px 18px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 14px 18px; text-decoration: none; color: inherit; }
.frow:hover { border-color: var(--stone); background: #FFFDF9; }
.frow .fno { font: 600 15px var(--mono); color: var(--gold-ink); }
.frow h3 { margin: 0; font-size: 16px; }
.frow .fsum { grid-column: 2; font-size: 13px; color: var(--muted); margin: 0; }
.frow .fbar { grid-column: 3; grid-row: 1 / span 2; }
.frow .fbar .muted { display: block; margin-top: 4px; }
.frow .fst { grid-column: 4; grid-row: 1 / span 2; text-align: right; }
.chg { font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--gold-ink); border: 1px solid #E6D2A6;
  border-radius: 2px; padding: 0 5px; margin-left: .5em; vertical-align: 2px; }

.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cols2 .card { margin: 0; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 8px 0; border-top: 1px solid var(--line); }
ul.plain li:first-child { border-top: 0; }

/* features page */
.filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; background: #fff; border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 16px; position: sticky; top: 52px; z-index: 3; }
.filters label { flex: 1 1 170px; }
.filters .count { flex: 0 0 auto; color: var(--muted); font-size: 12.5px; padding-bottom: 8px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: 4px; margin: 18px 0; scroll-margin-top: 130px; }
.feature > header { background: var(--cream); border-bottom: 1px solid var(--line); padding: 16px 22px; display: grid;
  grid-template-columns: minmax(0, 1fr) 280px; gap: 6px 22px; }
.feature > header h2 { margin: 0; font-size: 21px; }
.feature > header h2 .fno { font: 600 17px var(--mono); color: var(--gold-ink); margin-right: .4em; }
.feature > header p { margin: 0; grid-column: 1; }
.feature > header .meta { grid-column: 2; grid-row: 1 / span 3; font-size: 12.5px; }
.feature > header .meta .bar { margin: 4px 0 8px; }
.story { border-top: 1px solid var(--line); padding: 14px 22px; }
.story:first-of-type { border-top: 0; }
.story > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; }
.story > summary::-webkit-details-marker { display: none; }
.story > summary h3 { margin: 0; font: 600 15px var(--sans); color: var(--charcoal); }
.story > summary .sd { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.story > summary .sr { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
.story > summary::before { content: "▸"; position: absolute; margin-left: -16px; color: var(--stone); font-size: 11px; }
.story[open] > summary::before { content: "▾"; }
.story .body { margin: 10px 0 2px 84px; }
.story .why { font-size: 13px; margin: .2em 0 .8em; }
table.tasks, table.list, table.reqs, table.proofs { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
table.tasks th, table.list th, table.reqs th, table.proofs th { text-align: left; font: 600 10.5px var(--sans); text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); padding: 7px 10px; border-bottom: 1px solid var(--line); background: #FBF8F2; }
table.tasks td, table.list td, table.reqs td, table.proofs td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tasks tr:last-child td { border-bottom: 0; }
td.note { color: #4A4740; }
td.ev { font-size: 12px; }
td.ev a { white-space: nowrap; }
.subhead { font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 6px; }
.prooflist { display: flex; flex-wrap: wrap; gap: 6px; }
.prooflist a { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line);
  border-radius: 4px; padding: 3px 8px; background: #fff; font: 500 12px var(--mono); color: var(--navy); }
.prooflist a:hover { border-color: var(--stone); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.passing { background: var(--proven-bar); } .dot.failing { background: var(--blocked-bar); }
.dot.scripted { background: var(--built-bar); } .dot.planned { background: transparent; border: 1.5px solid var(--stone); }

/* requirements */
table.reqs td:nth-child(2) { width: 38%; }
table.reqs .pri { font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; }
table.reqs .pri.must { color: var(--navy); } table.reqs .pri.should { color: var(--gold-ink); }
.reqnote { font-size: 12.5px; color: #4A4740; margin-top: 4px; }
.rgroup-table { scroll-margin-top: 130px; }

/* proofs */
table.proofs td.kind { font: 500 11.5px var(--mono); color: var(--muted); }
table.proofs .sets { font: 400 11px var(--mono); color: var(--muted); }
.runs { display: grid; gap: 10px; }
.run { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 12px 16px; scroll-margin-top: 80px; }
.run > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.run > summary b { font: 600 13px var(--mono); color: var(--navy); }
.run table { margin-top: 10px; }
.grid-matrix { overflow-x: auto; }
table.matrix { border-collapse: collapse; font-size: 12px; }
table.matrix th, table.matrix td { border: 1px solid var(--line); padding: 3px 6px; text-align: center; }
table.matrix th { background: #FBF8F2; font: 500 11px var(--mono); }
table.matrix td.pid { text-align: left; font: 500 11.5px var(--mono); white-space: nowrap; }

/* changes */
.timeline { position: relative; margin: 1rem 0 0 8px; padding-left: 22px; border-left: 2px solid var(--line); }
.change { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 14px 18px; margin: 0 0 12px; }
.change::before { content: ""; position: absolute; left: -30px; top: 18px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--gold); }
.change .when { font: 500 12px var(--mono); color: var(--gold-ink); }
.change p { margin: .35em 0 0; }
.change .why { color: #4A4740; font-size: 13px; }
.change .src { font-size: 12px; color: var(--muted); }

/* documents */
.doclayout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.docnav { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 14px; font-size: 12.5px; }
.docnav h4 { font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 12px 0 4px; }
.docnav h4:first-child { margin-top: 0; }
.docnav a { display: block; padding: 3px 6px; border-radius: 4px; text-decoration: none; color: var(--charcoal); border-left: 2px solid transparent; }
.docnav a:hover { background: var(--cream); }
.docnav a.on { border-left-color: var(--gold); background: rgba(180,138,46,.1); color: var(--navy); font-weight: 600; }
article.doc { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 26px 34px; overflow-x: auto;
  font: 400 15.5px/1.65 var(--serif); }
article.doc h1 { font-size: 26px; } article.doc h2 { font-size: 20px; } article.doc h3 { font-size: 16.5px; }
article.doc table { border-collapse: collapse; width: 100%; font: 13px/1.5 var(--sans); margin: .8em 0; }
article.doc th, article.doc td { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; text-align: left; }
article.doc th { background: #FBF8F2; }
article.doc code { font: .85em var(--mono); background: var(--cream); padding: .05em .3em; border-radius: 2px; }
article.doc pre { background: #FBF8F2; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; overflow-x: auto; font-size: 12.5px; }
article.doc pre code { background: none; padding: 0; }
article.doc header#title-block-header, article.doc .title { display: none; }
article.doc section { scroll-margin-top: 80px; }
.doc-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 12px; }
.doc-bar span { flex: 1; color: var(--muted); font-size: 12.5px; }

/* ask */
.chat { display: grid; gap: .7rem; margin: 1rem 0; }
.msg { padding: .75em 1em; border-radius: 4px; white-space: pre-wrap; max-width: 56em; }
.msg.user { background: var(--navy); color: #fff; justify-self: end; }
.msg.assistant { background: #fff; border: 1px solid var(--line); }
.msg.pending { color: var(--muted); font-style: italic; }
.msg.error { background: var(--blocked-bg); border: 1px solid #E2B8AF; }
form.ask { display: flex; gap: .6rem; align-items: end; position: sticky; bottom: 0; background: var(--cream); padding: .6rem 0; }
form.ask textarea { flex: 1; }
details.earlier { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: .6em .9em; margin: .5em 0; }
details.earlier summary { cursor: pointer; }
.answer { white-space: pre-wrap; margin-top: .6em; }
.examples { display: flex; flex-wrap: wrap; gap: 6px; margin: .4rem 0 0; }
.examples button { font-size: 12px; padding: 4px 10px; border-color: var(--line); color: var(--charcoal); background: #fff; }

/* feedback + admin */
ul.sent { list-style: none; padding: 0; }
ul.sent li, .fb { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: .7em .9em; margin: .5em 0; }
ul.sent p, .fb p { margin: .4em 0 0; white-space: pre-wrap; }
table.list tr.off td { color: var(--muted); }
.actions { white-space: nowrap; }
form.inline { display: inline-flex; gap: .3rem; margin: 0 .3rem 0 0; }
form.inline input { width: 9em; padding: .3em .5em; font-size: 12px; }

@media (max-width: 900px) {
  .frow { grid-template-columns: 44px minmax(0, 1fr); }
  .frow .fbar, .frow .fst { grid-column: 2; grid-row: auto; text-align: left; }
  .feature > header { grid-template-columns: 1fr; }
  .feature > header .meta { grid-column: 1; grid-row: auto; }
  .cols2 { grid-template-columns: 1fr; }
  .doclayout { grid-template-columns: 1fr; }
  .docnav { position: static; max-height: 260px; }
  .story .body { margin-left: 0; }
}
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  .top { position: static; }
  .filters { position: static; }
  main { padding: 20px 16px 40px; }
  article.doc { padding: 18px 16px; }
  .story > summary { grid-template-columns: 1fr; }
  .story > summary .sd, .story > summary .sr { grid-column: 1; grid-row: auto; text-align: left; }
  table.tasks, table.tasks tbody, table.tasks tr, table.tasks td,
  table.reqs, table.reqs tbody, table.reqs tr, table.reqs td,
  table.proofs, table.proofs tbody, table.proofs tr, table.proofs td { display: block; width: 100% !important; }
  table.tasks tr:first-child, table.reqs tr:first-child, table.proofs tr:first-child { display: none; }
  table.tasks tr, table.reqs tr, table.proofs tr { border-bottom: 1px solid var(--line); padding: .4em 0; }
  table.tasks td, table.reqs td, table.proofs td { border: 0; padding: .15em .4em; }
  form.ask { flex-direction: column; align-items: stretch; }
  .actions { white-space: normal; }
}

.fextra { background: #FBF8F2; }
.fextra ul.plain li { font-size: 13px; }
table.tasks td.mono { white-space: nowrap; }