/* ERVA.PK Finance — Option D.
   A fixed left rail so every page has a permanent home, one large figure at
   the top of the day's page, and quiet cards under it. Light is the default;
   dark is a deliberate choice the owner makes, not something an OS imposes.

   IBM Plex is served from this server. The CSP allows no external origin at
   all, so a font CDN would simply fail — and a finance dashboard should not
   be telling a third party who is reading it and when. 84 KB, three files. */

@font-face {
  font-family: "IBM Plex Sans"; font-style: normal;
  font-weight: 100 700;               /* one variable file covers every weight */
  font-display: swap; src: url("fonts/ibm-plex-sans.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */

:root {
  --bg:#F5F7FA; --panel:#FFFFFF; --panel-2:#F1F4F9; --panel-3:#E7EDF6;
  --ink:#101828; --ink-2:#4A5768; --ink-3:#7C889A;
  --line:#E4E9F0; --line-2:#D5DDE9;
  --accent:#2557C7; --accent-2:#1B4099; --accent-soft:#EDF2FC; --accent-line:#C9DAF6;
  --good:#12805A; --good-soft:#EDF6F1; --good-line:#BFE0D0;
  --bad:#B7443B;  --bad-soft:#FDF0EF;  --bad-line:#F2CDC9;
  --warn:#8A5A06; --warn-soft:#FCF3E4; --warn-line:#EBD6AE;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -14px rgba(16,24,40,.18);

  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --display:var(--sans);

  /* Legacy names the views still use. Aliases resolve at use time, so they
     follow whichever theme is active without being restated per theme. */
  --ground:var(--bg); --surface:var(--panel); --surface-2:var(--panel-2); --surface-3:var(--panel-3);
  --rule:var(--line); --rule-2:var(--line-2);
  --brass:var(--accent); --brass-dim:var(--accent-2); --brass-soft:var(--accent-soft);
  --jade:var(--good); --jade-soft:var(--good-soft);
  --garnet:var(--bad); --garnet-soft:var(--bad-soft);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0D131C; --panel:#131C29; --panel-2:#1A2432; --panel-3:#22303F;
    --ink:#EEF2F8; --ink-2:#A3B1C4; --ink-3:#7A899E;
    --line:#1F2B3C; --line-2:#2B3A4C;
    --accent:#6E9BF2; --accent-2:#9CBEF8; --accent-soft:#16223A; --accent-line:#27395C;
    --good:#4CBE90; --good-soft:#12291F; --good-line:#1E4033;
    --bad:#E2796E;  --bad-soft:#2B1613;  --bad-line:#4A2721;
    --warn:#E0A64A; --warn-soft:#2A2010; --warn-line:#453419;
    --shadow:0 1px 2px rgba(0,0,0,.44), 0 8px 24px -14px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg:#0D131C; --panel:#131C29; --panel-2:#1A2432; --panel-3:#22303F;
  --ink:#EEF2F8; --ink-2:#A3B1C4; --ink-3:#7A899E;
  --line:#1F2B3C; --line-2:#2B3A4C;
  --accent:#6E9BF2; --accent-2:#9CBEF8; --accent-soft:#16223A; --accent-line:#27395C;
  --good:#4CBE90; --good-soft:#12291F; --good-line:#1E4033;
  --bad:#E2796E;  --bad-soft:#2B1613;  --bad-line:#4A2721;
  --warn:#E0A64A; --warn-soft:#2A2010; --warn-line:#453419;
  --shadow:0 1px 2px rgba(0,0,0,.44), 0 8px 24px -14px rgba(0,0,0,.6);
}

/* -------------------------------------------------------------------- base */

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-underline-offset:2px; }
a:hover { color:var(--accent-2); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
svg { flex:none; }

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

.shell { display:flex; align-items:flex-start; }

.side {
  width:240px; flex:none; align-self:stretch;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--panel); border-right:1px solid var(--line);
  padding:22px 14px 16px; display:flex; flex-direction:column; gap:22px;
}
.brand {
  font-size:18px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; padding:0 10px; white-space:nowrap;
}
.brand span { color:var(--accent); }

.nav { display:flex; flex-direction:column; gap:18px; }
.navgroup { display:flex; flex-direction:column; gap:2px; }
.navlabel {
  font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); padding:0 10px 6px;
}
.nav a {
  display:flex; align-items:center; gap:12px; min-height:44px; padding:0 10px;
  border-radius:8px; text-decoration:none; color:var(--ink-2);
  font-size:14.5px; font-weight:500;
}
.nav a:hover { background:var(--panel-2); color:var(--ink); }
.nav a.on { background:var(--accent-soft); color:var(--accent); font-weight:600; }

.side-foot {
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.who { display:flex; align-items:center; gap:10px; padding:0 4px; }
.who .avatar {
  width:34px; height:34px; border-radius:17px; flex:none;
  background:var(--panel-3); color:var(--ink); display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:600;
}
.who .whoname { font-size:13.5px; font-weight:600; line-height:1.3; }
.who .whorole { font-size:12px; color:var(--ink-3); text-transform:capitalize; }
.side-foot form { margin:0; }
.side-foot .btn { width:100%; text-align:center; justify-content:center; }

main { flex:1 1 auto; min-width:0; padding:28px 30px 90px; }
.wrap { max-width:1180px; margin:0 auto; }

/* A square button holding only an icon. Defined here rather than inside the
   phone media query, because the sign-in card uses one at every width. */
.iconbtn {
  width:42px; height:42px; flex:none; display:flex; align-items:center;
  justify-content:center; border-radius:9px; border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink-2); cursor:pointer; padding:0;
}
.iconbtn:hover { background:var(--panel-2); color:var(--ink); }

/* Mobile chrome. Hidden on desktop; the rail is the navigation there. */
.mtop { display:none; }
.scrim { display:none; }

@media (max-width:900px) {
  .side {
    position:fixed; z-index:60; top:0; bottom:0; left:0; height:100dvh;
    width:280px; transform:translateX(-100%);
    transition:transform .18s ease; box-shadow:var(--shadow);
  }
  .side.open { transform:none; }
  main { padding:16px 16px 64px; }

  .mtop {
    display:flex; align-items:center; gap:12px;
    position:sticky; top:0; z-index:40; margin:-16px -16px 16px;
    padding:10px 14px; min-height:58px;
    background:var(--panel); border-bottom:1px solid var(--line);
  }
  .mtop .brand { flex:1; padding:0; font-size:17px; }
  .scrim.show {
    display:block; position:fixed; inset:0; z-index:50;
    background:rgba(8,14,22,.5);
  }
}

/* --------------------------------------------------------------- headings */

.page-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:22px;
}
h1 { font-size:25px; font-weight:600; letter-spacing:-.015em; margin:0; line-height:1.2; }
h2 { font-size:16px; font-weight:600; margin:0 0 16px; line-height:1.3; }
.sub { color:var(--ink-3); font-size:14px; margin:5px 0 0; }
.eyebrow {
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 8px;
}

/* ------------------------------------------------------------------- hero */

/* The one figure the owner opens the app for. It gets a panel of its own and
   a tint toward the accent — the only place on the page that raises its voice. */
.hero {
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  background-image:linear-gradient(105deg, var(--accent-soft) 0%, transparent 60%);
  padding:26px 28px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.hero .cap { font-size:14.5px; color:var(--ink-2); font-weight:500; margin:0 0 12px; }
.hero .fig { display:flex; align-items:baseline; gap:12px; }
.hero .cur { font-size:28px; color:var(--ink-3); font-weight:400; }
.hero .num {
  font-size:clamp(44px,8vw,72px); font-weight:300; letter-spacing:-.045em;
  line-height:.94; font-variant-numeric:tabular-nums; margin:0;
}
.hero .num.neg { color:var(--bad); }
.hero .note {
  display:flex; align-items:center; gap:10px; margin:16px 0 0;
  font-size:15px; color:var(--ink-2);
}
.dot { width:8px; height:8px; border-radius:4px; background:var(--good); flex:none; }
.dot.bad { background:var(--bad); }

.meter { width:230px; flex:none; }
.meter .mrow {
  display:flex; justify-content:space-between; gap:10px;
  font-size:13px; color:var(--ink-2); margin-bottom:8px;
}
.meter .track { height:8px; border-radius:4px; background:var(--panel-3); overflow:hidden; }
.meter .fill { height:100%; background:var(--accent); border-radius:4px; }
.meter .fill.over { background:var(--bad); }
.meter .mfoot { font-size:12.5px; color:var(--ink-3); margin:8px 0 0; }

/* ------------------------------------------------------------------ cards */

.card {
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:22px 24px; margin-bottom:16px;
}
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

.tiles {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin-bottom:18px;
}
.tile {
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px;
}
.tile .k {
  font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px;
}
.tile .v {
  font-family:var(--mono); font-size:26px; font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  line-height:1.1; margin:0; color:var(--ink);
}
.tile .v small { font-size:15px; color:var(--ink-3); }
.tile .v.pos { color:var(--good); }
.tile .v.neg { color:var(--bad); }
.tile .d { font-size:13px; color:var(--ink-3); margin:8px 0 0; line-height:1.45; }

/* -------------------------------------------------------- quick actions */

.quick-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; margin-bottom:20px;
}
.quick {
  display:block; text-decoration:none; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  transition:border-color .12s, background .12s;
}
.quick:hover { border-color:var(--accent-line); background:var(--accent-soft); }
.quick .qk {
  display:block; font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}
.quick .qn { font-size:16px; font-weight:600; color:var(--ink); margin:0 0 4px; line-height:1.3; }
.quick .qd { font-size:13.5px; color:var(--ink-3); margin:0; line-height:1.45; }

/* ----------------------------------------------------------------- tables */

.tscroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
th {
  text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
  padding:11px 14px 11px 0; border-bottom:1px solid var(--line-2);
}
td {
  padding:13px 14px 13px 0; border-bottom:1px solid var(--line);
  color:var(--ink-2); vertical-align:top;
}
tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--panel-2); }
th.r, td.r { text-align:right; padding-right:0; }
td.num, th.num, .num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
td.strong, .strong { color:var(--ink); font-weight:600; }
tr.total td { border-top:1px solid var(--line-2); background:var(--panel-2); color:var(--ink); font-weight:600; }
tr.grand td {
  border-top:1px solid var(--good-line); background:var(--good-soft);
  color:var(--good); font-weight:600; font-size:15px;
}
tr.voided td { opacity:.45; text-decoration:line-through; }
.empty { padding:40px 0; text-align:center; color:var(--ink-3); font-size:14px; }

/* ------------------------------------------------------------------ pills */

.pill {
  display:inline-block; font-size:12px; font-weight:500; padding:4px 9px;
  border-radius:6px; white-space:nowrap; background:var(--panel-2); color:var(--ink-2);
}
.k-cash    { background:var(--accent-soft); color:var(--accent); }
.k-asset   { background:var(--panel-3);     color:var(--ink-2); }
.k-equity  { background:var(--good-soft);   color:var(--good); }
.k-income  { background:var(--good-soft);   color:var(--good); }
.k-expense { background:var(--bad-soft);    color:var(--bad); }
.pill.ok   { background:var(--good-soft);   color:var(--good); }
.pill.warn { background:var(--warn-soft);   color:var(--warn); }
.pill.crit { background:var(--bad-soft);    color:var(--bad); }
.pill.new  { background:var(--accent-soft); color:var(--accent); font-weight:600; }

.flow { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13px; }
.flow .arrow { color:var(--ink-3); font-family:var(--mono); }

/* ------------------------------------------------------------------ forms */

.field { margin-bottom:18px; }
label { display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
label .opt { font-weight:400; color:var(--ink-3); font-size:13px; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=file], select, textarea {
  width:100%; padding:11px 13px; font-family:inherit; font-size:15.5px;
  color:var(--ink); background:var(--panel); border:1px solid var(--line-2);
  border-radius:9px; line-height:1.4;
}
input:hover, select:hover, textarea:hover { border-color:var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color:var(--accent); }
input.amount, .num-in {
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:17px;
}
textarea { min-height:80px; resize:vertical; }
select {
  appearance:none; padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 53%, calc(100% - 14px) 53%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
input:disabled, select:disabled { background:var(--panel-2); color:var(--ink-3); }
.hint { font-size:13px; color:var(--ink-3); margin:6px 0 0; line-height:1.5; }
.err { font-size:13px; color:var(--bad); margin:6px 0 0; font-weight:500; }
.field.bad input, .field.bad select, .field.bad textarea { border-color:var(--bad); }

.row { display:grid; gap:0 16px; grid-template-columns:1fr 1fr; }
.row.three { grid-template-columns:repeat(3,1fr); }
@media (max-width:640px) { .row, .row.three { grid-template-columns:1fr; } }

.btn {
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:0 18px; border-radius:9px; border:1px solid var(--accent);
  background:var(--accent); color:#FFFFFF; font:inherit; font-size:14.5px;
  font-weight:600; cursor:pointer; text-decoration:none; line-height:1.2;
}
:root[data-theme="dark"] .btn { color:#08101C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color:#08101C; } }
.btn:hover { background:var(--accent-2); border-color:var(--accent-2); }
.btn.ghost { background:var(--panel); color:var(--ink-2); border-color:var(--line-2); }
.btn.ghost:hover { background:var(--panel-2); color:var(--ink); border-color:var(--ink-3); }
.btn.danger { background:var(--panel); color:var(--bad); border-color:var(--bad-line); }
.btn.danger:hover { background:var(--bad-soft); }
.btn.sm { min-height:36px; padding:0 13px; font-size:13.5px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:22px; }

/* ---------------------------------------------------------------- filters */

.filters {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:14px; align-items:end;
}
.filters .field { margin-bottom:0; }
.filters .btn { width:100%; justify-content:center; }
.filter-foot {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3);
}

/* ---------------------------------------------------------------- notices */

.notice {
  padding:14px 17px; border-radius:10px; margin-bottom:16px; font-size:14.5px;
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink);
}
.notice.ok    { background:var(--good-soft); border-color:var(--good-line); }
.notice.error { background:var(--bad-soft);  border-color:var(--bad-line); }
.notice.warn  { background:var(--warn-soft); border-color:var(--warn-line); }
.readonly-banner {
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink-2);
  padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13.5px;
}

/* Said back to you in words after every entry, so the double entry teaches
   itself instead of needing to be explained. */
.said {
  background:var(--good-soft); border:1px solid var(--good-line);
  border-radius:12px; padding:18px 20px; margin-bottom:18px;
}
.said .t { font-size:16px; font-weight:600; color:var(--good); margin:0 0 8px; }
.said p { margin:0 0 6px; font-size:14.5px; color:var(--ink); line-height:1.6; }
.said p:last-child { margin-bottom:0; }
.said .undo { font-size:14px; font-weight:600; }

/* ------------------------------------------------------------------- auth */

.auth-wrap { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card {
  width:100%; max-width:420px; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:36px 32px;
  box-shadow:var(--shadow);
}
.auth-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:26px; }
.auth-card .brand { font-size:24px; display:block; margin-bottom:4px; padding:0; }
.auth-card .tag { font-size:14px; color:var(--ink-3); margin:0; }
.auth-card .btn { width:100%; justify-content:center; }
.code-input {
  font-family:var(--mono) !important; font-size:26px !important;
  letter-spacing:.34em; text-align:center; padding:14px !important;
}
.secret-box {
  font-family:var(--mono); font-size:15px; letter-spacing:.07em; word-break:break-all;
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:9px;
  padding:15px 17px; margin:14px 0; color:var(--accent); text-align:center; line-height:1.8;
}
.uri-box {
  font-family:var(--mono); font-size:11.5px; word-break:break-all; color:var(--ink-3);
  background:var(--panel-2); border-radius:8px; padding:11px 13px; margin:10px 0 0;
}
ol.steps { padding-left:20px; margin:0 0 20px; font-size:14.5px; color:var(--ink-2); }
ol.steps li { margin-bottom:9px; }

/* On a narrow phone the card's own padding eats the field width, so it gives
   some back rather than squeezing the inputs. */
@media (max-width:460px) {
  .auth-wrap { padding:16px; align-items:flex-start; padding-top:32px; }
  .auth-card { padding:26px 20px; border-radius:14px; }
  .code-input { font-size:22px !important; letter-spacing:.24em; }
}

/* ------------------------------------------------------------------- misc */

.pager { display:flex; gap:10px; align-items:center; margin-top:18px; font-size:13.5px; }
.pager .cur { font-size:13px; color:var(--ink-3); }
.meta-list { display:grid; grid-template-columns:auto 1fr; gap:11px 22px; font-size:14.5px; }
.meta-list dt { font-size:12.5px; font-weight:600; color:var(--ink-3); padding-top:3px; }
.meta-list dd { margin:0; color:var(--ink); }
.proof-list { list-style:none; padding:0; margin:0; }
.proof-list li {
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.proof-list li:last-child { border-bottom:none; }
code {
  font-family:var(--mono); font-size:.87em; background:var(--panel-2);
  padding:.14em .4em; border-radius:5px; color:var(--ink);
}
.mono-sm { font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.big-figure {
  font-family:var(--mono); font-size:34px; font-variant-numeric:tabular-nums;
  font-weight:500; line-height:1.1; margin:0 0 18px; color:var(--ink); letter-spacing:-.025em;
}
.big-figure .cur { font-size:18px; color:var(--ink-3); font-family:var(--sans); }

/* Summary panels use a row list rather than a table: in a two-column layout a
   table's intrinsic minimum width clips the figure column, and a balance you
   cannot read is worse than no balance at all. */
.kv { display:flex; flex-direction:column; }
.kv-row {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding:12px 0; border-bottom:1px solid var(--line);
}
.kv-row:last-child { border-bottom:none; }
.kv-row .kl { color:var(--ink); font-weight:500; font-size:14.5px; min-width:0; }
.kv-row .kl .pill { margin-left:7px; vertical-align:1px; }
.kv-row .ka {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--ink); font-size:14.5px;
}
.kv-row .kl.muted { color:var(--ink-2); font-weight:400; }
.kv-row .kl.muted + .ka { color:var(--ink-2); }
.kv-row.sum {
  border-top:1px solid var(--line-2); border-bottom:none;
  background:var(--panel-2); margin-top:6px; padding:12px 12px; border-radius:8px;
}
.kv-row.grand {
  border-top:none; border-bottom:none; background:var(--good-soft);
  padding:14px 12px; margin-top:6px; border-radius:8px;
}
.kv-row.grand .kl, .kv-row.grand .ka { color:var(--good); font-weight:600; font-size:15.5px; }

/* Six big targets instead of a dropdown. Sized for a thumb, because this form
   is filled in standing up, on a phone, by someone who is not going to squint
   at a select element listing twenty ledger accounts. */
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.choice {
  display:flex; align-items:flex-start; gap:12px; margin:0; cursor:pointer;
  border:1px solid var(--line-2); border-radius:12px; padding:16px 18px;
  background:var(--panel); font-weight:400; color:var(--ink);
}
.choice:hover { border-color:var(--accent-line); background:var(--accent-soft); }
.choice input[type=radio] {
  width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--accent); cursor:pointer;
}
.choice:has(input:checked) {
  border-color:var(--accent); background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.choice .cname { display:block; font-size:15.5px; font-weight:600; }
.choice .cnote { display:block; font-size:13px; color:var(--ink-3); line-height:1.45; margin-top:3px; }

/* One switchable permission: a real checkbox with the plain-language label
   and the consequence beside it, because the owner is deciding what someone
   else gets to see and needs to read that in one pass. */
.permrow {
  display:flex; align-items:flex-start; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line); margin:0; cursor:pointer;
  font-weight:400; color:var(--ink);
}
.permrow:last-child { border-bottom:none; }
.permrow input[type=checkbox] {
  width:19px; height:19px; margin:2px 0 0; flex:none; accent-color:var(--accent); cursor:pointer;
}
.permrow .permlabel { display:block; font-size:14.5px; font-weight:600; }
.permrow .permnote { display:block; font-size:13px; color:var(--ink-3); line-height:1.5; margin-top:2px; }
.permrow.locked { cursor:default; opacity:.7; }
.permrow.locked input { cursor:not-allowed; }
.permrow.locked .permnote strong { color:var(--ink-2); }

/* staged import review */
.stage-row.dup td { opacity:.45; }
.stage-row.new td:first-child { box-shadow:inset 2px 0 0 var(--good); }
.plan-list { list-style:none; padding:0; margin:0; font-size:13.5px; }
.plan-list li {
  display:flex; gap:10px; align-items:baseline; padding:7px 0;
  border-bottom:1px solid var(--line);
}
.plan-list li:last-child { border-bottom:none; }
.plan-list .pamt { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }

/* The theme button shows the theme you would move TO, and works out which
   that is in CSS — including the un-stamped case where the OS decides and
   no script has run. */
.t-sun, .t-moon { align-items:center; gap:8px; }
.t-sun { display:none; }
.t-moon { display:inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-sun  { display:inline-flex; }
  :root:not([data-theme="light"]) .t-moon { display:none; }
}
:root[data-theme="dark"] .t-sun  { display:inline-flex; }
:root[data-theme="dark"] .t-moon { display:none; }

/* Utilities, because the CSP forbids inline style attributes entirely — no
   'unsafe-inline' in style-src. A style="" that is silently dropped is worse
   than none at all, so every one of them lives here as a real class. */
.full { width:100%; }
.nowrap { white-space:nowrap; }
.breakall { word-break:break-all; }
.clickable { cursor:pointer; }
.faded { opacity:.45; }
.dim { opacity:.6; }
.upper-in { text-transform:uppercase; }

.m0  { margin:0 !important; }
.mt0 { margin-top:0; }
.mb0 { margin-bottom:0; }
.mtn { margin-top:-8px; }
.mt12 { margin-top:12px; }
.mt14 { margin-top:14px; }
.mt16 { margin-top:16px; }
.mt18 { margin-top:18px; }
.mt20 { margin-top:20px; }
.mb14 { margin-bottom:14px; }
.mb20 { margin-bottom:20px; }
.mb22 { margin-bottom:22px; }

.centered { text-align:center; }
.card.tight { padding-top:6px; }
.card.marked { border-color:var(--accent-line); }

/* The header row a card uses when it carries a title and a link on one line. */
.cardhead {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap;
}
.cardhead h2 { margin-bottom:0; }

.sample-grid { display:flex; gap:8px; flex-wrap:wrap; }
.inline-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.inline-form .field { margin:0; }
.bullets { margin:0; padding-left:20px; }
.bullets li { font-size:14px; color:var(--ink-2); margin-bottom:9px; }
.bullets.airy { margin:8px 0 0; }
.bullets.airy li { line-height:1.9; margin-bottom:0; }

/* A .ka slot holding words rather than a figure: it has to wrap and drop the
   monospace, or a filename runs off the edge of the row. */
.ka-text {
  font-family:var(--sans) !important; white-space:normal !important;
  text-align:right; max-width:60%;
}
.pad-l { padding-left:22px; }
.sep-top { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }

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