/* Trace Law Partners — DPDPA assessment platform.
   Tokens are taken verbatim from design.md. Do not add a colour, font, radius or
   shadow that is not defined here; derive from an existing token and note it. */

/* ── Tokens (design.md §3, §4, §5) ──────────────────────────────────────── */
:root {
  --ink: #0A1334;      --ink-raised: #222C3B;
  --ink-100: #C5CEDD;  --ink-300: #A0AABA;  --ink-500: #7F8C9F;
  --sand: #D1CCC1;     --bone: #EEECE8;     --paper: #F7F7F7;  --white: #FFFFFF;
  --umber: #605847;    --gold: #F3CE49;
  --status-critical: #9E2B25; --status-attention: #A8761E;
  --status-active: #2F5D50;   --status-settled: #7F8C9F;

  /* Licensed families first; the design.md-sanctioned substitutes back them up.
     Never substitute one without the other. */
  --font-display: "IvyPresto Text", Newsreader, Georgia, serif;
  --font-sans: "DIN Next", Barlow, system-ui, -apple-system, sans-serif;

  --fs-display: 60px; --fs-h1: 40px; --fs-h2: 34px; --fs-h3: 24px; --fs-h4: 20px;
  --fs-lede: 18px;
  --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-flat: 0; --r: 4px; --r-lg: 8px;
  --shadow-raised: 0 1px 2px rgba(10,19,52,.06), 0 2px 8px rgba(10,19,52,.04);
  --shadow-overlay: 0 8px 32px rgba(10,19,52,.16);
  --ease: cubic-bezier(.2, 0, .2, 1);
  --sidebar-w: 240px;

  --tone: var(--status-settled); /* overridden by .tone-* */
}

.tone-critical  { --tone: var(--status-critical); }
.tone-attention { --tone: var(--status-attention); }
.tone-active    { --tone: var(--status-active); }
.tone-settled   { --tone: var(--status-settled); }

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--umber);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0 0 var(--s3); }
h1 { font-size: var(--fs-h1); font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
p  { margin: 0 0 var(--s4); max-width: 72ch; }

a { color: var(--ink); text-decoration-color: var(--sand); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

/* design.md §10 — visible focus on every interactive element, never outline:none. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.small   { font-size: var(--fs-small); line-height: 1.2; }
.caption { font-size: var(--fs-caption); line-height: 1.4; }
.muted   { color: var(--umber); opacity: .75; }
.strong  { font-weight: 500; }
.prose   { max-width: 680px; }
.nums    { font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: var(--s4); }

/* ── Shell (design.md §5) ───────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
         align-items: start; min-height: 100vh; }

/* Sticky and exactly one viewport tall. As a plain grid item the sidebar grew with
   the page, which put the user block at the bottom of the *document* -- on a long
   page you had to scroll to the end to reach your own account or sign out. */
.sidebar {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  background: var(--ink);
  border-radius: var(--r-flat);
  padding: var(--s6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  overflow-y: auto;
}

/* Ink-on-transparent mark against the navy sidebar: invert it. */
.wordmark__logo { height: 52px; width: auto; display: block;
                  filter: brightness(0) invert(1); opacity: .92; }
/* The mark, given room, on the same 24px line as every link below it. The mark
   already contains the words "Trace Law Partners", so nothing is set beneath it:
   a product label there was a second wordmark competing with the first. */
.sidebar .wordmark {
  display: block; padding: var(--s3) var(--s5) var(--s5);
  text-decoration: none; color: inherit;
  transition: opacity 150ms var(--ease);
}
.sidebar .wordmark:hover { opacity: .78; }

.sidebar nav { margin-top: 0; }
.sidebar nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar nav ul + .nav-label { margin-top: var(--s5); }

/* Group labels. Small, quiet, and set apart from the links by tracking rather
   than by shouting -- design.md bans all-caps labels. */
.nav-label { margin: 0 0 var(--s2); padding: 0 var(--s5);
             font-size: var(--fs-caption); color: var(--ink-500);
             letter-spacing: .06em; }

.sidebar nav a {
  display: flex; align-items: center; gap: var(--s3); min-height: 44px;
  padding: 0 var(--s5); color: var(--ink-100); text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.sidebar nav a:hover { background: var(--ink-raised); color: var(--white); }
.sidebar nav a[aria-current="page"] { color: var(--white); border-left-color: var(--gold);
                                      background: var(--ink-raised); font-weight: 500; }

/* The one number in the sidebar: how much is waiting on a person. */
.nav-count { margin-left: auto; min-width: 22px; padding: 2px var(--s2);
             border-radius: 11px; background: var(--gold); color: var(--ink);
             font-size: var(--fs-caption); font-weight: 500; text-align: center;
             font-variant-numeric: tabular-nums; }

/* Name, role and the way out on one line, pinned to the bottom of the viewport. */
.sidebar .sidebar-foot {
  margin-top: auto; padding: var(--s3) var(--s4);
  border-top: 1px solid rgba(197,206,221,.18);
  display: flex; align-items: center; gap: var(--s3);
  color: var(--ink-300); font-size: var(--fs-small);
}
.sidebar .sidebar-foot .who {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2); border-radius: var(--r); text-decoration: none;
}
.who-text { min-width: 0; }

/* Initials rather than a photograph: the firm has no avatars to upload, and two
   letters identify who is signed in at a glance. Square like everything else in
   this column -- a circle here would be the only one in the interface. */
.avatar {
  flex: none; width: 34px; height: 34px; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-raised); color: var(--ink-100);
  border: 1px solid rgba(197,206,221,.18);
  font-size: var(--fs-caption); font-weight: 500; letter-spacing: .04em;
}
.sidebar .sidebar-foot .who:hover { background: var(--ink-raised); }
.who-name { display: block; color: var(--ink-100);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { display: block; color: var(--ink-500); font-size: var(--fs-caption);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* An icon button is still a 44px target. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0; flex: none;
  background: none; border: 1px solid transparent; border-radius: var(--r);
  color: var(--ink-300); cursor: pointer;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.icon-btn:hover { background: var(--ink-raised); color: var(--white);
                  border-color: rgba(197,206,221,.18); }

.content { min-width: 0; }
.container { max-width: 1200px; margin: 0 auto; padding: var(--s7) var(--s6) var(--s9); }

.page-head { margin-bottom: var(--s6); }
.page-head h1 { margin-bottom: var(--s2); }
.page-head .sub { font-size: var(--fs-small); color: var(--umber); }

/* Derived from §5: the admin shell has five destinations, so the mobile
   collapse is a horizontal strip rather than a tab bar. */
@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }
  /* The strip scrolls with the page on small screens; there is no column to pin. */
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center;
             gap: var(--s4); padding: var(--s3) var(--s4); overflow-x: auto; overflow-y: visible; }
  .wordmark__logo { height: 26px; }
  .sidebar .wordmark { padding: 0; white-space: nowrap; }
  /* The strip is one horizontal row: the groups run inline and their labels are
     dropped -- there is no room for them, and the order still reads work-first. */
  .sidebar nav { margin-top: 0; display: flex; align-items: center; gap: var(--s2); }
  .sidebar nav ul { display: flex; align-items: center; gap: var(--s2); }
  .sidebar nav ul + .nav-label { margin-top: 0; }
  .nav-label { display: none; }
  .sidebar nav a { padding: 0 var(--s3); border-left: none; border-bottom: 2px solid transparent;
                   white-space: nowrap; }
  .sidebar nav a[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--gold); }
  .sidebar .sidebar-foot { margin-top: 0; padding: 0 0 0 var(--s4); border-top: none;
                           border-left: 1px solid rgba(197,206,221,.18); }
  .sidebar .sidebar-foot .who { padding: 0; white-space: nowrap; }
  .who-role { display: none; }
  .container { padding: var(--s5) var(--s4) var(--s8); }
  :root { --fs-display: 36px; --fs-h1: 28px; --fs-h2: 24px; }
}

/* ── Panels (§5: cards 4px, flat by default) ───────────────────────────── */
.panel {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--r);
  padding: var(--s5);
  margin-bottom: var(--s5);
}
.panel > :last-child { margin-bottom: 0; }
.panel-quiet { background: var(--paper); }

.panel-head { display: flex; align-items: baseline; justify-content: space-between;
              gap: var(--s4); flex-wrap: wrap; }
.panel-head > * { margin: 0; }

/* ── Vertical rhythm ─────────────────────────────────────────────────────
   One rule owns the gap between blocks, so no element has to guess and no two
   margins fight. Top margins own it; bottom margins inside a panel are zeroed.

   A heading gets more space above it than below, so it reads as belonging to
   the section it introduces rather than floating between two. That is the whole
   trick, and getting it backwards is what made these pages look broken: every
   heading sat flush against the table above it and held its air underneath. */
.panel > * { margin-bottom: 0; }
.panel > * + * { margin-top: var(--s5); }
.panel > * + h2,
.panel > * + h3,
.panel > * + h4,
.panel > * + .panel-head { margin-top: var(--s7); }
.panel > h2 + *,
.panel > h3 + *,
.panel > h4 + *,
.panel > .panel-head + * { margin-top: var(--s3); }
/* Repeated blocks carry their own rule and padding; they do not need the gap. */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); }

/* ── Status (§3: left border + label text, never a saturated pill) ─────── */
.status { display: inline-flex; align-items: center; gap: var(--s2);
          font-size: var(--fs-small); font-weight: 500; color: var(--tone); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                  background: var(--tone); flex: none; }

.badge { display: inline-block; font-size: var(--fs-small); border-radius: 2px; padding: var(--s1) var(--s2);
         background: color-mix(in srgb, var(--tone) 10%, transparent); color: var(--tone); font-weight: 500; }

/* ── Buttons (§7) ──────────────────────────────────────────────────────── */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--s3) 20px;
  border: none; border-radius: var(--r);
  background: var(--ink); color: var(--white);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.btn:hover, button:hover { background: #08102b; }              /* --ink darkened 8% */
.btn:active, button:active { background: #060d22; }            /* --ink darkened 12% */
.btn[disabled], button[disabled] { opacity: .4; cursor: not-allowed; }

.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-secondary:hover { background: rgba(10,19,52,.06); color: var(--ink); }
.btn-secondary:active { background: rgba(10,19,52,.1); }

.btn-quiet { background: transparent; color: var(--umber); padding: var(--s3) var(--s2); }
.btn-quiet:hover { background: transparent; color: var(--ink); text-decoration: underline;
                   text-underline-offset: 3px; }

.btn-destructive { background: transparent; color: var(--status-critical);
                   border: 1px solid var(--status-critical); }
.btn-destructive:hover { background: rgba(158,43,37,.06); color: var(--status-critical); }

.btn-compact { min-height: 40px; padding: var(--s2) var(--s4); font-size: var(--fs-small); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
form.inline { display: inline; }

/* ── Forms (§7) ────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--s4); max-width: 680px; }
.field > label, .field-label {
  display: block; font-size: var(--fs-small); color: var(--umber);
  margin-bottom: var(--s1); font-weight: 400;
}
input[type=text], input[type=email], input[type=url], input[type=password],
input[type=number], input[type=datetime-local], input[type=date], select, textarea {
  width: 100%; min-height: 44px; padding: var(--s3);
  background: var(--white); color: var(--ink);
  border: 1px solid var(--sand); border-radius: var(--r);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 300;
}
textarea { min-height: 88px; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
input[type=file] { border: 1px dashed var(--sand); background: var(--paper); padding: var(--s3);
                   border-radius: var(--r); width: 100%; font-size: var(--fs-small); }

.help { font-size: var(--fs-small); color: var(--umber); margin-top: var(--s1); max-width: 72ch; }

.errorlist { list-style: none; margin: var(--s1) 0 0; padding: 0;
             font-size: var(--fs-small); color: var(--status-critical); }
.errorlist li::before { content: ""; }
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--status-critical);
}

.radio-group { display: flex; flex-wrap: wrap; gap: var(--s4); }
.radio-group label {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; font-size: var(--fs-body); color: var(--ink); cursor: pointer;
}
.radio-group input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }

/* ── Tables (§7 — the core component) ──────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--sand); border-radius: var(--r-flat);
              background: var(--white); }
table { border-collapse: collapse; width: 100%; border-radius: var(--r-flat); }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper); color: var(--ink);
  font-size: var(--fs-small); font-weight: 500; text-align: left;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--sand); white-space: nowrap;
}
tbody td, tbody th {
  background: var(--white); padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--sand);
  font-size: var(--fs-body); font-weight: 300; color: var(--umber);
  text-align: left; vertical-align: top;
}
tbody th { font-weight: 500; color: var(--ink); }
tbody tr { min-height: 52px; }
tbody tr:hover td, tbody tr:hover th { background: var(--bone); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.date, th.date { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* §7: status renders as a 3px left border on the row, plus the status word. */
tbody tr[class*="tone-"] > *:first-child { box-shadow: inset 3px 0 0 var(--tone); }

/* ── Messages (§7, §8) ─────────────────────────────────────────────────── */
.messages { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.messages li {
  padding: var(--s3) var(--s4); margin-bottom: var(--s2);
  background: var(--white); border: 1px solid var(--sand); border-radius: var(--r);
  border-left: 3px solid var(--tone); font-size: var(--fs-body); color: var(--umber);
}
.messages li.error { --tone: var(--status-critical); color: var(--status-critical); }
.messages li.warning { --tone: var(--status-attention); }
.messages li.success { --tone: var(--status-active); }

/* ── Empty state (§8) ──────────────────────────────────────────────────── */
.empty { padding: var(--s6) 0; }
.empty p { color: var(--umber); margin-bottom: var(--s4); }

/* ── Definition rows (matter-card composition, §7) ─────────────────────── */
.deflist { display: grid; grid-template-columns: 200px 1fr; gap: var(--s3) var(--s4); margin: 0; }
.deflist dt { font-size: var(--fs-small); color: var(--umber); }
.deflist dd { margin: 0; color: var(--ink); }
@media (max-width: 640px) { .deflist { grid-template-columns: 1fr; gap: var(--s1) 0; }
                            .deflist dd { margin-bottom: var(--s3); } }

.stat { background: var(--white); border: 1px solid var(--sand); border-radius: var(--r);
        padding: var(--s4); }
.stat .n { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--ink);
           line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .l { font-size: var(--fs-small); color: var(--umber); margin-top: var(--s1); }

details > summary { cursor: pointer; font-size: var(--fs-small); color: var(--umber);
                    min-height: 44px; display: flex; align-items: center; }
pre { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-caption);
      background: var(--paper); border: 1px solid var(--sand); border-radius: var(--r);
      padding: var(--s4); color: var(--umber); max-height: 400px; overflow: auto; }
/* §11: no monospace for data labels. Question references stay in the UI face and
   read as identifiers through letter-spacing instead. */
code { font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--umber);
       letter-spacing: .04em; }

/* ── Questionnaire (the firm's configure and review screens) ───────────── */
.q { padding: var(--s5) 0; border-bottom: 1px solid var(--sand); }
.q:last-child { border-bottom: none; }
.q-text { font-size: var(--fs-body); font-weight: 500; color: var(--ink); margin-bottom: var(--s1);
          max-width: 72ch; }
.q-help { font-size: var(--fs-small); color: var(--umber); margin-bottom: var(--s3); max-width: 72ch; }
.q-meta { font-size: var(--fs-caption); color: var(--umber); opacity: .8; margin-bottom: var(--s2); }
.q-body { margin-top: var(--s3); }
.q.is-off { opacity: .5; }
.q .required { color: var(--status-critical); }

.followups { margin: var(--s4) 0 0 var(--s3); padding-left: var(--s5);
             border-left: 1px solid var(--sand); }
.followups .q { padding: var(--s4) 0; }

.repeater-item { border: 1px solid var(--sand); border-radius: var(--r); padding: var(--s4);
                 margin-bottom: var(--s3); background: var(--paper); }
.repeater-item .title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600;
                        color: var(--ink); margin-bottom: var(--s3); }

.uploaded { list-style: none; margin: var(--s2) 0 0; padding: 0; font-size: var(--fs-small); }
.uploaded li { padding: var(--s1) 0; color: var(--ink); }

/* ── §6: respect reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 100ms !important; animation: none !important; }
}

/* ── The research run ────────────────────────────────────────────────────
   The summary is the only prose on the page anyone reads end to end, so it is
   set as a lede: larger, ink rather than grey, on a proper reading measure. The
   facts that used to be a grey line above it now sit in the column that was
   empty, where they read as reference instead of as preamble. */

/* Where a fact came from: the page, then the site beneath it in a quieter voice. */
.source-domain { display: block; color: var(--umber); font-size: var(--fs-caption); }

/* Confidence is a scale, not a label. "High" is the default and stays quiet;
   anything weaker carries its tone and its weight, so the rows a reviewer needs
   to check are the rows the eye lands on. */
.confidence { color: var(--umber); }
.confidence.tone-attention,
.confidence.tone-critical { color: var(--tone); font-weight: 500; }

/* ── Layout utilities ───────────────────────────────────────────────────
   Every width, spacing and alignment decision lives here so no template
   carries a style attribute. */
.panel-narrow { max-width: 440px; }
.panel-form   { max-width: 600px; }
.panel-wide   { max-width: 720px; }
.panel-centered { margin-left: auto; margin-right: auto; margin-top: var(--s7); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
           margin-bottom: var(--s5); }
/* A line that explains the buttons belongs with them. Grouped by proximity: the
   toolbar tightens up when a note follows it, so the two read as one block and the
   note is not stranded between the buttons and unrelated content below.
   (It cannot live inside the flex row: max-width would clamp its flex base size
   and it would sit beside the buttons instead of under them.) */
.toolbar:has(+ .toolbar-note) { margin-bottom: var(--s2); }
.toolbar-note { margin: 0 0 var(--s5); font-size: var(--fs-small);
                color: var(--umber); max-width: 72ch; }

/* A panel whose content is prose or a form has no business being 1200px wide with
   an empty right half. Tables keep the full width; reading does not. */
.panel-read { max-width: 860px; }
.panel-prompt { max-width: 560px; }

/* The count that tells a reviewer how much work is in front of them. */
.tally { margin: 0; font-size: var(--fs-small); color: var(--umber); }

/* Destructive actions sit apart from the ones a reviewer uses all day. */
.q-actions__last { margin-left: auto; padding-left: var(--s4);
                   border-left: 1px solid var(--sand); }
@media (max-width: 640px) {
  .q-actions__last { margin-left: 0; padding-left: 0; border-left: 0; }
}
/* Sits at the far end of the toolbar, on one line. The select needs an explicit
   width: the base rule is width:100%, which would size the form to the whole row
   and push the button onto a second line. */
.filter-bar { display: flex; flex-wrap: nowrap; gap: var(--s2); align-items: center;
              margin-left: auto; }
.filter-bar .field { margin-bottom: 0; max-width: 260px; flex: 1 1 200px; }
.filter-bar select { width: 200px; min-height: 40px; }

/* Yes/no in a permission table: read as words, never as colour alone. */
.perm { text-align: center; }
.perm-yes { font-weight: 500; color: var(--status-active); }
.perm-no  { color: var(--umber); }
.strong   { font-weight: 500; color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.note { font-size: var(--fs-small); color: var(--umber); max-width: 72ch; margin-bottom: var(--s4); }
.note-last { margin-bottom: 0; }

/* Table column sizing (§7: column relationships carry meaning, so they are fixed
   here rather than guessed per page). */
.col-code    { width: 170px; }
.col-status  { width: 150px; }
.col-date    { width: 130px; }
.col-actions { width: 1%; white-space: nowrap; }
.col-label   { min-width: 220px; }
.col-narrow  { width: 90px; }

.q-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3);
             align-items: center; }
.q-sources { font-size: var(--fs-small); color: var(--umber); margin-top: var(--s2); }
.q-internal { font-size: var(--fs-small); color: var(--umber); background: var(--paper);
              border-left: 3px solid var(--sand); padding: var(--s3) var(--s4);
              margin-top: var(--s3); border-radius: var(--r); max-width: 72ch; }

.answer-value { color: var(--ink); }
.answer-block { margin-bottom: var(--s3); }
.attach-field { margin-top: var(--s4); }

.link-box { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink);
            background: var(--paper); border: 1px solid var(--sand); border-radius: var(--r);
            padding: var(--s2) var(--s3); display: inline-block; word-break: break-all; }

/* Guidance blocks are not questions, so they must not look like one. */
.q-info { background: var(--paper); border: 1px solid var(--sand); border-left: 3px solid var(--sand);
          border-radius: var(--r); padding: var(--s4); }
.q-info .q-text { font-weight: 500; }
.q-info .q-help { margin-bottom: 0; }

/* §10 keeps the 44px touch-target floor even inside a dense table; the density
   comes from row padding, not from shrinking the controls. */
.table-wrap table input, .table-wrap table select { min-height: 44px; font-size: var(--fs-small); }

/* Overview lead sentence (§1: answers before dashboards). */
.lead { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400;
        color: var(--ink); line-height: 1.4; max-width: 40ch; margin-bottom: var(--s5); }

/* Matter card (§7): title, context, one plain-language status line, next dated
   obligation. Nothing else -- no progress bars, no percentage complete. */
.matter-card { background: var(--white); border: 1px solid var(--sand); border-radius: var(--r);
               border-left: 3px solid var(--tone); padding: var(--s5); margin-bottom: var(--s4); }
.matter-card h3 { margin-bottom: var(--s1); }
.matter-card h3 a { text-decoration: none; }
.matter-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.matter-card .meta { font-size: var(--fs-small); color: var(--umber); margin-bottom: var(--s3); }
.matter-card .plain { color: var(--ink); margin-bottom: var(--s2); max-width: 72ch; }
.matter-card .obligation { font-size: var(--fs-small); color: var(--tone); font-weight: 500; margin-bottom: 0; }

/* Checkboxes read control-then-label, and keep the 44px target from §10. */
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.field-checkbox > label { display: inline-flex; align-items: center; gap: var(--s2);
                         min-height: 44px; margin-bottom: 0; cursor: pointer;
                         font-size: var(--fs-body); color: var(--ink); }
.field-checkbox > label span { font-size: var(--fs-body); }