/* Invictus Books application styles.
   Recreates the Claude Design prototype: 236px navy sidebar, tracked
   caps labels, amber signature rules, mono data, print statements. */

* { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text-body);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* CSP-safe layout utilities. Presentation stays in the stylesheet rather than
   executable/inline attributes so production can use a strict style policy. */
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-inline { display: inline; }
.u-hidden { display: none; }
.u-w-full { width: 100%; }
.u-flex-1 { flex: 1; }
.u-mt-6 { margin-top: 6px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-20 { margin-top: 20px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; }
.u-max-320 { max-width: 320px; }
.u-max-420 { max-width: 420px; }
.u-max-520 { max-width: 520px; }
.u-max-900 { max-width: 900px; }
.form-basis { display: grid; gap: 12px; max-width: 640px; }
.form-recon { grid-template-columns: 2fr 1fr 1fr; margin-bottom: 8px; }
.form-coa { grid-template-columns: 120px 1fr 160px 220px auto; }
.form-equity { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
.form-four-col { grid-template-columns: repeat(4, 1fr); }
.form-three-col { grid-template-columns: repeat(3, 1fr); }
.form-bank-transfer { grid-template-columns: 2fr 1fr auto; }
.form-journal-head { grid-template-columns: 160px 1fr; margin-bottom: 12px; }
.field-span-2 { grid-column: span 2; }
.field-span-3 { grid-column: span 3; }
.inline-edit { display: flex; gap: 6px; align-items: center; }
.compact-input { height: 32px; font-size: 13px; }
.doc-category-select { height: 32px; font-size: 12.5px; max-width: 190px; }
.settlement-details { margin-bottom: 6px; text-align: left; }
.correction-details { margin-top: 6px; text-align: left; }
.settlement-form { display: grid; gap: 6px; min-width: 260px; margin-top: 8px; }
.correction-form { display: grid; gap: 6px; min-width: 300px; margin-top: 8px; }
.statement-controls { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.statement-filter { display: flex; gap: 10px; align-items: end; }
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px;
  padding: 14px; margin: 0 0 16px; border: 1px solid var(--border-line);
  border-radius: 10px; background: var(--surface-raised);
}
.filter-bar .field { min-width: 130px; flex: 1 1 150px; }
.filter-bar .field:first-child { flex-basis: 220px; }
.stmt-positive { color: var(--status-positive); }
.stmt-negative { color: var(--status-danger); }
.stmt-zero { color: var(--text-muted); }
.stmt-row.tb-row, .stmt-total.tb-row, .stmt-row.tb-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 180px) minmax(110px, 180px);
}
.tb-row > .num { display: block; width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.tb-heading { font-weight: 600; color: var(--text-muted); }
.card-disclosure > summary { list-style: none; cursor: pointer; }
.card-disclosure > summary::-webkit-details-marker { display: none; }
.disclosure-summary::after { content: "＋"; margin-left: auto; color: var(--text-muted); }
.card-disclosure[open] > .disclosure-summary::after { content: "−"; }
.status-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0 0 14px; color: var(--text-muted); font-size: 12px; }
.status-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.summary-section { border-top: 1px solid var(--border-line); margin-top: 18px; padding-top: 12px; }
.summary-section > summary { cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.compliance-years { display: flex; align-items: end; justify-content: center; gap: 12px; margin: 0 0 14px; }
.compliance-years form { display: grid; gap: 4px; }
.compliance-years label { font-size: 11px; color: var(--text-muted); }
.equity-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 10px 14px; }
.certificate-kicker { font-size: 10px; letter-spacing: .16em; color: var(--legal-muted); margin-top: 4px; }
.certificate-number { font-size: 11px; letter-spacing: .14em; color: var(--legal-muted); }
.register-label { font-size: 10px; letter-spacing: .16em; color: var(--text-muted); }
.register-select { height: 32px; margin-left: 8px; border: 1px solid var(--border-line); border-radius: 8px; }
.entity-label { width: 220px; }
:root { --logo-blue: var(--invictus-blue); }
.sidebar { --logo-blue: var(--blue-dark-mode); }
/* Logo and seal colours, for the browser.
   The SVG elements also carry literal presentation attributes, and both
   are needed. Measured against WeasyPrint: `stroke="var(--amber)"` in a
   presentation attribute renders black, and a CSS class is ignored on
   inline SVG altogether, so a class-only element is not drawn at all. The
   attribute is therefore the literal the PDF renderer can use, and this
   class is the token the browser prefers, because CSS outranks a
   presentation attribute. That is what keeps the sidebar's dark-mode logo
   override working while the archived document still comes out in brand
   colours. The literals mirror tokens.css and change with it. */
.logo-stroke-blue { stroke: var(--logo-blue); }
.logo-fill-blue { fill: var(--logo-blue); }
.logo-stroke-amber { stroke: var(--amber); }
.logo-fill-amber { fill: var(--amber); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
a { color: var(--text-accent); }
a:hover { color: var(--amber-ink); }  /* raw amber is 2.11:1 on white */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.skip-link {
  position: fixed; z-index: 1000; top: 8px; left: 8px;
  padding: 10px 14px; border-radius: 8px;
  color: var(--ink-on-dark-strong); background: var(--navy);
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus { color: var(--ink-on-dark-strong); transform: translateY(0); }

/* ---- Shell ---- */
.shell { display: flex; min-height: 100vh; }

.mobile-nav-toggle,
.mobile-nav-close,
.mobile-nav-backdrop { display: none; }
.mobile-nav-toggle.btn { display: none; }

.sidebar {
  width: 264px; flex: 0 0 264px;
  background: var(--navy); color: var(--ink-on-dark);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { padding: 20px 18px 12px; }
.sidebar-brand a { display: block; }
.sidebar-brand svg.logo { display: block; width: 100%; height: auto; }
.sidebar-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; color: var(--amber); margin-top: 10px;
}
.sidebar-context {
  margin: 0 14px 4px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border-on-navy); border-radius: 9px;
  background: var(--navy-tint-90); color: var(--muted-aaa-on-navy);
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; line-height: 1.35;
}
.sidebar-context-title { color: var(--ink-on-dark-strong); font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; }
.sidebar nav { flex: 1; padding: 0 10px 12px; overflow-y: auto; }
.nav-group-heading {
  padding: 14px 8px 5px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.16em; line-height: 1.25; text-transform: uppercase;
  color: var(--blue-aaa-on-navy);
}
.nav-group-heading span, .nav-group-heading small { display: block; }
.nav-group-heading small { margin-top: 2px; color: var(--amber); font-size: 8.5px; font-weight: 500; letter-spacing: 0.08em; }
.sidebar nav a {
  display: grid; grid-template-columns: 19px minmax(0, 1fr);
  align-items: center; gap: 9px; padding: 7px 11px; margin-bottom: 1px;
  color: var(--muted-aaa-on-navy); text-decoration: none;
  border-left: 3px solid transparent; border-radius: 8px;
}
.sidebar nav a:hover { color: var(--ink-on-dark); background: var(--navy-tint-90); }
.sidebar nav a[aria-current="page"] {
  color: var(--ink-on-dark-strong); border-left-color: var(--amber); background: var(--navy-tint-90);
}
.nav-icon {
  width: 18px; height: 18px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--muted-aaa-on-navy);
}
.nav-copy { display: block; min-width: 0; }
.nav-main, .nav-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-main { color: var(--ink-on-dark); font-size: 13px; font-weight: 500; line-height: 1.2; }
.nav-sub { margin-top: 1px; color: var(--muted-aaa-on-navy); font-size: 10.5px; line-height: 1.2; }
.sidebar nav a:hover .nav-icon { color: var(--ink-on-dark); }
.sidebar nav a[aria-current="page"] .nav-main { color: var(--ink-on-dark-strong); }
.sidebar nav a[aria-current="page"] .nav-sub { color: var(--amber); }
.sidebar nav a[aria-current="page"] .nav-icon { color: var(--amber); }
.sidebar nav a.htmx-request .nav-icon { animation: nav-request-pulse 700ms ease-in-out infinite alternate; }
@keyframes nav-request-pulse { from { transform: scale(0.84); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .sidebar nav a.htmx-request .nav-icon { animation: none; } }
.sidebar-foot {
  padding: 12px 14px 14px; border-top: 1px solid var(--border-on-navy);
}
.sidebar-identity {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  margin: -4px -4px 7px; padding: 4px; border-radius: 8px;
  color: var(--ink-on-dark); text-decoration: none;
}
.sidebar-identity:hover { color: var(--ink-on-dark-strong); background: var(--navy-tint-90); }
.sidebar-identity > span:last-child { min-width: 0; }
.sidebar-identity strong, .sidebar-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-identity strong { font-size: 12px; font-weight: 500; }
.sidebar-identity small { color: var(--muted-aaa-on-navy); font-size: 10px; }
.sidebar-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--invictus-blue); color: var(--ink-on-dark-strong);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.sidebar-account-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sidebar-account-links a, .sidebar-account-links .linklike {
  margin: 0; color: var(--muted-aaa-on-navy);
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
}
.sidebar-account-links a:hover, .sidebar-account-links .linklike:hover { color: var(--amber); }
.sidebar-entity {
  margin-top: 10px; color: var(--muted-aaa-on-navy);
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.08em;
}

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

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 28px; background: var(--bg);
  border-bottom: 1px solid var(--border-line);
}
.topbar h1 { font-size: 19px; font-weight: 500; margin: 0; }
.spacer, .grow { flex: 1; }
.global-search { position: relative; width: min(280px, 32vw); }
.global-search input { width: 100%; height: 34px; padding-right: 42px; }
.global-search kbd {
  position: absolute; right: 8px; top: 7px; padding: 1px 5px;
  border: 1px solid var(--border-line); border-radius: 4px; color: var(--text-muted);
  background: var(--surface-raised); font: 10px 'JetBrains Mono', monospace;
}
.basis-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em;
  color: var(--amber-ink-aaa); background: var(--amber-tint-10);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.who { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.who a { color: var(--text-muted); margin-left: 10px; }
/* Sign out is a POST, so it is a button; it should still read as a link. */
.linklike {
  background: none; border: 0; padding: 0; margin-left: 10px; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--text-muted); text-decoration: none;
}
.linklike:hover { color: var(--amber-ink); }

.content { padding: 24px 28px 60px; max-width: 1160px; width: 100%; margin: 0 auto; }

#notice:empty { display: none; }
.notice {
  margin: 0 0 16px; padding: 10px 14px;
  border: 1px solid var(--blue-tint-20); background: var(--blue-tint-10);
  color: var(--invictus-blue-aaa); border-radius: 8px; font-size: 13.5px;
  animation: notice-in 160ms ease-out;
}
@keyframes notice-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .notice { animation: none; } }

.request-progress {
  position: fixed; z-index: 1000; top: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px; border: 1px solid var(--border-line); border-radius: 10px;
  background: var(--navy); color: var(--ink-on-dark); box-shadow: 0 8px 28px rgb(0 0 0 / 20%);
  font-size: 13.5px; font-weight: 500;
}
.request-progress[hidden] { display: none; }
.processing-spinner {
  flex: none; width: 16px; height: 16px; border: 2px solid rgb(255 255 255 / 35%);
  border-top-color: var(--amber); border-radius: 50%; animation: processing-spin .75s linear infinite;
}
@keyframes processing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .processing-spinner { animation: none; } }
/* An error must not read as an informational message. */
.notice.danger {
  border-color: var(--status-danger); background: var(--amber-tint-10);
  color: var(--status-danger);
}

/* ---- Cards ---- */
.card {
  background: var(--surface-card); border: 1px solid var(--border-line);
  border-radius: 12px; padding: 20px; margin-bottom: 20px;
}
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.card-head h2 { font-size: 15px; font-weight: 500; margin: 0; letter-spacing: 0.02em; }
.sub { font-size: 12.5px; color: var(--text-muted); }
.note { font-size: 13px; color: var(--text-muted); max-width: 76ch; margin: 12px 0 0; }
.eyebrow {
  margin: 0 0 4px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .14em;
}
.empty { color: var(--text-muted); font-size: 13.5px; padding: 14px 0 4px; margin: 0; }
.muted { color: var(--text-muted); }
hr.amber-rule { border: 0; border-top: 2px solid var(--amber); margin: 10px 0 14px; }

/* ---- KPI grid ---- */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.kpis:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, 1fr); }
.kpi {
  background: var(--surface-card); border: 1px solid var(--border-line);
  border-radius: 12px; padding: 16px 18px; min-width: 0; text-decoration: none;
}
.kpi:hover { border-color: var(--invictus-blue-aaa); }
.kpi .value { color: var(--text); }
.kpi .label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--text-muted); }
.kpi .value { font-family: 'JetBrains Mono', monospace; font-size: 21px; font-weight: 500; margin-top: 6px; overflow-wrap: anywhere; }
.kpi .sub { display: block; margin-top: 4px; }
.action-queue, .search-results { display: grid; gap: 1px; }
.action-queue a, .search-results a {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 8px; border-bottom: 1px solid var(--border-line); text-decoration: none;
}
.action-queue a:hover, .search-results a:hover { background: var(--surface-raised); }
.search-group + .search-group { margin-top: 22px; }
.search-group h3 { font-size: 13px; margin: 0 0 6px; color: var(--text-muted); }
.search-results a { align-items: baseline; }
.search-results a strong { color: var(--text); font-size: 13.5px; font-weight: 500; }
.search-results a span { color: var(--text-muted); font-size: 12px; text-align: right; }
.document-preview { margin: 0 0 18px; border: 1px solid var(--border-line); border-radius: 10px; overflow: hidden; background: var(--surface-raised); }
.document-preview object { display: block; width: 100%; height: min(70vh, 760px); }
.document-preview img { display: block; max-width: 100%; max-height: 760px; margin: 0 auto; object-fit: contain; }

/* ---- Tables ---- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  text-align: left; padding: 8px 10px 8px 4px; border-bottom: 1px solid var(--border-line);
}
.tbl td { padding: 8px 10px 8px 4px; border-bottom: 1px solid var(--border-line); vertical-align: middle; }
.tbl th.num, .tbl td.num { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.mono-cell { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
tr.voided td { color: var(--text-muted); }  /* opacity dropped this to 3.44:1 */
tr.voided td:nth-child(3) { text-decoration: line-through; }
tr.line-row td { border-bottom: 0; padding-top: 2px; padding-bottom: 2px; color: var(--text-muted); font-size: 12.5px; }
tr.entry-sep td { border-bottom: 1px solid var(--border-line); padding: 2px; }
.tbl select { max-width: 100%; }
.audit-table { table-layout: fixed; }
.audit-table .audit-time { width: 17%; }
.audit-table .audit-action { width: 20%; }
.audit-table .audit-actor { width: 15%; }
.audit-table .audit-detail,
.audit-table .audit-actor,
.audit-table .badge { overflow-wrap: anywhere; word-break: break-word; }
.audit-table .badge { max-width: 100%; white-space: normal; }

/* ---- Badges ---- */
.badge {
  display: inline-block; font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.badge.blue { background: var(--blue-tint-10); color: var(--invictus-blue-aaa); }
.badge.amber { background: var(--amber-tint-10); color: var(--amber-ink-aaa); }
.badge.neutral { background: var(--surface-raised); color: var(--legal-muted); }
.badge.navy { background: var(--navy); color: var(--ink-on-dark); }
.badge.danger { background: var(--amber-tint-10); color: var(--status-danger); }

/* ---- Buttons ---- */
.btn {
  font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 500;
  border-radius: 8px; border: 1px solid transparent;
  padding: 0 16px; height: 40px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; white-space: nowrap;
}
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--invictus-blue-aaa); }
.btn.secondary { background: var(--surface-card); color: var(--text-body); border-color: var(--border-line); }
.btn.secondary:hover { border-color: var(--legal-muted); }
.btn.ghost { background: transparent; color: var(--text-accent); }
.btn.ghost:hover { background: var(--blue-tint-10); }
.btn.danger { background: transparent; color: var(--status-danger); }
.btn.danger:hover { background: var(--amber-tint-10); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[data-processing="true"] { opacity: 0.78; }

/* ---- Fields and forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.field input, .field select, .field textarea, .tbl select {
  font-family: 'Jost', sans-serif; font-size: 14px; color: var(--text-body);
  background: var(--surface-card); border: 1px solid var(--border-control);
  border-radius: 8px; height: 40px; padding: 0 10px; width: 100%;
}
.field textarea { height: auto; min-height: 88px; padding-block: 9px; resize: vertical; }
.tbl select { height: 32px; font-size: 12.5px; }
.field input:focus, .field select:focus, .tbl select:focus {
  outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--focus-ring);
}
.field [aria-invalid="true"] { border-color: var(--status-danger); }
.form-grid { display: grid; gap: 12px; align-items: end; margin-top: 12px; }
/* Stacked forms: one field per row, tops aligned so help text does not
   stagger neighbours the way .form-grid's end-alignment would. */
/* Available to screen readers, removed from the visual layout. For labels
   that would be redundant on screen but are required for a named control. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.form-stack { display: grid; gap: 14px; align-items: start; margin-top: 12px; }
.form-stack .field > .note { margin: 0; }
.actions { display: flex; gap: 8px; align-items: end; }
.error-text { color: var(--status-danger); font-size: 13px; margin: 8px 0 0; }
.choice-row {
  display: flex; gap: 10px; align-items: flex-start; font-size: 14px;
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}
.field > label.choice-row {
  font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 400;
  line-height: 1.45; letter-spacing: normal; text-transform: none;
  color: var(--text-body);
}
.choice-row input[type="radio"],
.choice-row input[type="checkbox"] {
  flex: 0 0 16px; width: 16px; height: 16px; padding: 0; margin-top: 3px;
}
.choice-row > span { min-width: 0; overflow-wrap: anywhere; }
.form-stack fieldset.field {
  display: grid; gap: 8px; min-inline-size: 0; inline-size: 100%;
  max-inline-size: 100%; margin: 0; padding: 0; border: 0;
}
.form-stack fieldset.field > legend {
  margin: 0 0 2px; padding: 0; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.callout {
  border: 1px solid var(--border-line); border-radius: 10px; padding: 12px 14px;
  background: var(--surface-raised); overflow-wrap: anywhere;
}
.callout.warning { border-color: var(--amber-ink-aaa); background: var(--amber-tint-10); }
.review-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.review-facts > div { padding: 10px 12px; background: var(--surface-raised); min-width: 0; }
.review-facts dt {
  color: var(--text-muted); font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.review-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.approval-payload {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- Journal composer ---- */
details.composer {
  border: 1px solid var(--border-line); border-radius: 12px;
  margin-bottom: 20px; background: var(--surface-card);
}
details.composer > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: inline-block; }
details.composer > summary::-webkit-details-marker { display: none; }
details.composer .composer-body { padding: 4px 20px 20px; }
.setup-composer { border-style: dashed; }
.task-composer > summary, .setup-composer > summary { width: 100%; }
.inline-composer { margin-top: 14px; }
.inline-composer > summary { list-style: none; cursor: pointer; display: inline-flex; }
.inline-composer > summary::-webkit-details-marker { display: none; }
.inline-composer__body {
  margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border-line);
  border-radius: 10px; background: var(--surface-raised);
}
.row-actions { position: relative; display: inline-block; text-align: left; }
.row-actions > summary { list-style: none; cursor: pointer; }
.row-actions > summary::-webkit-details-marker { display: none; }
.row-actions__panel {
  position: absolute; z-index: 5; top: calc(100% + 6px); right: 0;
  width: min(440px, calc(100vw - 56px)); padding: 14px;
  border: 1px solid var(--border-line); border-radius: 10px;
  background: var(--surface-card); box-shadow: 0 14px 36px rgb(10 22 40 / 18%);
}
.row-actions__panel form + form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-line); }
.draft-line { display: grid; grid-template-columns: minmax(0,1fr) 140px 140px 40px; gap: 10px; margin-bottom: 8px; align-items: end; }
.draft-line .remove {
  height: 40px; border: 1px solid var(--border-line); background: var(--surface-card);
  border-radius: 8px; color: var(--text-muted); cursor: pointer; font-size: 16px;
}
.draft-line .remove:hover { color: var(--status-danger); border-color: var(--status-danger); }
.balance-strip {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  padding: 10px 0; color: var(--text-muted);
}
.balance-strip .ok, .ok { color: var(--invictus-blue-aaa); }
.balance-strip .off, .off { color: var(--status-danger); }
.coverage-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}
.coverage-month {
  display: flex; flex-direction: column; gap: 3px; min-height: 58px;
  justify-content: center; padding: 9px 11px; border: 1px solid var(--border-line);
  border-radius: 8px; background: var(--surface-raised); text-decoration: none;
}
.coverage-month span { color: var(--text); font-size: 13px; font-weight: 500; }
.coverage-month small { color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.coverage-month.complete { border-left: 3px solid var(--invictus-blue-aaa); }
.coverage-month.missing { border-left: 3px solid var(--status-danger); }
.coverage-month:hover { border-color: var(--invictus-blue-aaa); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button, .tabs a {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-muted); background: none; border: 0;
  border-bottom: 2px solid transparent; padding: 8px 12px 9px;
  cursor: pointer; text-decoration: none; text-transform: uppercase;
}
.tabs .active, .tabs [aria-current="page"] {
  color: var(--text-body); border-bottom-color: var(--amber); font-weight: 500;
}

/* ---- Statement sheet ---- */
.stmt-sheet { max-width: 720px; margin: 0 auto; padding: 8px 4px 20px; }
.stmt-head { text-align: center; margin-bottom: 18px; }
.stmt-head .entity, .entity { font-weight: 500; font-size: 14px; letter-spacing: 0.08em; }
.stmt-head .title { font-size: 20px; font-weight: 500; margin-top: 2px; }
.stmt-head .period { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.stmt-section {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--text-muted); margin: 18px 0 6px; text-transform: uppercase;
}
.stmt-row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 14px; }
.stmt-row .num, .stmt-total .num { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.stmt-total {
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 2px solid var(--amber); margin-top: 6px; padding-top: 8px;
  font-weight: 500; font-size: 14px;
}
.stmt-badge-row { display: flex; justify-content: center; margin-top: 16px; }
.print-head { display: none; }

/* ---- Stock certificate ----
   Print-first, and one geometry for three destinations: the screen, the
   browser's print output, and the archived PDF.

   Every length is `calc(N * var(--cert-unit))`, where N is the number from the
   design and the unit decides what the document physically measures. On screen
   the unit is a pixel and the sheet is its 880px design. In print and in the
   PDF the unit becomes a fraction of a millimetre chosen so the sheet lands
   inside the safe area that exists on both US Letter and A4.

   This replaced `zoom`, which is not standard CSS and which WeasyPrint ignores
   for layout, measured: a box declared 100mm still laid out at 100mm under
   `zoom: 0.5`. Scaling through a custom property is honoured everywhere, so
   the printed certificate and the archived one cannot drift apart.

   Border widths deliberately do not scale. A hairline is a hairline.
   No shadows and no motion: it is a document. */
.certificate {
  --cert-unit: 1px;
  border: 1.5px solid var(--navy); border-radius: 4px; padding: calc(7 * var(--cert-unit));
  /* Relative so the copy watermark can be placed against the sheet. */
  position: relative;
  /* Fixed rather than max-width: the interior is a scaled drawing, so a
     narrow viewport must scroll it, not reflow it into a different page. */
  width: calc(880 * var(--cert-unit)); margin: calc(18 * var(--cert-unit)) auto calc(20 * var(--cert-unit));
  background: var(--surface-card);
}
.certificate-inner {
  border: 1px solid var(--amber); padding: calc(38 * var(--cert-unit)) calc(44 * var(--cert-unit)) calc(28 * var(--cert-unit));
  display: flex; flex-direction: column; overflow: hidden;
}

.cert-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(32 * var(--cert-unit)); }
.cert-logo { display: block; width: calc(210 * var(--cert-unit)); height: auto; }
.cert-address {
  font-size: calc(9.5 * var(--cert-unit)); letter-spacing: 0.2em;
  color: var(--legal-muted); margin-top: calc(10 * var(--cert-unit));
  line-height: 1.9;
}
/* Smaller than the address it qualifies, so it reads as a label on it rather
   than as a third line of it. */
.cert-address-note {
  display: block; font-size: calc(8 * var(--cert-unit)); letter-spacing: 0.18em;
  line-height: 1.4; margin-top: calc(3 * var(--cert-unit));
}
/* Flex rows with a fixed label column rather than a grid. Intrinsic grid
   sizing (max-content) does not resolve the same way in the PDF renderer,
   which pushed the block past the frame and clipped the values. */
.cert-meta { display: flex; flex-direction: column; gap: calc(5 * var(--cert-unit)); }
.cert-meta-row {
  display: flex; justify-content: flex-end; align-items: baseline;
  gap: calc(14 * var(--cert-unit));
}
.cert-meta-label {
  font-size: calc(9 * var(--cert-unit)); letter-spacing: 0.2em;
  color: var(--legal-muted); text-align: right;
}
.cert-meta-value { font-size: calc(15 * var(--cert-unit)); font-weight: 500; color: var(--navy); }
/* One line. The class and par value belong together, and the PDF renderer
   was breaking them across three lines in a narrower grid column. */
.cert-meta-class { font-size: calc(11 * var(--cert-unit)); color: var(--hangar); white-space: nowrap; }

.cert-rule { border-top: 2px solid var(--amber); margin-top: calc(22 * var(--cert-unit)); }
.cert-hairline { border-top: 1px solid var(--gray-line); margin-top: calc(28 * var(--cert-unit)); }

.cert-title-block { text-align: center; padding-top: calc(30 * var(--cert-unit)); }
.cert-eyebrow { font-size: calc(11 * var(--cert-unit)); letter-spacing: 0.28em; color: var(--legal-muted); }
.cert-title {
  font-size: calc(32 * var(--cert-unit)); font-weight: 500; letter-spacing: 0.16em; line-height: 1.18;
  color: var(--navy); margin: calc(10 * var(--cert-unit)) 0 0;
}
.cert-subline {
  font-style: italic; font-size: calc(13 * var(--cert-unit)); color: var(--legal-muted);
  margin: calc(12 * var(--cert-unit)) 0 0;
}

.cert-holder-block { text-align: center; margin-top: calc(26 * var(--cert-unit)); }
.cert-holder-label { font-size: calc(9.5 * var(--cert-unit)); letter-spacing: 0.24em; color: var(--legal-muted); }
.cert-holder {
  font-size: calc(27 * var(--cert-unit)); font-weight: 500; letter-spacing: 0.06em; color: var(--navy);
  margin-top: calc(12 * var(--cert-unit)); padding-bottom: calc(10 * var(--cert-unit)); border-bottom: 1px solid var(--hangar);
  display: inline-block; min-width: calc(420 * var(--cert-unit));
}

.cert-words { display: flex; align-items: center; gap: calc(18 * var(--cert-unit)); margin-top: calc(26 * var(--cert-unit)); }
.cert-words-rule { flex: 1; border-top: 1px solid var(--amber); }
.cert-words-text {
  font-size: calc(12.5 * var(--cert-unit)); letter-spacing: 0.14em; color: var(--hangar);
  /* A long share count in words must wrap rather than push the rules off the
     page: eight million reads as six words. */
  text-align: center; overflow-wrap: anywhere;
}

.cert-attestation {
  text-align: center; max-width: calc(660 * var(--cert-unit)); margin: calc(22 * var(--cert-unit)) auto 0;
  font-size: calc(14 * var(--cert-unit)); line-height: 1.8; color: var(--hangar); text-wrap: pretty;
}

/* Justified across the sheet rather than sitting in four equal quarters.
   Equal columns left a ragged right edge, because the last value is short
   and started three quarters of the way across. The strip now runs edge to
   edge: the issue date flush left, ownership flush right, and the two in
   between spaced by what they actually measure. */
.cert-facts {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: calc(16 * var(--cert-unit));
  margin-top: calc(26 * var(--cert-unit)); padding: calc(16 * var(--cert-unit)) 0;
  border-top: 1px solid var(--gray-line); border-bottom: 1px solid var(--gray-line);
}
.cert-fact { display: flex; flex-direction: column; gap: calc(5 * var(--cert-unit)); }
/* Ownership closes the strip, so it aligns to the edge it sits against. */
.cert-fact:last-child { text-align: right; }
.cert-fact-label { font-size: calc(9 * var(--cert-unit)); letter-spacing: 0.2em; color: var(--legal-muted); }
.cert-fact-value { font-size: calc(12.5 * var(--cert-unit)); color: var(--navy); }

.cert-json {
  /* Sized to hold the payload on one line. It gained the outstanding count
     so the ownership denominator is machine-readable too, and a certificate
     drawn on a transfer names what it surrendered as well, which is the
     longest of them and what this is sized against. */
  font-family: 'JetBrains Mono', monospace; font-size: calc(9 * var(--cert-unit));
  text-align: center; margin: calc(20 * var(--cert-unit)) 0 0; overflow-wrap: anywhere;
}
.cert-json .k { color: var(--amber); }
.cert-json .v { color: var(--invictus-blue); }
.cert-json .p { color: var(--json-punct); }
/* The line may wrap; a key may not be parted from its value. */
.cert-json .pair { white-space: nowrap; }

/* Sits under the facts strip it qualifies, small enough to read as a note on
   the figures rather than as another statement of them. */
.cert-footnote {
  margin: calc(9 * var(--cert-unit)) 0 0;
  font-size: calc(9 * var(--cert-unit)); line-height: 1.55;
  color: var(--legal-muted);
}

.cert-sign-row { display: flex; align-items: flex-end; gap: calc(36 * var(--cert-unit)); margin-top: calc(30 * var(--cert-unit)); }
.cert-sign { flex: 1; border-top: 1px solid var(--hangar); padding-top: calc(8 * var(--cert-unit)); }
.cert-sign-right { text-align: right; }
.cert-sign-name { font-size: calc(12 * var(--cert-unit)); color: var(--hangar); min-height: 1.2em; }
.cert-sign-office {
  font-size: calc(9.5 * var(--cert-unit)); letter-spacing: 0.2em; color: var(--legal-muted); margin-top: calc(2 * var(--cert-unit));
}
/* Somewhere to write the date each officer signs. That date is not the
   effective issue date, and only the signer knows it, so the document asks
   rather than printing an assumption.

   The label sits beside the rule, not under it. Under it, the rule read as a
   second signature line with a caption and nothing indicated that the space
   above was where the date went. The president's block reverses so the label
   hugs the same edge as their name and the rule runs inward. */
.cert-sign-date {
  display: flex; align-items: baseline; gap: calc(8 * var(--cert-unit));
  margin-top: calc(18 * var(--cert-unit));
}
.cert-sign-right .cert-sign-date { flex-direction: row-reverse; }
.cert-sign-date-label {
  font-size: calc(8.5 * var(--cert-unit)); letter-spacing: 0.2em;
  color: var(--legal-muted); white-space: nowrap;
}
.cert-sign-date-rule {
  flex: 1; border-bottom: 1px solid var(--gray-line);
  /* Enough height above the rule to write a date on. */
  align-self: stretch; min-height: calc(16 * var(--cert-unit));
}
.cert-sign-seal { display: flex; flex-direction: column; align-items: center; }

.cert-seal { position: relative; width: calc(156 * var(--cert-unit)); height: calc(156 * var(--cert-unit)); transform: rotate(-7deg); }
.cert-seal-rings { display: block; width: calc(156 * var(--cert-unit)); height: calc(156 * var(--cert-unit)); overflow: visible; }
/* Size lives on the element as an SVG presentation attribute, in the
   viewBox's own user units. A CSS px size inside a scaled viewBox is
   ambiguous and the two engines resolved it differently. */
.cert-seal-ring { stroke: var(--navy); }
.cert-seal-ring-amber { stroke: var(--amber); }
.cert-seal-rim { font-family: 'JetBrains Mono', monospace; fill: var(--navy); }
.cert-seal-rim-lower { fill: var(--legal-muted); }
.cert-seal-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(4 * var(--cert-unit));
}
.cert-seal-logo { display: block; width: calc(66 * var(--cert-unit)); height: auto; }
.cert-seal-year { font-size: calc(8.5 * var(--cert-unit)); letter-spacing: 0.16em; color: var(--legal-muted); }
.cert-seal-caption {
  font-size: calc(8 * var(--cert-unit)); letter-spacing: 0.14em; color: var(--legal-muted);
  text-align: center; margin-top: calc(6 * var(--cert-unit));
}
.cert-seal-verify {
  font-size: calc(8 * var(--cert-unit)); letter-spacing: 0.06em; color: var(--legal-muted);
  text-align: center; margin-top: calc(2 * var(--cert-unit));
}

/* The restrictive legend runs four lines, so the certificate reference sits
   under it rather than beside it. Side by side, the legend was squeezed into
   a column narrow enough to run to six lines and the reference floated in
   space next to the middle of it. */
.cert-legend {
  margin-top: calc(20 * var(--cert-unit)); padding-top: calc(12 * var(--cert-unit));
  border-top: 1px solid var(--gray-line);
}
.cert-legend-text {
  font-size: calc(9.5 * var(--cert-unit)); line-height: 1.55; color: var(--legal-muted);
  margin: 0; text-align: justify;
}
.cert-legend-ref {
  display: block; margin-top: calc(8 * var(--cert-unit)); text-align: right;
  font-size: calc(9 * var(--cert-unit)); letter-spacing: 0.2em;
  color: var(--legal-muted); white-space: nowrap;
}

/* The copy sheet. Marked across the face rather than only in a corner:
   a banner can be trimmed off, a diagonal through the body cannot be
   removed without defacing the document it would be passing off. */
.cert-copy-watermark {
  position: absolute; top: 50%; left: 0; right: 0;
  text-align: center; pointer-events: none;
  font-size: calc(150 * var(--cert-unit)); font-weight: 500;
  letter-spacing: 0.3em; color: var(--amber); opacity: 0.22;
  /* Centred on the sheet, then rotated about that centre. */
  transform: translateY(-50%) rotate(-24deg);
}
/* SPECIMEN is twice the letters of COPY and would run off a sheet the same
   size, so it is set proportionally smaller to occupy the same width. */
.certificate-specimen .cert-copy-watermark { font-size: calc(80 * var(--cert-unit)); }
.certificate-marked .cert-legend-ref { color: var(--amber-ink-aaa); }

/* Only on screen. The archived original and its copy are meant to be signed,
   so they carry a blank rule; this says why this rendering has none. */
.cert-unsigned {
  margin: calc(18 * var(--cert-unit)) 0 0;
  font-size: calc(10 * var(--cert-unit)); line-height: 1.6;
  text-align: center; color: var(--amber-ink-aaa);
}

/* ---- Shareholder summary ----
   An internal record, styled as a page of the application rather than as a
   document. It borrows nothing from the certificate on purpose: no border, no
   seal, no signature rules, so the two are not confusable at a glance or in a
   printout. */
.summary-disclaimer { color: var(--amber-ink-aaa); max-width: 80ch; }

.summary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 18px 0 0;
}
.summary-grid-muted .summary-value { color: var(--text-muted); }
.summary-item {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 12px 14px; border: 1px solid var(--border-line); border-radius: 10px;
  background: var(--surface-raised);
}
.summary-label { font-size: 10px; letter-spacing: 0.14em; color: var(--text-muted); }
.summary-value { font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }

.summary-table { margin-top: 20px; }
/* Wide enough that a street line stays a line. Left to compete with eight
   numeric columns it wrapped after every second word. */
.summary-address { min-width: 20ch; }
/* A holder's name is the row's subject and should not be broken across three
   lines to make room for a column of figures. */
.summary-table td:first-child, .summary-table th:first-child { min-width: 14ch; }

.summary-chain { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.summary-chain-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-line);
}
/* The full sixty-four characters, wrapping rather than truncating: a hash
   shown in part is a hash nobody can check. */
.summary-hash { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The stock ledger's certification. Plain px, not the certificate's unit:
   that variable exists only inside a certificate, and a length calculated
   from an undefined variable is dropped rather than defaulted. */
.ledger-certification { margin-top: 26px; }
/* The gap under this is the space somebody signs in, so it is generous on
   purpose. At 34px the rule sat almost against the last line of text. */
.ledger-certification-text {
  font-size: 13px; line-height: 1.65; color: var(--text-muted);
  max-width: 84ch; margin: 0 0 76px;
}
.ledger-sign { max-width: 320px; }
.ledger-sign-rule { border-top: 1px solid var(--hangar); }
.ledger-sign-name { font-size: 13px; color: var(--hangar); margin-top: 8px; min-height: 1.2em; }
.ledger-sign-office {
  font-size: 10px; letter-spacing: 0.2em; color: var(--text-muted); margin-top: 2px;
}
.ledger-sign-dated { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.ledger-sign-label {
  font-size: 9.5px; letter-spacing: 0.2em; color: var(--text-muted); white-space: nowrap;
}
.ledger-sign-rule-inline { flex: 1; border-bottom: 1px solid var(--gray-line); min-height: 16px; }

/* ---- Bank statement import ----
   One block per row, because each row is a question with four possible
   answers and a table cell is not enough room to ask it. */
.import-row {
  border: 1px solid var(--border-line); border-radius: 10px;
  padding: 14px 16px; margin-top: 12px; background: var(--surface-raised);
}
.import-row-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-line);
}
.import-row-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.import-row-what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.import-row-amount { font-size: 15px; font-weight: 500; white-space: nowrap; }
/* Direction is the first thing to read and the easiest to misread. */
.import-row-amount.out { color: var(--status-danger); }
.import-row-amount.in { color: var(--invictus-blue-aaa); }

.bank-import-dialog { width: min(820px, calc(100vw - 32px)); }
.bank-import-dialog .dialog-shell { max-height: calc(100dvh - 32px); }
.bank-import-dialog .import-row-editor { min-width: 0; }
.bank-import-dialog .import-row-editor h3 { overflow-wrap: anywhere; }

.import-decide {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.import-decide label, .import-suggest { font-size: 12.5px; color: var(--text-muted); }
.import-decide select { height: 32px; font-size: 13px; max-width: 340px; }
.import-decided { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.import-split { margin-top: 10px; }
.import-split summary { cursor: pointer; }
.import-split-form { align-items: flex-end; }
.import-split-part { display: flex; gap: 8px; align-items: center; }
.import-split-part select { height: 32px; font-size: 13px; max-width: 240px; }
.import-split-part input { height: 32px; font-size: 13px; width: 110px; }

.import-raw { margin-top: 10px; }
.import-raw summary { cursor: pointer; }
.import-raw-text {
  font-size: 11px; color: var(--text-muted); margin: 8px 0 0;
  overflow-wrap: anywhere;
}

/* ---- Expense report workspace ---- */
.expense-workspace-head .card-head { align-items: center; }
.expense-report-workspace { overflow: visible; }
.expense-report-status {
  display: flex; align-items: center; gap: 12px; margin-left: auto;
}
.expense-report-status strong { font-size: 18px; font-weight: 500; }
.expense-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin: 22px 0 12px;
}
.expense-section-head h3 { margin: 0 0 3px; font-size: 16px; }
.expense-add-line,
.expense-new-group,
.expense-signed-upload {
  margin-top: 16px; border: 1px solid var(--border-line); border-radius: 10px;
  background: var(--surface-raised); padding: 12px 14px;
}
.expense-add-line summary,
.expense-new-group summary,
.expense-signed-upload summary,
.expense-group-upload summary {
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--navy);
}
.expense-add-line form,
.expense-new-group form,
.expense-signed-upload form { margin-top: 14px; }
.expense-evidence-grid { display: grid; gap: 12px; }
.expense-evidence-group {
  border: 1px solid var(--border-line); border-radius: 10px;
  padding: 14px 16px; background: var(--surface-raised);
}
.expense-group-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.expense-group-head h4 { margin: 0 0 3px; font-size: 14px; }
.expense-evidence-files,
.expense-report-documents {
  display: grid; gap: 7px; list-style: none; padding: 0; margin: 12px 0 0;
}
.expense-evidence-files li,
.expense-report-documents li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  min-width: 0; overflow-wrap: anywhere;
}
.expense-group-upload { margin-top: 12px; }
.expense-upload-form { margin-top: 12px; }
.expense-claims-list { padding: 0; overflow: hidden; }
.expense-claims-list > summary {
  cursor: pointer; list-style: none; padding: 18px 20px; margin: 0;
}
.expense-claims-list > summary::-webkit-details-marker { display: none; }
.expense-claims-list > .amber-rule { margin: 0 20px; }
.expense-claims-list > .table-scroll,
.expense-claims-list > nav { margin-left: 20px; margin-right: 20px; }
.expense-claims-list tr.is-current { background: var(--blue-tint-10); }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.table-scroll { max-width: 100%; overflow-x: auto; }

@media (max-width: 720px) {
  .expense-workspace-head .card-head,
  .expense-group-head,
  .expense-report-status { align-items: flex-start; flex-direction: column; }
  .expense-report-status { margin-left: 0; }
  .form-two-col { grid-template-columns: 1fr; }
}

/* ---- Documents ---- */
.dropzone {
  border: 2px dashed var(--border-line); border-radius: 12px;
  padding: 26px; text-align: center; color: var(--text-muted);
  font-size: 13.5px; margin-bottom: 16px; background: var(--surface-raised);
}
.dropzone.dragover { border-color: var(--invictus-blue); background: var(--blue-tint-10); }
.upload-review { text-align: left; }
.compact-list { margin: 12px 0; padding-left: 20px; overflow-wrap: anywhere; }
.evidence-picker-options { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 12.5px; }
.sole-evidence-picker { min-width: 0; max-width: 100%; }
.sole-evidence-picker select { min-width: 0; max-width: 100%; }
.evidence-picker-actions { margin-top: 4px; }
.doc-ext {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 8px;
  background: var(--surface-raised); border: 1px solid var(--border-line);
  font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-muted);
}
.documents-table td { vertical-align: middle; }
.app-dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 12px; color: var(--text-body);
  background: var(--surface-card); box-shadow: 0 24px 70px rgb(10 22 40 / 32%);
}
.app-dialog::backdrop { background: rgb(10 22 40 / 48%); }
.dialog-shell { padding: 20px; overflow: auto; }
.dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 14px;
}
.dialog-head h2 { margin: 0; overflow-wrap: anywhere; }
.dialog-head .eyebrow { margin: 0 0 4px; }
.action-dialog .dialog-shell { margin: 0; }
.action-dialog .btn[type="submit"] { justify-self: start; }
.lifecycle-drawer {
  width: min(600px, 100vw); max-width: 100vw; height: 100dvh;
  max-height: 100dvh; margin: 0 0 0 auto; border-radius: 12px 0 0 12px;
}
.lifecycle-drawer .dialog-shell { height: 100%; padding: 24px; }
.lifecycle-facts { margin-bottom: 18px; }
.lifecycle-digest { font-size: 11px; overflow-wrap: anywhere; }
.lifecycle-history { margin-top: 18px; }
.lifecycle-history h3 { margin: 0 0 10px; font-size: 15px; }
.lifecycle-history p {
  margin: 0; padding: 10px 0; border-top: 1px solid var(--border-line);
  color: var(--text-muted); font-size: 13px; line-height: 1.5;
}
.dialog-action-list {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--border-line);
}
.audit-detail { min-width: 280px; max-width: 620px; overflow-wrap: anywhere; }
.audit-detail-list { display: grid; gap: 6px; margin: 0 0 8px; }
.audit-detail-list div { display: grid; grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr); gap: 10px; }
.audit-detail-list dt { color: var(--text-muted); font-size: 11px; }
.audit-detail-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.audit-detail pre, .approval-payload {
  max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}

/* ---- Auth screens ---- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy); padding: 24px; }
.auth-card { background: var(--surface-card); border-radius: 12px; padding: 34px 36px; width: 440px; max-width: 100%; }
.auth-card .brand { margin-bottom: 20px; }
.auth-card .brand svg.logo { display: block; width: 100%; height: auto; }
.auth-card h1 { font-size: 19px; font-weight: 500; margin: 0 0 4px; }
.auth-card .sub { display: block; margin: 0 0 18px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-recommended {
  margin: 0 0 7px; color: var(--text-muted); text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 600; letter-spacing: .16em;
}
.auth-passkey-status { min-height: 1.5em; margin: 7px 0 0; color: var(--text-muted); font-size: 12px; text-align: center; }
.auth-passkey-status.is-error { color: var(--status-danger); }
.auth-fallback { border: 1px solid var(--border-line); border-radius: 9px; background: var(--surface-raised); }
.auth-fallback > summary { cursor: pointer; padding: 11px 13px; color: var(--text-body); text-align: center; font-size: 13px; }
.auth-fallback[open] > summary { border-bottom: 1px solid var(--border-line); }
.auth-fallback > form { padding: 14px; }
.auth-security-note { margin: 14px 0 0; color: var(--text-muted); font-size: 11px; text-align: center; }
.qr-box { display: flex; justify-content: center; padding: 10px 0 4px; }
.qr-box svg { width: 180px; height: 180px; }
.secret-box {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: var(--surface-raised); border: 1px solid var(--border-line);
  border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; text-align: center;
}
.codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 13px; margin: 14px 0; }
.codes-grid span { background: var(--surface-raised); border: 1px solid var(--border-line); border-radius: 8px; padding: 8px 10px; text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12px; margin: 4px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border-line); }
.passkey-label { min-width: 210px; }
.passkey-label > strong { display: block; }
.passkey-rename { margin-top: 5px; }
.passkey-rename > summary { width: max-content; cursor: pointer; color: var(--text-accent); font-size: 12px; }
.passkey-rename-form { display: grid; gap: 6px; width: min(280px, 70vw); margin-top: 8px; }
.passkey-rename-form label { font-size: 11px; font-weight: 500; }
.passkey-rename-form input { width: 100%; }
.passkey-rename-form .btn { justify-self: start; }

/* ---- Settings ---- */
.radio-card {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border-line); border-radius: 12px; padding: 14px 16px; cursor: pointer;
}
.radio-card:has(input:checked) { border-color: var(--invictus-blue); background: var(--blue-tint-10); }
.radio-card input[type="radio"] { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--invictus-blue); flex: none; }
.radio-card p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }

input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--invictus-blue); }

.htmx-indicator { opacity: 0; transition: opacity 120ms; font-size: 12px; color: var(--text-muted); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  body.mobile-nav-open { overflow: hidden; }
  .shell { flex-direction: row; }
  .sidebar {
    width: min(320px, calc(100vw - 48px)); flex: none; height: 100dvh;
    position: fixed; inset: 0 auto 0 0; z-index: 110;
    transform: translateX(-105%); transition: transform 180ms ease-out;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-brand { padding-right: 54px; }
  .sidebar-context { display: flex; }
  .sidebar nav { display: block; padding: 0 10px 12px; overflow-x: hidden; overflow-y: auto; }
  .nav-group { display: block; }
  .nav-group + .nav-group { padding-left: 0; border-left: 0; }
  .nav-group-heading { display: block; }
  .sidebar nav a { min-width: 0; border-left: 3px solid transparent; border-bottom: 0; }
  .sidebar nav a[aria-current="page"] { border-left-color: var(--amber); }
  .sidebar-foot { display: block; padding: 12px 14px 14px; }
  .sidebar-identity { margin: -4px -4px 7px; }
  .sidebar-account-links { display: flex; }
  .sidebar-entity { display: block; }
  .mobile-nav-toggle.btn { display: inline-flex; flex: none; }
  .mobile-nav-toggle-icon { font-size: 17px; line-height: 1; }
  .mobile-nav-close {
    position: absolute; top: 14px; right: 12px; z-index: 1;
    width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-on-navy);
    border-radius: 8px; background: var(--navy-tint-90); color: var(--ink-on-dark-strong);
    align-items: center; justify-content: center; font-size: 26px; line-height: 1; cursor: pointer;
  }
  .mobile-nav-close { display: inline-flex; }
  .mobile-nav-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 100;
    width: 100%; height: 100%; padding: 0; border: 0;
    background: var(--navy); opacity: .62; cursor: pointer;
  }
  .kpis, .kpis:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: 1fr 1fr; }
  .content { padding: 16px; overflow-x: hidden; }
  .card { overflow-x: auto; }
  .form-grid { grid-template-columns: 1fr 1fr !important; }
  .topbar { flex-wrap: wrap; padding: 12px 16px; }
  .row-actions__panel { position: fixed; top: 15vh; right: 16px; left: 16px; width: auto; }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* The file input is visually hidden but still focusable, so its focus ring
   has to appear on the label standing in for it. */
.file-field { display: inline-block; position: relative; }
.file-field:focus-within .btn { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.pager {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13px;
}

/* One logical column at phone width and at 400% zoom. Forms and action rows
   reflow instead of requiring two-dimensional scrolling. */
@media (max-width: 600px) {
  .content { padding: 12px; }
  .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .field-span-2, .field-span-3 { grid-column: auto; }
  .draft-line { grid-template-columns: minmax(0, 1fr); }
  .review-facts { grid-template-columns: minmax(0, 1fr); }
  .draft-line .remove { width: 100%; }
  .statement-controls,
  .statement-filter,
  .equity-actions,
  .actions,
  .import-decide,
  .import-decided,
  .pager {
    flex-direction: column;
    align-items: stretch;
  }
  .statement-filter .field,
  .statement-filter .btn,
  .equity-actions .btn,
  .equity-actions form,
  .actions .btn,
  .pager .btn { width: 100%; }
  .equity-actions { justify-content: flex-start; padding-inline: 0; }
  .import-decide select { max-width: none; width: 100%; }
  .import-split-part {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .import-split-part select,
  .import-split-part input { max-width: none; width: 100%; }
  .settlement-form,
  .correction-form { min-width: 0; width: 100%; }
  .pager .muted { text-align: center; }
}

/* ---- Print ---- */
@media print {
  .sidebar, .topbar, .print-hide, .skip-link, #notice { display: none !important; }
  /* The shell is a full-height flex column on screen and nothing reset it
     here, so every printed page was at least one viewport tall and anything
     that fitted on one page still spilled a second, empty one. */
  html, body { height: auto; min-height: 0; }
  .shell, .main, .content { min-height: 0; height: auto; display: block; }
  .content { max-width: none; padding: 0; }
  .card { border: 0; padding: 0; margin: 0; }
  body { font-size: 12.5px; }
  .print-head {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    border-bottom: 2px solid var(--amber); padding-bottom: 10px; margin-bottom: 16px;
    font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--legal-muted);
  }
  .stmt-sheet { max-width: none; }
  a { text-decoration: none; color: inherit; }

  /* Printing a shareholder summary hides everything else on the equity page,
     because the rest of it is marked print-hide, so what comes out is the
     internal record on its own. Eleven columns do not fit a Letter page at
     the screen size, and every one of them is a figure someone would check,
     so the table shrinks rather than losing a column. */
  .summary-table { font-size: 9px; }
  .summary-table th, .summary-table td { padding-left: 3px; padding-right: 3px; }
  .summary-hash { font-size: 9px; }
  .summary-value { font-size: 15px; }

  /* One certificate, one page, on both US Letter and A4.

     The two sheets constrain different axes. Letter is wider but shorter
     (215.9 x 279.4mm), A4 is narrower but taller (210 x 297mm), so at a 12mm
     margin the area that exists on both is 186mm wide by 255mm tall. Fit that
     and the same document prints correctly on either, which is why there is
     one certificate rather than a Letter one and an A4 one.

     The unit carries the whole scale: the design is 880 units wide, so a unit
     of 186mm/880 makes the sheet exactly 186mm and every other length follows
     it. Written as a division rather than a decimal so the intent survives a
     change to either number. */
  @page { margin: 12mm; }
  .certificate {
    --cert-unit: calc(186mm / 880);
    margin: 0;
    break-inside: avoid; page-break-inside: avoid;
  }
  .certificate-inner { overflow: visible; }
  /* Screen affordances that are not part of the document. */
  .cert-seal-verify { display: none; }
}