/* Tally — one stylesheet, no framework, no build step.
 *
 * The look is the approved "admin dashboard" restyle (October 2026): a purple
 * sidebar, a white top bar, number tiles, panels whose titles end in a light
 * italic word, striped progress bars. Its kit's values are measured into the
 * tokens below; every component reads them, so light and dark stay in step.
 *
 * Structure: tokens, then primitives (type, buttons, fields), then the frame
 * (sidebar, top bar, footer), then the furniture (panels, tiles, tables),
 * then the few components that belong to one screen.
 */

/* ── Typeface ────────────────────────────────────────────────────────────── */
/* Public Sans (SIL OFL, fonts/OFL-public-sans.txt), self-hosted: the app runs
   behind a strict CSP and on a LAN, so a font CDN is both blocked and a
   dependency we do not need. The latin subset carries the Portuguese accents
   and the euro sign. */
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/public-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/public-sans-latin-300-italic.woff2") format("woff2"); }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
/* The kit's palette, with one change: its purple, teal, pink and blue are too
   light to read as small text on white (2–4:1). They are kept for fills —
   bars, icon wells, the sidebar — and each has a deeper "ink" step of the
   same hue for text and for buttons that carry text, which reaches 4.5:1. */
:root {
  /* Hues as the kit has them, for fills. */
  --primary: #886ab5;
  --success: #1dc9b7;
  --danger: #fd3995;
  --warning: #ffc241;
  --info: #2196f3;

  --bg: #faf9fc;               /* the content area: white with 4% purple */
  --surface: #ffffff;
  --surface-2: #f8f7fa;        /* table header band, hover */
  --surface-3: #ededf0;        /* tracks, wells */
  --head: #f9f9fa;
  --border: #e8e8ea;
  --border-strong: #dcdbe0;
  --text: #505050;
  --text-strong: #2b2b2b;
  --text-soft: #505050;
  --muted: #686e74;

  --accent: #7d5fad;           /* purple ink: links, the primary button */
  --accent-hover: #6e4e9e;
  --accent-text: #ffffff;
  --accent-soft: #f0ecf6;

  /* The page-level main action ("Export month"): outlined teal. */
  --cta: #0f7c70;
  --cta-hover: #0e6f64;
  --cta-text: #ffffff;
  --go: var(--accent);

  --good: #0d7a6e;             /* teal ink */
  --warn: #8a5f00;             /* amber ink */
  --bad: #d01f74;              /* pink ink */
  --info-ink: #1670c0;
  --good-soft: rgba(29, 201, 183, .14);
  --warn-soft: rgba(255, 194, 65, .22);
  --bad-soft: rgba(253, 57, 149, .12);
  --info-soft: rgba(33, 150, 243, .12);
  --primary-soft: rgba(136, 106, 181, .13);
  --neutral-soft: rgba(33, 37, 41, .08);

  --spine: #563d7c;
  --spine-overlay: linear-gradient(270deg, rgba(33, 150, 243, .18), rgba(0, 0, 0, 0));
  --spine-text: rgba(255, 255, 255, .92);
  --spine-soft: rgba(255, 255, 255, .72);
  --spine-muted: rgba(255, 255, 255, .6);
  --spine-2: rgba(255, 255, 255, .09);
  --spine-line: rgba(255, 255, 255, .08);

  --shadow-sm: 0 0 13px 0 rgba(136, 106, 181, .08);
  --shadow: 0 0 13px 0 rgba(0, 0, 0, .05);
  --shadow-lg: 0 20px 60px rgba(20, 10, 40, .35);

  --radius-sm: 5px;
  --radius: 6px;
  --radius-lg: 6px;
  --radius-nav: 10px;

  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --sidebar-w: 288px;
  --sidebar-w-collapsed: 76px;
  --header-h: 88px;
  --gutter: 32px;
  --gap: 24px;

  color-scheme: light;
}

/* theme-init.js sets data-theme before the first paint: from the switch in
   the top bar if it was used, otherwise from the system. */
:root[data-theme="dark"] {
  --primary: #a58bd0;
  --success: #2fd6c4;
  --danger: #ff5fa9;

  --bg: #1b1a21;
  --surface: #23212b;
  --surface-2: #29272f;
  --surface-3: #33313a;
  --head: #27252e;
  --border: #34323b;
  --border-strong: #3f3c47;
  --text: #c7c3d1;
  --text-strong: #ecebf0;
  --text-soft: #c7c3d1;
  --muted: #a29eac;

  --accent: #bba6dc;
  --accent-hover: #cbbae5;
  --accent-text: #1b1a21;
  --accent-soft: rgba(165, 139, 208, .16);

  --cta: #5be3d4;
  --cta-hover: #8aece1;
  --cta-text: #12201e;

  --good: #5be3d4;
  --warn: #ffcf66;
  --bad: #ff7ab8;
  --info-ink: #7cbcf7;
  --good-soft: rgba(47, 214, 196, .14);
  --warn-soft: rgba(255, 194, 65, .14);
  --bad-soft: rgba(255, 95, 169, .15);
  --info-soft: rgba(33, 150, 243, .18);
  --primary-soft: rgba(165, 139, 208, .16);
  --neutral-soft: rgba(255, 255, 255, .07);

  --spine: #3a2a55;

  --shadow-sm: 0 0 13px 0 rgba(0, 0, 0, .3);
  --shadow: 0 0 13px 0 rgba(0, 0, 0, .25);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Nothing should ever scroll the page sideways; wide content scrolls inside
     its own container. */
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.right { text-align: right; }
.wrap { white-space: normal; }
.full { grid-column: 1 / -1; }

/* Figures line up in columns; that is most of what makes a money table readable. */
.mono, .value, .cell-input, td.right, th.right, .file-amount, .stat .value {
  font-variant-numeric: tabular-nums;
}
.mono { font-family: var(--sans); font-feature-settings: "tnum" 1; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; color: var(--text-strong); text-wrap: balance; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
/* "Reconciliation *Status*": the last word of a panel title, light italic. */
h2 em, h3 em { font-weight: 300; font-style: italic; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Line icons from the sprite in index.html (Lucide, ISC). */
.i {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.i-sm { width: 15px; height: 15px; }

.hint { font-size: .8rem; color: var(--muted); line-height: 1.45; }
.error { color: var(--bad); font-size: .88rem; margin: .25rem 0 0; min-height: 1.2em; }
.empty {
  padding: 40px 16px; text-align: center; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); font-size: .95rem;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); }

input, select, textarea {
  font: inherit; font-size: 14px; color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  min-height: 42px; padding: 8px 12px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 96px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
/* A search field carries its magnifier, as the template's table search does. */
input[type="search"] {
  padding-left: 38px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
input:disabled, select:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--accent); }
select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* The kit's set: light (default), primary (purple, the main action in a row),
   outline-success (teal, the main action of a page), ghost, and small. */
button {
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 18px;
  border: 1px solid rgba(33, 37, 41, .12); border-radius: var(--radius);
  background: linear-gradient(to top, #f8f9fa, #e9ecef); color: rgba(33, 37, 41, .85);
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* Kept at the weight of a bare "button" (:where adds nothing), so any button
   with a class of its own — the search field, the menu button, a menu item —
   keeps its look on hover and in dark mode. */
button:where(:hover) { border-color: rgba(33, 37, 41, .25); color: var(--text-strong); background: linear-gradient(to top, #eef0f3, #e2e6ea); }
:where(:root[data-theme="dark"]) button { background: linear-gradient(to top, #2b2933, #34313d); border-color: rgba(255, 255, 255, .1); color: var(--text); }
:where(:root[data-theme="dark"]) button:where(:hover) { background: linear-gradient(to top, #34313d, #3d3a47); color: var(--text-strong); }
button:active { transform: translateY(.5px); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

button.primary, :root[data-theme="dark"] button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
  box-shadow: 0 2px 6px 0 rgba(136, 106, 181, .5);
}
button.primary:hover, :root[data-theme="dark"] button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }

/* The page's main action. A link can wear it too, for an action that is
   really a place — "Add documents" goes to the inbox. */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--success); border-radius: var(--radius);
  background: transparent; color: var(--cta);
  font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.btn-cta:hover { background: var(--cta); border-color: var(--cta); color: var(--cta-text); text-decoration: none; }
.btn-cta svg { width: 16px; height: 16px; flex: none; }

button.ghost, :root[data-theme="dark"] button.ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
button.ghost:hover { background: var(--primary-soft); color: var(--accent); border-color: transparent; }
button.danger, :root[data-theme="dark"] button.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
button.danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
button.tiny { min-height: 30px; padding: 0 10px; font-size: 13px; gap: 5px; border-radius: var(--radius-sm); }

/* Round icon buttons: the top bar's switches, sign-out. */
.icon-btn, :root[data-theme="dark"] .icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
}
.icon-btn:hover, :root[data-theme="dark"] .icon-btn:hover { color: var(--accent); background: var(--primary-soft); }

/* ── Sign-in ─────────────────────────────────────────────────────────────── */
/* Signed-out pages, as the template's Login / Register / 2FA: a navy page,
   a bar across the top, a glowing ring, and a dark glass card. Always dark,
   whatever the theme, so the tokens are set for dark here and every field
   and link inside follows them. */
.login {
  --text: rgba(255, 255, 255, .88); --text-strong: #fff; --text-soft: rgba(255, 255, 255, .88);
  --muted: rgba(255, 255, 255, .62); --border: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .25);
  --surface: rgba(0, 0, 0, .25); --surface-2: rgba(255, 255, 255, .06); --surface-3: rgba(255, 255, 255, .1);
  --accent: #c2a9ea; --accent-hover: #d6c4f2; --accent-text: #1b1236; --bad: #ff8ac2; --good: #6ff0e1; --warn: #ffd27a;
  --good-soft: rgba(29, 201, 183, .2);
  color-scheme: dark;
  position: relative; overflow: hidden;
  min-height: 100vh; display: grid; place-items: center; padding: 96px 16px 40px;
  background: #141a46; color: var(--text);
}
.auth-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(16px, 5vw, 72px);
}
.auth-brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: #fff; }
.auth-brand .brand-mark { background: rgba(255, 255, 255, .12); }
.auth-links { display: flex; gap: 28px; }
.auth-links a { color: #fff; font-size: 15px; white-space: nowrap; }
.auth-links a:hover { color: #fff; opacity: .8; }
/* The template's ring is a WebGL canvas; this is the same idea in CSS: a
   blurred, slowly turning rainbow ring behind the card. */
.auth-ring {
  position: absolute; z-index: 0; width: min(720px, 90vw); aspect-ratio: 1; top: 50%; left: 50%;
  transform: translate(-8%, -50%); border-radius: 50%;
  background: conic-gradient(from 0deg, #ffffff, #ff8ad8, #9b6cf5, #3fd1f0, #ffffff, #f472b6, #b794f4, #ffffff);
  -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 70%, #000 82%, transparent 92%);
          mask: radial-gradient(closest-side, transparent 64%, #000 70%, #000 82%, transparent 92%);
  filter: blur(14px); opacity: .95;
  animation: auth-ring 36s linear infinite;
}
@keyframes auth-ring { to { transform: translate(-8%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-ring { animation: none; } }
.login-card {
  position: relative; z-index: 1;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, .18); border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);
  padding: 40px 48px;
  width: min(416px, 100%);
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.login-head { display: grid; gap: 10px; margin-bottom: 24px; text-align: center; }
.login-head h1 { font-size: 28px; font-weight: 500; color: #fff; }
.login-head p { color: var(--muted); }
.login input, .login select {
  min-height: 54px; padding: 12px 20px; font-size: 16px; color: #fff;
  background-color: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px;
}
.login input::placeholder { color: rgba(255, 255, 255, .38); }
.login input:focus { border-color: #b69ae0; box-shadow: 0 0 0 3px rgba(136, 106, 181, .35); }
.login input[type="checkbox"], .login input[type="radio"] { min-height: 0; padding: 0; }
.login label { color: #fff; }
.pw-field { position: relative; display: block; }
.pw-field input { width: 100%; padding-right: 56px; }
.pw-reveal {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0;
  background: none; border: 0; border-radius: 6px; color: rgba(255, 255, 255, .6); cursor: pointer;
}
.pw-reveal:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pw-reveal:focus-visible { outline: 2px solid #b69ae0; outline-offset: 0; color: #fff; }
.pw-reveal .i { width: 20px; height: 20px; }
.login-step { display: grid; gap: 16px; }
.login-step button.primary {
  width: 100%; min-height: 54px; font-size: 17px; font-weight: 400; border-radius: 8px;
  background: rgba(136, 106, 181, .75); border-color: #886ab5; color: #fff;
  box-shadow: 0 2px 6px 0 rgba(136, 106, 181, .5);
}
.login-step button.primary:hover { background: rgba(136, 106, 181, .95); color: #fff; }
.login-alt { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.login-alt a { color: #fff; }
/* "Sign in with a code instead" is the template's second way in: an "or"
   divider, then a dark button the width of the card. */
#codelogin-line { display: grid; gap: 16px; }
#codelogin-line::before {
  content: "or"; display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .45); font-size: 12px;
  background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)) left center / calc(50% - 18px) 1px no-repeat,
              linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)) right center / calc(50% - 18px) 1px no-repeat;
  justify-content: center;
}
#codelogin-line a {
  display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 8px;
  background: #212529; border: 1px solid #000; color: #fff; font-size: 17px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .5); text-decoration: none;
}
#codelogin-line a:hover { background: #2c3136; text-decoration: none; }
@media (max-width: 560px) {
  .login-card { padding: 28px 22px; }
  .auth-links { gap: 16px; }
  /* The card is the sign-in, and every other step links back to it. */
  #auth-nav-login { display: none; }
  .auth-ring { width: 120vw; transform: translate(-50%, -50%); }
  @keyframes auth-ring { to { transform: translate(-50%, -50%) rotate(360deg); } }
}
/* The card has its own "Create an account" link below the form. */
@media (max-width: 360px) { #auth-nav-register { display: none; } }
.code-intro { margin: 0; font-size: 14px; color: var(--text); text-align: center; }
.code-input {
  font-size: 1.5rem; letter-spacing: .32em; text-align: center;
  font-family: var(--mono); padding: .55rem .4rem;
}
.checkline { display: flex; gap: .5rem; align-items: flex-start; font-size: 13px; color: var(--text); font-weight: 400; }
.checkline input { margin-top: .2rem; flex: none; }
.checkline-field { gap: .35rem; }
.checkline-field .checkline { font-size: 14px; color: var(--text-strong); }
.ok-note {
  margin: 0; font-size: 13.5px; color: var(--text-strong);
  background: var(--good-soft); border-radius: var(--radius); padding: 10px 14px;
}
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 12px; }
.steps li {
  flex: 1; text-align: center; padding: 5px 4px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.steps li.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.steps li.done { border-color: var(--success); color: var(--good); }

/* Two choices that read as one control: register a company, or join one. */
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.segmented label { display: block; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block; text-align: center; padding: 8px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.segmented input:checked + span { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Password strength: the words carry it, colour only reinforces. */
.meter { display: grid; gap: 6px; }
.meter-track { height: 6px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.meter-fill { height: 100%; width: 6%; background: var(--danger); border-radius: 6px; transition: width .2s ease, background .2s ease; }
.meter-label { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ── Frame: sidebar, top bar, content, footer ───────────────────────────── */
.shell {
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--spine);   /* fills the rail below the sticky sidebar */
  transition: grid-template-columns .2s ease;
}

/* A grid or flex item is min-width:auto by default, so one wide table makes
   the whole page wider than the screen and the body scrolls sideways. Every
   container that can hold a table has to be allowed to shrink; the table's own
   wrapper is what scrolls instead. */
.shell > *, .main, .view, .grid > *, .card, .split > *, .browser-col, .table-wrap { min-width: 0; }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--spine-overlay), var(--spine);
  color: var(--spine-muted);
  overflow: hidden; z-index: 40;
}
.sidebar-brand {
  height: var(--header-h); flex: none;
  display: flex; align-items: center; gap: 12px; padding: 0 22px; color: #fff;
}
.brand-mark {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand-chip {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .28); color: rgba(255, 255, 255, .85);
}

.sidebar-filter { padding: 4px 22px 8px; flex: none; }
.sidebar-filter input {
  height: 42px; min-height: 0; padding: 0 14px; font-size: 14px;
  color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .05);
  border: 1px dashed rgba(255, 255, 255, .3); border-radius: var(--radius);
}
.sidebar-filter input::placeholder { color: rgba(255, 255, 255, .5); }
.sidebar-filter input:hover { border-color: rgba(255, 255, 255, .45); }
.sidebar-filter input:focus { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); box-shadow: none; }

.nav { flex: 1; overflow-y: auto; padding: 4px 0 28px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav-title {
  padding: 22px 24px 8px; white-space: nowrap;
  font-size: 11.2px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--spine-muted);
}
.nav-link {
  display: flex; align-items: center; gap: 12px;
  height: 46px; margin: 1px 24px; padding: 0 10px;
  border-radius: var(--radius-nav);
  color: var(--spine-soft); font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-link:hover { color: var(--spine-text); background: rgba(255, 255, 255, .04); text-decoration: none; }
.nav-link.active { color: #fff; background: var(--spine-2); }
.nav-link .label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-link .i { opacity: .75; }
.nav-link.active .i, .nav-link:hover .i { opacity: 1; }

/* A section with sub-pages: the caret turns when it is open; the sub-pages
   hang off a thin line, the current one in a soft pill with a dot. */
.caret { margin-left: auto; opacity: .6; transition: transform .15s ease; }
.has-sub.open > .nav-link .caret { transform: rotate(90deg); }
.has-sub.open > .nav-link.active { background: transparent; }
.nav-sub { display: none; margin: 2px 24px 6px 36px !important; padding: 0 0 0 0 !important; border-left: 1px solid rgba(255, 255, 255, .14); }
.has-sub.open > .nav-sub { display: block; }
.nav-sublink {
  display: flex; align-items: center; gap: 8px; height: 40px; margin: 1px 0 1px 8px; padding: 0 12px;
  border-radius: var(--radius-nav); color: var(--spine-muted); font-size: 14px; font-weight: 500;
  white-space: nowrap; text-decoration: none;
}
.nav-sublink:hover { color: var(--spine-text); background: rgba(255, 255, 255, .04); text-decoration: none; }
.nav-sublink.active { color: #fff; background: var(--spine-2); }
.nav-sublink.active::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--warning); }
.nav-badge, .pill {
  font-size: 10px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 4px;
  background: var(--danger); color: #fff;
}
.pill:empty { display: none; }
.nav-empty { display: none; margin: 0; padding: 16px 26px; font-size: 13px; }
.nav.is-filtered-empty .nav-empty { display: block; }

.avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--info));
}

/* Folded to icons (desktop, remembered per browser). */
.shell.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
.shell.is-collapsed .brand-name, .shell.is-collapsed .brand-chip, .shell.is-collapsed .sidebar-filter,
.shell.is-collapsed .nav-title, .shell.is-collapsed .nav-link .label, .shell.is-collapsed .nav-badge,
.shell.is-collapsed .nav-sub, .shell.is-collapsed .caret { display: none; }
.shell.is-collapsed .sidebar-brand { justify-content: center; padding-inline: 0; }
.shell.is-collapsed .nav-link { justify-content: center; margin-inline: 12px; padding: 0; }
.shell.is-collapsed .nav-section + .nav-section { border-top: 1px solid var(--spine-line); margin-top: 8px; padding-top: 8px; }

/* The main column: top bar, the page, the footer. */
.main { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }

.header {
  position: sticky; top: 0; z-index: 30;
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px; padding: 0 var(--gutter);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.collapse-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 28px; min-height: 0; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 4px; background: transparent; color: var(--muted);
}
.collapse-btn:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
.shell.is-collapsed .collapse-btn .i { transform: rotate(180deg); }
.collapse-btn .show-sm { display: none; }

/* The search field is the command palette: a button dressed as a field. */
.header-search {
  flex: 1; min-width: 0; justify-content: flex-start;
  min-height: 40px; padding: 0 0 0 4px; border: 0; background: transparent; color: var(--muted);
  font-size: 15px; font-weight: 400;
}
.header-search:hover { color: var(--text-strong); border: 0; background: transparent; }
.header-search-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-tools { display: flex; align-items: center; gap: 10px; }
.header-tools .icon-btn { position: relative; }
.header-tools .icon-btn .i { width: 21px; height: 21px; stroke-width: 1.5; }
/* The count on the bell: a pink pill with a ring the colour of the bar. */
.icon-btn .dot {
  position: absolute; top: -2px; right: -4px; min-width: 20px; height: 18px; padding: 0 5px;
  border-radius: 20px; box-shadow: 0 0 0 2px var(--surface);
  display: grid; place-items: center; font-size: 10px; line-height: 1;
}
.icon-btn .dot:empty { display: none; }
.avatar-btn { min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; margin-left: 4px; }
.avatar-btn:hover { border: 0; background: transparent; }
.avatar-btn .avatar { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border-strong); }

.menu-wrap { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 280px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(20, 10, 40, .14);
}
.dropdown[hidden] { display: none; }
.dropdown-head { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-strong); }
.user-head { display: flex; gap: 12px; align-items: center; background: var(--spine-overlay), var(--spine); color: #fff; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; }
.user-head .who { display: grid; min-width: 0; line-height: 1.35; }
.user-head .who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.user-head .who small { font-size: 12px; color: rgba(255, 255, 255, .72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-list { padding: 6px; display: grid; }
.dropdown-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text);
  font-size: 14px; font-weight: 500; text-decoration: none; justify-content: flex-start;
}
.dropdown-item:hover { background: var(--primary-soft); color: var(--accent); text-decoration: none; border: 0; }
.dropdown-item .i { color: var(--muted); }
.dropdown-item:hover .i { color: var(--accent); }
.dropdown-empty { margin: 0; padding: 10px; font-size: 13.5px; color: var(--muted); }

.view { flex: 1; padding: 24px var(--gutter) 40px; background: var(--bg); }

.footer-end { display: inline-flex; align-items: center; gap: 12px; }
.footer-end .icon-btn { width: 32px; height: 32px; color: var(--accent); }
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px var(--gutter);
  background: var(--surface); border-top: 1px solid var(--border);
  font-size: 13.5px; font-weight: 500; color: var(--text);
}
.support-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none;
}
.support-link:hover { color: var(--accent); text-decoration: none; }
.support-ico { width: 16px; height: 16px; flex: none; }
.support-card { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }

.scrim { display: none; }

/* The page header: an uppercase title, a breadcrumb, and the page's actions. */
.page-head {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--gap);
}
.page-head > div:first-child { display: grid; gap: 2px; min-width: 0; }
.page-head h2 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--text); margin-bottom: 4px; }
.page-head p { margin: 10px 0 0; font-size: 14px; font-style: italic; font-weight: 500; color: var(--text); max-width: 80ch; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.page-head .actions select { width: auto; }
.breadcrumb { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; padding: 0 8px; color: var(--muted); opacity: .7; }
.breadcrumb [aria-current] { color: var(--text); }

/* ── Panels and tiles ────────────────────────────────────────────────────── */
/* A card is the kit's panel: white, a hairline, a soft shadow. A card whose
   first child is its title gets the panel header — a band with a rule under
   it, "Title *Italic*" (the italic is added by app.js). */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px;
}
.card h3 { margin-bottom: 12px; font-size: 16px; font-weight: 600; color: var(--text); }
.card > h3:first-child, .card > .card-head:first-child {
  min-height: 48px; margin: -16px -16px 16px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); line-height: 1.5;
}
/* A title with a note or a control beside it. (Only this one is flex: in a
   plain title the gap would pull the italic word away from the rest.) */
.card > .card-head:first-child { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-toolbar { display: inline-flex; gap: 8px; margin-left: auto; }
.panel-btn, :root[data-theme="dark"] .panel-btn {
  width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center; background: transparent; box-shadow: none;
  border: 1.5px solid currentColor;
}
.panel-btn .i { width: 12px; height: 12px; stroke-width: 2.5; }
.panel-btn.fold, :root[data-theme="dark"] .panel-btn.fold { color: var(--success); }
.panel-btn.full, :root[data-theme="dark"] .panel-btn.full { color: var(--warning); }
.panel-btn:hover, :root[data-theme="dark"] .panel-btn:hover { background: color-mix(in srgb, currentColor 15%, transparent); border-color: currentColor; color: inherit; }
.panel-btn.fold:hover { color: var(--success); }
.panel-btn.full:hover { color: var(--warning); }
/* Folded to its title. */
.card.is-folded > :not(:first-child) { display: none !important; }
.card.is-folded > .card-head:first-child { border-bottom: 0; margin-bottom: -16px; }
/* Full screen: the panel over everything, the page dimmed behind. */
.card.is-full {
  position: fixed; inset: 16px; z-index: 90; overflow: auto; margin: 0 !important;
  box-shadow: 0 0 0 100vmax rgba(20, 14, 30, .45), var(--shadow-lg);
}
body.panel-full { overflow: hidden; }
.card > .card-head:first-child h3 { margin: 0; flex: 1; }
/* A table straight under a panel's title runs edge to edge, as in the kit. */
.card > h3:first-child + .table-wrap, .card > .card-head:first-child + .table-wrap {
  margin: -16px -16px -16px; border: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none;
}

.grid { display: grid; gap: var(--gap); }
.two-col { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: var(--gap); }
.grid + .grid, .card + .card, .card + .grid, .grid + .card { margin-top: 0; }

/* How much of the bank is explained — the dashboard's lead, as the
   template's Control Center has it: a ring gauge on a sunk side, meters on
   the other. */
.coverage { margin-bottom: var(--gap); }
.coverage-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: -16px; }
.coverage-gauge {
  display: flex; gap: 20px; align-items: center; padding: 20px;
  background: rgba(0, 0, 0, .025); border-right: 1px solid var(--border);
}
:root[data-theme="dark"] .coverage-gauge { background: rgba(255, 255, 255, .025); }
.coverage-gauge .sub { font-size: 13px; color: var(--muted); }
.coverage-gauge .coverage-cta, .coverage-gauge .badge { margin-top: 12px; }
.ring {
  --size: 116px;
  width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--neutral-soft) 0);
}
.ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.ring span { position: relative; font-size: 26px; font-weight: 500; color: var(--text-strong); }
.coverage-meters { padding: 20px; display: grid; gap: 18px; align-content: center; }
.meter-row-block { display: block; color: var(--text); text-decoration: none; }
a.meter-row-block:hover { text-decoration: none; color: var(--accent); }
.meter-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 14px; }
.meter-row b { font-weight: 500; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.progress { height: 8px; background: rgba(33, 37, 41, .07); border-radius: 6px; overflow: hidden; }
:root[data-theme="dark"] .progress { background: rgba(255, 255, 255, .08); }
.progress > span {
  display: block; height: 100%; border-radius: 6px; background-color: var(--primary);
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
.progress > span.is-info { background-color: var(--info); }
.progress > span.is-success { background-color: var(--success); }
.progress > span.is-danger { background-color: var(--danger); }
@media (max-width: 900px) {
  .coverage-split { grid-template-columns: 1fr; }
  .coverage-gauge { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* Figures with bars beside the page title (Control Center's "EXPENSES"). */
.head-stats { display: flex; gap: 0; margin-left: auto; }
.head-stat { display: flex; align-items: flex-end; gap: 12px; padding: 0 20px; }
.head-stat + .head-stat { border-left: 1px solid var(--border); }
.head-stat small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.head-stat strong { font-size: 18px; font-weight: 500; color: var(--accent); white-space: nowrap; }
.head-stat strong.is-danger { color: var(--bad); }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 34px; }
.spark i { display: block; width: 6px; background: var(--primary); }
.spark.is-danger i { background: var(--danger); }
@media (max-width: 1279px) { .head-stats { display: none; } }
.coverage-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.coverage .label { font-size: 14px; color: var(--muted); }
.coverage-value { font-size: 20px; font-weight: 500; line-height: 1.2; margin: 6px 0 2px; color: var(--text-strong); }
.coverage-cta {
  display: grid; justify-items: end; gap: 2px; text-align: right; text-decoration: none;
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--warn-soft); color: var(--warn);
}
.coverage-cta strong { font-size: 17px; font-weight: 600; }
.coverage-cta span { font-size: 12.5px; color: var(--text); }
.coverage-cta:hover { background: color-mix(in srgb, var(--warning) 30%, transparent); text-decoration: none; color: var(--warn); }
/* The kit's striped bar. */
.coverage-bar, .bar-row .track {
  display: block; height: 8px; margin: 14px 0 2px;
  background: var(--neutral-soft); border-radius: 6px; overflow: hidden;
}
.coverage-bar .fill, .bar-row .fill {
  display: block; height: 100%; border-radius: 6px; background-color: var(--primary);
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
.section-head {
  margin: 8px 0 12px; font-size: 16px; font-weight: 600; color: var(--text);
}

/* The archive card on an invoice. */
.archive-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 10px 16px; }
.archive-fact .label { font-size: 12.5px; color: var(--muted); }

/* A bank movement beside the invoice it settled: the line on the left, the
   figure and the statement on the right. */
.recon-row {
  display: flex; gap: 6px 16px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border);
}
/* The description side gives way first; the figure drops below it on a phone
   instead of pushing the page wider than the screen. */
.recon-row > div:first-child { flex: 1 1 14rem; min-width: 0; }
.recon-row:first-of-type { border-top: 0; }
.recon-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.recon-side { text-align: right; display: grid; gap: 2px; justify-items: end; flex: none; }

/* Whose books these are. */
.company-card {
  display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: center;
  margin-bottom: var(--gap);
}
.company-id h3 { margin: 0; font-size: 16px; }
.company-id .sub { margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--muted); }
.company-fields { display: flex; flex-wrap: wrap; gap: 16px 30px; margin-left: auto; }
.company-field .label { font-size: 12.5px; color: var(--muted); }
.company-value { font-size: 14px; font-weight: 600; color: var(--text-strong); margin-top: 2px; }
@media (max-width: 640px) {
  .company-fields { margin-left: 0; gap: 12px 22px; }
}

/* A tile is the kit's KPI card: a muted label, the figure under it. */
.stats > .card { box-shadow: var(--shadow-sm); }
.stat { display: grid; gap: 2px; padding: 16px; align-content: start; position: relative; min-height: 96px; }
.stat .label { color: var(--muted); font-size: 14px; font-weight: 400; margin-bottom: 8px; }
.stat .value { font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--text-strong); }
.stat .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* Every tile carries an icon in a round well on its right (added by
   app.js from the tile's label); a tile that is a way in is the link. */
.stat, .statecard { padding-right: 80px !important; }
.kpi-icon {
  position: absolute; top: 50%; right: 16px; width: 48px; height: 48px; margin-top: -24px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--neutral-soft); color: var(--accent);
}
.kpi-icon .i { width: 22px; height: 22px; }
.stat .label, .statecard-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.stat, a.statecard { color: var(--text); text-decoration: none; transition: border-color .15s ease; }
a.stat:hover, a.statecard:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
a.stat:hover .kpi-icon, a.statecard:hover .kpi-icon { background: var(--primary-soft); }
.stat.good .value { color: var(--good); }
.stat.warn .value { color: var(--warn); }
.stat.bad  .value { color: var(--bad); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 10px 14px; text-align: left; white-space: nowrap; }
/* The template's table: a white header in bold with a 2px rule under it,
   rows striped, a hover that lifts the row. */
thead th {
  background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--text-strong);
  position: sticky; top: 0; z-index: 1;
  border-bottom: 2px solid var(--border-strong);
}
tbody tr { border-top: 1px solid var(--border); }
tbody tr:first-child { border-top: 0; }
/* Solid, not see-through, so the pinned last column can take the row's
   colour and still cover what scrolls under it. */
tbody tr:nth-child(odd) { background: #f9f9f9; }
:root[data-theme="dark"] tbody tr:nth-child(odd) { background: #26242d; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
tbody tr.clickable { cursor: pointer; }
tbody tr.muted td { color: var(--muted); }
td.wrap { white-space: normal; max-width: 34ch; }
.card .table-wrap { box-shadow: none; }
tfoot td { font-weight: 600; color: var(--text-strong); background: var(--surface-2); border-top: 1px solid var(--border-strong); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
/* The template's badges: solid colour, white text, small square corners.
   The same state always wears the same colour — settled teal, suggested
   purple, waiting amber, needing a decision pink, informational blue, no
   document needed grey. The fills are a step deeper than the template's so
   white text keeps 4.5:1; amber carries dark text, as in the template. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 4px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: #6c757d; color: #fff;
}
.badge.PAID           { background: #0d7f72; color: #fff; }
.badge.suggested      { background: #7d5fad; color: #fff; }
.badge.TO_PAY, .badge.review { background: var(--warning); color: #2b2b2b; }
.badge.DISPUTED, .badge.OVERDUE, .badge.flag { background: #d6246f; color: #fff; }
.badge.SCHEDULED, .badge.PARTIALLY_PAID { background: #1670c0; color: #fff; }
.badge.CANCELLED      { background: #6c757d; color: #fff; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
/* A category: neutral label, its own colour in the dot. Category colours are
   chosen by people and are not all legible as text. */
.cat-chip {
  display: inline-flex; align-items: center; padding: 3px 8px 3px 6px;
  border-radius: 4px; background: var(--neutral-soft);
  font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4;
}

/* A document in a list: a round file badge, then its name as a link and a
   quieter line under it. */
.doc-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The name gives way (ellipsis, full name on the invoice) before the figures do. */
td:has(> .doc-cell) { min-width: 13rem; max-width: 17rem; }
.doc-ico {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--neutral-soft); color: var(--accent);
}
.doc-ico svg { width: 17px; height: 17px; }
.doc-name { display: grid; min-width: 0; line-height: 1.35; }
.doc-name a, .doc-name .doc-title { color: var(--text-strong); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name a:hover { color: var(--accent); }
.doc-name .sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-cell .badge + .badge { margin-left: .25rem; }
/* Row actions as icons: open, download. Each keeps a 32px target. */
.row-icons { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; }
.row-icons .icon-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none;
}
.row-icons .icon-btn:hover { background: var(--primary-soft); color: var(--accent); text-decoration: none; }
.row-icons .icon-btn svg { width: 17px; height: 17px; }

/* ── Notices ─────────────────────────────────────────────────────────────── */
/* The kit's alerts: a soft fill of the state's colour, the text in full ink. */
.notice {
  background: #fff3da; color: #6b4900; border: 1px dashed #f3cf7c;
  padding: 16px; border-radius: var(--radius); margin-bottom: var(--gap); font-size: 14px;
}
.notice.bad { background: #ffd0e6; color: #8a0242; border: 1px solid #fe9ecb; }
.notice.ok  { background: #c9f6f0; color: #0a433d; border: 1px solid #63e9db; }
:root[data-theme="dark"] .notice { background: rgba(255, 194, 65, .12); color: #ffd98a; border-color: rgba(255, 194, 65, .35); }
:root[data-theme="dark"] .notice.bad { background: rgba(253, 57, 149, .14); color: #ff9fcb; border-color: rgba(253, 57, 149, .4); }
:root[data-theme="dark"] .notice.ok { background: rgba(29, 201, 183, .14); color: #8ff0e4; border-color: rgba(29, 201, 183, .4); }

/* ── Filters, toolbars, forms ────────────────────────────────────────────── */
/* Filters sit on the page itself, a row of controls above the table, not in
   a box of their own. */
.filters {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: end;
  margin-bottom: 1.1rem;
}
.filters label { min-width: 135px; }
/* A select is as wide as its longest option; a long supplier name made one
   fill the row. */
.filters select { max-width: 15rem; }
.filters .grow { flex: 1 1 230px; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .9rem 0; }
/* Form controls are full width by default, which is right in a form and wrong
   in a row of filters, where it pushes each one onto its own line. */
.toolbar select, .toolbar input { width: auto; min-width: 10.5rem; }

/* A link at sub-text size: small enough to sit under a row's main value,
   still obviously a link. Used for opening the document behind a suggestion,
   which is the thing you have to read before confirming it. */
.sub-link {
  font-size: .78rem; font-weight: 500; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.sub-link:hover { text-decoration-color: var(--accent); }
/* Filter chips: a row of links that read as one control. Used by the
   reconciliation table, where the filter has to survive being bookmarked, so
   each choice is a real href rather than a button holding state. */
/* The template's pills: the choice made is solid purple, the others plain
   purple words. */
.chip {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border: 0; border-radius: var(--radius);
  font-size: 14px; font-weight: 400; color: var(--accent);
  text-decoration: none; background: transparent; white-space: nowrap;
}
.chip:hover { background: var(--primary-soft); color: var(--accent); text-decoration: none; }
.chip.on { background: var(--accent); color: var(--accent-text); text-decoration: none; }
.toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 .3rem; }
.nowrap { white-space: nowrap; }

/* Where a table is wider than the screen and scrolls sideways, its last
   column — which is where every table here keeps its buttons and download
   links — stays pinned to the right edge. On a phone this kept the export
   downloads, Remove, Suspend and Deactivate out of reach behind a sideways
   scroll nothing hinted at. The reconciliation table stacks instead. */
.table-wrap table:not(.recon-table) td:last-child:has(button, a, input, select),
.table-wrap table:not(.recon-table):has(td:last-child :is(button, a, input, select)) th:last-child {
  position: sticky; right: 0; z-index: 1; background: var(--surface);
}
.table-wrap table:not(.recon-table) tbody tr:nth-child(odd) td:last-child:has(button, a, input, select) { background: inherit; }
.table-wrap table:not(.recon-table):has(td:last-child :is(button, a, input, select)) th:last-child { background: var(--surface); z-index: 2; }
.table-wrap table:not(.recon-table) tbody tr:hover td:last-child:has(button, a, input, select) { background: var(--surface-2); }
@media (max-width: 960px) {
  /* The edge of the pinned column, so it reads as lying over the rest. */
  .table-wrap table:not(.recon-table) td:last-child:has(button, a, input, select),
  .table-wrap table:not(.recon-table):has(td:last-child :is(button, a, input, select)) th:last-child {
    box-shadow: -10px 0 10px -10px hsl(215 30% 20% / .28);
  }
}

/* The four states, counted for the period, each one a filter. */
.statecards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.statecard {
  position: relative;
  display: grid; gap: 2px; padding: 16px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: border-color .15s ease, background .15s ease;
}
.statecard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.statecard-label { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.statecard-value { font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--text-strong); }
.statecard-sub { font-size: 12.5px; color: var(--muted); }
.statecard.warn .statecard-value { color: var(--warn); }
.statecard.good .statecard-value { color: var(--good); }
@media (max-width: 640px) {
  /* On a phone the four sit in a 2x2 block, compact, so the movements start
     on the first screen. */
  .statecards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .statecard { padding: 12px; }
  .statecard { padding-right: 68px !important; }
  .statecard .kpi-icon { width: 40px; height: 40px; margin-top: -20px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .statecard { transition: none; } }

/* The reconciliation row. Its actions are the point of the screen, so the
   columns give way to them: the description and the explanation wrap, and the
   buttons stack rather than push the table wider than the card. */
td.movement-desc { max-width: 26ch; }
td.explained-by { max-width: 30ch; }
td.row-actions { white-space: normal; min-width: 9.5rem; }
td.row-actions > button { margin: 0 .25rem .25rem 0; }
.gap { color: var(--warn); }

/* Narrower than the six columns can sit side by side — a small laptop with the
   sidebar open, a tablet, a phone — each movement becomes a block: date,
   description and amount on top, what explains it below, then its state and
   the buttons. Nothing is ever reached by scrolling sideways.
   Measured on the table's own box, not the window: the sidebar's width (open,
   folded, a drawer) changes how much room the table has at the same window
   size, and a window-width rule left the buttons past the edge at 1280px. */
.table-wrap:has(> .recon-table) { container-type: inline-size; }
@container (max-width: 1000px) {
  .recon-table thead { display: none; }
  .recon-table, .recon-table tbody { display: block; width: 100%; }
  .recon-table tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .25rem .8rem; align-items: start;
    padding: .75rem .9rem; border-top: 1px solid var(--border);
  }
  .recon-table tbody tr:first-child { border-top: 0; }
  .recon-table td { display: block; padding: 0; border: 0; max-width: none; white-space: normal; }
  .recon-table td:nth-child(1) { grid-column: 1; color: var(--muted); font-size: .82rem; }
  .recon-table td:nth-child(2) { grid-column: 2; }
  .recon-table td:nth-child(3) { grid-column: 3; }
  .recon-table td:nth-child(4) { grid-column: 1 / -1; padding-top: .15rem; }
  /* Nothing explains it yet: in a table the dash marks an empty cell, stacked
     it is just a line with a dash on it. (Not ".empty", which is the dashed
     empty-state box and gave these cells its padding and border.) */
  .recon-table td.explained-by.nothing { display: none; }
  .recon-table td:nth-child(5) { grid-column: 1 / 3; align-self: center; }
  .recon-table td:nth-child(6) { grid-column: 3; justify-self: end; text-align: right; min-width: 0; }
}
@container (max-width: 500px) {
  /* On a phone the buttons get their own line, full width, easy to tap. */
  .recon-table td:nth-child(5) { grid-column: 1 / -1; }
  .recon-table td:nth-child(6) { grid-column: 1 / -1; justify-self: stretch; text-align: left; }
  .recon-table td.row-actions > button { min-height: 40px; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: .8rem; }

/* ── Sub-navigation ──────────────────────────────────────────────────────── */
.subnav { display: flex; gap: .1rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.subnav a {
  color: var(--text); padding: 10px 20px; font-size: 14px; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
}
.subnav a:hover { color: var(--text); text-decoration: none; }
.subnav a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ── Bars and the trend chart ────────────────────────────────────────────── */
.bars { display: grid; gap: .5rem; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem; align-items: center; font-size: .86rem; }
/* Both are <span>s from the view code, and height does not apply to an inline
   box — without display:block the coloured fill has never been visible. */
.bar-row .track { grid-column: 1 / -1; margin: 2px 0 6px; }
.bar-row .fill { min-width: 2px; }
.trend { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding-top: .5rem; }
.trend .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3rem; height: 100%; }
.trend .bar { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .5; }
.trend .col:last-child .bar { opacity: 1; }
.trend .col:hover .bar { opacity: .9; }
.trend .tick { font-size: .62rem; color: var(--muted); writing-mode: vertical-rl; }

/* ── Invoice review: document beside the figures ─────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: var(--gap); align-items: start; }
.preview {
  position: sticky; top: 1rem; height: calc(100vh - 6rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
}
.preview iframe, .preview img { width: 100%; height: 100%; border: 0; object-fit: contain; background: var(--surface-2); }

/* ── Capture: photograph a receipt ───────────────────────────────────────── */
.capture { display: grid; gap: .8rem; margin-bottom: 1.25rem; }
.capture-drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: 1.5rem 1rem; text-align: center; background: var(--surface);
  display: grid; gap: .8rem; justify-items: center;
  transition: border-color .15s ease, background .15s ease;
}
.capture-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.capture-actions { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; align-items: end; }
.capture-btn { min-height: 44px; padding: .6rem 1.1rem; font-size: .95rem; font-weight: 600; border-radius: var(--radius); }
.capture-btn-icon { font-size: 1.1rem; line-height: 1; }
.capture-status { margin: 0; max-width: 48ch; }
.capture-queue { display: grid; gap: .45rem; }
.capture-item {
  display: grid; grid-template-columns: 52px 1fr auto; gap: .7rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .45rem .55rem;
}
.capture-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.capture-thumb-file { display: grid; place-items: center; font-size: 1.4rem; }
.capture-item-text { display: grid; gap: .05rem; min-width: 0; }
.capture-item-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .89rem; font-weight: 500; }
.capture-remove { min-height: 34px; min-width: 34px; }
.capture-bar { display: flex; gap: .55rem; align-items: center; }
.capture-send { min-height: 44px; flex: 1; font-size: .95rem; }
.capture-send:disabled { flex: 0 1 auto; }
.capture-results { display: grid; gap: .45rem; }
.capture-results-head { margin: .4rem 0 0; }
.capture-result {
  display: grid; grid-template-columns: 1.7rem 1fr; gap: .6rem; align-items: start;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .6rem .75rem; background: var(--surface); text-decoration: none; color: var(--text);
}
a.capture-result:hover { background: var(--surface-2); text-decoration: none; }
.capture-result-mark {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .82rem; color: #fff; background: var(--muted);
}
.capture-result.ok .capture-result-mark { background: var(--good); }
.capture-result.review .capture-result-mark { background: var(--warn); }
.capture-result.bad .capture-result-mark { background: var(--bad); }
.capture-result-body { display: grid; gap: .1rem; min-width: 0; }
.capture-result-note { color: var(--warn); font-size: .8rem; font-weight: 600; }
.capture-tips ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; display: grid; gap: .3rem; }

.fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 35;
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent); color: var(--accent-text);
  border-radius: 999px; padding: .8rem 1.15rem; font-weight: 600; font-size: 14px;
  text-decoration: none; box-shadow: var(--shadow-lg); min-height: 48px;
}
.fab:hover { background: var(--accent-hover); color: var(--accent-text); text-decoration: none; }
/* The button is for photographing a receipt on a phone. Where the sidebar is
   visible it duplicates Inbox and sat on top of table rows, covering them. */
@media (min-width: 992px) { .fab { display: none; } }
.fab-ico { width: 20px; height: 20px; flex: none; }
@media (max-width: 991px) {
  /* Room below the last thing on the page, so it can always be scrolled clear
     of the button instead of sitting underneath it. */
  #view { padding-bottom: 5.5rem; }
}
@media (max-width: 520px) {
  /* A round button on a phone: the label made it wide enough to cover a
     row's buttons. The label stays for screen readers. */
  .fab { padding: 0; width: 56px; height: 56px; justify-content: center; }
  .fab .fab-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* A card whose title has a note beside it. */
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.card-head h3 { margin: 0; }
/* Month-end files: each cell is a state, then what is there or a way to add it. */
table.month-end td { vertical-align: middle; }
table.month-end td.wrap { max-width: none; }
.month-file { display: inline-flex; align-items: center; gap: .2rem; margin-right: .5rem; }
.month-file .sub { font-size: .74rem; color: var(--muted); }
/* Three short columns, every one of them the point: the pinned-last-column
   rule for wide tables would lay the sales cell over the bank one. On a
   phone each month becomes a block instead. */
.table-wrap table.month-end td:last-child,
.table-wrap table.month-end:not(.recon-table) td:last-child:has(button, a, input, select) {
  position: static; box-shadow: none; background: transparent;
}
.table-wrap table.month-end th:last-child,
.table-wrap table.month-end:not(.recon-table):has(td:last-child :is(button, a, input, select)) th:last-child {
  position: static; box-shadow: none; background: var(--surface);
}
.table-wrap table.month-end th:last-child { background: var(--head); }
@media (max-width: 640px) {
  table.month-end thead { display: none; }
  table.month-end, table.month-end tbody { display: block; }
  table.month-end tr { display: grid; gap: .35rem; padding: .75rem .85rem; }
  table.month-end td { display: block; padding: 0; }
  table.month-end td:nth-child(2)::before { content: "Bank statement · "; color: var(--muted); font-size: .8rem; }
  table.month-end td:nth-child(3)::before { content: "Sales file · "; color: var(--muted); font-size: .8rem; }
}

/* ── Movements without a reference (dashboard) ───────────────────────────── */
.card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px -16px -16px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px;
}
.unreferenced-table td.row-actions { white-space: nowrap; text-align: right; width: 1%; }
.unreferenced-table td.movement-desc { max-width: 46ch; }
.unreferenced-table .sub { font-size: 12.5px; color: var(--muted); }
.amount-in { color: var(--good); }
.unreferenced-table tr.is-set-aside td:not(.row-actions) { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
/* On a phone each movement is a block: date and amount, the words, the buttons. */
@media (max-width: 640px) {
  .unreferenced-table thead { display: none; }
  .unreferenced-table, .unreferenced-table tbody { display: block; }
  .unreferenced-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; }
  .unreferenced-table td { display: block; padding: 0; max-width: none !important; }
  .unreferenced-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .unreferenced-table td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .unreferenced-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .unreferenced-table td.row-actions { grid-column: 1 / -1; grid-row: 3; text-align: left; white-space: normal; }
  .table-wrap table.unreferenced-table:not(.recon-table) td:last-child:has(button, a, input, select) { position: static; box-shadow: none; background: transparent; }
}

/* A suggestion for a movement: what it probably is, and what it needs. */
.explain { margin-top: 4px; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.explain strong { font-weight: 600; color: var(--accent); }
.explain-mark { color: var(--accent); margin-right: 4px; }
.explain-needs { color: var(--muted); }
.explain.no_document .explain-needs { color: var(--good); font-weight: 600; }
.explained-by .explain { margin-top: 0; }

/* Expense watch: the template's task list — an icon well, the line, a link. */
.watch-list { list-style: none; margin: -16px; padding: 0; }
.watch-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.watch-item:last-child { border-bottom: 0; }
.watch-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.watch-item.warn .watch-icon { background: var(--warn-soft); color: var(--warn); }
.watch-item.info .watch-icon { background: var(--info-soft); color: var(--info-ink); }
.watch-title { font-weight: 500; color: var(--text-strong); line-height: 1.35; }
.watch-detail { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
/* Worth knowing: tips from the books beside the deadlines ahead. */
.tips { container-type: inline-size; }
.tips-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 28px; margin: -16px; }
.tips-layout > section { padding: 16px; min-width: 0; }
.tips-layout > section + section { border-left: 1px solid var(--border); }
@container (max-width: 760px) {
  .tips-layout { grid-template-columns: minmax(0, 1fr); }
  .tips-layout > section + section { border-left: 0; border-top: 1px solid var(--border); }
}
.tips-sub { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tip-list { margin: 0 -16px; }
.tip-list .watch-item { align-items: start; }
.tip-none { padding: 12px 16px; list-style: none; }
.tip-items { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; }
.tip-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
.law-ref { font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; max-width: 100%; overflow-wrap: anywhere; }
a.law-ref:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.vat-filing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; font-size: 13px; }
.vat-filing select { width: auto; min-height: 32px; padding: 0 28px 0 10px; font-size: 13px; }
.due-list { list-style: none; margin: 0; padding: 0; display: grid; }
.due-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.due-item:last-child { border-bottom: 0; }
.due-date { display: grid; justify-items: center; align-content: start; align-self: start; padding: 6px 0; border-radius: 8px; background: var(--primary-soft); color: var(--accent); line-height: 1.1; }
.due-date strong { font-size: 18px; font-weight: 600; }
.due-date span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.due-date small { font-size: 10.5px; color: var(--muted); }
.due-item .watch-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.due-item .pill { font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.due-item .pill.soon { background: var(--warn-soft); color: var(--warn); }
.tips-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }

/* ── Profile (Your account) ──────────────────────────────────────────────── */
.card.profile-card { padding: 0; overflow: hidden; margin-bottom: var(--gap); }
.profile-banner { height: 96px; background: linear-gradient(90deg, #2196f3, #1565c0); }
.profile-main { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; padding: 0 24px 20px; }
.avatar.avatar-xl {
  width: 112px; height: 112px; font-size: 36px; margin-top: -56px;
  box-shadow: 0 0 0 5px var(--surface);
}
.profile-id { flex: 1; min-width: 14rem; }
.profile-id h3 { font-size: 26px; font-weight: 600; margin: 0 0 2px; }
.profile-id .muted { margin: 0 0 8px; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-contact { display: grid; gap: 4px; font-size: 14px; color: var(--muted); text-align: right; }
@media (max-width: 640px) { .profile-contact { text-align: left; } }

/* ── Error page ──────────────────────────────────────────────────────────── */
.error-page { text-align: center; padding: 12vh 16px 40px; display: grid; justify-items: center; gap: 12px; }
.error-code { font-size: clamp(56px, 9vw, 96px); font-weight: 700; line-height: 1; text-transform: none; letter-spacing: 0; color: var(--text); }
.error-code span { background: linear-gradient(180deg, #64b5f6, #886ab5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-lead { font-size: 22px; font-weight: 500; color: var(--text); margin: 0; }

/* ── Admin ───────────────────────────────────────────────────────────────── */
/* "Needs you": one row per thing to decide — what kind, what, and the way to
   deal with it on the right. */
.todo-list { display: grid; }
.todo {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center;
  padding: .7rem 0; border-top: 1px solid var(--border);
}
.todo:first-child { border-top: 0; padding-top: 0; }
.todo-kind { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.todo-body { min-width: 0; font-size: .9rem; }
.todo-body .sub { font-size: .78rem; color: var(--muted); }
.todo-act { justify-self: end; }
.todo-actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.todo-actions input { width: 15rem; padding: .3rem .5rem; font-size: .82rem; }
@media (max-width: 720px) {
  .todo { grid-template-columns: minmax(0, 1fr); }
  .todo-act { justify-self: start; }
  .todo-actions { justify-content: flex-start; }
  .todo-actions input { width: 100%; }
}
.avatar-sm { font-size: .72rem; font-weight: 700; color: var(--text-soft); }
.health { display: grid; }
.health-line {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .45rem 0; border-top: 1px solid var(--border); font-size: .87rem;
}
.health-line:first-child { border-top: 0; }
.health-line > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.health-sub { margin: 18px 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* The sign-in form's choice of channel. */
fieldset.channel { border: 0; margin: 0; padding: 0; display: grid; gap: .35rem; }
fieldset.channel legend { font-size: .8rem; font-weight: 500; color: var(--muted); padding: 0; margin-bottom: .3rem; }
fieldset.channel .checkline { font-size: .88rem; color: var(--text); }

/* ── Access requests ─────────────────────────────────────────────────────── */
.requests { display: grid; gap: .8rem; }
.request { display: grid; gap: .65rem; padding: .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.request-who { display: grid; gap: .05rem; }
.request-act { display: grid; gap: .45rem; }
.request-warn { margin: 0; font-size: .79rem; color: var(--warn); }
@media (min-width: 700px) {
  .request { grid-template-columns: 1fr auto; align-items: center; }
  .request-warn { grid-column: 1 / -1; }
}

/* ── Mailbox settings ────────────────────────────────────────────────────── */
.mailbox-status { margin-top: 1rem; display: grid; gap: .5rem; }
.setup-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; color: var(--muted); font-size: .89rem; }
.setup-steps strong { color: var(--text); }
.share-with { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.share-with code { padding: 4px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-strong); overflow-wrap: anywhere; }
.drive-connect .setup-steps { margin-bottom: 1rem; }
.drive-connect label.full { display: grid; gap: 6px; max-width: 640px; }
.drive-connect .toolbar, .drive-connected .toolbar { margin-top: 1rem; }
.drive-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: .75rem 0 1rem; font-size: .92rem; }
.drive-facts dt { color: var(--muted); }
.drive-facts dd { margin: 0; overflow-wrap: anywhere; }
.drive-skipped { margin-top: .75rem; font-size: .9rem; }
.drive-skipped summary { cursor: pointer; color: var(--text); }
.drive-skipped ul { margin: .5rem 0; padding-left: 1.2rem; color: var(--muted); display: grid; gap: 4px; }
.drive-skipped .name { color: var(--text); overflow-wrap: anywhere; }
.setup-steps code { font-family: var(--mono); font-size: .88em; background: var(--surface-2); padding: .05rem .3rem; border-radius: 4px; }
.discovered { display: grid; gap: .45rem; }
.folder-list { display: flex; flex-wrap: wrap; gap: .35rem; }
button.folder { font-family: var(--mono); font-size: .79rem; padding: .25rem .55rem; min-height: 26px; }
button.folder.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

/* ── Payroll ─────────────────────────────────────────────────────────────── */
.pay-cell { display: inline-flex; gap: .35rem; align-items: center; white-space: nowrap; }
.pay-actions { display: inline-flex; gap: .2rem; }
.cell-input { width: 6.2rem; text-align: right; padding: .2rem .35rem; font-size: .85rem; }
.cell-input:disabled { border-color: transparent; background: transparent; padding-left: 0; }

/* ── Bank reconciliation ─────────────────────────────────────────────────── */
.suggestions { display: grid; gap: .3rem; }
.suggestion {
  display: flex; gap: .5rem; align-items: center; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .3rem .5rem; font-size: .84rem;
}
.suggestion-main { display: grid; gap: .05rem; min-width: 0; }
.suggestion-main .hint { font-size: .75rem; }

/* ── File browser ────────────────────────────────────────────────────────── */
.crumbs { display: flex; gap: .4rem; align-items: center; font-size: .88rem; margin-bottom: 1rem; flex-wrap: wrap; }
.crumbs .sep { color: var(--muted); }
.browser {
  display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 13rem) minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; min-height: 25rem;
}
.browser-col { background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.browser-col + .browser-col { border-left: 1px solid var(--border); }
/* "Pick a year" sits in a column, not on the page: no box around it. */
.browser .empty { border: 0; border-radius: 0; background: transparent; padding: 2.5rem 1rem; }
.browser-head {
  padding: .5rem .7rem; font-size: .8rem; font-weight: 600;
  color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.browser-download { font-size: .78rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.browser-list { overflow-y: auto; max-height: 34rem; }
.browser-item {
  display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem;
  padding: .45rem .7rem; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border); font-size: .88rem;
}
.browser-item:hover { background: var(--surface-2); text-decoration: none; }
.browser-item.on { background: var(--accent); color: var(--accent-text); }
.browser-item.on .browser-item-meta, .browser-item.on .browser-item-sub { color: inherit; opacity: .85; }
.browser-item-name { display: flex; gap: .35rem; align-items: center; font-weight: 500; }
.browser-item-meta { font-size: .73rem; color: var(--muted); }
.browser-item-sub { grid-column: 1 / -1; font-size: .76rem; color: var(--muted); }
.folder-icon { font-size: .9rem; }
.browser-group {
  display: flex; gap: .4rem; align-items: center;
  padding: .5rem .7rem; background: var(--surface-2);
  font-size: .8rem; font-weight: 600;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
}
.browser-group .browser-item-meta { margin-left: auto; font-weight: 400; }
.browser-file {
  display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto auto;
  gap: .55rem; align-items: center;
  padding: .45rem .7rem .45rem 1.3rem; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border); font-size: .86rem;
}
.browser-file:hover { background: var(--surface-2); text-decoration: none; }
.file-main { display: grid; gap: .05rem; min-width: 0; }
.file-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-amount { white-space: nowrap; }

/* ── Command palette ─────────────────────────────────────────────────────── */
.palette-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 14, 30, .45);
  backdrop-filter: blur(2px);
  display: grid; align-items: start; justify-items: center;
  padding: clamp(3rem, 12vh, 8rem) 1rem 1rem;
}
body.palette-open { overflow: hidden; }
.palette {
  width: min(640px, 100%); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: min(34rem, 78vh);
}
/* The picker reuses the palette, but needs to say which movement is being
   associated — without it you are choosing an invoice for something you can
   no longer see. */
.palette-head { padding: .75rem .9rem .6rem; border-bottom: 1px solid var(--border); }
.palette-head .sub { color: var(--muted); font-size: .8rem; margin-top: .2rem; }
.palette-trailing .sub { display: block; color: var(--warn); font-size: .75rem; }

.palette-field { display: flex; align-items: center; gap: .6rem; padding: .3rem .8rem; border-bottom: 1px solid var(--border); }
.palette-icon { color: var(--muted); font-size: 1.1rem; }
.palette-input {
  border: 0; background: transparent; font-size: 1rem; padding: .7rem 0;
}
.palette-input:focus { outline: none; box-shadow: none; }
.palette-list { overflow-y: auto; padding: .3rem; }
/* Headings inside the list, so a long set of files can be read month by month
   rather than scrolled through as one run. Not selectable: the keyboard moves
   between options and steps over these. */
.palette-section {
  position: sticky; top: 0; z-index: 1;
  padding: .45rem .55rem .3rem; margin-top: .2rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); background: var(--surface);
}
.palette-note { color: var(--muted); }
.palette-foot .tiny { font-size: .72rem; padding: .15rem .45rem; }
.palette-item {
  display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; gap: .6rem;
  align-items: center; width: 100%; text-align: left;
  padding: .45rem .55rem; border: 0; background: transparent; border-radius: var(--radius-sm);
  min-height: 40px;
}
.palette-item.on { background: var(--accent-soft); }
.palette-item.on .palette-kind { color: var(--accent); }
.palette-kind {
  font-size: .76rem; font-weight: 600;
  color: var(--muted); white-space: nowrap;
}
.palette-main { display: grid; gap: .05rem; min-width: 0; }
.palette-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-hint { font-size: .76rem; color: var(--muted); }
.palette-trailing { font-size: .84rem; color: var(--text-soft); white-space: nowrap; }
.palette-empty { padding: 1.4rem; text-align: center; color: var(--muted); font-size: .9rem; }
.palette-foot {
  display: flex; gap: .75rem; align-items: center; padding: .45rem .8rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: .72rem; color: var(--muted); flex-wrap: wrap;
}
.palette-foot kbd {
  font-family: var(--sans); font-size: .68rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 .25rem; margin-right: .15rem;
}

/* ── Loading skeleton ────────────────────────────────────────────────────── */
@keyframes sk-pulse { 0%, 100% { opacity: .55 } 50% { opacity: .9 } }
.skeleton-head, .sk, .skeleton-block {
  background: var(--surface-2); border-radius: var(--radius);
  animation: sk-pulse 1.4s ease-in-out infinite;
}
.skeleton-head { height: 2.4rem; width: min(22rem, 60%); margin-bottom: 1.4rem; }
.skeleton-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: var(--gap); margin-bottom: 1.25rem; }
.skeleton-stats .sk { height: 5.2rem; }
.skeleton-block { height: 16rem; }
@media (prefers-reduced-motion: reduce) { .skeleton-head, .sk, .skeleton-block { animation: none; } }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--text-strong); color: var(--surface);
  padding: 10px 16px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); font-size: .88rem; font-weight: 500; z-index: 60;
  max-width: calc(100vw - 2rem);
}
.toast.bad { background: var(--bad); color: #fff; }

details summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
details summary:hover { color: var(--accent); }

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .split { grid-template-columns: 1fr; }
  .preview { position: static; height: 65vh; }
}

@media (max-width: 991px) {
  :root { --gutter: 16px; --header-h: 64px; --gap: 16px; }
  .shell, .shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }

  /* The menu becomes a drawer over the page. */
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(var(--sidebar-w), 86vw); height: 100dvh;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(20, 14, 30, .45); z-index: 35; }
  /* Folding to icons is a desktop idea; the drawer always shows the labels. */
  .shell.is-collapsed .brand-name, .shell.is-collapsed .brand-chip, .shell.is-collapsed .sidebar-filter,
  .shell.is-collapsed .nav-title, .shell.is-collapsed .nav-link .label, .shell.is-collapsed .nav-badge,
  .shell.is-collapsed .caret { display: revert; }
  .shell.is-collapsed .has-sub.open > .nav-sub { display: block; }
  .shell.is-collapsed .nav-link { justify-content: flex-start; margin-inline: 24px; padding: 0 10px; }
  .shell.is-collapsed .sidebar-brand { justify-content: flex-start; padding-inline: 22px; }
  .collapse-btn { width: 62px; height: 40px; border: 0; border-radius: var(--radius); background: var(--danger); color: #fff; }
  .collapse-btn:hover { background: color-mix(in srgb, var(--danger) 85%, #000); color: #fff; }
  .collapse-btn .hide-sm { display: none; }
  .collapse-btn .show-sm { display: block; width: 24px; height: 24px; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browser { grid-template-columns: 1fr; min-height: 0; }
  .browser-col + .browser-col { border-left: 0; border-top: 1px solid var(--border); }
  .browser-list { max-height: 17rem; }
  .browser-files .browser-list { max-height: none; }
  .browser-file { grid-template-columns: 1.3rem minmax(0, 1fr) auto; }
  .browser-file .badge { grid-column: 2 / -1; justify-self: start; }
  .capture-actions { width: 100%; }
  .capture-btn { flex: 1 1 auto; }
}

@media (max-width: 767px) {
  .header { gap: 12px; }
  .header-tools { gap: 4px; }
  .header-tools .hide-sm { display: none; }
  .dropdown { position: fixed; top: calc(var(--header-h) - 4px); left: 12px; right: 12px; width: auto; }
  .page-head .actions { width: 100%; }

}

@media (max-width: 575px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .sidebar, .header, .footer, .fab, .toolbar, .filters, .toast { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  body { background: #fff; }
}