/* Tender Desk — hand-written CSS, no build step.
   Deliberately not Tailwind: HRMS has a compiled app.css that must be rebuilt
   before a new utility class works, which has caused silent styling failures.
   Plain CSS removes that whole class of problem.
   Dense by design — the team works on 14-inch laptops.

   ------------------------------------------------------------------
   HOUSE STYLE (adopted 2026-08-17)
   ------------------------------------------------------------------
   This is the design language of bms.bookchor.in/isbn-atlas and the ZB327
   publisher directory, which Vidyut chose as the house style for every
   Bookchor screen. What makes it work, so it survives being edited:

     · The palette is a set of tokens defined THREE times — bare :root for
       light, a prefers-color-scheme block for system dark, and a
       [data-theme="dark"] block so an explicit toggle wins either way. Never
       give a colour its only definition inside a media query, or the dark
       version of that one screen is the only place it is wrong.
     · Serif for the page title only. Everything else is system sans.
     · Numbers are monospaced, right-aligned and tabular, so a column of
       rupees lines up and can be scanned down rather than read row by row.
     · Nothing below hardcodes a hex outside the token blocks. A tint that is
       only defined in light mode becomes an unreadable white-on-white cell the
       moment somebody's laptop is in dark mode.

   The older variable names (--ink, --brand, --card…) are kept as aliases onto
   the house tokens rather than deleted, so every rule and every template that
   already referred to them keeps working. */

:root {
  /* ---- house tokens ---- */
  --bg: #f1f3f3;
  --surface: #ffffff;
  --surface-2: #e8ecec;
  --surface-3: #dfe4e4;
  --line: #d0d8d8;
  --line-soft: #e2e8e8;
  --text: #1a1f20;
  --muted-c: #5f6a6b;
  --faint: #8b9596;
  --accent: #8c2f31;
  --accent-ink: #6e2325;
  --accent-soft: #f5e4e4;
  --brass: #7f5c1c;
  --good: #2c6a4e;
  --miss: #a6543e;
  --bad: #8c2f31;
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(20, 30, 30, .06), 0 8px 24px rgba(20, 30, 30, .08);

  /* Tints. Every coloured cell background in this app comes from one of
     these, so dark mode is a matter of redefining six values rather than
     hunting for the one table that stayed white. */
  --tint-bad: #f7e7e7;
  --tint-warn: #f6ecdc;
  --tint-soon: #f3efdc;
  --tint-good: #e3efe8;
  --tint-neutral: #e8ecec;
  --tint-accent: #f5e4e4;

  /* ---- aliases kept for the rules written before the house style ---- */
  --ink: var(--text);
  --ink-soft: var(--muted-c);
  --card: var(--surface);
  --brand: var(--accent);
  --ok: var(--good);
  --no: var(--faint);
  --warn: var(--brass);
  --danger: var(--bad);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13171a;
    --surface: #1a2023;
    --surface-2: #222a2e;
    --surface-3: #2a3337;
    --line: #303a3e;
    --line-soft: #262f33;
    --text: #e5eaea;
    --muted-c: #94a1a3;
    --faint: #6e7b7d;
    --accent: #e2807b;
    --accent-ink: #f0a9a5;
    --accent-soft: #3a2325;
    --brass: #cfa057;
    --good: #69b590;
    --miss: #e0907a;
    --bad: #e2807b;
    --on-accent: #241213;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);

    --tint-bad: #3a2325;
    --tint-warn: #33291a;
    --tint-soon: #2e2c1c;
    --tint-good: #1e2f27;
    --tint-neutral: #222a2e;
    --tint-accent: #3a2325;
  }
}

:root[data-theme="dark"] {
  --bg: #13171a;
  --surface: #1a2023;
  --surface-2: #222a2e;
  --surface-3: #2a3337;
  --line: #303a3e;
  --line-soft: #262f33;
  --text: #e5eaea;
  --muted-c: #94a1a3;
  --faint: #6e7b7d;
  --accent: #e2807b;
  --accent-ink: #f0a9a5;
  --accent-soft: #3a2325;
  --brass: #cfa057;
  --good: #69b590;
  --miss: #e0907a;
  --bad: #e2807b;
  --on-accent: #241213;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);

  --tint-bad: #3a2325;
  --tint-warn: #33291a;
  --tint-soon: #2e2c1c;
  --tint-good: #1e2f27;
  --tint-neutral: #222a2e;
  --tint-accent: #3a2325;
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans Devanagari", sans-serif;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- top nav ----------
   A masthead rather than a dark chrome bar: the house style keeps the page
   one continuous surface, and the only saturated colour on screen is the
   accent, so the accent always means "this is a thing to act on". */
.topnav {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topnav-inner {
  max-width: 1680px; margin: 0 auto; padding: 0 22px;
  height: 48px; display: flex; align-items: center; gap: 20px;
}
.brand {
  color: var(--text); text-decoration: none; font-weight: 650;
  letter-spacing: -.01em; font-size: 15px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino,
               "Book Antiqua", Georgia, serif;
}
.brand span { color: var(--accent); }
.topnav-links { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.topnav-links a {
  color: var(--muted-c); text-decoration: none; font-size: 13px;
  padding: 2px 0; border-bottom: 2px solid transparent;
}
.topnav-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.topnav-user { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.topnav-user .who { color: var(--text); font-weight: 600; }
.topnav-user .muted { color: var(--faint); text-decoration: none; }
.topnav-user .muted:hover { color: var(--accent); }

.role-chip {
  padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600;
  background: var(--surface-3); color: var(--muted-c);
  border: 1px solid transparent;
}
.role-admin { background: transparent; border-color: var(--accent); color: var(--accent); }
.role-bid_manager { background: transparent; border-color: var(--brass); color: var(--brass); }
.role-finance { background: transparent; border-color: var(--good); color: var(--good); }
.role-viewer { background: var(--surface-3); color: var(--muted-c); }

.linkbtn {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font: inherit; padding: 0;
}
.linkbtn:hover { color: var(--accent); text-decoration: underline; }
.inline { display: inline; }

/* ---------- layout ---------- */
.page { max-width: 1680px; margin: 0 auto; padding: 18px 22px 48px; }

h1 {
  font-size: 27px; line-height: 1.15; margin: 0 0 14px; font-weight: 600;
  letter-spacing: -.012em;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino,
               "Book Antiqua", Georgia, serif;
}
/* A section heading, not a label.
   This was briefly restyled to the small uppercase grey used by `.sec-h` and
   `.card-h`, on the theory that the house style makes headings quiet. It does
   not — the Atlas keeps `h2` at 15px and reserves small-caps for the rule-line
   labels. The cost was immediate and not cosmetic: every section heading in
   the app dropped to a footnote at once, and the "Move along the pipeline"
   card on the tender page stopped reading as a control at all. Vidyut reported
   the stage picker as missing; it had been there the whole time. */
h2 {
  font-size: 15px; margin: 0 0 8px; font-weight: 600;
  letter-spacing: -.01em; color: var(--text);
}

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.notice { border-left: 3px solid var(--accent); }

.muted { color: var(--muted-c); }
.small { font-size: 12px; }
.faint { color: var(--faint); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Serif is for the page title. `.serif` exists so a masthead strapline or an
   empty-state line can borrow it deliberately, and nothing else does. */
.serif {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino,
               "Book Antiqua", Georgia, serif;
}

/* ---------- tables ---------- */
.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid td { padding: 7px 9px; border-bottom: 1px solid var(--line-soft); }
.grid tr:last-child td { border-bottom: none; }
.tick { text-align: right; width: 70px; }
.yes { color: var(--good); font-weight: 600; }
.no { color: var(--faint); }

.steps { margin: 6px 0 0 18px; padding: 0; }
.steps li { margin-bottom: 4px; }

/* ---------- forms ---------- */
.auth { max-width: 380px; margin: 48px auto; }
.auth-brand {
  font-size: 26px; margin-bottom: 2px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino,
               "Book Antiqua", Georgia, serif;
}
.auth-brand span { color: var(--accent); }

label { display: block; font-size: 12px; font-weight: 600; margin: 10px 0 3px; }
/* Every text-like input, listed by type rather than by a bare `input` selector
   so checkboxes and radios keep their natural size.
   `url` and `datetime-local` were missing, which left the Source URL box and
   all four date-and-time fields — including **Bid due**, the field this whole
   app exists for — at whatever narrow default the browser chose. */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=datetime-local], input[type=url],
input[type=tel], input[type=time], input[type=file], input[type=search],
select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; background: var(--bg); color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.btn {
  display: inline-block; margin-top: 14px; padding: 8px 14px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); text-decoration: none; }

.formerror { color: var(--bad); font-size: 12px; margin: 4px 0; }
.formerror ul { margin: 0; padding-left: 16px; }

/* ---------- messages ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 14px; }
.msg {
  padding: 8px 12px; border-radius: 7px; margin-bottom: 6px; font-size: 13px;
  border: 1px solid var(--line); background: var(--surface);
}
.msg-success { border-left: 3px solid var(--good); }
.msg-warning { border-left: 3px solid var(--miss); }
.msg-error { border-left: 3px solid var(--bad); }

/* ---------- footer ---------- */
.foot {
  max-width: 1680px; margin: 0 auto; padding: 0 22px 28px;
  color: var(--faint); font-size: 11px; line-height: 1.6;
}
.foot b { color: var(--muted-c); font-weight: 600; }

/* ============================================================
   The register (phase 1b)
   ============================================================ */

.pagehead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.pagehead.tight { margin-bottom: 8px; }
.pagehead h1, .pagehead h2 { margin: 0; }
.pagehead p { margin: 2px 0 0; }
.headactions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
/* A header action wraps to two lines when the title beside it is long, which
   looks like a mistake. It never needs to wrap — it is three words. */
.pagehead > .btn, .headactions .btn { white-space: nowrap; }
.crumb { margin: 0 0 8px; }
.crumb a { color: var(--muted-c); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

/* The masthead eyebrow — small, uppercase, accent. Says what kind of screen
   this is before the title says which one. */
.eyebrow {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); font-weight: 650; margin: 0 0 2px;
}

.btn-sm { margin-top: 0; padding: 5px 10px; font-size: 12px; }
.btn-quiet {
  background: var(--bg); color: var(--muted-c); border: 1px solid var(--line);
}
.btn-quiet:hover { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--on-accent); }
.btn-danger:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.cancel { margin-left: 10px; }

/* ---------- summary tiles ---------- */
.tiles {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.tiles-4 { grid-template-columns: repeat(4, 1fr); }
.tiles-5 { grid-template-columns: repeat(5, 1fr); }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 9px; padding: 9px 11px; text-decoration: none; color: inherit;
  display: block; box-shadow: var(--shadow);
}
.tile:hover { border-color: var(--accent); text-decoration: none; }
.tile b {
  display: block; font-size: 21px; line-height: 1.1; font-weight: 600;
  letter-spacing: -.02em;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.tile span {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
}
.tile-overdue { border-left-color: var(--bad); }
.tile-overdue b { color: var(--bad); }
.tile-critical { border-left-color: var(--miss); }
.tile-critical b { color: var(--miss); }
.tile-soon { border-left-color: var(--brass); }
.tile-soon b { color: var(--brass); }
.tile-good { border-left-color: var(--good); }
.tile-good b { color: var(--good); }

/* A money figure needs the room that a two-digit count does not. */
.tile b.tile-money { font-size: 16px; padding: 3px 0 2px; }

@media (max-width: 1250px) {
  .tiles, .tiles-4, .tiles-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 800px) {
  .tiles, .tiles-4, .tiles-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- filter chips and bar ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px;
  font-size: 12px; text-decoration: none; color: var(--muted-c);
  background: var(--bg);
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip-on {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  font-weight: 600;
}
.chip-on:hover { color: var(--on-accent); }

.filterbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filterbar input[type=search] {
  flex: 1; min-width: 240px; padding: 6px 9px;
}
.filterbar select { width: auto; min-width: 130px; padding: 6px 8px; }

/* ---------- register table ---------- */
.card.nopad { padding: 0; overflow: hidden; }
.scroller { overflow-x: auto; }
.rows { font-size: 13px; }
.rows thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted-c); font-weight: 650;
  padding: 8px 9px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); white-space: nowrap;
}
.rows td { padding: 8px 9px; vertical-align: top; }
.rows tbody tr { border-bottom: 1px solid var(--line-soft); }
.rows tbody tr:last-child { border-bottom: none; }
.rows tbody tr:hover { background: var(--surface-2); }
.rows a { color: var(--accent); text-decoration: none; }
.rows a:hover { text-decoration: underline; }

/* Numbers line up so a column of rupees can be read down it. */
.num {
  text-align: right;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.mono {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.empty { padding: 34px 16px; text-align: center; color: var(--faint); }

.w-due { width: 150px; }
.w-where { width: 130px; }
.w-money { width: 90px; }
.w-stage { width: 130px; }
.w-docs { width: 50px; }
.w-type { width: 150px; }
.w-pages, .w-size { width: 60px; }
.w-actions { width: 190px; white-space: nowrap; }
.w-actions a { margin-right: 8px; }
.w-actions a.danger { color: var(--bad); }

.due b { display: block; }
.due .clock {
  font-size: 12px; color: var(--muted-c);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
.due .left { display: block; font-size: 11px; font-weight: 600; }

/* Colour bands. Only ever applied while a tender is still open — a countdown
   on something already submitted is noise, and noise is how a real deadline
   stops being noticed. */
.band-overdue { background: var(--tint-bad); }
.band-overdue .left { color: var(--bad); }
.band-critical { background: var(--tint-warn); }
.band-critical .left { color: var(--miss); }
.band-soon { background: var(--tint-soon); }
.band-soon .left { color: var(--brass); }
.band-normal .left, .band-none .left { color: var(--muted-c); }

.legend { margin-top: 10px; }
.key {
  display: inline-block; width: 20px; height: 10px; border-radius: 2px;
  border: 1px solid var(--line); vertical-align: middle; margin: 0 3px 0 8px;
}

.flag {
  display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 3px;
  background: var(--tint-bad); color: var(--bad); font-size: 11px; font-weight: 600;
}
.flag-quiet { background: var(--tint-neutral); color: var(--muted-c); }

/* "Needs attention" reason chips. A distinct colour from `.flag` above —
   those are alerts on the row itself; these answer "why did this tab pick
   this row up", which used to be invisible because all six live tenders
   shared the same trigger (go_no_go=''). */
.flag-attn, .flag-lapsed {
  display: inline-block; margin: 3px 4px 0 0; padding: 1px 6px;
  border-radius: 3px; background: var(--tint-warn); color: var(--brass);
  font-size: 11px; font-weight: 600;
}

/* A tender accepted into the register and then never bid. Louder than an
   attention reason, and shown on every tab rather than one, because the
   failure it describes is a tender that went on looking live until its
   deadline had passed. */
.flag-lapsed {
  background: var(--tint-bad); color: var(--bad); text-decoration: none;
}
.flag-lapsed:hover { text-decoration: underline; }

.stage {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; background: var(--surface-3);
  color: var(--muted-c);
}
.stage-submitted, .stage-technical_opened, .stage-financial_opened {
  background: var(--tint-accent); color: var(--accent);
}
.stage-won, .stage-po_received, .stage-delivered, .stage-payment_received {
  background: var(--tint-good); color: var(--good);
}
.stage-lost, .stage-rejected_technical, .stage-cancelled {
  background: var(--tint-neutral); color: var(--faint);
}

.decision {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.decision-go { background: var(--tint-good); color: var(--good); }
.decision-no_go { background: var(--tint-neutral); color: var(--faint); }
.decision-none { background: var(--tint-warn); color: var(--miss); }

.pager { display: flex; gap: 14px; align-items: center; margin: 10px 0; }

/* ---------- detail ---------- */
.deadlinebar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 9px; padding: 10px 14px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.deadlinebar.band-overdue { border-left-color: var(--bad); }
.deadlinebar.band-critical { border-left-color: var(--miss); }
.deadlinebar.band-soon { border-left-color: var(--brass); }
.deadlinebar .lbl {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--faint);
}
.deadlinebar b {
  font-size: 17px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.deadlinebar .left { margin-left: 10px; font-size: 13px; font-weight: 600; }
.deadlinebar-right { display: flex; gap: 6px; align-items: center; }

.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  margin-bottom: 14px; flex-wrap: wrap;
}
.tab {
  padding: 7px 12px; font-size: 13px; text-decoration: none;
  color: var(--muted-c); border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab-on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-off { color: var(--faint); cursor: default; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.kv td { padding: 5px 8px; }
.kv td:first-child { width: 42%; color: var(--muted-c); }
.kv tr.strong td { font-weight: 700; }
.reason { white-space: pre-wrap; margin: 6px 0 0; }

.alert { border-left: 3px solid var(--bad); }
.alert h2 { color: var(--bad); }

.inlineform { display: flex; gap: 8px; align-items: center; }
.inlineform select { width: auto; flex: 1; }

/* ---------- forms ---------- */
.narrow { max-width: 620px; }
.fieldgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.fieldgrid:has(> .field:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .fieldgrid { grid-template-columns: 1fr; } }

/* A reason or a note is prose. Squeezing it into a third of the row makes
   people write less, and the whole value of those fields is what they say. */
.fieldgrid .field:has(textarea) { grid-column: 1 / -1; }

.field { margin-bottom: 4px; }
.field label { margin-top: 8px; }
.field .req { color: var(--bad); }
.field .hint { margin: 3px 0 0; }
.field-bad input, .field-bad select, .field-bad textarea { border-color: var(--bad); }
.field ul { margin: 3px 0 0; padding-left: 16px; }

.tenderform .card { max-width: 900px; }

/* Radio lists (Go / No-Go) — the choice should be a click target, not a
   hairline dot next to microscopic text. */
.field ul[id$="decision"] { list-style: none; margin: 4px 0 0; padding: 0; }
.field ul[id$="decision"] li { margin-bottom: 4px; }
.field ul[id$="decision"] label {
  display: inline; font-weight: 500; font-size: 14px; margin: 0 0 0 6px;
}
.field input[type=radio] { width: auto; vertical-align: middle; }
.field input[type=checkbox] { width: auto; vertical-align: middle; }
.twoactions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.twoactions .btn { margin-top: 0; }

/* ============================================================
   Phase 1c — checklist, quote, money, outcome
   ============================================================ */

/* Tab counters. The checklist one goes red while a required item is missing,
   because that is the state that stops a bid being submitted. */
.tabcount {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px;
  background: var(--surface-3); color: var(--muted-c); font-size: 11px;
  font-weight: 600;
}
.tabcount-bad { background: var(--tint-bad); color: var(--bad); }

/* Status pills, shared by the checklist, EMD and guarantee tables. */
.pill {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; background: var(--surface-3);
  color: var(--muted-c); white-space: nowrap;
}
.pill-attached, .pill-refunded, .pill-released, .pill-won { background: var(--tint-good); color: var(--good); }
.pill-missing, .pill-forfeited, .pill-invoked, .pill-rejected_technical { background: var(--tint-bad); color: var(--bad); }
.pill-na, .pill-adjusted, .pill-expired, .pill-cancelled, .pill-lost { background: var(--tint-neutral); color: var(--faint); }
.pill-with_department, .pill-live { background: var(--tint-warn); color: var(--miss); }

/* One-click status buttons inside a checklist row. The list only gets
   finished if answering it is faster than avoiding it. */
.statusform { display: inline-flex; gap: 3px; margin-right: 8px; }
.minibtn {
  padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); color: var(--muted-c); font: inherit;
  font-size: 11px; cursor: pointer;
}
.minibtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.minibtn:disabled { background: var(--surface-3); color: var(--faint); cursor: default; }
.minibtn-ok:hover:not(:disabled) { border-color: var(--good); color: var(--good); }

.linkbtn-brand { color: var(--accent); }
.linkbtn-brand:hover { color: var(--accent-ink); }
.danger-text { color: var(--bad); }

.cardhead { padding: 12px 16px 8px; margin-bottom: 0; }

/* Quote summary strip. */
.quotesum {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 4px 0 12px; padding: 10px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quotesum .lbl {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--faint);
}
.quotesum b {
  font-size: 16px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) { .quotesum { grid-template-columns: repeat(2, 1fr); } }

.discountform { margin-top: 6px; }
.discountform label { margin: 0; white-space: nowrap; }
.discountform input { width: 90px; flex: none; }
.isbnnote { font-size: 11px; }
.intro { margin: 0 0 10px; }

/* Column widths — dense on purpose, the team is on 14-inch laptops. */
.w-req { width: 70px; }
.w-status { width: 120px; }
.w-checkactions { width: 250px; white-space: nowrap; }
.w-checkactions a { margin-right: 8px; }
.w-checkactions a.danger { color: var(--bad); }
.w-smallactions { width: 100px; white-space: nowrap; }
.w-smallactions a { margin-right: 8px; }
.w-smallactions a.danger { color: var(--bad); }
.w-line { width: 45px; }
.w-sku { width: 130px; }
.w-qty { width: 50px; }
.w-disc { width: 60px; }
.w-date { width: 95px; }
.w-days { width: 70px; }
.w-mode { width: 110px; }
.w-linkactions { width: 230px; white-space: nowrap; }
.w-linkactions a { margin-right: 8px; }
.w-linkactions a.danger { color: var(--bad); }
.w-linkactions .minibtn { margin-right: 4px; }

/* Link fetch states, reusing the pill colours. */
.pill-never { background: var(--tint-neutral); color: var(--faint); }
.pill-ok { background: var(--tint-good); color: var(--good); }
.pill-changed { background: var(--tint-bad); color: var(--bad); }
.pill-refused, .pill-failed { background: var(--tint-warn); color: var(--miss); }

.subrow td { padding-top: 0; border-top: none; }
.subrow a { color: var(--muted-c); }

/* Page snapshot + diff */
.snapshot {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  max-height: 460px; overflow: auto; font-size: 12px; line-height: 1.5;
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
.difftitle { font-size: 13px; margin: 4px 0 6px; }
.difflist {
  list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto;
  font-size: 12px;
}
.difflist li {
  padding: 3px 8px; border-radius: 4px; margin-bottom: 3px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}
.diff-add { color: var(--good); }
li.diff-add { background: var(--tint-good); }
.diff-del { color: var(--bad); }
li.diff-del { background: var(--tint-bad); text-decoration: line-through; }

/* ------------------------------------------------------------------
   AI capture — the budget panel and the accept/reject grid.
   ------------------------------------------------------------------ */

/* Month-to-date spend. Deliberately plain: this is a number to read, not a
   dashboard to admire. */
.budget .meter {
  height: 8px; border-radius: 2px; background: var(--surface-3); overflow: hidden;
  margin: 6px 0 8px;
}
.budget .meter-fill { height: 100%; background: var(--accent); }

/* The proposal grid. Rows are tall because each one carries a quote — the
   quote is the reason the screen is trustworthy, so it does not get truncated
   to save space. */
.w-accept { width: 60px; text-align: center; }
.proposal td { vertical-align: top; }
.proposal blockquote.quote {
  margin: 4px 0 0; padding: 4px 0 4px 10px;
  border-left: 2px solid var(--line);
  color: var(--muted-c); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.proposal input[type="checkbox"] { width: 16px; height: 16px; }

/* Extraction outcomes, reusing the pill palette. */
.pill-pending { background: var(--tint-warn); color: var(--miss); }
.pill-applied { background: var(--tint-good); color: var(--good); }
.pill-rejected { background: var(--tint-neutral); color: var(--faint); }

/* ============================================================
   The discovery pool
   ============================================================
   Kept deliberately close to the register's table so the screen is instantly
   familiar, but never identical — a lead is a suggestion and must not read as
   a tender. The team works on 14-inch laptops, so the verdict column carries
   three short lines rather than a paragraph. */
.w-verdict { width: 260px; }
.w-leadactions { width: 150px; white-space: nowrap; }
.w-leadactions .minibtn { margin-right: 4px; }
.w-leadactions a.minibtn { display: inline-block; text-decoration: none; }

/* The words that got a lead onto the screen at all. Showing them is what makes
   a wrong keyword obvious at a glance rather than a mystery. */
.kw {
  display: inline-block; margin-right: 4px; padding: 0 5px;
  border-radius: 3px; background: var(--surface-3); color: var(--muted-c);
  font-size: 11px; letter-spacing: .01em;
}

/* The item list a portal prints with its bid. GeM gives the real book titles
   here, which is the fastest possible "is this ours?" — so it is shown on the
   row rather than hidden behind a click. Clamped to two lines to keep the
   table dense on a 14-inch screen. */
.boq {
  color: var(--muted-c); font-size: 11.5px; line-height: 1.45;
  margin-top: 2px; max-width: 60ch;
}
.pill-cppp { background: var(--tint-accent); color: var(--accent); }
.pill-gem  { background: var(--tint-good); color: var(--good); }
.pill-state_site { background: var(--tint-warn); color: var(--brass); }

/* The "what is not covered" disclosure on the discovery pool. Collapsed by
   default because it is reference, not a to-do — but present, because a
   discovery feature that hides its own gaps is the thing being guarded
   against. */
details.card > summary {
  cursor: pointer; font-weight: 600; color: var(--muted-c);
}
details.card[open] > summary { margin-bottom: 8px; }

/* "Why?" — the opt-in reason disclosure beside "Not for us". Small and quiet
   on purpose: the plain reject button next to it is the one-click path, and
   this must not visually compete with it. Opens inline (grows the row)
   rather than as a floating overlay — `.scroller` computes `overflow-y:auto`
   once `overflow-x` is set, so an absolutely-positioned panel would get
   clipped on any row near the bottom of the visible table. */
.reject-why { display: block; margin-top: 3px; }
.reject-why summary {
  display: inline; font-size: 11px; color: var(--faint); cursor: pointer;
  list-style: none;
}
.reject-why summary::-webkit-details-marker { display: none; }
.reject-why summary:hover { color: var(--accent); }
.reject-panel {
  margin-top: 4px; padding: 7px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface-2); width: 210px;
  white-space: normal;
}
.reject-panel .chips { margin-bottom: 6px; }
.reject-panel .chip {
  font: inherit; cursor: pointer; appearance: none;
}
.reject-free { display: flex; gap: 4px; }
.reject-free input[type=text] { flex: 1; padding: 4px 6px; font-size: 11px; }
.reject-free .minibtn { flex: none; }

/* ============================================================
   The document bank
   ============================================================
   One place for the company paperwork every tender asks for — GST, PAN, the
   three years of ITR, the CA turnover certificate, publisher authorisations.
   The column that earns the screen is **expiry**: a tender rejected because
   the authorisation letter had lapsed costs exactly as much as one rejected
   for a missing document, and nothing else in the app was watching for it. */
.w-validity { width: 130px; }
.w-bankactions { width: 170px; white-space: nowrap; }
.w-bankactions a { margin-right: 8px; }
.w-bankactions a.danger { color: var(--bad); }
.w-entity { width: 110px; }
.w-cat { width: 160px; }

.band-expired { background: var(--tint-bad); }
.band-expiring { background: var(--tint-warn); }
.band-archived { opacity: .58; }

.validity b { display: block; }
.validity .left { display: block; font-size: 11px; font-weight: 600; }
.band-expired .validity .left { color: var(--bad); }
.band-expiring .validity .left { color: var(--miss); }

/* A checklist row that is answered by a file already in the bank. Shown as a
   link, because "attached" means nothing if you cannot see what was attached. */
.frombank {
  display: inline-block; margin-top: 3px; font-size: 11.5px;
  color: var(--muted-c);
}
.frombank a { color: var(--accent); }
/* Its own line, not trailing the linked-file text: a dropdown sitting beside a
   filename reads as part of it. */
.attachform {
  display: flex; gap: 4px; align-items: center; margin-top: 5px;
}
.attachform select {
  width: auto; max-width: 230px; padding: 2px 6px; font-size: 11.5px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   HOUSE LAYOUT — masthead, sticky control bar, master-detail
   ============================================================
   The half of the house style that is structure rather than colour, taken
   from `isbn_atlas_page.template.html` so the two read as one system.

   The shape, and why it is this shape:

     · **A masthead, not a page title.** Eyebrow, serif headline, one sentence
       of what the screen is, and the three or four numbers that decide what
       today looks like — sitting on the right where the eye lands last.
     · **One sticky control bar.** Search, segmented filters and the result
       count stay put while the table scrolls, so filtering never means
       scrolling back up to find the control.
     · **Master–detail.** Clicking a row opens the complete record in a sticky
       panel beside the table. This is the point of the whole style: comparing
       options means holding several in your head at once, which a
       page-per-record makes impossible. Nothing navigates away, so the place
       you were in a 200-row list is never lost.
   ============================================================ */

/* ---------- masthead ---------- */
.mast { border-bottom: 1px solid var(--line); background: var(--surface); }
.mast-in {
  max-width: 1680px; margin: 0 auto; padding: 20px 22px 16px;
  display: flex; flex-wrap: wrap; gap: 22px;
  align-items: flex-end; justify-content: space-between;
}
.title-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mast h1 { font-size: 29px; margin: 0; letter-spacing: -.015em; }
.sub { color: var(--muted-c); font-size: 13px; max-width: 74ch; }

.stats { display: flex; gap: 26px; flex-wrap: wrap; padding-bottom: 2px; }
.stat {
  display: flex; flex-direction: column; gap: 1px; text-decoration: none;
  color: inherit;
}
a.stat:hover { text-decoration: none; }
a.stat:hover b { color: var(--accent); }
.stat b {
  font-size: 22px; font-weight: 600; letter-spacing: -.02em;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
}
.stat.acc b { color: var(--accent); }
.stat.brass b { color: var(--brass); }
.stat.good b { color: var(--good); }
.stat.bad b { color: var(--bad); }
.stat.miss b { color: var(--miss); }
/* A zero is not a problem. Only a non-zero count earns a colour, or the
   masthead is red on a morning when nothing is wrong. */
.stat.quiet b { color: var(--text); }

/* ---------- card head / body ---------- */
.card-h {
  padding: 13px 16px 11px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); display: flex; gap: 12px;
  align-items: baseline; justify-content: space-between; flex-wrap: wrap;
}
.card-h h2 { font-size: 15px; text-transform: none; letter-spacing: -.01em;
  color: var(--text); font-weight: 600; margin: 0; }
.card-h .hint { font-size: 12px; color: var(--faint); max-width: 70ch; }
.card-b { padding: 15px 16px; }

/* ---------- the sticky control bar ---------- */
/* `top` clears the app nav, which is 48px and sticky itself. */
.bar2 {
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface); display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; position: sticky; top: 48px; z-index: 20;
}
.search { flex: 1 1 240px; min-width: 190px; position: relative; }
.search input {
  width: 100%; padding: 7px 11px 7px 30px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--text);
  font-size: 13.5px;
}
.search svg {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: var(--faint); fill: none; stroke-width: 2;
}
.bar2 select { width: auto; max-width: 190px; padding: 6.5px 9px; font-size: 12.5px; }

/* Segmented filters. Links rather than buttons — these are server-rendered
   views with real URLs, so they must survive being bookmarked and opened in a
   new tab, which a JS-only toggle would not. */
.seg {
  display: flex; border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; background: var(--bg);
}
.seg a, .seg button {
  padding: 6px 11px; border: 0; background: transparent; font-size: 12.5px;
  color: var(--muted-c); border-right: 1px solid var(--line-soft);
  white-space: nowrap; text-decoration: none; display: inline-flex;
  align-items: center;
}
.seg a:last-child, .seg button:last-child { border-right: 0; }
.seg a:hover { color: var(--accent); text-decoration: none; }
.seg a[aria-pressed="true"], .seg button[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.count { font-size: 12.5px; color: var(--faint); margin-left: auto; white-space: nowrap; }

/* ---------- the missed-leads chart ---------- */
/* Sits between the filter bar and the table. Deliberately short — the team
   works on 14-inch laptops, and this card must never push the register's own
   table below the fold to make room for a chart about a different screen. */
.leadchart {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.donut { flex: none; }
.donut-total {
  font-size: 19px; font-weight: 700; fill: var(--text);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
.donut-total-label {
  font-size: 8px; fill: var(--faint); letter-spacing: .07em;
  text-transform: uppercase;
}
.donut-legend {
  list-style: none; margin: 0; padding: 0; font-size: 12px;
  display: flex; flex-direction: column; gap: 3px; flex: none;
}
.donut-legend a, .donut-legend .static {
  display: flex; align-items: center; gap: 6px; color: var(--text);
  text-decoration: none;
}
.donut-legend a:hover { color: var(--accent); }
.donut-legend a:hover .key { border-color: var(--accent); }
.donut-legend b {
  margin-left: auto; padding-left: 10px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
.donut-legend .key {
  width: 10px; height: 10px; border-radius: 50%; margin: 0;
}
.chart-headline {
  margin: 0; font-size: 12.5px; color: var(--text); max-width: 46ch;
  line-height: 1.5;
}
.chart-headline b {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 900px) { .leadchart { display: none; } }

/* ---------- master–detail ---------- */
.md {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  align-items: start;
}
.md.open { grid-template-columns: minmax(0, 1fr) 430px; }
@media (max-width: 1180px) { .md, .md.open { grid-template-columns: minmax(0, 1fr); } }

.detail {
  position: sticky; top: 104px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow);
  max-height: calc(100vh - 126px); display: flex; flex-direction: column;
  overflow: hidden;
}
/* On a narrow screen there is no room beside the table, so the panel becomes a
   full-screen sheet rather than a squeezed column. */
@media (max-width: 1180px) {
  .detail { position: fixed; inset: 0; z-index: 60; border-radius: 0; max-height: 100vh; }
  .detail[hidden] { display: none; }
}
.d-head {
  padding: 15px 17px 13px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.d-top { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.d-name { font-size: 18px; font-weight: 600; line-height: 1.22; letter-spacing: -.01em; }
.d-close {
  border: 1px solid var(--line); background: var(--surface); border-radius: 6px;
  width: 26px; height: 26px; display: grid; place-items: center; flex: none;
  font-size: 15px; line-height: 1; color: var(--muted-c);
}
.d-close:hover { border-color: var(--accent); color: var(--accent); }
.d-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
.d-body {
  overflow-y: auto; padding: 15px 17px 22px; display: flex;
  flex-direction: column; gap: 17px;
}
.d-body .btn { margin-top: 0; }
.d-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* The panel's key/value list. Scoped to `dl` on purpose — `table.kv` is a
   different, older component still used by the tender overview tab, and the
   two must not collide. */
dl.kv {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 6px 11px;
  font-size: 13px; margin: 0;
}
dl.kv dt { color: var(--faint); font-size: 11.5px; padding-top: 1px; }
dl.kv dd { margin: 0; min-width: 0; word-break: break-word; }

/* A small neutral pill for the panel header. Deliberately not `.chip`, which
   is the filter control on the older screens and is a different size. */
.dchip {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px;
  background: var(--surface-3); color: var(--muted-c); white-space: nowrap;
}
.dchip.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.dchip.good { background: var(--tint-good); color: var(--good); }
.dchip.bad { background: var(--tint-bad); color: var(--bad); }
.dchip.warn { background: var(--tint-warn); color: var(--miss); }

/* ---------- rows that open a panel ---------- */
tbody tr.pick { cursor: pointer; }
tbody tr.pick:hover { background: var(--surface-2); }
tbody tr[aria-selected="true"] { background: var(--accent-soft); }
tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* The colour band still has to win over the selection tint, or an overdue row
   stops looking overdue the moment you click it. Selection is then carried by
   the accent rule on the first cell. */
tbody tr.band-overdue[aria-selected="true"] { background: var(--tint-bad); }
tbody tr.band-critical[aria-selected="true"] { background: var(--tint-warn); }
tbody tr.band-soon[aria-selected="true"] { background: var(--tint-soon); }
tbody tr.band-expired[aria-selected="true"] { background: var(--tint-bad); }
tbody tr.band-expiring[aria-selected="true"] { background: var(--tint-warn); }

.rk { color: var(--faint); font-size: 11.5px; width: 1%; padding-left: 14px; }
.tail-note { padding: 14px; text-align: center; color: var(--faint); font-size: 12.5px; }

/* The row's own links must not also open the panel — clicking "Download"
   should download, not select. Handled in JS; this only marks them. */
tr.pick a, tr.pick button, tr.pick select, tr.pick form { position: relative; z-index: 1; }

/* ---------- small pieces the masthead/panel screens use ---------- */
th.r, td.r { text-align: right; }

/* A row's primary name, and the quieter line under it. Two lines of hierarchy
   inside one cell is what lets the table stay dense without becoming a wall. */
.pname { font-weight: 550; line-height: 1.3; }
.pmeta { color: var(--faint); font-size: 11.5px; margin-top: 1px; }

/* Section rule inside the detail panel: a small uppercase label with a hairline
   running to the right edge, so the panel reads as sections rather than one
   long list. */
.sec-h {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 650; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.sec-h::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.note { font-size: 12px; color: var(--muted-c); line-height: 1.5; margin: 6px 0 0; }

/* A short stacked list inside the panel — which bids rely on a document. */
.tlist { display: flex; flex-direction: column; }
.trow { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.trow:last-child { border-bottom: 0; }
.trow .tt { font-size: 12.5px; font-weight: 520; line-height: 1.35; }
.trow .tm { font-size: 11px; color: var(--faint); margin-top: 2px; }

/* ---------- generic table, the way the Atlas styles it ----------
   The older screens use `table.grid.rows`, whose rules are more specific and
   therefore still win wherever they differ. These are the base so a plain
   <table> inside a card — which is what the master-detail screens use — is
   styled without having to remember two class names. */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  position: sticky; top: 0; z-index: 5; background: var(--surface-2);
  text-align: left; padding: 8px 11px; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-c); font-weight: 650;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 7px 11px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }

/* The masthead headline and strapline should take the room they need; the
   stats sit to the right of whatever is left. Without this the sentence gets
   squeezed into a four-line column on a wide screen. */
.title-wrap { flex: 1 1 520px; }

/* `.num` carries two things: the monospace tabular figures, and right
   alignment for table columns. In the panel's key/value list only the first is
   wanted — a right-aligned definition list reads as two disconnected columns. */
dl.kv dd.num, dl.kv dd .num { text-align: left; }

/* An action card is not a data panel. "Move along the pipeline" and its like
   carry a control, so they get the accent rule that says so — the reason the
   stage picker went unnoticed is that it looked exactly like the read-only
   Dates and Money panels beside it. */
.card.act { border-left: 3px solid var(--accent); }
.card.act h2 { color: var(--accent-ink); }

/* The search box submits on Enter, but a control with no visible affordance is
   a control people do not know is there — the old screens had a Filter button
   and its removal was a real loss, not a simplification. This sits inside the
   search field at the right, small and quiet. */
.search { display: flex; align-items: center; }
.sr-go {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface); color: var(--muted-c); font-size: 11.5px;
}
.sr-go:hover { border-color: var(--accent); color: var(--accent); }
.search input { padding-right: 62px; }

/* A brief's findings: the claim, then the document's own words under it. The
   quote is the reason the brief is trustworthy, so it is never truncated. */
.flag-block {
  padding: 9px 11px; border-left: 3px solid var(--miss); margin-bottom: 7px;
  background: var(--surface-2); border-radius: 0 7px 7px 0;
}
.flag-block.quiet { border-left-color: var(--line); }
.flag-block b { display: block; font-weight: 600; }
.flag-block .quote { margin: 5px 0 0; }
blockquote.quote {
  margin: 4px 0 0; padding: 4px 0 4px 10px; border-left: 2px solid var(--line);
  color: var(--muted-c); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}