/* Design tokens: the Ledger language.
 *
 * Palette comes ONLY from the Mindstone logo, sampled from mindstone.png:
 *   cyan #45b7fa, violet #8162fb, wordmark charcoal #424854, MAVEN grey #c9c9c9, white.
 * Everything else is a lightness shift of those hues. Colour has jobs:
 *   charcoal = structure and anything a person did, cyan = modelled, violet = machine-written.
 * The two brand hues appear together, as the hexagon's split (--signature), and alone only
 * with their meaning. Green and red exist solely where a sign must be read.
 *
 * Exact logo cyan (2.25:1) and violet (4.08:1) fail as text on white, so text and thin marks use
 * --model-ink / --gen-ink, darker shades of the same hues. Fills and hatching use the exact values.
 *
 * Type scale, six steps and nothing under 12px: 12 / 13 / 15 / 20 / 28 / 36. Radius: 2px, everywhere.
 * No shadows. No gradients except --signature and the hatching that means "modelled".
 *
 * Token NAMES from the previous system are kept (--accent, --line2, --fs-body ...) and remapped, so
 * stylesheets that have not been rewritten still resolve to the new language. New code should use
 * the names in the 'Ledger' block. */
/* Mindstone theme (owner, 2026-10-22, replacing the teal): petrol navy (#031F30, #042940) for
 * structure and Mindstone blue (#0B7BC1) for modelled figures, from mindstone.in; ice-blue page.
 * White cards, 6px corners. Mindstone hints stay: the logo,
 * the cyan | violet signature under titles and the active tab, and violet for machine-written text.
 * Every text pair below clears WCAG AA (4.5:1) on --bg and --paper in both themes. */
:root {
  --risk-0:#1c6b45; --risk-1:#8a5a14; --risk-2:#b4531a; --risk-3:#a3261d; --risk-4:#7c1d16;
  --risk-5:#d9e3ec; --risk-6:#d9e3ec; --risk-7:#d9e3ec; --risk-8:#d9e3ec; --risk-9:#d9e3ec;
  --tint-company:#0b7bc1; --tint-sector:#1b7f6b; --tint-compare:#6a4fd6; --tint-report:#9a5b12; --tint-excel:#1b7f4b;
  /* --- brand, exact from the logo, used only for the signature and machine-written marks --- */
  --cyan: #45b7fa; --violet: #8162fb; --charcoal: #424854; --grey: #c9c9c9;
  --gen: #8162fb; --gen-ink: #5b3fd4; --gen-soft: #efebff;
  --signature-h: linear-gradient(90deg, var(--cyan) 50%, var(--violet) 50%);
  --signature-v: linear-gradient(180deg, var(--cyan) 50%, var(--violet) 50%);

  /* --- modelled figures: Mindstone blue --- */
  --model: #0b7bc1; --model-ink: #0a6aa6; --model-soft: #e1f0fb;
  --navy: #031f30; --navy-2: #042940; --ice: #d6eefd;
  --focus: #1d5fd1;

  /* --- ink, paper and rules: navy on soft grey --- */
  --ink: #06202f; --ink2: #22394a; --muted: #566a7a; --faint: #5d7080;
  --line: #d9e3ec; --line2: #e6edf3; --line-faint: #eff4f8;
  --bg: #f3f7fb; --paper: #ffffff; --brand: #ffffff; --paper-2: #eff5fa;

  /* --- previous names, remapped --- */
  --accent: #042940; --accent-soft: #e6f1f9; --accent-ink: #042940;
  --accent-fill: #042940; --accent-hover: #0b3d5c;
  --overlay: rgba(3, 31, 48, .42); --glass: rgba(245, 247, 250, .96);

  /* --- functional colour: only where a sign or an outcome must be read --- */
  --ok: #1b7f4b; --ok-soft: #e6f4ec;
  --neg: #b42318; --neg-soft: #fbeceb; --neg-ink: #8f1c13;
  --warn: #9a6212; --warn-soft: #fbf1df; --warn-ink: #6b4410;

  /* One family: titles are IBM Plex Sans at 600 (design-principles.md rule 9). */
  --serif: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-cap: 12px; --fs-ui: 13px; --fs-text: 14px; --fs-h2: 17px; --fs-fig: 24px; --fs-title: 28px;
  --fs-app: 13px; --fs-app-sm: 12px; --fs-h3: 15px; --fs-body: 12px; --fs-sub: 12px; --fs-label: 12px;

  --r: 4px; --r-card: 4px; --r-ctl: 3px; --r-pill: 3px; --r-chip: 2px;
  --pane: 264px;
  --shadow: 0 1px 2px rgba(3, 31, 48, .06), 0 2px 6px rgba(3, 31, 48, .04);
  --shadow-pop: 0 8px 24px rgba(3, 31, 48, .14);
  --ctl-h: 36px; --ctl-h-sm: 30px;
}

:root[data-theme="dark"] {
  --risk-0:#72c99a; --risk-1:#efc36c; --risk-2:#f59b62; --risk-3:#f18479; --risk-4:#e67b70;
  --risk-5:#1d4560; --risk-6:#1d4560; --risk-7:#1d4560; --risk-8:#1d4560; --risk-9:#1d4560;
  --tint-company:#6fc0f5; --tint-sector:#5fd0b5; --tint-compare:#b3a2ff; --tint-report:#e9b56a; --tint-excel:#5fc48c;
  color-scheme: dark;
  --ink: #e8eef5; --ink2: #c9d4e1; --muted: #9aaabd; --faint: #8f9fb3;
  --line: #1d4560; --line2: #143850; --line-faint: #0f3046;
  --bg: #031a29; --paper: #082a40; --brand: #052234; --paper-2: #0b3149;
  --accent: #e8eef5; --accent-soft: #0e3a55; --accent-ink: #e8eef5;
  --accent-fill: #e8eef5; --accent-hover: #c9d4e1;
  --model: #4fb6f5; --model-ink: #7cc8f7; --model-soft: #0c3a58; --gen-ink: #b0a3ff; --gen-soft: #262248;
  --focus: #78aaff;
  --ok: #5fc48c; --ok-soft: #12291e; --neg: #f2897f; --neg-soft: #35191a; --neg-ink: #f6aaa3;
  --warn: #e3b45c; --warn-soft: #2f2610; --warn-ink: #ebc97f;
  --overlay: rgba(1, 10, 17, .66); --glass: rgba(3, 26, 41, .94);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 8px 24px rgba(0, 0, 0, .45);
}

/* No stored choice: light. Dark applies only when the reader picks it (data-theme="dark"). */

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0; background: var(--bg); color: var(--ink2);
  font-family: var(--sans); font-size: var(--fs-ui); line-height: 1.5;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gen); }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 500; letter-spacing: 0; }
h1, h2 { font-family: var(--serif); }
h3 { font-family: var(--sans); font-weight: 600; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'tnum'; }
.spacer { flex: 1; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ----------------------------------------------------------------- brand signature
 * The logo's hexagon is split exactly in half, cyan | violet. That pairing, and only that
 * pairing, is the identity mark in the interface: a short bar under a page title, the active
 * tab, the active list row. Never used decoratively on its own colours. */
.sig-bar::after, .page-title::after {
  content: ''; display: block; width: 44px; height: 3px; margin-top: 12px; background: var(--signature-h);
}

/* ---------------------------------------------------------------- controls */
button, .btn {
  font: inherit; font-weight: 600; font-size: var(--fs-ui); line-height: 1;
  min-height: var(--ctl-h); padding: 0 16px; border-radius: var(--r-ctl);
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  text-decoration: none !important;
}
a.btn { justify-content: center; }
button:hover:not(:disabled), .btn:hover:not(:disabled) {
  background: var(--ink2); border-color: var(--ink2); color: var(--bg);
  box-shadow: inset 0 -3px 0 0 var(--violet);
  text-decoration: none !important;
}
button.ghost, .btn.ghost, .btn.secondary {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
button.ghost:hover:not(:disabled), .btn.ghost:hover:not(:disabled) {
  background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: none;
}
button.danger { background: transparent; color: var(--neg); border-color: var(--neg); }
button.danger:hover:not(:disabled) { background: var(--neg); color: var(--paper); border-color: var(--neg); box-shadow: none; }
button.link {
  background: none; border: 0; color: var(--ink); padding: 0; min-height: 0; font-weight: 600;
  text-decoration: underline !important; text-decoration-color: var(--line) !important; text-underline-offset: 3px;
}
button.link:hover:not(:disabled) { background: none; color: var(--ink); box-shadow: none; text-decoration-color: var(--gen) !important; }
button:disabled, .btn:disabled { opacity: .4; cursor: default; }
button.tiny, .btn.sm { min-height: var(--ctl-h-sm); padding: 0 12px; font-size: var(--fs-cap); }
.btn.primary { background: var(--ink); color: var(--bg); }

input, select, textarea {
  font: inherit; min-height: var(--ctl-h); padding: 0 10px; border-radius: var(--r-ctl);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
textarea { padding: 8px 10px; min-height: 0; }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--focus); box-shadow: 0 0 0 2px var(--model-soft);
}
input[type=checkbox], input[type=radio] { min-height: 0; padding: 0; accent-color: var(--ink); }
label { font-size: var(--fs-cap); font-weight: 600; color: var(--muted); }

/* ------------------------------------------------------------------ pieces
 * A "card" is a section, not a box: a rule above, content below. */
.card {
  background: transparent; border: 0; border-top: 1px solid var(--ink); border-radius: 0;
  padding: 12px 0 0; margin-bottom: 28px; box-shadow: none;
}
.card > h3 {
  font: 500 var(--fs-h2)/1.2 var(--serif); text-transform: none; letter-spacing: 0;
  color: var(--ink); margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
}
.pill {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line);
  font-weight: 600; font-size: var(--fs-cap); white-space: nowrap; color: var(--ink2); background: transparent;
}
.pill.ok { color: var(--ok); border-color: var(--ok); }
.pill.bad { color: var(--neg); border-color: var(--neg); }
.pill.warn { color: var(--ink); border-color: var(--ink); }
.pill.info { color: var(--model-ink); border-color: var(--model-ink); }
.pill.idle { color: var(--muted); border-color: var(--line); }

/* A note is a statement in a thin frame. Severity is carried by the frame colour and the words,
 * not by a wash of colour or a rule down the left (owner: no left-border accents). */
.note {
  background: var(--paper-2); border: 1px solid color-mix(in srgb, var(--ink) 45%, var(--line)); color: var(--ink2);
  padding: 9px 12px; border-radius: 0; font-size: var(--fs-ui); margin-bottom: 12px;
}
.note.info { border-color: color-mix(in srgb, var(--model-ink) 45%, var(--line)); }
.note.bad { border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); color: var(--neg-ink); }
.note.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.note.gen { border-color: color-mix(in srgb, var(--gen) 45%, var(--line)); }

table.plain { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
table.plain th, table.plain td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line2); }
table.plain th {
  color: var(--muted); font-weight: 600; font-size: var(--fs-cap);
  text-transform: uppercase; letter-spacing: .06em; border-bottom-color: var(--line);
}
table.plain td.num, table.plain th.num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }

.spin {
  display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line);
  border-top-color: var(--ink); border-radius: 50%; animation: sp .7s linear infinite;
  vertical-align: -2px; margin-right: 6px; flex: 0 0 auto;
}
@keyframes sp { to { transform: rotate(360deg); } }

.empty {
  display: flex; height: 100%; align-items: center; justify-content: center;
  color: var(--muted); text-align: center; flex-direction: column; gap: 8px;
}
.empty .big { font: 500 var(--fs-h2)/1.2 var(--serif); color: var(--ink); }

kbd {
  font: 500 var(--fs-cap)/1 var(--sans); padding: 3px 6px; border: 1px solid var(--line);
  border-radius: var(--r); color: var(--muted); background: var(--paper);
}

/* ------------------------------------------------- page and section structure
 * Rules used on every screen:
 *   page actions   top-right of the page, on the breadcrumb row; least to most important, primary last
 *   section actions top-right of the section's heading rule, as a toolbar of small buttons
 *   navigation is a link; anything that does something is a button
 *   a provenance key sits on its own row, never inside a button row */
.pagebar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pagebar .crumbs { margin: 0; color: var(--muted); font-size: var(--fs-cap); }
.pagebar .crumbs a { color: var(--muted); }
.acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.sechead {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding-bottom: 8px; border-bottom: 1px solid var(--ink); margin-bottom: 10px;
}
.sechead h2, .sechead h3 { margin: 0; padding: 0; border: 0; font: 500 var(--fs-h2)/1.2 var(--serif); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* provenance swatches: one treatment per kind of content */
.sw { display: inline-block; width: 11px; height: 11px; flex: none; }
.sw.filed { background: var(--ink); }
.sw.hand { border: 1.5px solid var(--ink); background: transparent; }
.sw.doc { border: 1.5px dashed var(--ink2); }
.sw.model { background: repeating-linear-gradient(135deg, var(--model) 0 1.5px, var(--model-soft) 1.5px 4px); border: 1px solid var(--model-ink); }
.sw.gen { width: 3px; height: 13px; background: var(--gen); }

@media (max-width: 820px) {
  .pagebar { flex-direction: column; align-items: stretch; gap: 10px; }
  .pagebar .acts { flex-wrap: nowrap; justify-content: stretch; } .pagebar .acts .btn, .pagebar .acts button { flex: 1; padding: 0 6px; }
  .sechead { flex-direction: column; align-items: stretch; } .toolbar { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01ms !important; } }