:root {
  --navy-950: #071827;
  --navy-900: #0b2239;
  --navy-800: #12324f;
  --navy-700: #214762;
  --slate-700: #415d70;
  --slate-600: #587184;
  --slate-300: #b8c7d2;
  --slate-200: #d6e0e7;
  --slate-100: #e8eef2;
  --slate-50: #f5f7f9;
  --white: #fff;
  --teal-800: #05635f;
  --teal-700: #087f7a;
  --teal-100: #cdeae7;
  --teal-50: #eef8f7;
  --gold-800: #6f4d00;
  --gold-600: #a9790c;
  --gold-300: #d8ad45;
  --gold-100: #f4e4b7;
  --gold-50: #fff9e9;
  --blue-700: #155da4;
  --blue-100: #d9eafa;
  --red-700: #a12d38;
  --red-100: #f6d9dc;
  --red-50: #fff4f5;
  --shadow-sm: 0 1px 2px rgb(7 24 39 / 8%), 0 5px 16px rgb(7 24 39 / 5%);
  --shadow-md: 0 18px 46px rgb(7 24 39 / 14%);
  --radius-sm: .5rem;
  --radius-md: .8rem;
  --radius-lg: 1.1rem;
  color: var(--navy-950);
  background: var(--slate-50);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 20rem; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--slate-50); color: var(--navy-950); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue-700); }
img { max-width: 100%; }
:focus-visible { outline: .2rem solid #1686dc; outline-offset: .2rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: -6rem;
  left: 1rem;
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-950);
  font-weight: 800;
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 1rem; }

.testing-boundary {
  min-height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .45rem 1rem;
  background: var(--gold-50);
  border-bottom: 1px solid var(--gold-100);
  color: var(--gold-800);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.boundary-dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--gold-600); }

.app-header {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 4.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1.7rem;
  background: var(--navy-900);
  border-bottom: 1px solid #29475f;
}
.brand { min-width: 0; display: flex; align-items: center; gap: 1rem; color: var(--white); text-decoration: none; }
.brand picture { flex: 0 0 auto; display: grid; place-items: center; }
.brand-image { display: block; width: 10rem; height: 3.3rem; object-fit: contain; object-position: left center; }
.product-name strong, .product-name small, .role-chip strong, .role-chip small { display: block; }
.product-name strong { font-size: 1rem; letter-spacing: -.01em; }
.product-name small { margin-top: .18rem; color: #bfd0db; font-size: .72rem; }
.header-status { display: flex; align-items: center; gap: 1rem; color: var(--white); }
.environment-chip { padding: .42rem .65rem; border: 1px solid #59758b; border-radius: 999px; color: #e3ebf0; font-size: .72rem; font-weight: 800; }
.role-chip { padding-left: 1rem; border-left: 1px solid #436077; }
.role-chip strong { font-size: .78rem; }
.role-chip small { margin-top: .18rem; color: #aec3d2; font-size: .68rem; }

.app-shell { min-height: calc(100vh - 6.8rem); display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
.side-nav {
  position: sticky;
  top: 4.65rem;
  height: calc(100vh - 4.65rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.6rem 1rem 1.2rem;
  background: var(--navy-950);
  color: var(--white);
}
.nav-label { margin: 0 .75rem .65rem; color: #93adbf; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav-item { min-height: 2.8rem; display: flex; align-items: center; gap: .75rem; margin: .2rem 0; padding: .65rem .75rem; border: 1px solid transparent; border-radius: .6rem; color: #c7d4dd; text-decoration: none; font-size: .86rem; font-weight: 730; }
.nav-item:hover { background: #112d44; color: var(--white); }
.nav-item.is-active { border-color: #36697a; background: #153d50; color: var(--white); }
.nav-icon { width: 1.35rem; color: #88d4cf; font-size: 1.05rem; text-align: center; }
.nav-note { padding: 1rem; border: 1px solid #29465c; border-radius: var(--radius-md); background: #0c263d; color: #cbd7df; }
.nav-note img { width: 2.35rem; height: 2.35rem; float: left; margin: 0 .7rem .25rem 0; object-fit: cover; border-radius: .45rem; }
.nav-note p { margin: 0; font-size: .74rem; line-height: 1.48; }
.nav-note strong { display: block; margin-bottom: .18rem; color: var(--white); }

.main-content { min-width: 0; padding: 2.3rem clamp(1.1rem, 3.5vw, 3.8rem) 4rem; }
.view-container { width: min(100%, 88rem); margin: 0 auto; }
.view-container.narrow { width: min(100%, 64rem); }
.loading-view { min-height: 22rem; display: grid; place-content: center; justify-items: center; color: var(--slate-600); }
.spinner { width: 2rem; height: 2rem; border: .2rem solid var(--slate-200); border-top-color: var(--teal-700); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.eyebrow { margin: 0 0 .42rem; color: var(--teal-800); font-size: .69rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.55rem; }
.page-header h1 { max-width: 46rem; margin: 0; color: var(--navy-950); font-size: clamp(1.65rem, 2.8vw, 2.4rem); line-height: 1.12; letter-spacing: -.035em; }
.page-header p:not(.eyebrow) { max-width: 48rem; margin: .65rem 0 0; color: var(--slate-700); line-height: 1.6; overflow-wrap: anywhere; }
.button-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .7rem; }

.button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; border: 1px solid transparent; border-radius: .6rem; cursor: pointer; font-weight: 780; line-height: 1.2; text-decoration: none; }
.button.primary { background: var(--teal-700); color: var(--white); box-shadow: var(--shadow-sm); }
.button.primary:hover { background: var(--teal-800); }
.button.secondary { border-color: var(--slate-300); background: var(--white); color: var(--navy-800); }
.button.secondary:hover { border-color: var(--navy-700); background: var(--slate-50); }
.button.danger { border-color: #df9da5; background: var(--white); color: var(--red-700); }
.button:disabled { opacity: .52; cursor: not-allowed; box-shadow: none; }

.surface { border: 1px solid var(--slate-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.empty-state { min-height: 27rem; display: grid; place-content: center; justify-items: center; padding: 3rem 1.5rem; text-align: center; }
.empty-illustration { width: 5.6rem; height: 5.6rem; display: grid; place-items: center; margin-bottom: 1.3rem; border: 1px solid var(--teal-100); border-radius: 1.5rem; background: var(--teal-50); color: var(--teal-800); font-size: 2.2rem; }
.empty-state h2 { margin: 0; font-size: 1.3rem; }
.empty-state p { max-width: 34rem; margin: .65rem auto 1.35rem; color: var(--slate-700); line-height: 1.58; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.development-note { max-width: 38rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--slate-200); color: var(--slate-600); font-size: .78rem; }

.queue-list { display: grid; gap: .8rem; }
.queue-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.15rem 1.25rem; border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.queue-card h2 { margin: 0; font-size: 1rem; }
.queue-meta { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .45rem; color: var(--slate-600); font-size: .76rem; }
/* The Reviewer column -- a small weight bump so the case's assigned
   Reviewer reads as the primary person-identifying meta item in the row,
   distinct from the plain-weight items around it. */
.queue-reviewer-column { font-weight: 650; color: var(--navy-700); }
.status-pill { display: inline-flex; align-items: center; width: fit-content; padding: .32rem .58rem; border-radius: 999px; background: var(--slate-100); color: var(--navy-700); font-size: .69rem; font-weight: 820; }
.status-pill.proposal { background: var(--gold-50); color: var(--gold-800); }
.status-pill.complete { background: var(--teal-50); color: var(--teal-800); }
.status-pill.rejected { background: var(--red-50); color: var(--red-700); }

/* queue_group sections (My action needed / Waiting on
   others / Upcoming / Other reviews) and the notices panel. Reuses
   .queue-list/.queue-card/.status-pill above rather than inventing a
   parallel set of card styles. */
.queue-group { margin-top: 1.6rem; }
.queue-group:first-of-type { margin-top: .4rem; }
.queue-group-title { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font-size: .92rem; color: var(--navy-700); }
.queue-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--slate-100); color: var(--slate-700); font-size: .74rem; font-weight: 720; }
.notice-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; margin-left: auto; padding: 0 .3rem; border-radius: 999px; background: var(--gold-50); color: var(--gold-800); font-size: .68rem; font-weight: 820; }
.notice-card.is-unread { border-left: 3px solid var(--gold-800); }
.notice-actions { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }

/* Dashboard tables (queue table, tenant overview, per-case
   timeline). Real <table> markup throughout (for accessibility)
   -- .table-scroll only adds horizontal scroll on narrow viewports, it
   never hides header/cell text. Due-date status uses a left border as an
   ADDITIONAL cue on top of the cell's own text label (DUE_STATUS_TEXT,
   app.js) -- never the only signal (no color-only status). */
.table-scroll { overflow-x: auto; margin-top: .8rem; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.table-scroll caption { text-align: left; margin-bottom: .5rem; color: var(--slate-600); font-size: .76rem; }
.table-scroll th, .table-scroll td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--slate-200); white-space: nowrap; }
.table-scroll thead th { color: var(--slate-600); font-weight: 720; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.table-scroll tbody tr:last-child td { border-bottom: none; }
.table-scroll tr[data-due-status="at_risk"] { border-left: 3px solid var(--gold-800); }
.table-scroll tr[data-due-status="overdue"] { border-left: 3px solid var(--red-700); }
.table-scroll tr[data-due-status="on_track"] { border-left: 3px solid var(--teal-800); }

.form-card { padding: clamp(1.25rem, 3vw, 2rem); }
.form-card h2 { margin: 0 0 .4rem; font-size: 1.12rem; }
.form-card > p { margin: 0 0 1.4rem; color: var(--slate-700); line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { min-width: 0; display: grid; gap: .38rem; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label { color: var(--navy-800); font-size: .8rem; font-weight: 790; }
/* Excludes checkboxes -- a checkbox wrapped in `.field`
   (e.g. `.checkbox-field` below) must not inherit this text-input sizing
   (width:100%, min-height:2.75rem, padding), which would blow the
   tribal-nation checkbox up into an oversized, centered square and
   squeeze its label into a narrow leftover column. */
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: .66rem .75rem;
  border: 1px solid #9eb1bf;
  border-radius: .5rem;
  background: var(--white);
  color: var(--navy-950);
}
.field textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.field small { color: var(--slate-600); line-height: 1.4; }
/* A normal inline checkbox + label row inside a form,
   not the `.callout` highlighted-banner treatment (reserved for the
   New-review attestation confirmation and the send-back/AI-exempt notice
   banners -- see app.js's other `.callout` usages, unchanged here) --
   label to the right of a standard-size box, hint below via the existing
   `.field small` rule. */
.checkbox-field label { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.checkbox-field input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid #9eb1bf;
  border-radius: .25rem;
  background: var(--white);
}
.required-note { margin: 0 0 1rem; color: var(--slate-600); font-size: .76rem; }
.form-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--slate-200); }
.form-error { padding: .8rem 1rem; border-left: .28rem solid var(--red-700); background: var(--red-50); color: #70212a; line-height: 1.45; }
/* The withheld-draft notice -- content-free ("this box's
   AI draft was withheld", never the rule or a snippet), rendered above an
   empty findings box only. Gold/advisory, not red/error, since nothing
   failed: the human path (write it, or Regenerate) is always available. */
.withheld-draft-notice { margin: 0 0 .8rem; padding: .7rem .95rem; border-left: .28rem solid var(--gold-800); background: var(--gold-50); color: #654e19; line-height: 1.45; font-size: .85rem; }

/* The per-box wording-flags notice -- HARD
   (blocks Lock) uses the same red/error register as `.form-error`; SOFT
   (advisory only) reuses the gold/advisory register `.withheld-draft-
   notice` already uses above, since neither is a failure of the AI pass
   itself, just a thing the reviewer should look at before locking. */
.wording-flag-notice { margin: 0 0 .8rem; padding: .7rem .95rem; border-left: .28rem solid var(--gold-800); background: var(--gold-50); color: #654e19; line-height: 1.45; font-size: .85rem; }
.wording-flag-notice--hard { border-left-color: var(--red-700); background: var(--red-50); color: #70212a; }
.wording-flag-notice--soft { border-left-color: var(--gold-800); background: var(--gold-50); color: #654e19; }

.review-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--gold-100); border-radius: var(--radius-md); background: var(--gold-50); }
.review-banner strong { display: block; margin-bottom: .2rem; }
.review-banner p { margin: 0; color: #654e19; font-size: .82rem; line-height: 1.5; }
.review-layout { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.criterion-rail { position: sticky; top: 6rem; padding: .8rem; }
.criterion-rail h2 { margin: .3rem .4rem .7rem; font-size: .8rem; }
.criterion-list { display: grid; gap: .28rem; }
.criterion-link { width: 100%; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .64rem; border: 1px solid transparent; border-radius: .55rem; background: transparent; color: var(--navy-800); cursor: pointer; text-align: left; }
.criterion-link:hover { background: var(--slate-50); }
.criterion-link.is-active { border-color: #aad1ce; background: var(--teal-50); }
.criterion-code { color: var(--slate-600); font-size: .7rem; font-weight: 800; }
.criterion-title { overflow: hidden; font-size: .76rem; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; }
.decision-dot { width: .58rem; height: .58rem; border: .12rem solid var(--slate-300); border-radius: 50%; }
.decision-dot.complete { border-color: var(--teal-700); background: var(--teal-700); }
.decision-dot.rejected { border-color: var(--red-700); background: var(--red-700); }
.workspace { display: grid; gap: 1rem; }
.criterion-heading { padding: 1.3rem 1.45rem; }
.criterion-heading h1 { margin: .35rem 0 .5rem; font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.2; }
.criterion-heading p { margin: 0; color: var(--slate-700); line-height: 1.55; }

.proposal-panel { overflow: hidden; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--gold-100); background: var(--gold-50); }
.panel-heading h2 { margin: 0 0 .3rem; font-size: 1rem; }
.panel-heading p { margin: 0; color: #6b5320; font-size: .78rem; line-height: 1.45; }
.lock-label { flex: 0 0 auto; color: var(--gold-800); font-size: .7rem; font-weight: 820; }
.proposal-body { padding: 1.25rem 1.3rem; }
.fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.fact { min-width: 0; padding: .75rem; border: 1px solid var(--slate-200); border-radius: .55rem; background: var(--slate-50); }
.fact small, .provenance-grid dt { display: block; margin-bottom: .28rem; color: var(--slate-600); font-size: .67rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
.fact strong { font-size: .84rem; line-height: 1.35; }
.proposal-copy h3, .evidence-section h3 { margin: 1.15rem 0 .35rem; font-size: .82rem; }
.proposal-copy p { margin: 0; color: var(--navy-700); line-height: 1.58; }
.evidence-list { display: grid; gap: .6rem; }
.evidence-card { padding: .85rem 1rem; border-left: .25rem solid var(--teal-700); background: var(--teal-50); }
.evidence-card p { margin: 0; color: var(--navy-700); line-height: 1.5; }
.locator { display: block; margin-bottom: .3rem; color: var(--teal-800); font-size: .7rem; font-weight: 820; }
.provenance { margin-top: 1.2rem; }
.provenance summary { cursor: pointer; color: var(--navy-700); font-size: .78rem; font-weight: 780; }
.provenance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: .8rem 0 0; }
.provenance-grid dd { min-width: 0; margin: 0; color: var(--navy-700); font: .72rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

.decision-panel { padding: 1.3rem; }
.decision-panel > header { margin-bottom: 1rem; }
.decision-panel h2 { margin: 0 0 .3rem; font-size: 1rem; }
.decision-panel header p { margin: 0; color: var(--slate-700); font-size: .8rem; line-height: 1.5; }
.action-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1rem; }
.action-tab { min-height: 3rem; padding: .6rem; border: 1px solid var(--slate-300); border-radius: .55rem; background: var(--white); color: var(--navy-800); cursor: pointer; font-size: .77rem; font-weight: 800; }
.action-tab[aria-pressed="true"] { border-color: var(--teal-700); background: var(--teal-50); color: var(--teal-800); box-shadow: inset 0 0 0 1px var(--teal-700); }
.decision-summary { margin-bottom: 1rem; padding: .85rem 1rem; border-left: .25rem solid var(--teal-700); background: var(--teal-50); color: var(--navy-700); font-size: .8rem; line-height: 1.5; }
.decision-summary.rejected { border-color: var(--red-700); background: var(--red-50); }
.criterion-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.criterion-pagination span { color: var(--slate-600); font-size: .76rem; }

.controls-card { margin-bottom: 1rem; padding: 1rem 1.2rem; }
.controls-card h2 { margin: 0 0 .3rem; font-size: .92rem; }
.controls-card > p { margin: 0 0 .8rem; color: var(--slate-700); font-size: .78rem; }
.control-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.control-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .75rem; border: 1px solid var(--slate-200); border-radius: .5rem; font-size: .74rem; }
.control-item strong { color: var(--navy-800); }

.callout { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; padding: .85rem 1rem; border-left: .25rem solid var(--blue-700); background: #f1f7fd; color: var(--navy-700); font-size: .8rem; line-height: 1.5; }
.callout input[type="checkbox"] { flex: 0 0 auto; margin-top: .2rem; }
.status-toast { position: fixed; z-index: 80; right: 1rem; bottom: 1rem; max-width: min(28rem, calc(100vw - 2rem)); padding: .85rem 1rem; border-radius: var(--radius-sm); background: var(--navy-950); color: var(--white); box-shadow: var(--shadow-md); font-size: .82rem; }
.noscript { margin: 2rem; padding: 1rem; border: 2px solid var(--red-700); background: var(--white); }

@media (max-width: 64rem) {
  .app-shell { grid-template-columns: 12.5rem minmax(0, 1fr); }
  .review-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .fact-grid { grid-template-columns: 1fr; }
  .header-status .environment-chip { display: none; }
}

@media (max-width: 48rem) {
  .testing-boundary { justify-content: flex-start; }
  .app-header { min-height: 4.2rem; padding: .55rem 1rem; }
  .brand-image { width: 2.65rem; height: 2.65rem; object-fit: cover; border-radius: .5rem; }
  .role-chip { display: none; }
  .app-shell { display: block; }
  .side-nav { position: sticky; z-index: 20; top: 4.2rem; width: 100%; height: auto; display: block; padding: .5rem .8rem; border-bottom: 1px solid #29465c; }
  .side-nav nav { display: flex; gap: .4rem; }
  .nav-label, .nav-note { display: none; }
  .nav-item { flex: 1 1 0; justify-content: center; margin: 0; }
  .main-content { padding: 1.35rem 1rem 3rem; }
  .page-header { align-items: stretch; flex-direction: column; }
  .page-header .button-row { justify-content: flex-start; }
  .queue-card { grid-template-columns: 1fr; }
  .queue-card .button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .review-banner { grid-template-columns: 1fr; }
  .review-layout { display: block; }
  .criterion-rail { position: static; margin-bottom: 1rem; }
  .criterion-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .criterion-link { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .22rem; min-height: 3.4rem; }
  .criterion-title { display: none; }
  .decision-dot { width: .48rem; height: .48rem; }
  .action-tabs, .control-list, .provenance-grid { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  .product-name small { display: none; }
  .main-content { padding-inline: .75rem; }
  .empty-state { min-height: 22rem; padding-inline: 1rem; }
  .empty-actions, .empty-actions .button, .button-row, .button-row .button { width: 100%; }
  .criterion-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .criterion-pagination { flex-direction: column; align-items: stretch; }
  .criterion-pagination .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .testing-boundary, .nav-item.is-active, .empty-illustration, .proposal-panel .panel-heading, .status-pill, .action-tab[aria-pressed="true"], .evidence-card, .decision-summary, .callout { border: 1px solid CanvasText; }
  .boundary-dot, .decision-dot.complete, .decision-dot.rejected { background: CanvasText; }
  .button { forced-color-adjust: none; }
  .button.primary { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
}

@media print {
  .testing-boundary, .app-header, .side-nav, .button-row, .criterion-rail, .status-toast { display: none !important; }
  .app-shell { display: block; }
  .main-content { padding: 0; }
  .surface { border: 1px solid #777; box-shadow: none; break-inside: avoid; }
}

/* -- Work surfaces: sign-in, case workspace, dispositions, completeness -- */

.sign-in-card { max-width: 26rem; margin: 3rem auto; padding: 1.6rem; display: grid; gap: 1rem; }
.case-workspace { display: grid; gap: 1.1rem; padding: 1.3rem; margin-bottom: 1.2rem; }
.case-state-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.doc-list, .history-list, .blocking-list, .finding-list, .feedback-list, .upload-batch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.doc-list li, .history-list li, .blocking-list li, .finding-list li, .feedback-list li, .upload-batch-list li {
  padding: .6rem .75rem; border: 1px solid var(--slate-200); border-radius: var(--radius-sm); background: var(--slate-50); font-size: .85rem; line-height: 1.45;
}
.blocking-list li { border-left: .25rem solid var(--gold-600); background: var(--gold-50); }
/* Per-file upload-batch result list -- accepted/
   quarantined/rejected color accents, same left-border pattern as
   .blocking-list above. */
.upload-batch-item-accepted { border-left: .25rem solid var(--teal-700); }
.upload-batch-item-quarantined { border-left: .25rem solid var(--gold-600); background: var(--gold-50); }
.upload-batch-item-rejected { border-left: .25rem solid var(--red-700); background: var(--red-50); }
.upload-batch-item-pending { border-left: .25rem solid var(--slate-200); color: var(--slate-600); }
/* The quarantined row's own matched-text
   highlight -- scoped to this one `<mark>` usage so it never affects any
   other `<mark>`/highlight elsewhere in the app. Reuses the existing gold
   accent (same family already used for `.upload-batch-item-quarantined`
   and `.blocking-list li` above) rather than introducing a new color. */
.pii-match-highlight { background: var(--gold-100); color: var(--gold-800); font-weight: 700; padding: 0 .15rem; border-radius: .2rem; }
.completeness-panel[data-complete="true"] .completeness-summary { color: var(--teal-800); }
.completeness-panel[data-complete="false"] .completeness-summary { color: var(--gold-800); }
.completeness-summary { font-weight: 800; }
.transition-form, .upload-form, .disposition-panel, .feedback-panel { padding-top: 1rem; border-top: 1px solid var(--slate-200); }
.section-heading { margin: 0 0 .6rem; font-size: .95rem; }
.finding-list li strong { display: block; margin-bottom: .2rem; }
.tab-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.disposition-summary { font-size: .82rem; color: var(--slate-600); }

/* -- Guided eight-step review workflow -------------------- */

.step-rail { margin-bottom: 1.4rem; }
.step-rail ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.step-rail-item { flex: 1 1 9rem; min-width: 8rem; }
.step-rail-button {
  width: 100%; display: flex; align-items: center; gap: .55rem; min-height: 2.9rem;
  padding: .55rem .7rem; border: 1px solid var(--slate-200); border-radius: .6rem;
  background: var(--white); color: var(--slate-600); cursor: pointer; text-align: left; font-size: .74rem; font-weight: 780;
}
.step-rail-button:disabled { cursor: not-allowed; opacity: .55; }
.step-rail-index {
  flex: 0 0 auto; display: grid; place-items: center; width: 1.55rem; height: 1.55rem;
  border-radius: 50%; background: var(--slate-100); color: var(--navy-700); font-size: .72rem; font-weight: 820;
}
.step-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-rail-item.is-current .step-rail-button { border-color: var(--teal-700); background: var(--teal-50); color: var(--teal-800); }
.step-rail-item.is-current .step-rail-index { background: var(--teal-700); color: var(--white); }
.step-rail-item.is-complete .step-rail-index { background: var(--teal-100); color: var(--teal-800); }
.step-rail-item.is-complete .step-rail-button { color: var(--navy-800); }

.step-panel { padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1.2rem; }
.step-panel h2 { margin: 0 0 .4rem; font-size: 1.12rem; }
.step-intro { margin: 0 0 1.3rem; color: var(--slate-700); line-height: 1.55; }

.ai-progress { display: grid; gap: .9rem; padding: 2.4rem 1.5rem; text-align: center; }
.ai-progress .spinner { margin: 0 auto; }
.ai-progress-detail { margin: 0; color: var(--slate-600); font-size: .82rem; }
.ai-progress-failure { padding: .9rem 1rem; border-left: .28rem solid var(--red-700); background: var(--red-50); color: #70212a; text-align: left; line-height: 1.5; }

.summary-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin: 0 0 1.2rem; padding: 1rem 1.2rem; }
.summary-card dt { color: var(--slate-600); font-size: .68rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
.summary-card dd { margin: .22rem 0 0; color: var(--navy-800); font-size: .86rem; line-height: 1.4; }

.finding-card-list { display: grid; gap: 1rem; }
.finding-card { padding: 1.15rem 1.3rem; }
.finding-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.finding-card-header h3 { margin: 0; font-size: .98rem; }
.finding-question { margin: 0 0 .8rem; color: var(--slate-700); font-size: .8rem; line-height: 1.5; }
/* "AI finding" block -- retired: no caller
   renders `.ai-finding-block` any more (`.checklist-reference` below
   replaces it), kept only in case a future instance
   restores a visible AI-finding surface. */
.ai-finding-block { padding: .85rem 1rem; margin-bottom: .9rem; border-left: .25rem solid var(--gold-600); background: var(--gold-50); border-radius: 0 .45rem .45rem 0; }
.ai-finding-block p { margin: 0 0 .5rem; color: #5b430c; line-height: 1.5; }
.ai-finding-block p:last-child { margin-bottom: 0; }
.citation-chip-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.citation-chip { border: 1px solid var(--gold-300); border-radius: 999px; background: var(--white); color: var(--gold-800); font-size: .68rem; font-weight: 780; padding: .28rem .6rem; cursor: pointer; }
.citation-chip[aria-expanded="true"] { background: var(--gold-100); }
.citation-excerpt { margin-top: .4rem; padding: .6rem .75rem; border-radius: .45rem; background: var(--white); color: var(--navy-700); font-size: .78rem; line-height: 1.5; }
.disposition-count { flex: 0 0 auto; font-weight: 800; color: var(--teal-800); }
.disposition-form, .feedback-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--slate-200); }

/* Every memo box card, top to bottom: the box
   (textarea...Save -- visually primary), beneath it, collapsed by
   default, 'Criteria that apply and cited source text' -- read-only,
   then the secondary row. */
.topic-heading { margin: 1.4rem 0 .6rem; color: var(--navy-800); font-size: 1.02rem; font-weight: 800; }
.finding-card-list + .topic-heading { margin-top: 1.8rem; }
.memo-box textarea { border-width: 2px; border-color: var(--teal-700); background: var(--white); }
.memo-box .form-actions { border-top: none; padding-top: .6rem; }
.checklist-reference { margin: 1rem 0; padding: 0; }
.checklist-reference summary { cursor: pointer; color: var(--slate-600); font-size: .76rem; font-weight: 740; padding: .3rem 0; }
.checklist-reference-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.checklist-reference-row { padding: .6rem .75rem; border-radius: .45rem; background: var(--slate-50); }
.checklist-reference-row-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.checklist-reference-row-summary span:first-child { color: var(--slate-700); font-size: .78rem; line-height: 1.45; }
/* Empty coverage is allowed (the reference section says
   'No checklist coverage was reported for this box') -- same quiet
   register as the checklist rows themselves, not an error/warning tone. */
.checklist-reference-empty { margin: 0 0 .5rem; color: var(--slate-600); font-size: .78rem; font-style: italic; }
/* A chip shown in the reference section with the
   category's own label, for a coverage item the salvage parser kept but
   attributed to a different box's checklist (`cross_cell: true`). A quiet
   inline badge, not a status/error tone -- it is additive information
   ("also cited here"), not a problem. */
.checklist-reference-row-cross-cell { background: var(--gold-50); }
.cross-cell-chip { display: inline-block; padding: .08rem .4rem; margin-left: .3rem; border-radius: 999px; background: var(--gold-800); color: #fff; font-size: .62rem; font-weight: 740; letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; }
.secondary-row { opacity: .92; }
.secondary-row textarea { font-size: .84rem; }

.memo-preview { padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.memo-preview dl { display: grid; gap: .3rem; margin: 0; }
.memo-preview dt { margin-top: .6rem; font-weight: 800; color: var(--navy-800); font-size: .82rem; }
.memo-preview dd { margin: 0 0 .2rem; color: var(--slate-700); font-size: .82rem; line-height: 1.5; }
.export-list { margin-top: 1rem; }

/* The server-rendered memo preview
   (memo_export/render_html.py's fragment, injected via innerHTML) -- the
   second-review surface itself, the analyst's read-only/pre-lock preview,
   and the lock-step's "locked and handed off" view. Distinct class prefix
   (`memo-preview-*`) from the older, unrelated `.memo-preview` block above
   (the Finalize step's per-criterion summary, renderMemoPreview) -- the two
   never nest and are never confused for one another. */
.memo-preview-container { border: 1px solid var(--slate-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); padding: 1.2rem 1.4rem; margin: 1rem 0; }
.memo-preview-document { display: flex; flex-direction: column; gap: 1rem; }
.memo-preview-title { margin: 0; font-size: 1.05rem; color: var(--navy-800); }
.memo-preview-draft-banner { margin: 0; padding: .7rem .9rem; border-left: .25rem solid var(--gold-600); background: var(--gold-50); color: #5b430c; font-size: .82rem; line-height: 1.5; border-radius: 0 .45rem .45rem 0; }
.memo-preview-section { padding-bottom: .4rem; border-bottom: 1px solid var(--slate-100); }
.memo-preview-section:last-child { border-bottom: none; }
.memo-preview-section h3 { margin: 0 0 .4rem; font-size: .92rem; color: var(--navy-800); }
.memo-preview-section p { margin: 0 0 .6rem; color: var(--slate-700); font-size: .84rem; line-height: 1.6; }
.memo-preview-group-heading { margin: .4rem 0 0; font-size: 1rem; color: var(--navy-800); border-top: 1px solid var(--slate-200); padding-top: 1rem; }
.memo-preview-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.memo-preview-table th, .memo-preview-table td { text-align: left; padding: .35rem .6rem .35rem 0; vertical-align: top; }
.memo-preview-table th { color: var(--slate-600); font-weight: 780; width: 40%; white-space: nowrap; }
.memo-preview-table td { color: var(--navy-800); word-break: break-word; }
.memo-preview-footer { opacity: .85; }
.memo-preview-inspect { margin-top: .2rem; }
.inspect-criteria-panel .finding-card-list { margin-top: 1rem; }

/* The 9.22.26 template's own prompt
   paragraphs (e.g. "Identify and describe any considerations for
   success.") render above a narrative/findings section's body, in both
   the case-level narrative sections (Technology Assistance) and each of
   the 12 findings cells -- visually distinct from the body text itself
   (italic, slightly muted) so a reviewer can tell the prompt from the
   drafted answer at a glance. `.memo-preview-cell` is one findings cell's
   own section wrapper (a topic's heading, SECTION_KIND_HEADING, renders
   separately and once per topic -- see document_model.py); its own label
   (h4, `.memo-preview-cell-label`) is the topic label only, never a
   criterion/cell id. */
.memo-preview-prompt { margin: 0 0 .5rem; font-size: .82rem; font-style: italic; color: var(--slate-600); line-height: 1.5; }
.memo-preview-cell { padding-top: .6rem; padding-bottom: .6rem; }
.memo-preview-cell-label { margin: 0 0 .3rem; font-size: .8rem; font-weight: 780; text-transform: uppercase; letter-spacing: .02em; color: var(--slate-600); }

.admin-actions-panel { border-color: var(--red-100); }
.admin-actions-panel h2 { color: var(--red-700); }

/* Send-back's own panel, inside
   step 7, distinct from the admin-actions panel above. */
.send-back-panel { border-left-color: var(--red-700); }

@media (max-width: 48rem) {
  .step-rail-item { flex: 1 1 45%; }
  .step-rail-label { white-space: normal; }
}

.hit-category-fieldset { margin: 0; padding: .75rem .9rem; border: 1px solid #9eb1bf; border-radius: .5rem; gap: .5rem; }
.hit-category-fieldset legend { padding: 0 .35rem; color: var(--navy-800); font-size: .8rem; font-weight: 790; }

/* v0.4.0 bullets: memo text with "- " lines renders as a real list in the
   preview, and the box editors/read-only views keep line breaks and bold. */
.memo-preview-section ul.memo-preview-bullets { margin: 0 0 .6rem; padding-left: 1.25rem; color: var(--slate-700); font-size: .84rem; line-height: 1.6; }
.memo-preview-section ul.memo-preview-bullets li { margin: 0 0 .25rem; }
.memo-box-format-hint { display: block; margin-top: .25rem; }
.memo-text-view ul { margin: .2rem 0 .4rem; padding-left: 1.25rem; }
.memo-text-view p { margin: 0 0 .4rem; }

/* v0.4.0 lane B2: formatted view with an "Edit text" toggle for memo boxes. */
.memo-field-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.memo-view { margin-top: .35rem; padding: .7rem .9rem; border: 1px solid var(--teal-100); border-radius: .5rem; background: var(--white); line-height: 1.5; }
.memo-view[hidden], .memo-edit[hidden], .memo-edit-button[hidden] { display: none; }
.memo-edit-actions { display: flex; gap: .5rem; margin-top: .5rem; }
/* Save only in edit mode; an unreviewed AI draft keeps "Review and save" reachable. */
.memo-box:has(.memo-formatted-field[data-mode="view"]:not([data-dirty="true"])) .memo-save-button:not(.memo-save-keep) { display: none; }
.memo-view[data-action] { cursor: text; }
.memo-view:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.memo-unsaved-badge { margin-left: auto; margin-right: .5rem; padding: .15rem .55rem; border-radius: 999px; background: #fff3cd; color: #7a5200; border: 1px solid #e0b43a; font-size: .78rem; font-weight: 740; }
.memo-unsaved-badge[hidden] { display: none; }

/* v0.4.0 lane B3: WYSIWYG editor for memo boxes (looks like the formatted view; hidden textarea holds the form value). */
.memo-toolbar { display: flex; gap: .4rem; margin-top: .35rem; }
.memo-tool { min-width: 2.5rem; padding: .25rem .7rem; }
.memo-tool[aria-pressed="true"] { background: var(--teal-100); border: 2px solid var(--teal-700); color: var(--teal-800); }
.memo-editor { margin-top: .35rem; padding: .7rem .9rem; min-height: 8rem; border: 2px solid var(--teal-700); border-radius: .5rem; background: var(--white); line-height: 1.5; overflow-wrap: anywhere; }
.memo-editor:focus, .memo-editor:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 2px; }
.memo-tool:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 2px; }
.memo-editor p { margin: 0 0 .4rem; white-space: pre-wrap; }
.memo-editor ul { margin: .2rem 0 .4rem; padding-left: 1.25rem; }
.memo-count { min-height: 1.2rem; margin-top: .25rem; font-size: .84rem; font-weight: 700; color: #7a5200; }
.memo-count-over { color: var(--red-700); }
.memo-formatted-field textarea[hidden] { display: none; }