/* The accountant review screen (M9). Warm paper, ink as the one primary action, colour for status only (amber needs a decision, red blocked or
   not delivered, green complete only, neutral grey for Not sent / Draft / Waiting). Fonts are self-hosted (SIL OFL 1.1): IBM Plex Sans for the
   interface, Source Serif 4 for client names and case headings only, IBM Plex Mono for fingerprints and versions. */
@font-face { font-family: "Plex Sans"; src: url("/review/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/review/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/review/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("/review/static/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("/review/static/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/review/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #f6f4ef; --card: #ffffff; --soft: #efece6; --rule: #e2ddd3; --ink: #1c1b19; --muted: #57534b; --faint: #77726a;
  --amber-bg: #fbefd4; --amber: #6e4a00; --amber-edge: #c8902b;
  --red-bg: #f8e0dc; --red: #8a2618; --green-bg: #e2eee3; --green: #22532b; --grey-bg: #ebe8e2; --grey: #4a4740;
  --sans: "Plex Sans", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Source Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { font: 87.5%/1.45 var(--sans); color: var(--ink); background: var(--paper); font-variant-numeric: tabular-nums lining-nums; }
body { margin: 0; background: var(--paper); }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .5rem .75rem; z-index: 5; }
.skip:focus { left: .5rem; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: 1.85rem; line-height: 1.15; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
h1.serif { font-size: 2rem; }
.mono { font-family: var(--mono); font-size: .86rem; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
p { margin: .35rem 0; }

/* shell */
.shell { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--soft); border-right: 1px solid var(--rule); display: flex; flex-direction: column; align-items: stretch; padding: 1rem .35rem; gap: .25rem; }
.rail .mark { font-weight: 600; text-align: center; margin: 0 0 1rem; font-size: 1.05rem; }
.rail a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem .2rem; border-radius: 8px; text-decoration: none; font-size: .74rem; color: var(--muted); }
.rail a .ico { font-size: 1.25rem; line-height: 1; color: var(--ink); }
.rail a[aria-current="page"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--rule); }
.rail .me { margin-top: auto; text-align: center; font-weight: 600; font-size: .85rem; }
.page { display: flex; flex-direction: column; min-width: 0; }
main { padding: 1.4rem 1.6rem 1rem; flex: 1; min-width: 0; }
main:focus { outline: none; }
.foot { padding: .6rem 1.6rem; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--rule); }
.status { min-height: 0; }
.status p { margin: .6rem 1.6rem 0; padding: .45rem .7rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; font-size: .9rem; }
.status p.error { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.crumb { font-size: .9rem; margin-bottom: .6rem; display: inline-block; }

/* controls */
button, .btn { font: inherit; font-weight: 500; border-radius: 6px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); padding: .5rem .85rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; }
button:hover, .btn:hover { border-color: var(--ink); }
button.primary, .btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
button:disabled, button[aria-disabled="true"] { background: var(--soft); color: var(--faint); border-color: var(--rule); cursor: not-allowed; }
button.link { border: 0; background: none; padding: .2rem 0; min-height: 0; text-decoration: underline; }
.buttons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0 .25rem; }
input[type="text"], input[type="search"], input[type="date"], select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: .45rem .6rem; min-height: 36px; max-width: 100%; }
textarea { width: 100%; min-height: 12rem; }
label { font-weight: 500; }
.form { display: grid; gap: .4rem; margin: .6rem 0; padding: .7rem; background: var(--soft); border-radius: 8px; }
.form .row-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* chips: words first, colour only for state */
.chip { display: inline-block; font-size: .8rem; font-weight: 600; padding: .12rem .5rem; border-radius: 5px; white-space: nowrap; }
.chip.amber { background: var(--amber-bg); color: var(--amber); }
.chip.red { background: var(--red-bg); color: var(--red); }
.chip.green { background: var(--green-bg); color: var(--green); }
.chip.neutral { background: var(--grey-bg); color: var(--grey); }

/* cards */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 1.1rem 1.25rem; }
.card + .card { margin-top: 1rem; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding-bottom: .7rem; border-bottom: 1px solid var(--rule); margin-bottom: .8rem; }
.kv { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .55rem 1rem; align-items: baseline; }
.kv dt { margin: 0; } .kv dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.box { background: var(--soft); border: 1px solid var(--rule); border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0; }

/* queue */
.qhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.filters input[type="search"] { min-width: 14rem; flex: 1 1 14rem; max-width: 22rem; }
.queue { display: grid; grid-template-columns: 172px minmax(300px, 420px) minmax(0, 1fr); border: 1px solid var(--rule); border-radius: 10px; background: var(--card); min-height: 560px; }
.lanes { border-right: 1px solid var(--rule); padding: .6rem; display: flex; flex-direction: column; gap: .25rem; background: #fbfaf7; border-radius: 10px 0 0 10px; }
.lanes button { justify-content: space-between; border: 0; background: none; padding: .45rem .55rem; min-height: 32px; width: 100%; text-align: left; font-size: .9rem; }
.lanes button[aria-pressed="true"] { background: var(--soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--ink); }
.lanes .n { font-weight: 600; }
.lanes .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.dot.red { background: var(--red); } .dot.amber { background: var(--amber-edge); } .dot.neutral { background: var(--faint); } .dot.green { background: var(--green); }
.clients { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); border: 1px solid var(--rule); border-radius: 10px; background: var(--card); min-height: 480px; }
.rows li.norow { grid-template-columns: minmax(0, 1fr); }
.rows li.norow .rowbtn { padding-left: .8rem; color: inherit; text-decoration: none; }
.rows .name.serif { font-weight: 600; }
ol.jobs { list-style: none; margin: 0; padding: 0; }
ol.jobs li { border: 1px solid var(--rule); border-radius: 8px; padding: .7rem .85rem; margin: 0 0 .6rem; background: var(--card); }
ol.jobs .l1 { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
ol.jobs .buttons { margin-top: .4rem; }
.list { border-right: 1px solid var(--rule); min-width: 0; display: flex; flex-direction: column; }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--rule); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-height: 40px; }
.list-head button { text-transform: none; letter-spacing: 0; font-size: .8rem; min-height: 28px; padding: .2rem .5rem; }
.rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 70vh; }
.rows li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--rule); }
.rows li[data-selected="true"] { background: var(--soft); box-shadow: inset 3px 0 0 var(--ink); }
.rows input[type="checkbox"] { margin: 0 0 0 .55rem; width: 15px; height: 15px; }
.rowbtn { display: block; width: 100%; border: 0; border-radius: 0; background: none; text-align: left; padding: .32rem .7rem .32rem .35rem; min-height: 40px; font-weight: 400; }
.rowbtn:hover { background: #faf8f4; }
.rowbtn .l1 { display: flex; justify-content: space-between; gap: .5rem; align-items: center; font-size: .93rem; font-weight: 600; line-height: 1.2; }
.rowbtn .l1 .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowbtn .l2 { font-size: .8rem; color: var(--muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview { padding: 1.2rem 1.4rem; min-width: 0; }
.preview .sel { font-size: .8rem; color: var(--muted); }
.preview hr, .rule { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0; }
.empty { padding: 1.2rem; color: var(--muted); }
.keys { font-size: .78rem; color: var(--muted); margin-top: .5rem; }
kbd { font-family: var(--mono); font-size: .75rem; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; background: var(--card); }

/* review */
.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
.docpane { background: var(--soft); border: 1px solid var(--rule); border-radius: 10px; padding: 1rem; }
.docpane .dochead { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: .7rem; gap: .5rem; }
.docpane .dochead strong { overflow-wrap: anywhere; }
.page-img { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: .5rem; }
.page-img img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.pin { border-left: 4px solid var(--amber-edge); background: var(--amber-bg); padding: .65rem .8rem; margin: 0 0 .8rem; border-radius: 0 4px 4px 0; }
.pin .quote { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; margin: .8rem 0; }
#pv-box .compare { grid-template-columns: max-content minmax(0, 1fr); }   /* label beside value: the label keeps its width, so on a phone a long value wraps instead of running over it */
.compare .v { font-size: 1.05rem; font-weight: 600; }
.compare .r { text-align: right; }

/* draft */
.draft { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
.msg dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem .9rem; margin: 0 0 .9rem; align-items: baseline; }
.msg dt { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.msg dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1rem 0; margin: 0 0 .7rem; font-size: 1rem; line-height: 1.55; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .7rem; align-items: start; }
.steps .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .85rem; background: var(--grey-bg); color: var(--grey); }
.steps li.done .n { background: var(--green-bg); color: var(--green); }
.steps li.stale .n { background: var(--amber-bg); color: var(--amber); }
.steps .t { font-weight: 600; }
.ready a.go { display: inline-block; font-weight: 600; padding: .5rem .8rem; border: 2px solid var(--ink); border-radius: 6px; text-decoration: none; margin: .5rem 0; }
.flag { color: var(--red); background: var(--red-bg); font-weight: 600; padding: .35rem .6rem; border-radius: 6px; display: inline-block; }
.notice { font-size: .88rem; color: var(--muted); }
.notice strong { color: var(--ink); }
table.simple { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.simple th, table.simple td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.simple th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* narrow screens: stack, never scroll sideways */
@media (max-width: 1100px) {
  .queue, .clients { grid-template-columns: minmax(0, 1fr); }
  .lanes { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--rule); border-radius: 10px 10px 0 0; }
  .lanes button { width: auto; flex: 1 1 45%; }
  .lanes p.keys { flex: 1 1 45%; margin: .2rem .5rem; }
  .list { border-right: 0; border-bottom: 1px solid var(--rule); }
  .rows { max-height: 52vh; }
}
@media (max-width: 640px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { flex-direction: row; justify-content: space-around; padding: .3rem; position: sticky; top: 0; z-index: 3; border-right: 0; border-bottom: 1px solid var(--rule); }
  .rail .mark, .rail .me { display: none; }
  .rail a { padding: .35rem .3rem; }
  main { padding: 1rem; }
  .foot, .status p { margin-left: 1rem; margin-right: 1rem; padding-left: 0; }
  h1 { font-size: 1.5rem; } h1.serif { font-size: 1.65rem; }
  .split2 { grid-template-columns: minmax(0, 1fr); }
  .filters input[type="search"] { min-width: 0; }
  .card { padding: .9rem; }
}

/* states: the status line, loading, empty, focus and hover (M10 craft pass; shared by the staff screen and the public demo) */
:root { --accent: #24466b; --accent-soft: #e7edf4; --accent-rule: #c3d0df; }
.status p { border-left: 3px solid var(--rule); }
.status p.waking { border-color: var(--accent-rule); border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; gap: .55rem; }
.status p.waking::before { content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); animation: mda-pulse 1.2s ease-in-out infinite; }
.loading { display: flex; align-items: center; gap: .6rem; }
.loading::before { content: ""; flex: 0 0 auto; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--ink); animation: mda-spin .8s linear infinite; }
.rows li.empty, p.empty { display: block; text-align: center; padding: 2rem 1rem; color: var(--muted); }
.rowbtn:focus-visible, .lanes button:focus-visible, .rows a.rowbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.lanes button:hover { background: var(--soft); }
.filters button:hover:not([aria-pressed="true"]):not(:disabled) { border-color: var(--ink); }
.rail a:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
@keyframes mda-spin { to { transform: rotate(360deg); } }
@keyframes mda-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loading::before, .status p.waking::before { animation: none; } }

/* the public demo's banner and notes (M10; only the public demo shell has them): the calm accent, not amber, which means "needs a decision" */
.demo-banner { margin: 0; padding: .45rem 1rem; background: var(--accent-soft); color: var(--accent); border-bottom: 1px solid var(--accent-rule); font-size: .85rem; line-height: 1.45;
               text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .6rem; }
.demo-banner strong, .demo-banner a { color: var(--accent); }
.demo-banner-date { color: var(--accent); opacity: .9; }
.demo-note { color: var(--accent); font-weight: 500; border-left: 3px solid var(--accent-rule); padding-left: .6rem; margin-top: .75rem; }

/* deadlines (M10 demo data): an unfinished job past its VAT deadline is marked in words and in the blocked colour, never by colour alone */
.overdue { color: var(--red); font-weight: 600; }
.flag.overdue-flag { display: block; margin-top: .5rem; }

/* UX P1.1 evidence review: the finding is read first; from 1024 px the document sits on its left (UX_PLAN.md section 6) */
.review { grid-template-areas: "doc find" "doc rest"; grid-template-rows: auto 1fr; }
.review > .docpane { grid-area: doc; }
.review > .findcol { grid-area: find; }
.review > .restcol { grid-area: rest; }
@media (max-width: 1023px) { .review { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; } .review > .docpane, .review > .findcol, .review > .restcol { grid-area: auto; } }   /* same specificity as the areas above, so this wins */
.why { font-size: 1.0625rem; line-height: 1.5; font-weight: 500; margin: .2rem 0 .6rem; max-width: 62ch; }
.doclist { margin: .9rem 0 .2rem; }
.doclist ul { list-style: none; margin: .35rem 0 0; padding: 0; }
.doclist li { display: grid; gap: .1rem; padding: .5rem 0 .5rem .7rem; border-top: 1px solid var(--rule); box-shadow: inset 3px 0 0 transparent; }
.doclist li[aria-current] { box-shadow: inset 3px 0 0 var(--amber-edge); }
.doclist .fname { font-weight: 600; unicode-bidi: isolate; overflow-wrap: anywhere; }
.doclist .verdict { font-size: .86rem; color: var(--muted); }
/* decisions: the rare or risky ones quiet on the left, then the secondary, then the one primary on the right; 24 px or more apart */
.actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.75rem; margin: 1rem 0 .35rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.actionbar .quiet, .actionbar .main { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actionbar .main { margin-left: auto; }
.actionbar .quiet button { background: none; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; padding: .35rem .45rem; min-height: 32px; color: var(--ink); }
.actionbar .quiet button:hover:not(:disabled) { border-color: var(--rule); }
.actionbar .quiet button:disabled { background: none; color: var(--faint); text-decoration-color: var(--rule); }
@media (max-width: 640px) {
  .actionbar { flex-direction: column; align-items: stretch; }                  /* DOM order is visual order: the primary ends up bottom-most, in the thumb zone */
  .actionbar .main { margin-left: 0; flex-direction: column; align-items: stretch; }
  .actionbar .main > * { justify-content: center; min-height: 44px; }
  .actionbar .quiet { justify-content: flex-start; }
}

/* UX P1.2: the proof chain in one line on every job; the draft's state in one sentence; the full fingerprint grouped in fours */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chainline { list-style: none; margin: .6rem 0 .3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .86rem; }
.chainline li { display: inline-flex; align-items: baseline; gap: .35rem; color: var(--muted); }
.chainline li.done { color: var(--ink); }
.chainline .mk { flex: 0 0 auto; width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--faint); transform: translateY(.05rem); }
.chainline li.done .mk { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px var(--card); }
.chainline .t { font-weight: 600; }
.chainline .d { color: var(--muted); }
.status-sentence { font-size: 1rem; line-height: 1.5; margin: .5rem 0 0; max-width: 70ch; padding: .55rem .75rem; border-left: 3px solid var(--rule-strong, #cfc8bb); background: var(--card); }
.fp { margin: .35rem 0; }
.fp .mono { display: block; margin-top: .15rem; letter-spacing: .02em; word-spacing: .12em; }

/* UX P1.3: a long list stays cheap (rows off screen are not rendered, yet stay in the page for find and screen readers); a wait is shown */
.rows li { content-visibility: auto; contain-intrinsic-size: auto 49px; }
main[aria-busy] { cursor: progress; }

/* UX P1.4: the command palette and the shortcut sheet, the one floating layer (UX_PLAN.md section 4: level 1) */
dialog.sheet { border: 1px solid var(--rule-strong, #cfc8bb); border-radius: 10px; padding: 0; width: min(36rem, calc(100vw - 2rem)); max-height: min(80vh, 42rem);
               background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgb(28 27 25 / .06), 0 12px 32px -8px rgb(28 27 25 / .22); }
dialog.sheet::backdrop { background: rgb(28 27 25 / .32); }
#palette input { width: 100%; max-width: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 10px 10px 0 0; padding: .9rem 1rem; font-size: 1rem; min-height: 48px; }
#palette ul { list-style: none; margin: 0; padding: .35rem; max-height: 22rem; overflow-y: auto; }
#palette li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .65rem; border-radius: 6px; cursor: pointer; min-height: 36px; }
#palette li[aria-selected="true"] { background: var(--soft); box-shadow: inset 3px 0 0 var(--accent); }
#palette li.empty { color: var(--muted); cursor: default; }
#palette .pl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.palette-foot { margin: 0; padding: .5rem 1rem; border-top: 1px solid var(--rule); }
#keys { padding: 1rem 1.25rem 1.25rem; }
#keys .sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .4rem; }
#keys h3 { margin: 1rem 0 .3rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.keys-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.keys-table th { text-align: left; font-weight: 400; padding: .3rem 1rem .3rem 0; white-space: nowrap; vertical-align: top; }
.keys-table td { padding: .3rem 0; border-top: 1px solid var(--rule); }
[data-single-switch][aria-pressed="false"] { border-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { dialog.sheet[open] { animation: mda-in 160ms cubic-bezier(.2, 0, 0, 1); } }
@keyframes mda-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* UX P1.5: legible rows (14 px name, 13 px detail), a queue that can end, and an empty filter with a way back */
.rowbtn .l1 { font-size: 1rem; }
.rowbtn .l2 { font-size: .93rem; }
.rowbtn .l2 abbr { text-decoration: none; }
.due-soon { font-weight: 600; color: var(--ink); }
.donefornow { margin: 0 0 1rem; padding: .8rem 1rem; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--green); border-radius: 0 8px 8px 0; }
.donefornow .dn-t { font-weight: 600; font-size: 1.05rem; margin: 0 0 .2rem; }
.rows li.empty p { margin: 0 0 .6rem; }

/* UX P1.6: honest states */
.problem { max-width: 40rem; padding: 1.2rem 1.4rem; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--red); border-radius: 0 10px 10px 0; }
.problem[data-problem="not-in-demo"] { border-left-color: var(--accent); }
.problem h1 { font-size: 1.4rem; margin-bottom: .4rem; }
.problem .what { font-size: 1.05rem; font-weight: 500; }
.status p.offline { border-left-color: var(--ink); background: var(--soft); font-weight: 600; }

/* UX P1.7, WCAG 2.2 AA (UX_PLAN.md section 11) */
@media (max-width: 1023px) { .draft { grid-template-columns: minmax(0, 1fr); } }                 /* side by side from 1024 px, as the evidence page */
.rows label.pick { display: flex; align-items: center; justify-content: center; align-self: stretch; min-width: 28px; min-height: 40px; cursor: pointer; }
.rows label.pick input[type="checkbox"] { margin: 0; }                                         /* 2.5.8: the target is the whole first column, not the 15 px box */
@media (max-width: 640px) { .rows label.pick input[type="checkbox"] { width: 24px; height: 24px; } }   /* 2.5.8 on a phone: the box itself is 24 px, as it sits by the bottom tab bar */
.field-error { color: var(--red); font-weight: 600; margin: .1rem 0 0; min-height: 0; }
.field-error:empty { display: none; }
@media (max-width: 640px) { html { scroll-padding-top: 4.5rem; } }                             /* 2.4.11: focus never hides under the sticky bar */
/* status marks that differ in shape, drawn in CSS, always beside a word */
.chip::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .35rem; vertical-align: .05rem; }
.chip.red::before { background: currentColor; }                                                /* square: blocked */
.chip.amber::before { background: currentColor; transform: rotate(45deg) scale(.85); }        /* diamond: needs a decision */
.chip.neutral::before { border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; } /* ring: waiting */
.chip.green::before { width: .3rem; height: .55rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-.1rem); } /* tick: done */
/* Windows contrast themes drop box-shadows: selection and pressed lanes use outlines there */
@media (forced-colors: active) {
  .rows li[data-selected="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .lanes button[aria-pressed="true"], .filters button[aria-pressed="true"] { outline: 2px solid Highlight; }
  #palette li[aria-selected="true"] { outline: 2px solid Highlight; }
  .chainline li.done .mk { background: CanvasText; }
}

/* UX P2.3: phone layout (R11, UX_PLAN.md section 6). Under 640 px the rail becomes a bottom tab bar in the thumb zone, and on a job page the
   decision (the primary and its secondary; on a draft, with the line that says what approval does) sticks just above it. The quiet, rare or
   risky verbs stay where they are in the card. Every target in either bar is at least 48 px tall; level 0, so a hairline and no shadow. */
:root { --tabbar: 58px; }
@media (max-width: 640px) {
  .rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 4; justify-content: stretch; gap: 0; padding: 0 0 env(safe-area-inset-bottom, 0);
          border-bottom: 0; border-top: 1px solid var(--rule); }
  .rail a { flex: 1 1 0; justify-content: center; min-height: var(--tabbar); padding: .3rem .2rem; border-radius: 0; }
  .rail a[aria-current="page"] { box-shadow: inset 0 3px 0 var(--ink); }
  .rail a:focus-visible { outline-offset: -4px; }
  .page { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0)); }
  html { scroll-padding-top: 0; scroll-padding-bottom: calc(var(--tabbar) + 190px); }    /* 2.4.11: focus is scrolled clear of both bars */
  .actionbar { display: contents; }                                                     /* its two groups become the card's own: only the main one sticks */
  .actionbar .quiet { margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--rule); }
  .actionbar .quiet button { min-height: 48px; }
  .actionbar .main, .decide { position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0)); z-index: 2; margin: .7rem -.9rem 0; padding: .6rem .9rem;
                              background: var(--card); border-top: 1px solid var(--rule); }
  .actionbar .main { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
  .actionbar .main > *, .decide .buttons > * { flex: 1 1 0; justify-content: center; min-height: 48px; }
  .actionbar .main > .primary, .decide .buttons > .primary { flex-basis: 100%; }      /* the primary full width and bottom-most; the DOM order is the visual order */
  .decide .buttons { margin: 0; flex-wrap: wrap; gap: .5rem; }
  .decide p { margin: .45rem 0 0; }
}

/* UX P2.4: the undo toast (level 1, a floating layer), bottom centre and clear of the phone's tab bar; empty, it takes no space */
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 6; max-width: min(36rem, calc(100vw - 2rem)); display: flex; align-items: center; gap: 1rem;
         padding: .55rem .6rem .55rem 1rem; background: var(--ink); color: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgb(28 27 25 / .06), 0 12px 32px -8px rgb(28 27 25 / .22); }
.toast:empty { padding: 0; box-shadow: none; }
.toast button { background: transparent; color: #fff; border-color: rgb(255 255 255 / .55); min-height: 36px; }
.toast button:hover { border-color: #fff; }
.toast button:focus-visible { outline-color: #fff; }
@media (max-width: 640px) { .toast { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0) + .75rem); width: calc(100vw - 2rem); justify-content: space-between; } .toast button { min-height: 48px; } }
@media (forced-colors: active) { .toast:not(:empty) { border: 2px solid CanvasText; } }

/* UX P2.5: each line the checklist asked for carries its item's label beside it, in the margin from 1280 px and under the line below that.
   The labels are generated content, so the message's own text is unchanged. */
.msg .body .ln[data-from] { display: inline-block; width: 100%; position: relative; }
.msg .body .ln[data-from]::after { content: attr(data-from); display: block; margin: .15rem 0 .45rem; padding-left: .6rem; border-left: 2px solid var(--green);
                                   font-size: .8rem; line-height: 1.35; color: var(--muted); white-space: normal; }
.msg .body .ln[data-matched="false"]::after { border-left-color: var(--amber-edge); color: var(--amber); }
@media (min-width: 1280px) {
  .msg .body[data-sourced] { padding-right: 15rem; }
  .msg .body .ln[data-from]::after { position: absolute; top: .2rem; left: calc(100% + 1.25rem); width: 13.75rem; margin: 0; }
}

/* the hands-on sample demo: its controls sit in their own bar under the banner, so the banner reads exactly its one sentence */
.demo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .4rem 1rem; background: var(--paper); border-bottom: 1px solid var(--accent-rule); font-size: .86rem; }
.demo-tools button { min-height: 32px; padding: .3rem .7rem; }
.demo-tools-date { color: var(--muted); }
.demo-tools a { color: var(--accent); }
.demo-upload-msg { flex: 1 0 100%; margin: 0; font-weight: 600; color: var(--accent); }
.demo-upload-msg:empty { display: none; }
@media (max-width: 640px) { .demo-tools button { min-height: 44px; } }

/* the hands-on sample demo: which sample case this is, and the one case labelled as a known limit, in words and never by colour alone */
.casenote { max-width: 62rem; margin: .4rem 0 1rem; padding: .7rem .9rem; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.casenote p { margin: .2rem 0; }
.casenote .limit, .flag.limit { color: var(--amber); background: var(--amber-bg); border-left: 3px solid var(--amber-edge); padding: .35rem .6rem; margin: .35rem 0; }
.chip.limit { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-edge); }
.chip.limit::before { content: "!"; width: auto; height: auto; font-weight: 700; }

/* UX P2.2: print (a proof chain or a message kept on the client file). The demo's truth label prints too. */
@media print {
  .rail, .filters, .lanes, .keys, .status, .skip, .actionbar, .decide, .buttons, .toast, .demo-tools, .crumb, dialog, .foot { display: none !important; }
  html, body { background: #fff; color: #000; }
  .shell { display: block; }
  .card, .docpane, .preview, .queue { border: 1px solid #999; box-shadow: none; background: #fff; }
  .draft, .review { display: block; }
  .card { break-inside: avoid; margin-bottom: 12pt; }
  .steps li, .chainline li { break-inside: avoid; }
  .demo-banner { background: #fff; color: #000; border: 1px solid #000; }
}