/* Gouri Workspace — design system (ADR-006 B1).

   The interface of a file, not a dashboard. A ruled sheet, bound at the left
   in the sector's own file cover with red tape down the spine; entries are
   numbered like paragraphs on a noting sheet; provenance sits in the right
   margin, the way an officer annotates. The current section is an index tab
   reaching out of the cover into the sheet.

   Rules this stylesheet keeps, and tests_safety/test_design_system.py checks:
   - every colour is a token defined in a :root block; nothing else names one
   - every text/background pair meets WCAG 2.1 AA, light and dark
   - no text below 13px; controls at least 36px tall
   - no webfonts, no outside requests, no inline styles (the security header
     forbids them; an air-gapped site serves this file from disk)          */

:root {
  /* paper and ink */
  --paper:      #F2F4F1;
  --raised:     #FFFFFF;
  --ink:        #17222C;
  --ink-soft:   #56656D;
  --rule:       #D5DCD7;
  --rule-firm:  #AEBAB3;
  --edge:       #75837C;   /* the boundary of anything you can operate */
  /* what colour means — the same everywhere */
  --tape:       #A3302A;   /* stopped, returned, needs a person now */
  --attest:     #2E6B4F;   /* green ink: approved, signed, traced */
  --flag:       #8A5A12;   /* wants attention, not yet urgent */
  --focus:      #1F5F8B;
  --on-strong:  #FFFFFF;   /* text on a filled control */
  /* the cover: the sector's file */
  --cover:      #22313F;   --cover-ink:  #E9EEF0;   --cover-soft: #B9C6CD;
  /* type */
  --serif: "Iowan Old Style", Charter, "Bitstream Charter", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, serif;
  --sans:  "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --t-meta: 13.5px;  --t-ui: 15px;  --t-body: 17px;  --t-h2: 1.4rem;  --t-h1: 1.6rem;
  /* space and shape */
  --binding: 13.5rem;  --margin-col: 15rem;  --measure: 34rem;
  --s1: .35rem; --s2: .7rem; --s3: 1.1rem; --s4: 1.8rem; --s5: 2.8rem;
  --radius: 3px;  --control: 2.25rem;
}
body[data-sector="defence"]    { --cover: #4B5A3A; --cover-ink: #EEF1E6; --cover-soft: #CBD3BF; }
body[data-sector="government"] { --cover: #C9B27A; --cover-ink: #2C2614; --cover-soft: #4D4328; }
body[data-sector="psu"]        { --cover: #4F6577; --cover-ink: #F1F4F6; --cover-soft: #E2E8EE; }
body[data-sector="education"]  { --cover: #2F4E6F; --cover-ink: #EEF3F7; --cover-soft: #DCE6EF; }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151C21; --raised: #1D262D; --ink: #E6ECEA; --ink-soft: #9AA9AE;
    --rule: #2C373E; --rule-firm: #46545C; --edge: #7C8C94; --tape: #E07A72; --attest: #7DBB9C;
    --flag: #DDA65A; --focus: #7DB3D8; --on-strong: #10181D;
  }
  /* Covers are quieter at night: the same files, under lamplight. */
  body[data-sector="defence"]    { --cover: #36422D; --cover-ink: #E6EBDD; --cover-soft: #BAC4AD; }
  body[data-sector="government"] { --cover: #5E5130; --cover-ink: #F6EED9; --cover-soft: #DCCFAE; }
  body[data-sector="psu"]        { --cover: #34444F; --cover-ink: #E8EEF2; --cover-soft: #BCC8D1; }
  body[data-sector="education"]  { --cover: #27394C; --cover-ink: #E8EEF2; --cover-soft: #B9C7D3; }
  :root { --cover: #1B2833; --cover-ink: #E9EEF0; --cover-soft: #A9B7BF; }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif);
  font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
body { padding-left: var(--binding); }
body.signed-out { padding-left: 0; }
body.signed-out .sheet { max-width: none; }
a { color: var(--focus); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: var(--s3); top: -4rem; z-index: 40; background: var(--raised);
  color: var(--ink); padding: var(--s2) var(--s3); font-family: var(--sans); font-size: var(--t-ui); }
.skip:focus { top: var(--s3); }

/* ---------------------------------------------------------------- the binding
   The sector's file cover, red tape down the spine, index tabs. */
.binding { position: fixed; inset: 0 auto 0 0; width: var(--binding); z-index: 20;
  background: var(--cover); color: var(--cover-ink); overflow-y: auto;
  display: flex; flex-direction: column; padding: var(--s3) 0 var(--s4);
  box-shadow: inset -7px 0 0 var(--tape); }
.binding .mark { font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  padding: 0 var(--s3) var(--s3); letter-spacing: .01em; }
.binding .group { font-family: var(--sans); font-size: var(--t-meta); color: var(--cover-soft);
  padding: var(--s3) var(--s3) var(--s1); }
.tab { display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  min-height: var(--control); margin: 1px 0 1px var(--s2); padding: var(--s1) var(--s3) var(--s1) var(--s2);
  border: 0; border-radius: var(--radius) 0 0 var(--radius); background: transparent;
  color: var(--cover-ink); font-family: var(--sans); font-size: var(--t-ui); text-align: left;
  cursor: pointer; }
.tab:hover { background: color-mix(in srgb, var(--cover-ink) 12%, transparent); }
.tab[aria-current="page"] { background: var(--paper); color: var(--ink); font-weight: 600;
  margin-right: 0; position: relative; z-index: 1; }
.tab:focus-visible { outline: 3px solid var(--cover-ink); outline-offset: -3px; }
.tab[aria-current="page"]:focus-visible { outline-color: var(--focus); }
.tab .count { min-width: 1.6rem; padding: 0 .4rem; border-radius: 1rem; text-align: center;
  font-size: var(--t-meta); font-variant-numeric: tabular-nums; font-weight: 600;
  background: var(--tape); color: var(--on-strong); }

/* ------------------------------------------------------------------ the sheet */
.sheet { max-width: calc(var(--measure) + var(--margin-col) + 6rem); padding: var(--s5) var(--s4) 6rem; }
header.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); margin-bottom: 3px; }
header.masthead h1 { font-size: var(--t-h1); font-weight: 600; margin: 0; letter-spacing: -.01em; line-height: 1.2; }
header.masthead h1 { flex: 1 1 auto; }
header.masthead .who { flex: 0 1 19rem; font-family: var(--sans); font-size: var(--t-meta); color: var(--ink-soft);
  text-align: right; line-height: 1.5; }
.under-rule { border-bottom: 1px solid var(--rule-firm); margin-bottom: var(--s5); }
h2.section { font-size: var(--t-h2); font-weight: 600; line-height: 1.25; margin: 0 0 var(--s1); }
h2.section:focus { outline: none; }
/* Focus lands here when a section opens: marked, without a box around the title. */
h2.section:focus-visible { outline: none; text-decoration: underline 3px var(--focus);
  text-underline-offset: .3em; }
.section-note { font-family: var(--sans); font-size: var(--t-ui); color: var(--ink-soft);
  max-width: var(--measure); margin: 0 0 var(--s4); line-height: 1.5; }

/* An entry: hanging number (a real sequence), body, and the margin beside it. */
.entry { display: grid; grid-template-columns: 2.1rem minmax(0, var(--measure)) var(--margin-col);
  gap: 0 var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.entry .para { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: var(--t-ui); padding-top: .15rem; }
.entry .body > :first-child { margin-top: 0; }
.entry .body > :last-child { margin-bottom: 0; }
.entry .title { font-weight: 600; }
.entry .quote { border-left: 2px solid var(--rule-firm); padding-left: var(--s3); margin: var(--s2) 0; }
.entry p { margin: var(--s1) 0; }
.margin { font-family: var(--sans); font-size: var(--t-meta); line-height: 1.5; color: var(--ink-soft);
  border-left: 1px solid var(--rule); padding-left: var(--s3); }
.margin b { font-weight: 600; color: var(--ink); }
.margin .line { display: block; margin-bottom: .2rem; }
.margin .attested { color: var(--attest); }
.margin .flagged { color: var(--flag); }
.margin .withdrawn { color: var(--tape); }

/* Standing: one line saying whether things are as they should be. */
.standing { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0 var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule); margin-bottom: var(--s4); }
.standing .seal { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--attest); color: var(--attest); font-family: var(--sans); font-size: var(--t-meta); }
.standing.unsettled .seal { border-color: var(--flag); color: var(--flag); }
.standing.broken .seal { border-color: var(--tape); color: var(--tape); }
.standing .verdict { font-size: 1.05rem; margin: 0 0 .15rem; }
.standing .detail { font-family: var(--sans); font-size: var(--t-meta); color: var(--ink-soft); }

/* The noting sheet: the letter, then the note, its sources beside it. */
.letter { background: var(--raised); border: 1px solid var(--rule); padding: var(--s3) var(--s3);
  white-space: pre-wrap; max-width: var(--measure); font-size: .97rem; }
.note-static { white-space: pre-wrap; max-width: var(--measure); }
.cite { font-variant-numeric: tabular-nums; }
.stamp { display: inline-block; font-family: var(--sans); font-size: var(--t-meta);
  border: 1px solid var(--attest); color: var(--attest); border-radius: var(--radius);
  padding: .1rem .5rem; margin-top: var(--s1); }
.stamp.held { border-color: var(--flag); color: var(--flag); }
.stamp.returned { border-color: var(--tape); color: var(--tape); }
.small { font-family: var(--sans); font-size: var(--t-meta); color: var(--ink-soft); }
.timing, .reading { font-variant-numeric: tabular-nums; }
.reading { font-size: 1.5rem; }

/* ------------------------------------------------------------------ controls */
button.act { display: inline-flex; align-items: center; min-height: var(--control);
  margin: var(--s2) var(--s2) 0 0; padding: .4rem .95rem; border: 1px solid var(--edge);
  border-radius: var(--radius); background: var(--raised); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-ui); line-height: 1.2; cursor: pointer; }
button.act:hover { border-color: var(--ink); }
button.act.primary { background: var(--attest); border-color: var(--attest); color: var(--on-strong); font-weight: 600; }
button.act.primary:hover { filter: brightness(1.08); }
button.act.attest { border-color: var(--attest); color: var(--attest); }
button.act.refuse { border-color: var(--tape); color: var(--tape); }
button.act[disabled] { opacity: .55; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--focus); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; min-height: 1.6rem; }

/* Fields: the label is the field's own, always — never a loose caption. */
label, .field { display: block; font-family: var(--sans); font-size: var(--t-ui); color: var(--ink-soft);
  margin: var(--s3) 0 var(--s1); }
.field > span { display: block; margin-bottom: var(--s1); }
.field .hint { display: block; font-size: var(--t-meta); margin-top: var(--s1); }
input[type="text"], input[type="password"], input[type="search"], input[type="email"],
input[type="date"], input[type="number"], select, textarea.reason, .note-draft {
  width: 100%; min-height: 2.5rem; padding: .5rem .65rem; border: 1px solid var(--edge);
  border-radius: var(--radius); background: var(--raised); color: var(--ink);
  font-family: var(--serif); font-size: 1rem; }
textarea.reason { resize: vertical; font-size: var(--t-ui); }
.note-draft { min-height: 14rem; line-height: 1.6; padding: .9rem 1rem; resize: vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--tape); }
.problem { color: var(--tape); font-family: var(--sans); font-size: var(--t-ui); margin-top: var(--s2); }

/* ------------------------------------------------------------------- states
   Loading, empty, could-not-open, not-yours and offline look alike: one
   sentence that says what happened and, where there is one, the next step. */
.state { max-width: var(--measure); padding: var(--s3) 0; font-family: var(--sans); font-size: var(--t-ui);
  color: var(--ink-soft); }
.state .what { color: var(--ink); font-family: var(--serif); font-size: var(--t-body); margin: 0 0 var(--s1); }
.state.error .what, .state.offline .what { color: var(--tape); }
.state.loading { position: relative; }
.state.loading::after { content: ""; display: block; height: 2px; margin-top: var(--s2); width: 6rem;
  background: var(--rule-firm); }
@media (prefers-reduced-motion: no-preference) {
  .state.loading::after { animation: leaf 1.2s ease-in-out infinite alternate; }
  @keyframes leaf { from { width: 2rem; } to { width: 9rem; } }
}
.nothing { font-family: var(--sans); font-size: var(--t-ui); color: var(--ink-soft); padding: var(--s3) 0;
  max-width: var(--measure); }

/* Sign in: a slip of paper. */
.gate { max-width: 22rem; margin: 5rem auto; }
.gate h1 { font-size: var(--t-h1); margin: 0 0 var(--s1); }
.gate p { font-family: var(--sans); font-size: var(--t-ui); color: var(--ink-soft); margin: 0 0 var(--s3); }

/* ------------------------------------------------------------------- tables */
table.register { border-collapse: collapse; width: 100%; max-width: 54rem; font-size: .94rem; }
table.register th { text-align: left; font-family: var(--sans); font-size: var(--t-meta); font-weight: 600;
  color: var(--ink-soft); border-bottom: 1px solid var(--rule-firm); padding: .4rem .8rem .4rem 0; }
table.register td { border-bottom: 1px solid var(--rule); padding: .5rem .8rem .5rem 0;
  vertical-align: top; font-variant-numeric: tabular-nums; }
table.register tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; max-width: 100%; }

/* ------------------------------------------- where a case stands (A3) */
.flow { margin: 0 0 var(--s4); padding: var(--s3); background: var(--raised); border: 1px solid var(--rule);
  border-left: 3px solid var(--attest); max-width: calc(var(--measure) + var(--margin-col)); }
.flow.overdue { border-left-color: var(--flag); }
.track { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 var(--s2); padding: 0; }
.stop { position: relative; flex: 1 1 5.5rem; min-width: 5.5rem; padding: 1.2rem .3rem 0 0;
  font-family: var(--sans); font-size: var(--t-meta); line-height: 1.3; color: var(--ink-soft); }
.stop::before { content: ""; position: absolute; left: 0; right: 0; top: .45rem; height: 2px; background: var(--rule-firm); }
.stop::after { content: ""; position: absolute; left: 0; top: .15rem; width: .7rem; height: .7rem;
  border-radius: 50%; background: var(--raised); border: 2px solid var(--rule-firm); }
.stop.done { color: var(--ink); }
.stop.done::before, .stop.done::after { background: var(--attest); border-color: var(--attest); }
.stop.here { color: var(--ink); font-weight: 600; }
.stop.here::after { border-color: var(--attest); box-shadow: 0 0 0 3px var(--raised), 0 0 0 5px var(--attest); }
.overdue .stop.here::after { border-color: var(--flag); box-shadow: 0 0 0 3px var(--raised), 0 0 0 5px var(--flag); }
.stop:last-child::before { right: auto; width: .7rem; }
.flow-now { margin: 0; }
.flow-now .due { color: var(--ink-soft); font-family: var(--sans); font-size: var(--t-meta); }
.overdue .flow-now .due { color: var(--flag); }
.steps { margin-top: var(--s2); display: grid; gap: var(--s1); }
.steps .small:empty { display: none; }

/* ------------------------------------------------------ patterns (A3b) */
.draft-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2) var(--s3); margin: 0 0 var(--s4); }
.draft-bar label { margin: 0; }
.bar { display: flex; height: .7rem; background: var(--rule); margin: var(--s2) 0 .2rem; max-width: var(--measure); }
.bar span { display: block; height: 100%; }
.bar .whole { background: var(--ink-soft); }
.bar .replied { background: var(--attest); }
.bar .open { background: var(--tape); }

/* -------------------------------------------------- the slow path's plan (A5) */
.plan { margin: var(--s2) 0 var(--s1); padding: var(--s2) var(--s3); border-left: 3px solid var(--rule-firm);
  background: var(--raised); max-width: var(--measure); }
.plan .plan-line { margin: 0 0 var(--s2); font-size: var(--t-ui); }
.plan .plan-rec { margin: var(--s2) 0 var(--s1); padding-top: var(--s2); border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ narrow screens
   The cover becomes a strip across the top; the tabs scroll sideways. */
@media (max-width: 62rem) {
  :root { --margin-col: 0px; }
  body { padding-left: 0; }
  .binding { position: sticky; top: 0; inset: auto; width: 100%; flex-direction: row; align-items: center;
    overflow-x: auto; overflow-y: hidden; padding: var(--s1) var(--s2); box-shadow: inset 0 -5px 0 var(--tape); }
  .binding .mark { padding: 0 var(--s3) 0 var(--s1); }
  .binding .group { display: none; }
  .tab { flex: 0 0 auto; margin: 0 2px; border-radius: var(--radius); white-space: nowrap; }
  .entry { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .margin { grid-column: 2; border-left: 0; border-top: 1px solid var(--rule);
    padding: var(--s2) 0 0; margin-top: var(--s2); }
  .sheet { padding: var(--s4) var(--s3) 5rem; }
  header.masthead { flex-direction: column; gap: var(--s1); }
  header.masthead .who { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .binding { border-right: 4px solid CanvasText; }
  .tab[aria-current="page"] { outline: 2px solid CanvasText; }
  .bar span, .stop.done::before, .stop.done::after { background: CanvasText; }
}

/* ------------------------------------------------- keyboard help (B2) */
dialog.keys { max-width: 34rem; width: calc(100% - 2rem); border: 1px solid var(--edge);
  border-radius: var(--radius); background: var(--raised); color: var(--ink); padding: var(--s3) var(--s4); }
dialog.keys::backdrop, dialog.confirm::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
kbd { font-family: var(--sans); font-size: var(--t-meta); border: 1px solid var(--edge);
  border-bottom-width: 2px; border-radius: var(--radius); padding: .05rem .4rem; background: var(--paper);
  white-space: nowrap; }
.entry:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------- demonstration and tour (B4) */
.demo-mark { color: var(--flag); }
h3.section { font-size: 1.1rem; font-weight: 600; margin: var(--s4) 0 var(--s1); }
aside.tour { position: fixed; right: var(--s3); bottom: var(--s3); z-index: 30; width: min(26rem, calc(100% - 2rem));
  background: var(--raised); color: var(--ink); border: 1px solid var(--edge); border-top: 4px solid var(--tape);
  border-radius: var(--radius); padding: var(--s3); box-shadow: 0 10px 30px -12px rgba(16, 24, 32, .45); }
aside.tour h2.section { font-size: 1.15rem; }
aside.tour p { margin: var(--s1) 0; font-size: var(--t-ui); }
@media (max-width: 62rem) { aside.tour { right: var(--s1); left: var(--s1); width: auto; bottom: var(--s1); } }

/* ------------------------------------------------------- B5: legible */
.space-mark { color: var(--ink-soft); }
p.about { margin: 0 0 var(--s3); font-family: var(--sans); font-size: var(--t-meta); }
nav.contents ol { margin: 0 0 var(--s4); padding-left: 1.2rem; font-family: var(--sans); font-size: var(--t-ui); line-height: 1.9; }
ul.how { margin: var(--s1) 0; padding-left: 1.1rem; font-size: var(--t-ui); }
p.never { font-size: var(--t-ui); color: var(--ink-soft); }
.thread { display: grid; gap: var(--s2); max-width: var(--measure); margin: 0 0 var(--s3); }
.said { padding: var(--s2) var(--s3); border-radius: var(--radius); border: 1px solid var(--rule); }
.said p { margin: 0; }
.said.mine { background: var(--raised); justify-self: end; max-width: 85%; }
.said.theirs { background: var(--paper); border-left: 3px solid var(--attest); max-width: 85%; }
.said.waiting { border-left-color: var(--rule-firm); }
.talk-form { max-width: var(--measure); }
button.linkish { text-align: left; }