/* =============================================================================
   NFPOS stylesheet — plain CSS, no build step, no framework.
   Goes to Django as static/css/nfpos.css unchanged.

   Layout: one column on phones with a bottom tab bar; from 56rem up, a top
   nav and two-column pages. Everything is sized in rem off an 18px root so
   text is large by default (DP3), and every control is at least 44px tall.

   The one signature element is the "missing slot": a dashed amber outline
   that marks where a document, minutes, or month of figures *should* be.
   It is used everywhere the system shows a gap (DP5: show the hole).
   ========================================================================== */

/* ---- Tokens (light) ------------------------------------------------------ */
/* Palette taken from the ICFC logo: cream ground, teal wordmark, trunk brown
   for text, and the warm skin tones of the hands for the money-out colour.   */
:root {
  --paper: #fbf7ef;        /* page ground, a lighter version of the logo cream */
  --header: #f6eedd;       /* logo cream exactly, so the tree mark sits on it  */
  --surface: #fffdf9;      /* panels */
  --sunken: #f2eadb;       /* wells, table heads, tracks */
  --ink: #2b1d17;          /* body text: the trunk brown */
  --ink-soft: #64524a;     /* secondary text (6.9:1 on paper) */
  --line: #e2d6c3;
  --accent: #2c6b68;       /* actions, links, focus: logo teal, deepened for contrast */
  --accent-ink: #ffffff;   /* text on accent */
  --accent-soft: #e0eeea;
  --brand-1: #2f716f;      /* "Intercultural Child" */
  --brand-2: #34756f;      /* "& Family Centre" */

  --gap: #7a4a00;          /* "missing" text */
  --gap-bg: #fff1d6;
  --gap-line: #c0811a;
  --ok: #2e6331;
  --ok-bg: #e5f1e3;
  --danger: #a12c25;
  --danger-bg: #fbe8e4;
  --private: #5b4189;      /* restricted documents */
  --private-bg: #efe8f6;

  --chart-income: #2c6b68;
  --chart-spend: #b0603a;  /* from the hands */

  --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-display: "Nunito", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; /* rounded, like the logo lettering */
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: 2.6rem;

  --radius: 10px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --tap: 44px;
  --measure: 65ch;
  --wide: 72rem;
  --tabbar-h: 4.25rem;
}

/* ---- Tokens (dark) ------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a1411; --header: #211915; --surface: #241c18; --sunken: #140f0c; --ink: #f3eadc;
    --ink-soft: #c3b3a2; --line: #3b302a; --accent: #7cc6be; --accent-ink: #0e211e;
    --accent-soft: #1d3431; --brand-1: #7cc6be; --brand-2: #a6d6cf; --gap: #f1ba5c; --gap-bg: #2e2313; --gap-line: #b57d1a;
    --ok: #8ccf8e; --ok-bg: #182a19; --danger: #f2958a; --danger-bg: #33201c;
    --private: #c8b0f0; --private-bg: #261d33; --chart-income: #7cc6be; --chart-spend: #e39c72;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1a1411; --header: #211915; --surface: #241c18; --sunken: #140f0c; --ink: #f3eadc;
  --ink-soft: #c3b3a2; --line: #3b302a; --accent: #7cc6be; --accent-ink: #0e211e;
  --accent-soft: #1d3431; --brand-1: #7cc6be; --brand-2: #a6d6cf; --gap: #f1ba5c; --gap-bg: #2e2313; --gap-line: #b57d1a;
  --ok: #8ccf8e; --ok-bg: #182a19; --danger: #f2958a; --danger-bg: #33201c;
  --private: #c8b0f0; --private-bg: #261d33; --chart-income: #7cc6be; --chart-spend: #e39c72;
  color-scheme: dark;
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; } /* 18px root */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0; max-width: var(--measure); }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.soft { color: var(--ink-soft); }
.small { font-size: var(--step--1); }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; padding: 0 !important; border: 0 !important;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); z-index: 50; background: var(--surface); padding: var(--space-3); }

/* ---- Site frame ---------------------------------------------------------- */
.site-header {
  background: var(--header);
  border-bottom: 1px solid var(--line);
}
.site-header__inner, .page, .site-footer__inner {
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 3.75rem; padding-block: var(--space-2);
}
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; min-width: 0; }
.brand__mark {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 10px; object-fit: cover;
  background: #f6eedd; /* the logo's own cream, in both themes */
}
.brand__name { display: grid; font-family: var(--font-display); line-height: 1.12; min-width: 0; }
.brand__l1 { color: var(--brand-1); font-weight: 800; }
.brand__l2 { color: var(--brand-2); font-weight: 600; }
.brand__l1, .brand__l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signin__logo { width: min(100%, 20rem); height: auto; border-radius: var(--radius); background: #f6eedd; justify-self: start; }
.site-nav { display: none; margin-left: auto; gap: var(--space-1); }
.site-nav a, .tabbar a {
  color: var(--ink-soft); text-decoration: none; font-weight: 700;
}
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding-inline: var(--space-3); border-radius: 8px;
}
.site-nav a:hover { background: var(--surface); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); background: var(--surface); box-shadow: inset 0 -3px 0 var(--accent); }
.site-nav .count, .tabbar .count {
  margin-left: 0.35em; min-width: 1.5em; padding: 0 0.4em; border-radius: 999px;
  background: var(--gap-bg); color: var(--gap); border: 1px solid var(--gap-line);
  font-size: var(--step--1); line-height: 1.4; text-align: center;
}
.profile-link {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border-radius: 50%;
  background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; border: 1px solid var(--line);
}
.profile-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

/* Bottom tab bar (phones) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.tabbar ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tabbar-h); font-size: 0.78rem; padding-inline: 2px; text-align: center;
}
.tabbar svg { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--accent); }
.tabbar a[aria-current="page"] svg { stroke-width: 2.4; }
.tabbar .count { position: absolute; margin: -0.3rem 0 0 1.6rem; }
.tabbar li { position: relative; }
body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 56rem) {
  .site-nav { display: flex; }
  .profile-link { margin-left: 0; }
  .tabbar { display: none; }
  body.has-tabbar { padding-bottom: 0; }
}

.page { padding-block: var(--space-5) var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner {
  padding-block: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  font-size: var(--step--1); color: var(--ink-soft);
}

/* ---- Page heading -------------------------------------------------------- */
.page-head { display: grid; gap: var(--space-3); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.eyebrow {
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.lede { font-size: var(--step-1); color: var(--ink-soft); }
.back { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* ---- Layout helpers ------------------------------------------------------ */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }
.stack-lg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-content: start; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.split { display: grid; gap: var(--space-6); }
/* Grid children may shrink below their content, so tables and long words scroll or wrap inside them. */
.page > *, .stack > *, .stack-lg > *, .panel > *, .form > *, .field > *, .agenda li > *, .choices > * { min-width: 0; }
.split > * { min-width: 0; }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
}
/* A row of filter buttons: wraps on wide screens, swipes sideways on phones. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips .btn { white-space: nowrap; }
@media (max-width: 40rem) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .chips::-webkit-scrollbar { display: none; }
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Panels (used for the few things that are separate objects) ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start;
}
.panel--feature { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0.55rem 1.1rem; border-radius: 8px;
  border: 2px solid var(--accent); background: var(--surface); color: var(--accent);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent-soft); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn--quiet { border-color: transparent; background: transparent; padding-inline: var(--space-3); }
.btn--quiet:hover { background: var(--sunken); }
.btn--gap { border-color: var(--gap-line); color: var(--gap); background: var(--surface); }
.btn--gap:hover { background: var(--gap-bg); }
.btn--danger { border-color: var(--danger); color: var(--danger); background: var(--surface); }
.btn--danger:hover { background: var(--danger-bg); }
.btn--block { width: 100%; }
.btn--icon { width: var(--tap); padding: 0; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- Badges / status pills ---------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap;
  padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); background: var(--sunken);
}
.badge--ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.badge--gap { color: var(--gap); background: var(--gap-bg); border-color: var(--gap-line); border-style: dashed; }
.badge--danger { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.badge--private { color: var(--private); background: var(--private-bg); border-color: transparent; }
.badge--accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.badge svg { width: 14px; height: 14px; }

/* ---- The missing slot ---------------------------------------------------- */
.missing {
  border: 2px dashed var(--gap-line); background: var(--gap-bg); color: var(--ink);
  border-radius: var(--radius); padding: var(--space-4);
  display: grid; gap: var(--space-3);
}
.missing__title { font-weight: 700; }
.missing__why { color: var(--ink-soft); font-size: var(--step--1); }
.missing > .missing__more { grid-column: 1 / -1; }  /* T5.2: other ways to fill it, under the row */
.missing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.missing-list .missing { grid-template-columns: 1fr auto; align-items: center; }
@media (max-width: 30rem) { .missing-list .missing { grid-template-columns: 1fr; } }

/* ---- Lists of rows ------------------------------------------------------- */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li { border-bottom: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: center;
  padding-block: var(--space-3); min-height: calc(var(--tap) + var(--space-3));
}
.row > * { min-width: 0; }
a.row { color: inherit; text-decoration: none; }
a.row:hover .row__title { text-decoration: underline; color: var(--accent); }
.row__title { font-weight: 700; }
.row__meta { color: var(--ink-soft); font-size: var(--step--1); }
.row__end { display: flex; gap: var(--space-2); align-items: center; justify-content: end; flex-wrap: wrap; }
@media (max-width: 30rem) { .row__end--stack { flex-direction: column; align-items: end; gap: 0; } }
.rows .missing { margin-block: var(--space-2); }

/* "What we know" shelf: document types with counts */
.shelf {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  grid-auto-rows: 1fr; /* every card as tall as the tallest */
}
.shelf a {
  position: relative; height: 100%; display: grid; align-content: start; gap: 2px; padding: var(--space-4); border-radius: var(--radius);
  background: var(--surface); border: 2px solid var(--line); color: var(--ink); text-decoration: none;
}
.shelf a:hover { border-color: var(--accent); }
/* Missing count: icon + number pinned to the card's bottom-right corner */
.shelf__missing {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.15rem 0.5rem 0.15rem 0.4rem; border-radius: 999px;
  background: var(--gap-bg); color: var(--gap); border: 1.5px dashed var(--gap-line);
  font-size: var(--step--1); font-weight: 700; line-height: 1.3;
}
.shelf__missing svg { width: 18px; height: 18px; }
.shelf strong { font-size: var(--step-1); line-height: 1.25; }
/* Home page "What we know": two to a row on a phone (the document picker keeps full-width cards). */
@media (max-width: 30rem) {
  .shelf--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .shelf--compact a { padding: var(--space-3); padding-bottom: 2.6rem; }
  .shelf--compact strong { font-size: var(--step-0); }
}

/* ---- Stats --------------------------------------------------------------- */
.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.stat { display: grid; gap: var(--space-1); align-content: start; }
.stat__label { font-weight: 700; color: var(--ink-soft); }
.stat__value { font-family: var(--font-display); font-size: var(--step-4); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__value small { font-size: var(--step-1); }
.stat__note { font-size: var(--step--1); color: var(--ink-soft); }
.asof {
  display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--step--1); font-weight: 700;
  color: var(--ink-soft); background: var(--sunken); border-radius: 6px; padding: 0.15rem 0.5rem;
}
.confidence { display: flex; gap: 3px; align-items: center; }
.confidence i { width: 1.1rem; height: 0.45rem; border-radius: 2px; background: var(--sunken); border: 1px solid var(--line); }
.confidence i.on { background: var(--ink-soft); border-color: var(--ink-soft); }

/* ---- Tables -------------------------------------------------------------- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.65rem var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--sunken); font-size: var(--step--1); color: var(--ink-soft); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.money, th.money { text-align: right; white-space: nowrap; }
.money--in { color: var(--ok); }

/* Money (T3.1): an entry's details and history */
.nowrap { white-space: nowrap; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.history > li { display: grid; gap: var(--space-1); padding-left: var(--space-3); border-left: 3px solid var(--line); }
.history__changes { margin: 0; padding-left: 1.1rem; }
.history del { color: var(--ink-soft); }
/* On phones the date moves under the description, so the description has room. */
/* Import (T3.2): rows that weren't imported, with why */
.problem-list { margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) 2.2rem; border: 2px dashed var(--gap-line);
  border-radius: var(--radius); background: var(--gap-bg); display: grid; gap: var(--space-2); }
details.columns > summary { list-style: none; cursor: pointer; display: grid; gap: var(--space-1); }
details.columns > summary::-webkit-details-marker { display: none; }
details.columns > summary h2::after { content: " ›"; color: var(--accent); }
details.columns[open] > summary h2::after { content: ""; }
details.columns[open] > summary { margin-bottom: var(--space-4); }
/* Choices that are links (the dashboard's 6 / 12 / 24 months), looking like .seg buttons */
.seg--links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0.45rem 1rem;
  border: 2px solid var(--line); border-radius: 8px; background: var(--surface); font-weight: 700;
  color: inherit; text-decoration: none; }
.seg--links a[aria-current] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.facts--stack { padding: var(--space-4); }
@media (max-width: 30rem) {
  .facts--stack { grid-template-columns: 1fr; gap: 0 var(--space-4); }
  .facts--stack dd { margin-bottom: var(--space-3); }
}
.stat__value--words { font-size: var(--step-2); }  /* "Not enough figures yet" in place of a number */
/* The runbook (T6.2): a long guide, readable on a phone */
.runbook { max-width: 46rem; min-width: 0; }
.runbook li { min-width: 0; }  /* grid items: let code blocks scroll inside, not widen the page */
.runbook h2 { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.runbook ul, .runbook ol { padding-left: 1.4rem; display: grid; gap: var(--space-2); }
.runbook pre { overflow-x: auto; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3); font-size: var(--step--1); white-space: pre; }
.runbook code { font-size: 0.9em; overflow-wrap: anywhere; }
.runbook pre code { overflow-wrap: normal; }
.runbook-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-1); }
@media (min-width: 56rem) { .split--guide { grid-template-columns: 15rem minmax(0, 1fr); }
  .runbook-toc { position: sticky; top: var(--space-4); align-self: start; } }
.tx-date-inline { display: none; }
.rows details.more { border-top: 0; padding-top: 0; }  /* inside a list row: the row's own line is enough */
@media (max-width: 39.99rem) {
  .tx-table .tx-date { display: none; }
  .tx-date-inline { display: inline; }
  .tx-table th, .tx-table td { padding-inline: var(--space-3); }
}

/* Search matches, highlighted in result snippets */
mark { background: var(--accent-soft); color: var(--ink); font-weight: 700; border-radius: 3px; padding: 0 0.1em; }

/* ---- Forms --------------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); max-width: 36rem; }
.field { display: grid; gap: var(--space-1); }
.field > label, .field > legend, .label { font-weight: 700; }
.hint { font-size: var(--step--1); color: var(--ink-soft); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], input[type="time"],
input[type="number"], select, textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 2px solid var(--line); border-radius: 8px; min-height: var(--tap);
  padding: 0.5rem 0.75rem; width: 100%;
}
textarea { min-height: 8rem; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="file"] { font: inherit; width: 100%; max-width: 100%; min-height: var(--tap); color: var(--ink-soft); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; min-height: var(--tap); margin-right: var(--space-3); padding: 0.45rem 1rem;
  border: 2px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--accent); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--accent-soft); }
.check { display: flex; gap: var(--space-3); align-items: start; min-height: var(--tap); padding-top: 0.35rem; }
.check input { width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; accent-color: var(--accent); flex: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.errorlist { color: var(--danger); font-weight: 700; margin: 0; padding: 0; list-style: none; }

/* Segmented choice built from radios (RSVP, notification channel). No JS. */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* A fixed set of short choices (Off/Email/Text/Both): one row of equal buttons, even on a phone. */
.seg--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 24rem; }
.seg--row label { justify-content: center; padding-inline: 0.25rem; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: var(--tap);
  padding: 0.45rem 1rem; border: 2px solid var(--line); border-radius: 8px;
  background: var(--surface); font-weight: 700; cursor: pointer;
}
.seg input:checked + label { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.seg input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.seg input:disabled + label { opacity: 0.45; cursor: not-allowed; }

/* ---- Progressive disclosure --------------------------------------------- */
details.more { border-top: 1px solid var(--line); padding-top: var(--space-3); }
details.more > summary {
  cursor: pointer; font-weight: 700; color: var(--accent); min-height: var(--tap);
  display: flex; align-items: center; gap: var(--space-2); list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 2px solid currentColor; border-radius: 50%; font-size: 0.9rem; line-height: 1; }
details.more[open] > summary::before { content: "–"; }
details.more > :not(summary) { margin-top: var(--space-3); }

/* ---- Meeting ------------------------------------------------------------- */
.when { display: grid; gap: var(--space-1); }
.when__date { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; line-height: 1.2; }
.attendance { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.attendance > div { border-radius: var(--radius); padding: var(--space-3); background: var(--sunken); }
.attendance strong { display: block; font-size: var(--step-3); line-height: 1; font-variant-numeric: tabular-nums; }
.attendance .noreply { background: var(--gap-bg); border: 2px dashed var(--gap-line); }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.person { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.2rem 0.7rem 0.2rem 0.2rem; border-radius: 999px; background: var(--sunken); }
.avatar {
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--step--1);
}

.agenda { list-style: none; margin: 0; padding: 0; counter-reset: agenda; border-top: 1px solid var(--line); }
.agenda li {
  counter-increment: agenda; display: grid; grid-template-columns: 2.2rem 1fr auto; gap: var(--space-3);
  align-items: start; padding-block: var(--space-3); border-bottom: 1px solid var(--line);
}
.agenda li::before {
  content: counter(agenda); font-weight: 700; font-size: var(--step-1); color: var(--ink-soft);
  font-variant-numeric: tabular-nums; padding-top: 0.1rem;
}
.agenda .move { display: flex; gap: 2px; }
.agenda--readonly li { grid-template-columns: 2.2rem minmax(0, 1fr); }
.attendance--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.decisions { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.agenda .move .btn { width: var(--tap); padding: 0; }
.agenda .stack-sm { display: grid; gap: var(--space-1); }
.agenda li { row-gap: 0; }
/* Done / Change sit on their own row under the item, full width, lined up with the title. */
.agenda__actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin-left: calc(-1 * var(--space-3)); }
.agenda li.is-done .row__title { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---- Getting ready for a meeting (T2.7) ---------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: start; padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step__icon { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; }
.step__icon svg { width: 16px; height: 16px; }
.step--ok .step__icon { background: var(--ok-bg); color: var(--ok); }
.step--todo .step__icon { background: var(--gap-bg); color: var(--gap); border: 2px dashed var(--gap-line); }
.step--info .step__icon { background: var(--accent-soft); color: var(--accent); }
.step p { margin: 0; }
.step a { font-weight: 700; display: inline-block; padding-block: 0.35rem; }
.todo-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); }
.todo-list li { padding-block: 0.2rem; }
.todo-list a { font-weight: 700; line-height: 1.6; }
.reminder-text { white-space: pre-wrap; font: inherit; font-size: var(--step--1); line-height: 1.5; background: var(--sunken); padding: var(--space-3); border-radius: var(--radius); margin: 0; overflow-wrap: anywhere; }

/* ---- Action items with inline status ------------------------------------ */
.actions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.action {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center;
  padding-block: var(--space-3); border-bottom: 1px solid var(--line);
}
.action .row__meta .badge { margin-left: 0.3em; }
.action[data-status="done"] .row__title { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }
@media (max-width: 30rem) { .action { grid-template-columns: minmax(0, 1fr); } }

.status-form { display: flex; gap: var(--space-2); align-items: center; }
.status-select { position: relative; display: inline-flex; }
.status-select select {
  appearance: none; -webkit-appearance: none; width: auto; min-width: 9.5rem;
  padding-right: 2.4rem; font-weight: 700; cursor: pointer;
  border-color: var(--line); background: var(--sunken); color: var(--ink);
}
.status-select svg { position: absolute; right: 0.7rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; color: currentColor; }
.status-select { color: var(--ink); }
.action[data-status="in_progress"] .status-select select { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.action[data-status="in_progress"] .status-select { color: var(--accent); }
.action[data-status="blocked"] .status-select select { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.action[data-status="blocked"] .status-select { color: var(--danger); }
.action[data-status="done"] .status-select select { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.action[data-status="done"] .status-select { color: var(--ok); }
@media (max-width: 30rem) { .status-form, .status-select, .status-select select { width: 100%; } }
/* On a phone, the status picker fills the row with "Change" beside it, not below. */
@media (max-width: 30rem) { .action > .cluster { flex-wrap: nowrap; } .action > .cluster .status-form { flex: 1; min-width: 0; } .status-select select { min-width: 0; } }

/* ---- Chart (server-rendered inline SVG) --------------------------------- */
.chart-scroll { overflow-x: auto; }
.chart { width: 100%; min-width: 34rem; height: auto; display: block; }
.chart text { fill: var(--ink-soft); font-family: var(--font); font-size: 12px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .income { fill: var(--chart-income); }
.chart .spend { fill: var(--chart-spend); }
.chart .nodata { fill: url(#hatch); stroke: var(--gap-line); stroke-dasharray: 4 3; stroke-width: 1.5; }
.chart .hatch-line { stroke: var(--gap-line); stroke-width: 2; }
.chart .hatch-bg { fill: var(--gap-bg); }
.chart .nodata-label { fill: var(--gap); font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--step--1); color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 0.45em; }
.legend i { width: 0.9rem; height: 0.9rem; border-radius: 3px; display: inline-block; }
.legend .k-income { background: var(--chart-income); }
.legend .k-spend { background: var(--chart-spend); }
.legend .k-nodata { background: var(--gap-bg); border: 2px dashed var(--gap-line); }

/* ---- Notices ------------------------------------------------------------- */
.notice { border-radius: var(--radius); padding: var(--space-4); background: var(--accent-soft); display: grid; gap: var(--space-2); }
.notice--dismissable { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.notice--dismissable .btn { margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
.notice--gap { background: var(--gap-bg); border: 2px dashed var(--gap-line); }
.notice--private { background: var(--private-bg); }
.notice--snoozed { background: var(--sunken); border: 1px solid var(--line); }
.icon-line { display: flex; gap: var(--space-2); align-items: flex-start; }
.icon-line > svg { margin-top: 0.1em; }
.icon-lg { width: 22px; height: 22px; flex: none; }
.icon-sm { width: 18px; height: 18px; flex: none; }
.badge svg { width: 14px; height: 14px; }
.notice--danger { background: var(--danger-bg); color: var(--ink); }

/* ---- Capture choices ----------------------------------------------------- */
.choices { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.choice { position: relative; display: grid; gap: var(--space-3); align-content: start; }
.choice__icon { width: 2.75rem; height: 2.75rem; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.choice__icon svg { width: 24px; height: 24px; }
.copybox { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.copybox code {
  font-size: var(--step-0); padding: 0.45rem 0.7rem; background: var(--sunken); border-radius: 8px;
  overflow-wrap: anywhere; user-select: all;
}

/* Photos of paper (T1.6): the camera button, then one row per page taken. */
.file-pick, .photo-pick { display: grid; gap: var(--space-2); }
/* On a phone, photographing is the likely way in, so it comes first. */
@media (max-width: 40rem) { .doc-pick .photo-pick { order: -2; } .doc-pick .or { order: -1; } }
.photo-pick > .btn { justify-self: start; }
.photo-pick input:focus-visible + .btn { outline: 3px solid var(--accent); outline-offset: 2px; }
.pages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pages li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pages img { width: 3rem; height: 4rem; object-fit: cover; border-radius: 6px; background: var(--sunken); flex: none; }
.pages li > span { flex: 1; min-width: 0; font-weight: 700; }

/* ---- Login --------------------------------------------------------------- */
.signin { min-height: 100vh; display: grid; place-items: center; padding-block: var(--space-6);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.signin__card { width: 100%; max-width: 28rem; display: grid; gap: var(--space-5); }
.or { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; color: var(--ink-soft); font-size: var(--step--1); }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); }

/* ---- Messages (Django messages framework) -------------------------------- */
.messages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.messages li { padding: var(--space-3) var(--space-4); border-radius: 8px; background: var(--ok-bg); color: var(--ok); font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .seg label, .shelf a, .site-nav a { transition: background-color 120ms, border-color 120ms, color 120ms; }
}

/* Prototype: briefly highlight what just changed */
.flash { background: var(--ok-bg); box-shadow: 0 0 0 4px var(--ok-bg); border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) { .flash { transition: background-color 600ms, box-shadow 600ms; } }

/* ---- Minutes reading view ----------------------------------------------- */
.minutes {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-6); max-width: 46rem;
}
.minutes > * { min-width: 0; }
@media (min-width: 40rem) { .minutes { padding: var(--space-7) var(--space-7); } }
.minutes__head { display: grid; gap: var(--space-2); border-bottom: 2px solid var(--ink); padding-bottom: var(--space-4); }
.minutes__head .eyebrow { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.minutes__head .eyebrow .badge { text-transform: none; letter-spacing: 0; }
.minutes__head h1 { text-wrap: balance; }
@media (max-width: 30rem) { .minutes__head h1 { font-size: var(--step-2); } }
.minutes__block { display: grid; gap: var(--space-3); }
.minutes__block > * { min-width: 0; }
.minutes__block h2 { font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.minutes__attend { margin: 0; display: grid; gap: var(--space-3); }
.minutes__attend div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); }
@media (max-width: 30rem) { .minutes__attend div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.minutes__attend dt { font-weight: 700; }
.minutes__attend dd { margin: 0; }
.minutes__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.minutes__items h3 { font-size: var(--step-0); margin-bottom: var(--space-1); }
.minutes .decisions li { padding-left: 0.2em; }
@media print {
  .site-header, .tabbar, .site-footer, .back, .minutes ~ .cluster, .minutes ~ details { display: none !important; }
  .minutes { border: 0; padding: 0; max-width: none; }
}

kbd { font: inherit; font-weight: 700; padding: 0 0.35em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }