/* silmera.css - the standalone Silmera page (app.oraclea.ai/apps/silmera/).
 * Tokens are the design canvas of 2026-09-08, verbatim: cream paper #FAF8F2, panel
 * #F5F1E8, white cards, ink #1F1D16, secondary #57534E, muted #8A857A, border
 * rgba(var(--ink-rgb), .12), ONE accent indigo #5B5BD6 (hover #4F46E5), the four verdict
 * colours green #059669 / amber #D97706 / red #DC2626 / grey #8A857A.
 * DM Sans for prose, IBM Plex Mono for values and file names. Radii 8 and 12.
 * No emoji anywhere; every icon is inline SVG in the markup.
 */

:root {
  --paper: #FAF8F2;
  --panel: #F5F1E8;
  --card: #FFFFFF;
  --ink: #1F1D16;
  --ink2: #57534E;
  --ink3: #6B675E;
  --muted: #8A857A;
  --line: rgba(31, 29, 22, 0.12);
  --line-soft: rgba(31, 29, 22, 0.08);
  --accent: #5B5BD6;
  --accent-hover: #4F46E5;
  --ok: #059669;
  --ok-ink: #047857;
  --rev: #D97706;
  --rev-ink: #B45309;
  --bad: #DC2626;
  --bad-ink: #B91C1C;
  --abs: #8A857A;
  --mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  /* 2026-10-01 dark mode: the literals below were fixed colours in the rules; they are tokens
     now so the dark palette can redefine them. Light values are the old literals, unchanged. */
  --on-accent: #FFFFFF;
  --accent-rgb: 91, 91, 214;
  --ink-rgb: 31, 29, 22;
  --shadow-rgb: 31, 29, 22;
  --bad-rgb: 220, 38, 38;
  --rev-rgb: 217, 119, 6;
  --ok-rgb: 5, 150, 105;
  --c-fff7e6: #FFF7E6; --c-fef2f2: #FEF2F2; --c-ecfdf3: #ECFDF3; --c-fff8f8: #FFF8F8; --c-fff5f5: #FFF5F5;
  --c-f3e0b8: #F3E0B8; --c-f7d4d4: #F7D4D4; --c-cfefdf: #CFEFDF; --c-f1efe9: #F1EFE9; --c-d9d9e3: #D9D9E3;
  --c-f2c879: #F2C879; --c-b7791f: #B7791F; --c-9b2c2c: #9B2C2C; --c-2f855a: #2F855A; --c-c53030: #C53030; --c-a3373a: #a3373a;
  color-scheme: light;
}

/* dark: follows the system unless the person chose; the choice sets data-theme on <html> */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper: #191813; --panel: #201F19; --card: #26241E;
  --ink: #ECE8DE; --ink2: #C9C4B8; --ink3: #ABA59A; --muted: #8F8A7F;
  --line: rgba(236, 232, 222, 0.14); --line-soft: rgba(236, 232, 222, 0.08);
  --accent: #8E8EF2; --accent-hover: #A9A9FF; --on-accent: #16152E;
  --ok: #34D399; --ok-ink: #6EE7B7; --rev: #F5A524; --rev-ink: #FBBF24; --bad: #F87171; --bad-ink: #FCA5A5; --abs: #9A958A;
  --accent-rgb: 142, 142, 242; --ink-rgb: 236, 232, 222; --shadow-rgb: 0, 0, 0;
  --bad-rgb: 248, 113, 113; --rev-rgb: 245, 165, 36; --ok-rgb: 52, 211, 153;
  --c-fff7e6: #3A2E12; --c-fef2f2: #3A1C1C; --c-ecfdf3: #12301F; --c-fff8f8: #2E1A1A; --c-fff5f5: #301B1B;
  --c-f3e0b8: #6B5320; --c-f7d4d4: #6B2A2A; --c-cfefdf: #1F5A3C; --c-f1efe9: #2A2822; --c-d9d9e3: #44434F;
  --c-f2c879: #C9A24D; --c-b7791f: #E0B45C; --c-9b2c2c: #F19A9A; --c-2f855a: #6FD3A0; --c-c53030: #F08A8A; --c-a3373a: #F08A8A;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #191813; --panel: #201F19; --card: #26241E;
  --ink: #ECE8DE; --ink2: #C9C4B8; --ink3: #ABA59A; --muted: #8F8A7F;
  --line: rgba(236, 232, 222, 0.14); --line-soft: rgba(236, 232, 222, 0.08);
  --accent: #8E8EF2; --accent-hover: #A9A9FF; --on-accent: #16152E;
  --ok: #34D399; --ok-ink: #6EE7B7; --rev: #F5A524; --rev-ink: #FBBF24; --bad: #F87171; --bad-ink: #FCA5A5; --abs: #9A958A;
  --accent-rgb: 142, 142, 242; --ink-rgb: 236, 232, 222; --shadow-rgb: 0, 0, 0;
  --bad-rgb: 248, 113, 113; --rev-rgb: 245, 165, 36; --ok-rgb: 52, 211, 153;
  --c-fff7e6: #3A2E12; --c-fef2f2: #3A1C1C; --c-ecfdf3: #12301F; --c-fff8f8: #2E1A1A; --c-fff5f5: #301B1B;
  --c-f3e0b8: #6B5320; --c-f7d4d4: #6B2A2A; --c-cfefdf: #1F5A3C; --c-f1efe9: #2A2822; --c-d9d9e3: #44434F;
  --c-f2c879: #C9A24D; --c-b7791f: #E0B45C; --c-9b2c2c: #F19A9A; --c-2f855a: #6FD3A0; --c-c53030: #F08A8A; --c-a3373a: #F08A8A;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.mono { font-family: var(--mono); }

[hidden] { display: none !important; }

/* -- shell ------------------------------------------------------------------- */

.sil-root { display: flex; min-height: 100vh; align-items: stretch; }

.side {
  width: 232px; flex: 0 0 232px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 20px 14px;
  position: sticky; top: 0; height: 100vh;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }
/* 2026-10-03 (Andy): the Silmera cube, redrawn from the logo (apps/silmera/css/silmera-cube.svg) */
.brand-mark { width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.2,0.5 92.3,24.8 50.2,24.7' fill='%238FDCD6'/%3E%3Cpolygon points='92.3,24.8 50.2,48.7 50.2,24.7' fill='%236BCFCA'/%3E%3Cpolygon points='50.2,48.7 8.0,24.8 50.2,24.7' fill='%2355BFBB'/%3E%3Cpolygon points='8.0,24.8 50.2,0.5 50.2,24.7' fill='%2379D5CF'/%3E%3Cpolygon points='6.2,26.9 48.6,51.2 27.4,63.1' fill='%232EA2AC'/%3E%3Cpolygon points='48.6,51.2 48.6,99.2 27.4,63.1' fill='%231F8F99'/%3E%3Cpolygon points='48.6,99.2 6.2,75.1 27.4,63.1' fill='%23167480'/%3E%3Cpolygon points='6.2,75.1 6.2,26.9 27.4,63.1' fill='%2325929C'/%3E%3Cpolygon points='51.6,51.2 93.8,26.9 72.7,63.1' fill='%23175C86'/%3E%3Cpolygon points='93.8,26.9 93.8,75.1 72.7,63.1' fill='%23114E74'/%3E%3Cpolygon points='93.8,75.1 51.6,99.2 72.7,63.1' fill='%230B3A5C'/%3E%3Cpolygon points='51.6,99.2 51.6,51.2 72.7,63.1' fill='%230E4468'/%3E%3C/svg%3E") center / contain no-repeat; flex: 0 0 28px; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--ink2); font: inherit; font-weight: 500; font-size: 14px;
  background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.nav-item:hover { background: rgba(var(--ink-rgb), 0.05); }
.nav-item.active { background: rgba(var(--accent-rgb), 0.10); color: var(--ink); }
.nav-item svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 18px; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 8px; color: var(--ink3); font-size: 12.5px; }
.side-who { overflow-wrap: anywhere; }

.lang { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; width: max-content; }
.lang button {
  padding: 3px 9px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); background: transparent; border: 0; cursor: pointer;
}
.lang button.on { background: var(--card); color: var(--ink); }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 36px 0; }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs button { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.crumbs button:hover { color: var(--ink); }
.topbar-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

.content { padding: 22px 36px 48px; display: flex; flex-direction: column; gap: 20px; outline: none; }

h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; margin: 0; line-height: 1.2; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
h3 { margin: 0; padding: 14px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sub { color: var(--ink3); font-size: 13.5px; margin: 0; }
.sub.small { font-size: 12.5px; }
.stack { display: flex; flex-direction: column; gap: 6px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); background: var(--card); color: var(--ink2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.card.flush { padding: 8px 0 0; }
.card.col { display: flex; flex-direction: column; gap: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 8px;
  font: inherit; font-weight: 600; font-size: 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.14); background: var(--card); color: var(--ink);
  cursor: pointer;
}
.btn:hover { border-color: rgba(var(--ink-rgb), 0.28); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink2); }
.btn.quiet:hover { background: rgba(var(--ink-rgb), 0.05); border-color: transparent; }
.btn.small { height: 30px; padding: 0 10px; font-size: 13px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kbd { font-size: 12px; color: var(--muted); font-weight: 400; }

/* -- the four states, one vocabulary everywhere ------------------------------ */

.st { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13px; white-space: nowrap; }
.st i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.st.ok i { background: var(--ok); } .st.ok { color: var(--ok-ink); }
.st.rev i { background: var(--card); border: 2px solid var(--rev); } .st.rev { color: var(--rev-ink); }
.st.conf i { background: var(--bad); border-radius: 2px; transform: rotate(45deg); width: 8px; height: 8px; flex-basis: 8px; } .st.conf { color: var(--bad-ink); }
.st.abs i { background: transparent; border: 1.5px solid var(--abs); } .st.abs { color: var(--ink3); }
.st.none { color: var(--muted); }
.st.none i { display: none; }

.ev { color: var(--ink2); font-size: 12.5px; }
.ev .mono { color: var(--ink); }

/* -- dossiers list ----------------------------------------------------------- */

.row {
  display: grid; grid-template-columns: 2.2fr 1.6fr 0.9fr 1.1fr 0.9fr 40px;
  gap: 12px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0;
  font: inherit; color: inherit; text-align: left;
}
.row:last-child { border-bottom: 0; }
button.row { cursor: pointer; }
button.row:hover { background: rgba(var(--accent-rgb), 0.04); }
.row.head { padding: 0 18px 10px; }
.row.head span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.row .name { font-weight: 600; font-size: 14.5px; }
.row .meta { color: var(--ink3); font-size: 12.5px; }
.row-del { justify-self: end; }

.empty { padding: 28px 18px; color: var(--ink3); font-size: 13.5px; }

.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }

/* -- dossier screen ---------------------------------------------------------- */

.head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }

.doc { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.doc svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.doc .pg { color: var(--muted); font-size: 12.5px; }
.drop { border: 1.5px dashed rgba(var(--ink-rgb), 0.2); border-radius: 10px; padding: 18px; text-align: center; color: var(--ink3); font-size: 13px; margin-top: 12px; }
.drop.over { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.05); }

.frame { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; width: 100%; background: var(--card); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.frame.on { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.05); }
.frame[disabled] { opacity: 0.5; cursor: not-allowed; }
.radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(var(--ink-rgb), 0.3); margin-top: 2px; flex: 0 0 16px; }
.frame.on .radio { border: 5px solid var(--accent); }
.frame b { font-weight: 600; display: block; }
.frame small { color: var(--ink3); font-size: 12.5px; }

.opt { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink2); background: none; border: 0; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.sw { width: 30px; height: 18px; border-radius: 9999px; background: rgba(var(--ink-rgb), 0.15); position: relative; flex: 0 0 30px; }
.sw.on { background: var(--accent); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); }
.sw.on::after { left: 14px; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; width: max-content; height: 36px; }
.seg button { padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.seg button.on { background: var(--card); color: var(--ink); }
.seg button[disabled] { opacity: 0.4; cursor: not-allowed; }

.note { color: var(--ink3); font-size: 12.5px; margin: 0; }

.reach-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--ink2); font-size: 12.5px; }

/* the module panel lands here */
.slot { display: block; min-width: 0; }
.slot-empty { border: 1.5px dashed rgba(var(--ink-rgb), 0.2); border-radius: 12px; padding: 22px; color: var(--ink3); font-size: 13.5px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* -- reference frames -------------------------------------------------------- */

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sec { display: flex; flex-direction: column; gap: 12px; }
.rf { display: flex; flex-direction: column; gap: 8px; min-height: 150px; }
.rf .k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rf b { font-size: 15px; font-weight: 600; }
.rf .d { color: var(--ink2); font-size: 13px; flex: 1 1 auto; }
.rf .m { color: var(--muted); font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; }
/* WS5.3 (2026-09-16) - a template kept in this browser. The inline delete question takes a
   whole row of the card's meta line so it is read before the two buttons under it, and the
   confirming button is the only red thing on the card. No browser dialog is ever opened. */
.rf .m .delq { flex: 1 1 100%; color: var(--ink2); font-size: 12.5px; line-height: 1.45; }
.btn.quiet.danger, .btn.danger { color: var(--bad-ink); }
.btn.quiet.danger:hover { background: rgba(var(--bad-rgb), 0.08); }
.rf.add { border-style: dashed; align-items: center; justify-content: center; text-align: center; color: var(--ink2); }

/* -- certificates ------------------------------------------------------------ */

.kv { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; font-size: 13.5px; }
.kv span:nth-child(odd) { color: var(--muted); }

/* The issuer of a certificate, and the same identity previewed in Settings.
   2026-09-15: certSheet() has drawn <img class="issuer-logo"> since 2026-09-12 and this
   rule did not exist, because no organisation on production had a logo - the first one
   uploaded would have rendered at its natural size and pushed the sheet apart. The height
   is the cap the upload is reduced to (320x120 in silmera-app.js), so a logo is bounded
   twice: once in the bytes that are stored, once in the sheet that draws them. */
.issuer-logo { max-height: 28px; max-width: 120px; width: auto; vertical-align: middle; margin-right: 8px; object-fit: contain; }
.firm-now { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 14px; }
.firm-now .issuer-logo { max-height: 36px; max-width: 160px; margin-right: 4px; }
.rule { height: 1px; background: var(--line); }
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 36px 44px; max-width: 760px; display: flex; flex-direction: column; gap: 22px; }

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }

/* -- settings + forms -------------------------------------------------------- */

.fld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink2); }
.fld input, .fld select, .fld textarea {
  height: 38px; border: 1px solid rgba(var(--ink-rgb), 0.14); border-radius: 8px;
  padding: 0 12px; font: inherit; font-size: 14px; background: var(--card); color: var(--ink);
}
.fld textarea { height: auto; min-height: 90px; padding: 10px 12px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid rgba(var(--accent-rgb), 0.35); outline-offset: 1px; border-color: var(--accent); }

.danger { color: var(--bad-ink); }

/* -- sign-in gate ------------------------------------------------------------ */

.sil-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--paper); }
.gate-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 28px 30px; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.gate-card h1 { font-size: 20px; }
.gate-card form { display: flex; flex-direction: column; gap: 12px; }
.gate-err { color: var(--bad-ink); font-size: 13px; min-height: 0; }
.gate-err:empty { display: none; }

/* -- narrow ------------------------------------------------------------------ */

@media (max-width: 1080px) {
  .cards3, .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards2 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1.6fr 1fr 1fr; }
  .row.head { display: none; }
}

@media (max-width: 760px) {
  .sil-root { flex-direction: column; }
  .side { width: auto; flex: 0 0 auto; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { margin-top: 14px; }
  .topbar, .content { padding-left: 18px; padding-right: 18px; }
  .cards3, .grid3, .row { grid-template-columns: 1fr; }
  .sheet { padding: 22px 20px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv span:nth-child(odd) { margin-top: 8px; }
}

/* -- the dossier flow (2026-09-10): four steps in one column, no page scroll --------- */

.sil-root.fixed { height: 100vh; min-height: 0; }
.sil-root.fixed .main { min-height: 0; }
.sil-root.fixed .content { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 22px; gap: 0; }

.flow { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1 1 auto; }
.flow-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.flow-title h1 { font-size: 22px; }

.blk { background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; flex: 0 0 auto; }
.blk.cur { flex: 1 1 auto; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10); }
.blk.up { background: transparent; border-style: dashed; }
.hd {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 16px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink);
  border-radius: 12px; font: inherit; cursor: pointer;
}
.hd[disabled] { cursor: default; }
.blk.done .hd:hover { background: rgba(var(--ink-rgb), 0.03); }
.blk.cur .hd { padding-bottom: 0; }
.hd .n {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(var(--ink-rgb), 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink2);
}
.hd .n svg { width: 13px; height: 13px; stroke: var(--card); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.blk.cur .hd .n { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.blk.done .hd .n { border-color: var(--ok); background: var(--ok); color: var(--on-accent); }
.blk.skip .hd .n { border-style: dashed; color: var(--muted); }
.blk.up .hd .n { color: var(--muted); }
.hd .lb { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hd .lb b { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.blk.cur .hd .lb b { color: var(--accent); }
.hd .lb span { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk.done .hd .lb span { font-weight: 500; }
.blk.up .hd .lb span, .blk.skip .hd .lb span { color: var(--muted); font-weight: 500; }
.hd .chg { font-size: 12.5px; font-weight: 600; color: var(--accent); min-width: 1px; }

.stepb { flex: 1 1 auto; min-height: 0; padding: 6px 16px 0 54px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.foot2 { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px 14px 54px; border-top: 1px solid var(--line-soft); margin-top: 6px; }
.foot2 .sp { flex: 1; }
.foot2 .hint { font-size: 12.5px; color: var(--muted); }

.grps { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.grp { margin: 0; min-width: 0; }
.grp.span1 { flex: 1 1 calc(33.333% - 11px); }
.grp.span2 { flex: 2 1 calc(66.666% - 6px); }
.grp.span3 { flex: 3 1 100%; }
.grp h3 { padding: 6px 0 6px; }
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gcards.cols1 { grid-template-columns: 1fr; }
.gcards.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 70px; position: relative;
  font: inherit; color: inherit; cursor: pointer;
}
.gcard:hover { border-color: rgba(var(--ink-rgb), 0.3); }
.gcard.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10); }
.gcard b { font-size: 14px; font-weight: 600; padding-right: 22px; }
.gcard small { font-size: 12.5px; color: var(--ink3); line-height: 1.4; }
.gcard .kept { font-size: 11.5px; color: var(--muted); }
.gcard .dl { margin-top: auto; padding-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink3); }
.gcard .chk { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(var(--ink-rgb), 0.25); }
.gcard.on .chk { border: 0; background: var(--accent); }
.gcard.on .chk::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.detail { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; font-size: 13px; }
.detail dt { color: var(--muted); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.detail dd { margin: 2px 0 0; color: var(--ink); line-height: 1.45; }

.pre { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink3); }
.pre button { border: 1px solid var(--line); background: var(--card); border-radius: 9999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.pre button.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.10); font-weight: 600; }
.scards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.scard {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-align: left;
  display: flex; flex-direction: column; gap: 5px; position: relative; min-height: 130px; font: inherit; color: inherit; cursor: pointer;
}
.scard:hover { border-color: rgba(var(--ink-rgb), 0.3); }
.scard.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10); }
.scard .box { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(var(--ink-rgb), 0.3); background: var(--card); }
.scard.on .box { background: var(--accent); border-color: var(--accent); }
.scard.on .box::after { content: ""; position: absolute; left: 6.5px; top: 3px; width: 5px; height: 9px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.scard b { font-size: 15px; font-weight: 600; padding-right: 28px; }
.scard small { color: var(--ink3); font-size: 13px; line-height: 1.45; }
.scard .tg { margin-top: auto; padding-top: 4px; font-size: 11.5px; color: var(--muted); }
.reads { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; display: flex; gap: 12px; align-items: flex-start; }
.reads .k { color: var(--muted); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; padding-top: 2px; white-space: nowrap; }
.reads p { margin: 0; }
.reads .warn { color: var(--rev-ink); }

.drop.big { flex: 1 1 auto; min-height: 180px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.04); border-radius: 12px; color: var(--ink2); }
.drop.big b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.drop.big .links { margin-top: 12px; display: flex; gap: 8px; }
.drop.big .links a { color: var(--ink); }
.drop.big .fine { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.drop.slim { margin: 0; padding: 10px 14px; text-align: left; border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.04); }
.doclist { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--line-soft); border-radius: 10px; padding: 0 10px; }
.docbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink3); }
.opts { display: flex; gap: 22px; flex-wrap: wrap; }

/* kept documents (2026-09-12): the dossier's own documents are still in this browser and
   can be reopened. It sits UNDER the drop zone, not in place of it, because adding more is
   still the common action; the button is the quieter of the two on purpose. */
.kept { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(var(--ink-rgb), 0.02); }
.kept .note { color: var(--ink2); font-weight: 600; }
.kept .sub { margin: 4px 0 10px; font-size: 12.5px; color: var(--muted); }
.kept .btn { padding: 6px 12px; font-size: 13px; }

/* pseudonymise before any request (2026-10-13): the review of the names on step 3 */
.ps-box { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(var(--accent-rgb), 0.03); }
.ps-box .note { color: var(--ink2); font-weight: 600; }
.ps-box .sub { margin: 4px 0 8px; font-size: 12.5px; color: var(--muted); }
.ps-box .fine { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.ps-lists { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.ps-lists label { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink3); }
.ps-lists textarea { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
.ps-table { max-height: 280px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 8px; }
.ps-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.ps-table th, .ps-table td { border-bottom: 1px solid var(--line-soft); padding: 4px 8px; text-align: left; vertical-align: top; }
.ps-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ps-act .btn { padding: 6px 12px; font-size: 13px; }

.sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sm { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sm .k { color: var(--muted); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.sm b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sm a { font-size: 12.5px; font-weight: 600; }
.sum.compact .sm { flex-direction: row; align-items: baseline; gap: 10px; padding: 8px 12px; }
.sum.compact .sm b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consent { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.consent p { margin: 0; color: var(--ink2); font-size: 13.5px; max-width: 64ch; }
.consent .sp { flex: 1; }
.res-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.note.err { color: var(--bad-ink); }
/* the result kept on the dossier (2026-09-11): one line above the tiles, no engine on screen */
.rs-saved { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 12.5px; color: var(--ink2); }
.rs-saved svg { color: var(--ok); flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1080px) {
  .gcards, .scards, .sum, .detail { grid-template-columns: 1fr 1fr; }
  .grp.span1, .grp.span2, .grp.span3 { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .sil-root.fixed { height: auto; }
  .sil-root.fixed .content { overflow: visible; }
  .gcards, .scards, .sum, .detail { grid-template-columns: 1fr; }
  .stepb, .foot2 { padding-left: 16px; }
}

/* -- the result view (2026-09-10): the page's own drawing of the filled sheet ---------- */

#sil-rs { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1 1 auto; }
.rs-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rs-head h2 { font-size: 17px; font-weight: 700; }
.rs-head .when { color: var(--muted); font-size: 12.5px; }
.rs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rs-tile {
  border-radius: 10px; padding: 10px 14px; border: 1px solid var(--line-soft); background: var(--card);
  display: flex; align-items: baseline; gap: 10px; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.rs-tile .n { font-family: var(--mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rs-tile .l { font-size: 12.5px; color: var(--ink2); }
.rs-tile.ok { background: var(--c-ecfdf3); border-color: var(--c-cfefdf); } .rs-tile.ok .n { color: var(--ok-ink); }
.rs-tile.rev { background: var(--c-fff7e6); border-color: var(--c-f3e0b8); } .rs-tile.rev .n { color: var(--rev-ink); }
.rs-tile.conf { background: var(--c-fef2f2); border-color: var(--c-f7d4d4); } .rs-tile.conf .n { color: var(--bad-ink); }
.rs-tile.abs { background: var(--c-f1efe9); } .rs-tile.abs .n { color: var(--ink3); }
.rs-tile.on { box-shadow: 0 0 0 2px var(--accent); }
/* 2026-09-28 (WS7): the conflict tile names the part the column check found, and the
   filter line opens with the size of the sheet */
.rs-tile { flex-wrap: wrap; }
.rs-tile .c { flex-basis: 100%; font-size: 11.5px; color: var(--bad-ink); }
.rs-filters .rs-total { font-weight: 600; color: var(--ink); }
.rs-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.rs-prog .bar { flex: 1 1 160px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rs-prog .bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.rs-prog .bar.busy { position: relative; }
.rs-prog .bar.busy i { background: rgba(var(--accent-rgb), 0.25); }
.rs-prog .bar.busy::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--accent); border-radius: 3px; animation: rs-busy 1.6s ease-in-out infinite; }
@keyframes rs-busy { from { left: -40%; } to { left: 100%; } }
.rs-prog .hint b { font-variant-numeric: tabular-nums; color: var(--ink); }
/* once the sheet is drawn (focus) the page scrolls like a document: nothing pinned, nothing
   scrolling inside a 100px box; the result block's header stays put while the table scrolls */
.flow.focus, .flow.focus .blk.cur, .flow.focus .stepb, .flow.focus #sil-rs, .flow.focus .rs-wrap { flex: 0 0 auto; min-height: auto; overflow: visible; }
.flow.focus .blk.cur .hd { position: sticky; top: 0; z-index: 3; background: var(--card); border-radius: 12px 12px 0 0; padding-bottom: 8px; box-shadow: 0 6px 8px -8px rgba(var(--shadow-rgb), 0.25); }
.rs-prog .st { font-weight: 600; color: var(--ink); }
.rs-prog .hint { flex-basis: 100%; }
.rs-filters { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.rs-filters a { font-weight: 600; }
.rs-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); }
.rs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rs th {
  position: sticky; top: 0; z-index: 1; background: var(--card); text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  padding: 9px 12px; border-bottom: 1px solid var(--line);
}
.rs td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.rs tr.sect td { background: var(--panel); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); padding: 6px 12px; }
.rs td.f { width: 32%; color: var(--ink2); }
.rs td.f i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-right: 8px; }
.rs td.v { width: 46%; }
.rs td.s { width: 22%; }
.rs td.empty { color: var(--muted); padding: 22px 12px; }
.rs .st { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-top: 4px; flex-wrap: wrap; }
.rs .st span { font-weight: 400; color: var(--ink3); }
.rs .st i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.rs .st.ok { color: var(--ok-ink); } .rs .st.ok i { background: var(--ok); }
.rs .st.rev { color: var(--rev-ink); } .rs .st.rev i { background: var(--card); border: 2px solid var(--rev); width: 6px; height: 6px; }
.rs .st.abs { color: var(--ink3); } .rs .st.abs i { border: 1.5px solid var(--abs); background: transparent; }
.rs .st.bad { color: var(--bad-ink); } .rs .st.bad i { background: var(--bad); border-radius: 2px; transform: rotate(45deg); width: 7px; height: 7px; }
.rs .st.fill { color: var(--muted); } .rs .st.fill i { border: 1.5px solid var(--muted); background: transparent; }
.rs tr.conf td { background: var(--c-fff8f8); }
.rs tr.pending td { color: var(--muted); }
.rs .pend { color: var(--muted); font-style: italic; }
.rs .branch { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; padding: 6px 8px; border: 1px solid var(--c-f7d4d4); border-radius: 6px; margin-top: 6px; background: var(--card); }
.rs .abs-v { color: var(--muted); font-style: italic; }
.rs .chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent); background: rgba(var(--accent-rgb), 0.10);
  padding: 2px 7px; border-radius: 5px; white-space: nowrap; cursor: pointer; border: 0; margin: 0 4px 4px 0;
}
.rs .chip:hover { background: rgba(var(--accent-rgb), 0.18); }
.rs .chip.warn { color: var(--rev-ink); background: var(--c-fff7e6); }
/* 2026-09-16, external-only runs: a value from an allowlisted host is VISIBLY external */
.rs .chip.ext { color: var(--ink2); background: transparent; box-shadow: inset 0 0 0 1px var(--line, var(--c-d9d9e3)); }
.rs .chip.ext.warn { color: var(--rev-ink); box-shadow: inset 0 0 0 1px var(--c-f2c879); }
.rs .chip-link { font-size: 11.5px; margin: 0 8px 4px 0; white-space: nowrap; }
.xo-stmt { margin: 10px 0 0; }
.rs .quote { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--paper); font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.rs .quote b { color: var(--muted); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; margin-right: 6px; }
@media (max-width: 1080px) { .rs-tiles { grid-template-columns: 1fr 1fr; } }

/* focus: the deliverable takes the screen; the three done steps are one line */
.blk.summary .hd { cursor: pointer; }
.blk.summary .hd .lb { gap: 14px; }
.blk.summary .hd .lb em { font-style: normal; font-size: 13px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk.summary .hd .lb em::before { content: "\00b7"; margin-right: 14px; color: var(--muted); }
.flow.focus .blk.cur .hd { padding-bottom: 6px; }
.flow.focus .stepb { padding-top: 0; }


/* the arithmetic CHECKS block under the sheet (2026-09-11, ch-comptes-annuels-co).
   One line per check INCLUDING the ones that did not run: a status mark, the identity's
   own name and T-id, the difference with the tolerance it was judged against, the field
   numbers it read, and the sentence saying what was computed or why it could not be. */
.rs-checks { flex: 0 0 auto; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rs-checks h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink3); }
.rs-checks .sum { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rs-checks .note { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rs-checks .note.err { color: var(--bad-ink, var(--c-9b2c2c)); }
.ck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ck { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 9px 11px; border: 1px solid var(--line-soft); border-left-width: 3px; border-radius: 8px; background: var(--card); }
.ck .g { font-size: 14px; line-height: 1.3; text-align: center; color: var(--muted); }
.ck .b { display: grid; gap: 3px; min-width: 0; }
.ck .l { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ck .l b { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.ck .l i { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--muted); }
.ck .l em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.ck .m { font-family: var(--mono); font-size: 11.5px; color: var(--ink2); }
.ck .x { font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.ck.pass { border-left-color: var(--ok, var(--c-2f855a)); }
.ck.pass .g, .ck.pass .l em { color: var(--ok, var(--c-2f855a)); }
.ck.fail { border-left-color: var(--c-c53030); background: var(--c-fff5f5); }
.ck.fail .g, .ck.fail .l em { color: var(--c-9b2c2c); }
.ck.unbound, .ck.suspended { border-left-color: var(--rev-ink, var(--c-b7791f)); }
.ck.unbound .g, .ck.unbound .l em, .ck.suspended .g, .ck.suspended .l em { color: var(--rev-ink, var(--c-b7791f)); }
.ck.unmeasured { border-left-color: var(--line); }
.ck.unmeasured .l b, .ck.unmeasured .x { color: var(--ink3); }
@media (max-width: 700px) { .ck { grid-template-columns: 18px 1fr; } }

/* COLUMNS AND UNITS (option B, 2026-09-12). The same furniture as the checks block above, one
   column narrower: there is no glyph, because every row here is something to look at and a
   mark that never varies carries no information. Amber, not red - the figure is in the
   dossier, it is the column or the unit that is wrong, and the reader decides. */
.rs-cols { flex: 0 0 auto; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rs-cols h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink3); }
.rs-cols .sum { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rs-cols .note { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
li.col { padding: 9px 11px; border: 1px solid var(--line-soft); border-left: 3px solid var(--rev-ink, var(--c-b7791f)); border-radius: 8px; background: var(--card); }
li.col .b { display: grid; gap: 3px; min-width: 0; }
li.col .l { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
li.col .l b { font-size: 13.5px; color: var(--ink); font-weight: 600; }
li.col .l em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rev-ink, var(--c-b7791f)); }
li.col .m { font-family: var(--mono); font-size: 11.5px; color: var(--ink2); }
li.col .x { font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
/* The two kinds are told apart by the WORDS in .l em; the border only repeats it, so the
   difference is a line style and not a colour alone. */
li.col.other-period { border-left-style: solid; }
li.col.scale-mismatch { border-left-style: dashed; }
/* 2026-09-12 evening, version 2. A figure absent from its own row, and a CONFLICT read: the
   readings stack one per line. "One amount, printed twice" asks nothing of the reader, so it
   carries the quiet line colour; "different lines" is a choice, so it keeps the review colour. */
li.col.unmatched { border-left-style: double; border-left-width: 4px; }
li.col .rd { display: grid; gap: 2px; }
li.col.conflict.same-amount { border-left-color: var(--line); }
li.col.conflict.same-amount .l em { color: var(--ink3); }
li.col.conflict.different-rows { border-left-style: solid; }

/* 2026-09-28, element 3: a correction on the sheet, and the firm search hint it may teach */
.rs .rs-corr { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rs .rs-corr:hover { color: var(--ink); }
.rs .corr-v { font-weight: 600; }
.rs .st.hint { color: var(--accent); } .rs .st.hint i { background: var(--accent); border-radius: 2px; width: 7px; height: 7px; }
.rs .rs-edit, .rs .rs-hint { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); display: grid; gap: 8px; font-size: 12.5px; }
.rs .rs-hint p { margin: 0; color: var(--ink2); line-height: 1.5; }
.rs .rs-edit input, .rs .rs-hint input { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; margin-top: 4px; }
.rs .rs-hint label { display: block; color: var(--ink3); }
.rs .rs-edit .acts, .rs .rs-hint .acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* -- the report and the memo (2026-09-28): the page's own drawing, kept on the dossier ---- */
.rp-view div.rs-tile { cursor: default; }
.rp-sub { margin: 0; color: var(--ink2); font-size: 13px; overflow-wrap: anywhere; }
.rp-sev { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rp-f { border: 1px solid var(--line-soft); border-left: 3px solid var(--abs); border-radius: 8px; background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.rp-f.ok { border-left-color: var(--ok); } .rp-f.rev { border-left-color: var(--rev); } .rp-f.conf { border-left-color: var(--bad); }
.rp-t { font-weight: 600; font-size: 13.5px; }
.rp-line { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.rp-q { display: block; margin: 2px 0 0 14px; color: var(--ink2); font-style: italic; font-size: 12.5px; }
.rp-auth { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.rp-pill { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--c-f1efe9); color: var(--ink3); }
.rp-f.ok > .rp-t .rp-pill { background: var(--c-ecfdf3); color: var(--ok-ink); }
.rp-f.rev > .rp-t .rp-pill { background: var(--c-fff7e6); color: var(--rev-ink); }
.rp-f.conf > .rp-t .rp-pill, .rp-pill.conf { background: var(--c-fef2f2); color: var(--bad-ink); }
.rp-cert { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink2); overflow-wrap: anywhere; }
.rp-cert b { color: var(--ink); font-size: 13px; }
.rp-stmt { font-style: italic; color: var(--ink); }
.rp-md { background: var(--card); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 18px; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.rp-md h3 { font-size: 16px; margin: 4px 0 8px; } .rp-md h4 { font-size: 14px; margin: 14px 0 6px; }
.rp-md p { margin: 0 0 8px; } .rp-md ul { margin: 0 0 8px 18px; padding: 0; } .rp-md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.rp-obl { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-top: 4px; }
.rp-obl th, .rp-obl td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.rp-obl td:first-child { font-family: var(--mono); white-space: nowrap; }

/* -- a question on a kept result (2026-09-28, WS7) ------------------------------------ */
.ask-kept { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: var(--card); }
.ask-kept h3 { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.ask-kept .ask-row { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.ask-kept textarea { flex: 1 1 auto; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
@media (max-width: 640px) { .ask-kept .ask-row { flex-direction: column; align-items: stretch; } }

/* -- the goal list folds when it grows (2026-09-28, WS7) ------------------------------- */
.grp .fold { margin: 8px 0 0; font-size: 12.5px; }

/* -- the goal step, tidied (2026-09-29, Andy: "a little messy") ------------------------
   Cards were as tall as their longest description, so two rows filled the step and the
   third was cut by the step's own scroll. A description is now two lines (the whole text
   is the card's tooltip and opens on the chosen card), every card has one height, the
   deliverable sits beside the title, and a shelf's heading and its sentence share a line. */
.gcards { gap: 10px; }
.gcard { min-height: 0; padding: 9px 14px 10px; gap: 3px; }
.gcard b { padding-right: 84px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard.on b { white-space: normal; }
.gcard small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.45; }
.gcard.on small { display: block; overflow: visible; }
.gcard .dl { position: absolute; top: 9px; right: 38px; margin: 0; padding: 2px 7px; border-radius: 9999px; background: var(--panel); border: 1px solid var(--line-soft); font-size: 10.5px; color: var(--ink3); }
.gcard.on .dl { border-color: rgba(var(--accent-rgb), 0.35); color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.gcard .kept { order: 3; }
.grps { gap: 14px 16px; }
.grp.span3 { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: baseline; }
.grp.span3 > h3 { padding: 0; white-space: nowrap; }
.grp.span3 > .sub { margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp.span3 > .gcards, .grp.span3 > .fold, .grp.span3 > .note { grid-column: 1 / -1; margin: 0; }
.pre.vert { gap: 6px; }
.pre.vert button { padding: 4px 11px; font-size: 12.5px; }
.stepb { padding-bottom: 14px; }
.gcard .chk { top: 9px; }
.blk.up .hd, .blk.skip .hd { padding-top: 7px; padding-bottom: 7px; }
.flow { gap: 6px; }
@media (max-width: 760px) {
  .grp.span3 { grid-template-columns: minmax(0, 1fr); }
  .grp.span3 > .sub { white-space: normal; }
}

/* -- the goal is found or chosen (2026-09-29, Andy): one search box, two menus, ONE
   template described at a time. Replaces the card shelves of 2026-09-11. -------------- */
.gk { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
.gfind { min-width: 0; }
.gq { position: relative; }
.gq svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.gq input { width: 100%; font: inherit; font-size: 15px; padding: 10px 14px 10px 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.gq input:focus, .gsel select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.gres { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.gres button { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); padding: 9px 14px; cursor: pointer; }
.gres button:last-child { border-bottom: 0; }
.gres button:hover, .gres button:focus { background: rgba(var(--accent-rgb), 0.08); outline: none; }
.gres b { font-size: 14px; font-weight: 600; }
.gnone { margin: 0; padding: 10px 14px; font-size: 13.5px; color: var(--ink3); }
.gdom { font-size: 12.5px; color: var(--muted); }
.gpill { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink3); background: var(--panel); border: 1px solid var(--line-soft); border-radius: 9999px; padding: 2px 8px; white-space: nowrap; }
.gor { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.gor::before, .gor::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.gsel { display: flex; flex-wrap: wrap; gap: 14px; }
.gsel > div { flex: 1 1 260px; min-width: 0; }
.gsel select { width: 100%; font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.gchosen { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; min-height: 84px; }
.gchosen.empty { justify-content: center; color: var(--muted); font-size: 13.5px; }
.gchosen .gtop { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.gchosen .gtop b { font-size: 16px; font-weight: 600; }
.gchosen p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink2); max-width: 78ch; }
.gquick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink3); }
.gquick button { border: 1px solid var(--line); background: var(--card); border-radius: 9999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.gquick button:hover { border-color: var(--accent); color: var(--accent); }
.gquick button.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.10); font-weight: 600; }
@media (max-width: 760px) { .detail { grid-template-columns: 1fr; } }

/* the firm library (desktop, 2026-10-01) */
.fld textarea { font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; resize: vertical; min-height: 96px; }
.fld select { font: inherit; font-size: 14px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; }
.lib-group { gap: 12px; }
.lib-ap { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.lib-group .lib-ap:first-of-type { border-top: 0; padding-top: 0; }
.lib-ap-top { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.lib-ap-n { font-size: 12px; color: var(--ok); white-space: nowrap; }
.lib-ap-text { margin: 0; white-space: pre-wrap; font-size: 13.5px; color: var(--ink2); }
.lib-ap-meta { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lib-ap-acts { display: flex; gap: 8px; align-items: center; }
.lib-goal { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; display: flex; flex-direction: column; gap: 12px; }
.lib-goal-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lib-goal-h a { font-size: 13px; color: var(--accent); }
.lib-res { margin-top: 16px; gap: 10px; }
.note.err { color: var(--conf, var(--c-a3373a)); }
.nav-item[hidden] { display: none; }

/* the light/dark button beside EN | FR, and the Appearance card (2026-10-01) */
.lang .theme-btn { margin-left: 6px; width: 30px; display: inline-flex; align-items: center; justify-content: center; }
.lang .theme-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zoom-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zoom-row .zoom-val { min-width: 56px; text-align: center; font-family: var(--mono); font-size: 13px; }
/* the goal block scrolls inside itself; its parts must not be squeezed into each other (seen at larger text sizes, 2026-10-01) */
.gfind, .gor, .gsel, .gchosen, .gquick, .detail, .lib-goal { flex-shrink: 0; }
.lib-ap-checks { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink2); display: flex; flex-direction: column; gap: 2px; }
.lib-checks { margin-top: 16px; gap: 10px; }
.lib-fc-from { display: block; margin-top: 2px; }
.lv-chip { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); vertical-align: middle; }
.lv-sel { font: inherit; font-size: 13.5px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; }
.lv-top { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink3); }
.lv-warn { border-color: var(--rev); gap: 6px; }
.lv-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.lv-table td, .lv-table th { font-size: 13px; padding: 6px 10px; text-align: left; }

/* -- sample dossiers (2026-10-02): the Examples section and the read-only sample screen -- */
.samples { display: flex; flex-direction: column; gap: 12px; }
.samples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.sample-card { gap: 8px; }
.sample-card h3 { margin: 0; font-size: 15px; }
.sample-card .kicker { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.sample-card .meta { font-size: 12.5px; color: var(--ink3); margin: 0; }
.sample-card .btn { align-self: flex-start; margin-top: auto; }
.sample-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 10px; background: rgba(var(--accent-rgb), .08); color: var(--ink); font-size: 13.5px; font-weight: 500; }
.sample-banner svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; }
.sample-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); }
.sample-tab { font: inherit; font-size: 13.5px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink3); cursor: pointer; }
.sample-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.sample-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sample-qs { display: flex; flex-direction: column; gap: 8px; }
.sample-q { font: inherit; font-size: 13.5px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
.sample-q.on { border-color: var(--accent); }
.sample-a .sample-src { margin: 6px 0 0; }
#sil-sample-docs a { color: inherit; }

/* -- the examined documents: one line + a table on demand (2026-10-02) -- */
.docs-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.docs-line { color: var(--ink2); }
.docs-toggle { font: inherit; font-size: 12.5px; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; }
.docs-list { flex-basis: 100%; max-height: 360px; overflow: auto; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; }
.docs-table { width: 100%; border-collapse: collapse; }
.docs-table th, .docs-table td { font-size: 12.5px; padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.docs-table td.mono { font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* the firm library's tabs and the archive (2026-10-03) */
.lib-tabs { margin: 4px 0 2px; height: 38px; }
.lib-tabs button { padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; }
.lib-tab-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--card); font-size: 11px; line-height: 18px; text-align: center; }
.ar-passage mark { background: rgba(var(--accent-rgb), 0.16); color: inherit; border-radius: 3px; padding: 0 1px; }
#sil-ar-q { font: inherit; font-size: 14px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; }
.ls-st-proposed, .ls-st-confirmed { color: var(--rev-ink, var(--c-b7791f)); }
.ls-st-retired { color: var(--muted); }
.ls-bench { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ls-bench-rows summary { cursor: pointer; }
.ls-bench-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0 4px; font-size: 13px; }
.ls-bench-dl dt { color: var(--muted); }
.ls-bench-dl dd { margin: 0; min-width: 0; }
.ls-o { font-weight: 600; }
.ls-o-better { color: var(--ok); }
.ls-o-worse { color: var(--c-c53030, #c53030); }

/* the client note (2026-10-03) */
.note-doc { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 22px 26px; max-height: 640px; overflow: auto; font-size: 14px; line-height: 1.55; }
.note-doc:focus { outline: 2px solid rgba(var(--accent-rgb), 0.35); outline-offset: 2px; }
.note-doc .nb-title { font-size: 21px; margin: 0 0 6px; }
.note-doc .nb-h1 { font-size: 16px; margin: 20px 0 8px; }
.note-doc .nb-h2 { font-size: 14px; margin: 14px 0 6px; color: var(--ink2); }
.note-doc .nb-small { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.note-doc .nb-note { background: var(--paper); border-left: 3px solid var(--line); padding: 8px 10px; font-style: italic; }
.note-doc table { border-collapse: collapse; width: 100%; margin: 6px 0 12px; font-size: 13px; }
.note-doc th, .note-doc td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.note-doc th { background: var(--paper); }
.note-doc .nb-internal { opacity: 0.85; }
.note-doc h2.nb-internal { border-top: 2px dashed var(--line); padding-top: 14px; }

/* 2026-10-03: ask the archive -- the answer card, its numbered sources; result rows wrap */
.ar-answer { border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 10px; padding: 14px 16px; margin: 10px 0 4px; display: grid; gap: 8px; min-width: 0; }
.ar-answer h3 { margin: 0; font-size: 1rem; }
.ar-answer h4 { margin: 6px 0 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.ar-answer p, .ar-answer ul { margin: 0; }
.ar-answer ul { padding-left: 20px; display: grid; gap: 4px; }
.ar-ref { font-size: .8em; vertical-align: super; text-decoration: none; margin-left: 1px; }
.ar-src { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.ar-src li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.ar-n { font-variant-numeric: tabular-nums; opacity: .7; }
.ar-hit, .ar-hit .lib-ap-top, .ar-hit .lib-ap-n, .ar-passage { min-width: 0; overflow-wrap: anywhere; }
#sil-archive { min-width: 0; max-width: 100%; overflow: hidden; }

/* 2026-10-12: the Reference frames page (bundles, collections, browse by) */
.fx-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.fx-h h2 { margin: 0; }
.fx-set { padding: 0; }
.fx-set.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.fx-setpick { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 18px 20px; border: 0; border-radius: 12px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fx-setpick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fx-set > .m { padding: 0 20px 14px; }
.fx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fx-n { font-size: 12px; color: var(--ink3); white-space: nowrap; }
.fx-who { font-size: 12.5px; color: var(--muted); }
.fx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-tag { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink2); padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); }
.fx-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.fx-group { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.fx-group.first { border-top: 2px solid var(--accent); }
.fx-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 6px; }
.fx-gh h3 { margin: 0; font-size: 16px; font-weight: 600; }
.fx-gh .mono { font-size: 12px; color: var(--ink3); }
.fx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fx-row:hover { background: rgba(var(--ink-rgb), 0.03); }
.fx-row.on { background: rgba(var(--accent-rgb), 0.08); }
.fx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fx-box { width: 16px; height: 16px; flex: 0 0 16px; box-sizing: border-box; border: 1px solid var(--muted); border-radius: 3px; background: var(--card); }
.fx-row.on .fx-box { background: var(--accent); border-color: var(--accent); }
.fx-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-name { font-size: 14.5px; font-weight: 500; }
.fx-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.fx-sumtxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.fx-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.fx-name-row { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.fx-name-row .fld { flex: 1 1 240px; }
.fx-form { display: flex; flex-direction: column; gap: 10px; }
.fx-form h3 { margin: 0; font-size: 15px; }
.fx-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.fx-chips .mono { opacity: .75; margin-left: 2px; }

/* -- report an issue (2026-10-12) -------------------------------------------------------
   The side-bar button (a nav-item in the side foot), the small flag on a sheet row, and the
   form (silmera-report.js). Tokens only, so light and dark both follow. */
.side-foot .report-btn { padding: 7px 8px; margin: 0 -8px; font-size: 13px; color: var(--ink3); }
.side-foot .report-btn:hover { color: var(--ink2); }
.rs-flag {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 4px;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; vertical-align: middle;
}
.rs-flag svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rs-flag:hover, .rs-flag:focus-visible { color: var(--bad-ink); background: rgba(var(--bad-rgb), 0.08); }
.rs-flag:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.45); outline-offset: 1px; }
.rep-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 16px; background: rgba(var(--shadow-rgb), 0.38); overflow-y: auto;
}
.rep-card {
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(var(--shadow-rgb), 0.22);
  width: 100%; max-width: 560px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px;
}
.rep-card h2 { margin: 0; font-size: 18px; }
.rep-card fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rep-card legend { font-size: 13px; font-weight: 600; color: var(--ink2); padding: 0; margin-bottom: 6px; }
.rep-kinds { flex-direction: row !important; flex-wrap: wrap; }
.rep-kind {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13.5px; cursor: pointer;
}
.rep-kind:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.rep-box { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer; }
.rep-box input { margin-top: 3px; flex: 0 0 auto; }
.rep-box-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-box-t b { font-size: 13.5px; font-weight: 600; }
.rep-preview { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); overflow-wrap: anywhere; }
.rep-shot { max-width: 220px; max-height: 140px; border: 1px solid var(--line); border-radius: 6px; margin-top: 4px; object-fit: contain; }
.rep-card .note.err:empty { display: none; }
.rep-actions { display: flex; justify-content: flex-end; gap: 8px; }