/* DF Check 3 — design system
   Ink-navy shell, calm neutral canvas, semantic money colours.
   Tokens first; every component reads from them so light/dark stay in sync. */

/* Font sets, picked per viewer (data-font). Each pairs a Latin face with a Thai one;
   the browser only downloads the faces a page actually uses. All OFL; licences in fonts/. */
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-latin.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "LINE Seed Sans TH"; src: url("/fonts/LINESeedSansTH_W_Rg.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "LINE Seed Sans TH"; src: url("/fonts/LINESeedSansTH_W_Bd.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "LINE Seed Sans TH"; src: url("/fonts/LINESeedSansTH_W_XBd.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai Looped"; src: url("/fonts/IBMPlexSansThaiLooped-thai-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai Looped"; src: url("/fonts/IBMPlexSansThaiLooped-thai-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai Looped"; src: url("/fonts/IBMPlexSansThaiLooped-thai-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai Looped"; src: url("/fonts/IBMPlexSansThaiLooped-thai-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Google Sans"; src: url("/fonts/GoogleSans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans"; src: url("/fonts/GoogleSans-thai.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  color-scheme: light;
  --font-line-seed: "IBM Plex Sans", "LINE Seed Sans TH", "Leelawadee UI", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-plex-looped: "IBM Plex Sans", "IBM Plex Sans Thai Looped", "Leelawadee UI", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-google-sans: "Google Sans", "Leelawadee UI", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font: var(--font-line-seed);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --bg: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eff1f5;
  --surface-hover: #f6f7fa;
  --line: #e5e8ee;
  --line-2: #d4d9e2;
  --ink: #0e1422;
  --ink-2: #384053;
  --ink-3: #677085;
  --ink-4: #9aa1b1;

  --primary: #141c33;
  --primary-hover: #232d4c;
  --on-primary: #ffffff;
  --accent: #4f5fe0;
  --accent-strong: #3d4cc7;
  --accent-soft: #eef0ff;
  --accent-line: #cdd2fb;
  --on-accent: #ffffff;
  --focus: 0 0 0 3px rgba(79, 95, 224, .26);

  --green: #0f7f58;
  --green-bg: #e5f5ee;
  --green-line: #b4e2cc;
  --green-dot: #1db07a;
  --amber: #955600;
  --amber-bg: #fff3de;
  --amber-line: #f3d49b;
  --amber-dot: #f0a327;
  --rose: #b8264a;
  --rose-bg: #fdecf0;
  --rose-line: #f3c0cd;
  --rose-dot: #e9496d;
  --violet: #6a3dc4;
  --violet-bg: #f2ebfe;
  --teal: #0c7680;
  --teal-bg: #e1f3f4;
  --sky: #1e63ab;
  --sky-bg: #e6effa;
  --gray: #5b6477;
  --gray-bg: #eef0f4;

  --side-bg: #0b1120;
  --side-bg-2: #131a2d;
  --side-hover: rgba(255, 255, 255, .06);
  --side-active: rgba(255, 255, 255, .09);
  --side-line: rgba(255, 255, 255, .08);
  --side-ink: #eceff7;
  --side-ink-2: #98a1b7;
  --side-accent: #9ba6ff;

  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow-xs: 0 1px 2px rgba(15, 20, 34, .05);
  --shadow-sm: 0 1px 2px rgba(15, 20, 34, .04), 0 2px 8px rgba(15, 20, 34, .04);
  --shadow-md: 0 6px 16px rgba(15, 20, 34, .07), 0 1px 3px rgba(15, 20, 34, .05);
  --shadow-lg: 0 28px 64px rgba(9, 13, 26, .2), 0 6px 18px rgba(9, 13, 26, .08);
  --select-caret: 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='%238a93a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-font="plex-looped"] { --font: var(--font-plex-looped); }
:root[data-font="google-sans"] { --font: var(--font-google-sans); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #090d16;
    --surface: #111726;
    --surface-2: #151c2c;
    --surface-3: #1b2336;
    --surface-hover: #172033;
    --line: #222b40;
    --line-2: #2e3951;
    --ink: #eef1f8;
    --ink-2: #c5cbd9;
    --ink-3: #8f98ac;
    --ink-4: #646e85;
    --primary: #e9ecf6;
    --primary-hover: #ffffff;
    --on-primary: #0e1422;
    --accent: #8f99ff;
    --accent-strong: #a9b0ff;
    --accent-soft: rgba(143, 153, 255, .12);
    --accent-line: rgba(143, 153, 255, .34);
    --on-accent: #0e1422;
    --focus: 0 0 0 3px rgba(143, 153, 255, .3);
    --green: #52d6a3;
    --green-bg: rgba(34, 197, 134, .13);
    --green-line: rgba(34, 197, 134, .34);
    --green-dot: #2fcf8f;
    --amber: #f6b958;
    --amber-bg: rgba(240, 163, 39, .13);
    --amber-line: rgba(240, 163, 39, .34);
    --amber-dot: #f0a327;
    --rose: #ff8199;
    --rose-bg: rgba(233, 73, 109, .14);
    --rose-line: rgba(233, 73, 109, .38);
    --rose-dot: #ff5d80;
    --violet: #b89eff;
    --violet-bg: rgba(150, 110, 255, .15);
    --teal: #62d2da;
    --teal-bg: rgba(45, 180, 190, .14);
    --sky: #82baf5;
    --sky-bg: rgba(80, 150, 230, .15);
    --gray: #a6aec0;
    --gray-bg: rgba(160, 170, 190, .12);
    --side-bg: #060910;
    --side-bg-2: #0e1320;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090d16;
  --surface: #111726;
  --surface-2: #151c2c;
  --surface-3: #1b2336;
  --surface-hover: #172033;
  --line: #222b40;
  --line-2: #2e3951;
  --ink: #eef1f8;
  --ink-2: #c5cbd9;
  --ink-3: #8f98ac;
  --ink-4: #646e85;
  --primary: #e9ecf6;
  --primary-hover: #ffffff;
  --on-primary: #0e1422;
  --accent: #8f99ff;
  --accent-strong: #a9b0ff;
  --accent-soft: rgba(143, 153, 255, .12);
  --accent-line: rgba(143, 153, 255, .34);
  --on-accent: #0e1422;
  --focus: 0 0 0 3px rgba(143, 153, 255, .3);
  --green: #52d6a3;
  --green-bg: rgba(34, 197, 134, .13);
  --green-line: rgba(34, 197, 134, .34);
  --green-dot: #2fcf8f;
  --amber: #f6b958;
  --amber-bg: rgba(240, 163, 39, .13);
  --amber-line: rgba(240, 163, 39, .34);
  --amber-dot: #f0a327;
  --rose: #ff8199;
  --rose-bg: rgba(233, 73, 109, .14);
  --rose-line: rgba(233, 73, 109, .38);
  --rose-dot: #ff5d80;
  --violet: #b89eff;
  --violet-bg: rgba(150, 110, 255, .15);
  --teal: #62d2da;
  --teal-bg: rgba(45, 180, 190, .14);
  --sky: #82baf5;
  --sky-bg: rgba(80, 150, 230, .15);
  --gray: #a6aec0;
  --gray-bg: rgba(160, 170, 190, .12);
  --side-bg: #060910;
  --side-bg-2: #0e1320;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .35);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }
code { font-family: var(--mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); }
kbd { font-family: var(--mono); }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--r); background: var(--primary); color: var(--on-primary); font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 16px; }

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(150deg, #5b6cf2 0%, #2f3ba8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(49, 62, 170, .32);
}
.brand-mark svg { width: 28px; height: 28px; }
.brand-mark.lg { width: 60px; height: 60px; border-radius: 18px; }
.brand-mark.lg svg { width: 44px; height: 44px; }
.brand-text { display: grid; min-width: 0; }
.brand-text strong { font-size: 17px; line-height: 1.2; letter-spacing: -.01em; }
.brand-text small { font-size: 11.5px; line-height: 1.3; letter-spacing: .04em; color: var(--side-ink-2); }

/* ---------- Shell ---------- */
.app-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 20px;
  height: 100vh; height: 100dvh; overflow-y: auto;
  padding: 22px 16px 16px;
  color: var(--side-ink);
  background: radial-gradient(130% 55% at 0% 0%, rgba(91, 108, 240, .2), transparent 62%), var(--side-bg);
  border-right: 1px solid var(--side-line);
  scrollbar-width: thin;
}
.sidebar > .brand { padding: 2px 6px; }

.switcher { display: grid; gap: 9px; padding: 12px; border-radius: var(--r-lg); background: var(--side-bg-2); border: 1px solid var(--side-line); }
.switcher-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--side-ink-2); }
.switcher-control { position: relative; display: flex; align-items: center; }
.switcher-control > .i:first-child { position: absolute; left: 11px; color: var(--side-ink-2); pointer-events: none; }
.switcher-control select {
  appearance: none; width: 100%; height: 42px; padding: 0 34px 0 38px;
  border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05); color: var(--side-ink);
  font-size: 14px; font-weight: 600; text-overflow: ellipsis; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.switcher-control select:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.switcher-control select:focus { outline: none; border-color: var(--side-accent); box-shadow: 0 0 0 3px rgba(155, 166, 255, .25); }
.switcher-control select option { color: #0e1422; background: #fff; }
.switcher-control select:disabled { opacity: .6; cursor: default; }
.switcher-caret { position: absolute; right: 11px; color: var(--side-ink-2); pointer-events: none; }
.switcher-note { font-size: 12px; line-height: 1.5; color: var(--side-ink-2); }
.switcher-actions { display: flex; gap: 6px; }
.switcher-actions .side-btn { flex: 1; justify-content: center; background: rgba(255, 255, 255, .04); }

.side-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 11px;
  border: 0; border-radius: 9px; background: transparent; color: var(--side-ink-2);
  font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.side-btn:hover:not(:disabled) { background: var(--side-hover); color: var(--side-ink); }
.side-btn:disabled { opacity: .5; cursor: default; }
.side-btn .i { width: 17px; height: 17px; }

.nav { display: grid; gap: 3px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px;
  border-radius: var(--r); color: var(--side-ink-2); font-size: 14.5px; font-weight: 500; text-decoration: none;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--side-hover); color: var(--side-ink); }
.nav a.active { background: var(--side-active); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.nav a.active::before { content: ""; position: absolute; left: -16px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--side-accent); }
.nav a.active .i { color: var(--side-accent); }

.sidebar-foot { display: grid; gap: 2px; margin-top: auto; }
.account-chip {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; flex: none;
  border: 1px solid var(--side-line); border-radius: var(--r-lg); background: var(--side-bg-2);
  color: var(--side-ink); text-align: left; cursor: pointer; transition: background .15s, border-color .15s;
}
.account-chip:hover:not(:disabled) { background: #19213a; border-color: rgba(255, 255, 255, .14); }
.account-chip:disabled { cursor: default; }
.account-chip-text { display: grid; flex: 1; min-width: 0; }
.account-chip-name { overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.account-chip-status { display: block; overflow: hidden; font-size: 12px; color: var(--side-ink-2); white-space: nowrap; text-overflow: ellipsis; }
.account-chip-caret { color: var(--side-ink-2); }
.avatar {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(150deg, #7483ff, #3b48b8); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }

.main-col { min-width: 0; }
main { max-width: 1280px; margin: 0 auto; padding: 30px clamp(16px, 3vw, 40px) 36px; outline: none; }

/* ---------- Gate states (boot, setup, sign-in, startup failure) ---------- */
/* The body class mirrors skeleton visibility without descendant invalidation.
   The existing skeleton ID branch cannot match body; it retains specificity. */
body:is(.booting:not(:is(.has-workspace-skeleton, #workspace-skeleton[hidden])), .setup-required, .startup-failed, .signed-out) .app-shell { grid-template-columns: 1fr; }
body:is(.booting:not(:is(.has-workspace-skeleton, #workspace-skeleton[hidden])), .setup-required, .startup-failed, .signed-out) :is(.sidebar, .page-head, .view, #first-steps, #loading, .app-footer, #import-followup-notice) { display: none !important; }
.booting :is(#auth-panel, #setup-panel, #app-error, #reload-workspace, .gate-brand) { display: none !important; }
.gate-brand { display: none; }
body:is(.setup-required, .startup-failed) .gate-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 26px; font-size: 17px; }
.signed-out main { max-width: none; padding: 0; }
.startup-failed main { max-width: 620px; padding-top: 56px; }
.startup-failed #reload-workspace { margin: 0 auto; }

.boot-panel { display: grid; place-content: center; justify-items: center; gap: 18px; min-height: 80vh; color: var(--ink-3); font-size: 14px; }
.loader { display: inline-block; width: 26px; height: 26px; flex: none; border: 2.5px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.loader.sm { width: 16px; height: 16px; border-width: 2px; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 16px; color: var(--ink-3); font-size: 14px; }
.loading-hint { max-width: 440px; margin: 8px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.7; }
.boot-panel .loading-hint { text-align: center; }
.workspace-loading .loader { align-self: flex-start; margin-top: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

.setup-panel { display: grid; place-items: center; }
.setup-card { width: min(640px, 100%); padding: clamp(24px, 4vw, 40px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.setup-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.setup-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.setup-icon .i { width: 24px; height: 24px; }
.setup-card h1 { margin: 6px 0 10px; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.02em; }
.setup-intro { margin-bottom: 20px; color: var(--ink-3); }
.setup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--accent); }
.steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.steps strong { display: block; font-size: 14.5px; }
.steps p { font-size: 13.5px; color: var(--ink-3); }
.step-no { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 700; }

/* ---------- Auth ---------- */
.auth-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.auth-aside {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 40px clamp(28px, 4.5vw, 72px);
  color: #e9ecf6;
  background:
    radial-gradient(85% 65% at 8% 0%, rgba(96, 112, 255, .38), transparent 60%),
    radial-gradient(70% 55% at 100% 100%, rgba(35, 196, 150, .2), transparent 62%),
    #080d1c;
}
.auth-aside::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(80% 70% at 30% 30%, #000, transparent); }
.auth-aside > * { position: relative; z-index: 1; }
.brand.on-dark .brand-text small { color: #9aa3ba; }
.auth-pitch .eyebrow { color: #a8b1ff; }
.auth-pitch h1 { margin: 12px 0 24px; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.22; letter-spacing: -.025em; }
.auth-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: #c4cadc; font-size: 15px; }
.auth-points li { display: flex; align-items: flex-start; gap: 11px; }
.auth-points .i { margin-top: 3px; color: #7fe3c6; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; background: var(--surface); }
.auth-card { width: min(420px, 100%); }
.auth-card-head { margin-bottom: 22px; }
.auth-welcome { margin: 0 0 6px; font-size: 26px; letter-spacing: -.02em; }
#auth-description { color: var(--ink-3); font-size: 14.5px; }
.auth-form-title { margin: 0 0 14px; font-size: 18px; }
#auth-tabs { margin-bottom: 22px; }
#auth-form { display: grid; gap: 2px; }
#auth-submit { margin-top: 6px; }
.auth-secondary { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
.auth-status { min-height: 0; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.auth-status:empty { margin: 0; }
#auth-error { margin-top: 14px; }
.auth-secondary:not(:has(> :not([hidden]))) { display: none; }
/* Sign-in card: fields with an icon in front, the eye inside the password
   field, and น้องเช็ค peeking over the card's top edge (mascot.js face()). */
.auth-main { position: relative; overflow: hidden; isolation: isolate; }
.auth-card { position: relative; }
.auth-mascot { position: absolute; right: 22px; bottom: 100%; width: 144px; height: 72px; overflow: hidden; pointer-events: none; }
.auth-mascot .mascot-svg { position: absolute; left: 0; top: -18px; width: 144px; height: 126px; }
.auth-mascot.is-pop .mascot-svg { animation: auth-pop .28s var(--ease); }
.auth-mascot.is-no .mascot-svg { animation: auth-no .6s ease-in-out; }
.auth-mascot.is-yay .mascot-svg { animation: auth-yay .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes auth-pop { 40% { transform: translateY(3px); } }
@keyframes auth-no { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes auth-yay { 40% { transform: translateY(-14px); } }
.auth-card.is-shaking { animation: pin-shake .5s cubic-bezier(.36, .07, .19, .97); }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > .i { position: absolute; left: 14px; z-index: 1; width: 18px; height: 18px; color: var(--ink-4); pointer-events: none; transition: color .2s; }
.auth-input:focus-within > .i { color: var(--accent); }
.auth-card .auth-input input { height: 48px; padding-left: 43px; border-radius: 13px; }
.auth-card #auth-password-box input { padding-right: 48px; }
.auth-card .auth-input.is-bad input { border-color: var(--rose-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose-dot) 16%, transparent); }
.auth-eye { position: absolute; right: 6px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-3); cursor: pointer; transition: background .15s, color .15s; }
.auth-eye:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.auth-eye:focus-visible { outline: none; box-shadow: var(--focus); }
.auth-eye .i { grid-area: 1 / 1; width: 19px; height: 19px; transition: transform .25s var(--ease), opacity .2s; }
.auth-eye .off, .auth-eye[aria-pressed="true"] .on { opacity: 0; transform: scale(.6) rotate(-20deg); }
.auth-eye[aria-pressed="true"] .off { opacity: 1; transform: none; }
/* QR sign-in: the code this computer shows (black on white in either theme, as
   phone cameras expect), the number to tap on the phone, and a cover with a
   button once the code has ended or was refused. */
.auth-qr { display: grid; grid-template-columns: auto 1fr; gap: 14px 20px; align-items: center; }
.auth-qr-code { position: relative; width: 184px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.auth-qr-image, .auth-qr-image svg { display: block; width: 100%; height: 100%; }
.auth-qr-image:empty { background: repeating-linear-gradient(45deg, #f1f3f7 0 8px, #fff 8px 16px); }
.auth-qr-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 14px; text-align: center;
  background: color-mix(in srgb, var(--surface) 93%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.auth-qr-cover p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.auth-qr-side { display: grid; gap: 4px; min-width: 0; }
.auth-qr-label { font-size: 12.5px; color: var(--ink-3); }
.auth-qr-number { font-family: var(--mono); font-size: 44px; line-height: 1.05; letter-spacing: .06em; color: var(--ink); }
.auth-qr-steps { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.auth-qr-status { grid-column: 1 / -1; min-height: 1.5em; margin: 0; font-size: 13.5px; color: var(--ink-2); text-align: center; }
@media (max-width: 460px) {
  .auth-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .auth-qr-steps { text-align: left; }
}
/* A code field with its send button (the PIN dialog's e-mailed code). */
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; min-width: 0; }
/* qr.html: the phone approving a computer's QR sign-in. */
.qr-page { min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.qr-main { display: grid; place-items: start center; min-height: inherit; padding: max(24px, env(safe-area-inset-top)) 16px 32px; }
.qr-card { width: min(420px, 100%); padding: 24px 20px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); }
.qr-card h1 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.01em; }
.qr-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; font-weight: 700; }
.qr-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 0; color: var(--ink-3); }
.qr-eyebrow { margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.qr-lead { margin-bottom: 16px; color: var(--ink-3); font-size: 14.5px; }
.qr-lead strong { color: var(--ink); overflow-wrap: anywhere; }
.qr-card .field input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); font-size: 16px; }
.qr-card .field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.qr-remember { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 16px; font-size: 13.5px; color: var(--ink-2); }
.qr-remember input { margin-top: 4px; }
#qr-signin .hint, #qr-signin-back { margin-top: 10px; }
.qr-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.qr-choice { height: 76px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-2); font-family: var(--mono); font-size: 34px; font-weight: 600; cursor: pointer; }
.qr-choice:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-hover); }
.qr-choice:active:not(:disabled) { transform: translateY(1px); }
.qr-choice:disabled { opacity: .5; cursor: default; }
#qr-ask .hint { margin: 0 0 12px; }
.qr-switch { margin-top: 14px; text-align: center; }
.qr-done { display: grid; justify-items: center; text-align: center; padding: 8px 0 4px; }
.qr-done-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--surface-3); }
.qr-done-mark::before { content: "!"; font-size: 26px; font-weight: 700; color: var(--ink-3); }
.qr-done-mark.good { background: color-mix(in srgb, #2fd39a 18%, transparent); }
.qr-done-mark.good::before { content: "✓"; color: #16a37a; }
.qr-done .qr-lead { margin: 0; }
.qr-card > .alert { margin-top: 14px; }
/* Submit: busy folds it into a spinner; signed in, it turns into a green check. */
#auth-submit { position: relative; display: grid; place-items: center; margin: 12px auto 0; overflow: hidden; transition: width .4s var(--ease), border-radius .4s var(--ease), background .3s, box-shadow .3s; }
#auth-submit > * { grid-area: 1 / 1; transition: opacity .2s, transform .3s var(--ease); }
#auth-submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
#auth-submit:hover:not(:disabled)::after { animation: auth-shine .9s var(--ease); }
@keyframes auth-shine { to { transform: translateX(120%); } }
.auth-spin, .auth-done { opacity: 0; }
.auth-spin { width: 22px; height: 22px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.auth-done { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
#auth-submit:is(.is-busy, .is-done) { width: 48px; border-radius: 50%; opacity: 1; }
#auth-submit:is(.is-busy, .is-done) #auth-submit-label { opacity: 0; transform: scale(.8); }
#auth-submit.is-busy .auth-spin { opacity: 1; animation: auth-spin .7s linear infinite; }
#auth-submit.is-done { border-color: #2fd39a; background: #2fd39a; color: #062b1e; box-shadow: 0 0 0 8px rgba(47, 211, 154, .18), 0 0 40px rgba(47, 211, 154, .45); }
#auth-submit.is-done .auth-done { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--ease) .1s, opacity .1s; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
/* Signed in: the panel stays over the app while a hole opens from the button. */
@property --auth-hole { syntax: "<length>"; initial-value: 0px; inherits: false; }
.auth-panel.is-leaving[hidden] { position: fixed; inset: 0; z-index: 450; display: grid !important; pointer-events: none;
  mask: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent var(--auth-hole), #000 calc(var(--auth-hole) + 1px)); }
.auth-panel.is-leaving.is-open { --auth-hole: 150vmax; transition: --auth-hole .9s cubic-bezier(.65, 0, .35, 1); }
/* The modern look: the card lit from above over a quiet backdrop (tokens by
   the body rule). Its three layers: the light from the top, a dot grid that
   shows in it, and the same dots lit around the pointer. A warm halo shows
   while a field has focus, and one green wave spreads from the button on
   signing in. The card's edge lights near the pointer, and a light runs once
   around a field as it takes focus. */
@property --fade-l { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --fade-r { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --auth-orbit { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.auth-backdrop { display: none; }
:root:not([data-look="ledger"]) {
  & .auth-main { background: radial-gradient(ellipse 90% 80% at 50% 38%, transparent 55%, var(--auth-edge)), var(--bg); }
  & .auth-backdrop { position: absolute; inset: 0; z-index: -1; display: block; pointer-events: none; }
  & .auth-backdrop i { position: absolute; inset: 0; }
  & .auth-backdrop i:nth-child(1) { background: radial-gradient(ellipse 58% 52% at 50% -10%, var(--auth-spot), transparent 74%); }
  & .auth-backdrop i:nth-child(1)::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease);
    background: radial-gradient(ellipse 58% 46% at 50% 52%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); }
  & .auth-main:has(.auth-card input:focus) .auth-backdrop i:nth-child(1)::after { opacity: 1; }
  & .auth-backdrop i:is(:nth-child(2), :nth-child(3)) { background: radial-gradient(circle at 1px 1px, var(--auth-dot) 1px, transparent 1.6px) center / 22px 22px; }
  & .auth-backdrop i:nth-child(2) { mask: radial-gradient(ellipse 70% 78% at 50% 0%, #000 20%, transparent 80%); }
  & .auth-backdrop i:nth-child(3) { background-image: radial-gradient(circle at 1px 1px, var(--auth-dot-hot) 1.1px, transparent 1.7px); opacity: 0; transition: opacity .4s;
    mask: radial-gradient(170px circle at calc((var(--mx, 0) + 1) * 50%) calc((var(--my, 0) + 1) * 50%), #000, transparent); }
  & .auth-main:hover .auth-backdrop i:nth-child(3) { opacity: 1; }
  & .auth-backdrop::after { content: ""; position: absolute; inset: 0; background-image: var(--page-grain); opacity: var(--page-grain-alpha); }
  & .auth-backdrop::before { content: ""; position: absolute; left: var(--wx, 50%); top: var(--wy, 70%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, transparent 30%, rgba(47, 211, 154, .22) 62%, transparent 70%); }
  & .auth-panel.is-leaving .auth-backdrop::before { animation: auth-wave 1.4s cubic-bezier(.2, .7, .2, 1) forwards; }
  & .auth-card { width: min(440px, 100%); padding: 34px 36px 32px; border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 26px;
    background: var(--auth-card-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--auth-card-shadow); }
  & .auth-card::after { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--auth-rim), transparent); }
  & .auth-card::before { content: ""; position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none; opacity: var(--glow, 0); transition: opacity .35s;
    background: radial-gradient(260px circle at var(--px, 50%) var(--py, 0%), color-mix(in srgb, var(--accent) 85%, #fff), transparent 65%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
  & .auth-card .auth-input input { background: color-mix(in srgb, var(--surface) 60%, transparent); }
  & .auth-card .auth-input input:focus { background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
  & .auth-input::before { content: ""; position: absolute; inset: -1px; z-index: 1; padding: 1.5px; border-radius: 14px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--auth-orbit), transparent 0 62%, color-mix(in srgb, var(--accent) 60%, transparent) 80%, #fff 88%, var(--accent) 94%, transparent);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
  & .auth-input:focus-within::before { animation: auth-orbit 1.1s var(--ease); }
  & #auth-submit { height: 50px; border-radius: 14px; }
  & #auth-submit:is(.is-busy, .is-done) { width: 50px; border-radius: 50%; }
}
@keyframes auth-wave { 0% { opacity: 1; transform: scale(1); } 70% { opacity: .9; } to { opacity: 0; transform: scale(260); } }
@keyframes auth-orbit { 0% { opacity: 1; --auth-orbit: -90deg; } 75% { opacity: 1; } to { opacity: 0; --auth-orbit: 270deg; } }
@media (prefers-reduced-motion: reduce) {
  .auth-backdrop::before, .auth-input::before, .auth-card, .auth-mascot .mascot-svg, #auth-submit::after, .auth-spin { animation: none !important; }
  #auth-submit, #auth-submit > *, .auth-eye .i { transition: none; }
}

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head-text { min-width: 0; }
.page-kicker { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.page-kicker span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.page-kicker .i { width: 15px; height: 15px; }
#page-title { margin: 0; font-size: clamp(24px, 2.4vw, 31px); letter-spacing: -.025em; font-weight: 700; }
#page-description { margin-top: 5px; color: var(--ink-3); font-size: 14.5px; }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-xs);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .06s;
}
.btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--ink-4); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .i { width: 17px; height: 17px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(15, 20, 34, .18), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn.danger:hover:not(:disabled) { filter: brightness(1.06); background: var(--rose); border-color: var(--rose); }
:root[data-theme="dark"] .btn.danger { color: #1a0b10; }
.btn.danger-ghost { background: transparent; border-color: var(--rose-line); color: var(--rose); box-shadow: none; }
.btn.danger-ghost:hover:not(:disabled) { background: var(--rose-bg); border-color: var(--rose); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-3); border-color: transparent; }
.btn.sm { height: 34px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.btn.lg { height: 48px; font-size: 15px; border-radius: 12px; }
.btn.block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background .15s, border-color .15s; }
.icon-btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--ink-4); color: var(--ink); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 8px; }
.icon-btn.ghost { border-color: transparent; background: transparent; }
.icon-btn.ghost:hover:not(:disabled) { background: var(--surface-3); border-color: transparent; }
.link-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.link-btn:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.link-btn:disabled { opacity: .5; cursor: not-allowed; }
.link-btn.danger { color: var(--rose); }
.link-btn.muted { color: var(--ink-3); }
.link-btn .i { width: 15px; height: 15px; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link .i { width: 15px; height: 15px; }

.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--line); }
.segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.segmented button:hover:not(:disabled) { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented button:disabled { opacity: .5; cursor: not-allowed; }
.segmented.full { display: flex; }
.segmented.full button { flex: 1; height: 38px; }
.seg-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--line); color: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }

.field { display: grid; gap: 7px; margin: 0 0 16px; }
.field > label, .field-label, label.field { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
label.field { display: grid; gap: 7px; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-row label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-pair .field { margin: 0; }
.optional { font-size: 12px; font-weight: 500; color: var(--ink-4); }
.hint { margin-top: 3px; color: var(--ink-3); font-size: 13px; line-height: 1.55; }
.hint:empty { display: none; }
input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="number"], [type="date"], [type="month"]), input:not([type]), select {
  width: 100%; height: 42px; padding: 0 13px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font-size: 15px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder { color: var(--ink-4); }
input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus) { border-color: var(--ink-4); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
input:user-invalid { border-color: var(--rose); }
select { appearance: none; padding-right: 36px; background-image: var(--select-caret); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; text-overflow: ellipsis; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; min-width: 0; }
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon .i { position: absolute; left: 12px; color: var(--ink-4); pointer-events: none; }
.input-icon input { padding-left: 38px; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { appearance: none; display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin: 2px 0 0; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--surface); cursor: pointer; transition: background .15s, border-color .15s; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 5px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: translate(0, -1px) rotate(45deg); }
.check input:focus-visible { outline: none; box-shadow: var(--focus); }
.check input:disabled { opacity: .5; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill .i { width: 14px; height: 14px; }
.pill.accent { background: var(--accent-soft); color: var(--accent-strong); }
.pill.warn { background: var(--amber-bg); color: var(--amber); }
.count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.alert { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 16px; padding: 13px 16px; border: 1px solid; border-radius: 12px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.alert > .i { margin-top: 2px; }
.alert p { margin: 0; }
.alert strong { display: block; }
.alert.error { background: var(--rose-bg); border-color: var(--rose-line); color: var(--rose); }
.alert.warn { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.alert.info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); }
.alert.with-action { align-items: center; flex-wrap: wrap; }
.alert.with-action p { flex: 1; min-width: 200px; }
.alert.slim { padding: 10px 14px; font-size: 13.5px; }
.setup-card .alert { margin-bottom: 18px; }
.setup-card .alert p { color: inherit; opacity: .9; }
#reload-workspace { margin-bottom: 16px; }

.dot { display: inline-block; width: 8px; height: 8px; flex: none; margin-right: 7px; border-radius: 50%; vertical-align: 1px; }
.dot.paid { background: var(--green-dot); }
.dot.remaining { background: var(--amber-dot); }
.dot.review { background: var(--rose-dot); }

/* Status pills */
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 99px; background: var(--gray-bg); color: var(--gray); font-size: 12px; font-weight: 700; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.status.paid { background: var(--green-bg); color: var(--green); }
.status.group_paid { background: var(--teal-bg); color: var(--teal); }
.status.partial { background: var(--amber-bg); color: var(--amber); }
.status.variance { background: var(--amber-bg); color: var(--amber); }
.status.accepted { background: var(--sky-bg); color: var(--sky); }
.status.discounted { background: var(--teal-bg); color: var(--teal); }
.status.collectible { background: var(--rose-bg); color: var(--rose); }
.status.review { background: var(--rose-bg); color: var(--rose); }
.status.overpaid { background: var(--violet-bg); color: var(--violet); }
.status.excluded { background: var(--gray-bg); color: var(--ink-3); }
.status.excluded::before { border-radius: 1px; }
.status.offset { background: var(--sky-bg); color: var(--sky); }
.status.unmatched { background: var(--gray-bg); color: var(--gray); }

/* Popovers & menus */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.menu { position: relative; }
.menu > summary { cursor: pointer; user-select: none; }
.popover { position: absolute; z-index: 45; top: calc(100% + 8px); left: 0; min-width: 240px; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: pop .14s ease-out; }
.menu-panel.align-end { left: auto; right: 0; }
.menu-panel { display: grid; gap: 2px; }
.menu-panel .field-label { margin-bottom: 4px; }
.menu-panel select { margin-bottom: 4px; }
.menu-item { display: flex; align-items: center; width: 100%; padding: 9px 11px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 14px; text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item.active { background: var(--surface-3); color: var(--ink); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Surfaces ---------- */
.panel { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 18px 20px 14px; }
.panel-head h2 { margin: 0; font-size: 16.5px; letter-spacing: -.01em; }
.panel-title { display: flex; align-items: center; gap: 10px; }
.footnote { margin: 4px 2px 18px; font-size: 12.5px; color: var(--ink-3); }
.footnote:empty { display: none; }
.equation { margin: 0 2px 14px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.equation:empty { display: none; }

.search { position: relative; display: flex; align-items: center; width: min(360px, 100%); }
.search > .i { position: absolute; left: 12px; color: var(--ink-4); pointer-events: none; }
.search input { height: 40px; padding: 0 40px 0 38px; background: var(--surface-2); font-size: 14px; }
.search kbd { position: absolute; right: 10px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--ink-3); font-size: 11.5px; pointer-events: none; }
.search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { display: none; }

/* KPI */

.bar { display: block; width: 100%; height: 10px; border-radius: 99px; overflow: hidden; }
.bar.thin { height: 6px; }
.bar .bar-track { fill: var(--surface-3); }
.bar .bar-remaining { fill: var(--amber-dot); opacity: .45; }
.bar .bar-paid { fill: var(--green-dot); }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table th { padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font-size: 12.5px; font-weight: 600; text-align: left; white-space: nowrap; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-sub { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-3); }
.tag { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--accent); }
.tag.teal { color: var(--teal); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; gap: 10px; }
.empty { display: grid; justify-items: center; gap: 6px; padding: 46px 20px; text-align: center; color: var(--ink-3); font-size: 14px; }
.empty h3 { margin: 0; color: var(--ink); font-size: 16px; }
.empty p { margin: 0 0 8px; }
.empty-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 6px; border-radius: 15px; background: var(--surface-3); color: var(--ink-3); }
.empty-icon .i { width: 24px; height: 24px; }

/* Statement */

.mini-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-pill.green { background: var(--green-bg); color: var(--green); }
.mini-pill.teal { background: var(--teal-bg); color: var(--teal); }
.mini-pill.sky { background: var(--sky-bg); color: var(--sky); }
.mini-pill.amber { background: var(--amber-bg); color: var(--amber); }

.file-badge { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--surface-3); color: var(--ink-2); }
.file-badge .i { width: 20px; height: 20px; }
.file-badge.json { background: var(--accent-soft); color: var(--accent); }
.file-badge.pdf { background: var(--rose-bg); color: var(--rose); }
.file-badge.hospital { background: var(--surface-3); color: var(--ink-2); }

/* ---------- Dialogs ---------- */
dialog { padding: 0; border: 0; color: var(--ink); background: transparent; }
dialog::backdrop { background: rgba(7, 10, 20, .52); backdrop-filter: blur(4px); }
.modal { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-lg); overscroll-behavior: contain; }
.modal.sm { width: min(480px, calc(100vw - 24px)); }
.modal[open] { animation: modal-in .2s cubic-bezier(.2, .8, .2, 1); }
.modal-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 16px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.modal-head > div { flex: 1; min-width: 0; }
.modal-head h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.modal-head p { margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.modal-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--surface-3); color: var(--ink-2); }
.modal-icon.json { background: var(--accent-soft); color: var(--accent); }
.modal-icon.pdf, .modal-icon.danger { background: var(--rose-bg); color: var(--rose); }
.modal-body { padding: 18px 22px 22px; }
.modal-actions { position: sticky; bottom: -22px; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 20px -22px -22px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.context-chip { display: inline-flex; max-width: 100%; margin: 0 0 14px; padding: 6px 12px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.context-chip:empty { display: none; }
.note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--ink-3); }
.note .i { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.disclosure { margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; }
.disclosure > summary { font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.disclosure > summary::before { content: "+"; display: inline-block; width: 16px; color: var(--ink-3); }
.disclosure[open] > summary::before { content: "−"; }
.disclosure[open] > summary { margin-bottom: 8px; }
.disclosure .hint { margin-bottom: 12px; }
.dropzone { position: relative; display: grid; justify-items: center; gap: 6px; margin-bottom: 16px; padding: 26px 20px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.dropzone:hover, .dropzone.dragging { border-color: var(--accent); background: var(--accent-soft); }
.dropzone:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.dropzone.has-file { border-style: solid; border-color: var(--green-line); background: var(--green-bg); }
.dropzone strong { max-width: 100%; margin-top: 4px; font-size: 15px; overflow-wrap: anywhere; }
.dropzone small { font-size: 12.5px; color: var(--ink-3); }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.password-status { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -6px 0 14px 28px; }
.password-status .hint { margin: 0; }
.context-fields { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--amber-line); border-radius: 14px; background: var(--amber-bg); }
.context-fields h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--amber); }
.context-fields .hint { color: var(--ink-2); margin-bottom: 10px; }
.context-fields input { background: var(--surface); }

.preview { margin-top: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); font-size: 14px; }
.preview h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
.preview h3 .i { color: var(--green); }
.preview p { margin-top: 8px; color: var(--ink-2); }
.preview-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.preview-stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.preview-stat span { display: block; font-size: 12px; color: var(--ink-3); }
.preview-stat strong { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.preview-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pdf-source { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }
.pdf-source .i { width: 16px; height: 16px; flex: none; }
.pdf-source.auto .i { color: var(--green); }
.pdf-source.typed .i { color: var(--amber); }
.pdf-source .link-btn { margin-left: auto; flex: none; }
.preview-detected { display: flex; gap: 10px; margin-top: 12px; padding: 11px 13px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); font-size: 13.5px; }
.preview-detected .i { margin-top: 2px; }
.preview-detected p { margin: 0; color: inherit; }
.preview-warning { color: var(--amber) !important; font-weight: 600; }
.preview-ok { color: var(--green) !important; font-weight: 600; }
.preview details { margin-top: 12px; }
.preview details > summary { font-size: 13.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.preview ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 13px; }
.preview-block { margin-top: 14px; }
.preview-block h4 { margin: 0 0 8px; font-size: 13.5px; }
.preview-scope-warning { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); font-size: 13px; }
.preview-scope-warning p { margin: 0; color: inherit; }
.preview-scope-warning p + p { margin-top: 4px; }
.mini-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th, .mini-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.mini-table thead th { background: var(--surface-2); color: var(--ink-3); font-size: 12px; font-weight: 600; }
.mini-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.mini-table tbody th { font-weight: 600; }
.mini-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-table caption { padding: 0 0 8px; font-size: 13px; font-weight: 600; text-align: left; }
.mini-table tr.current { background: var(--accent-soft); }

.impact-file { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-weight: 600; overflow-wrap: anywhere; }
.impact .preview-stats { margin-bottom: 14px; }
.impact ul { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }
.impact .mini-table-wrap { margin-bottom: 14px; }
.impact .hint { margin-bottom: 14px; }

.identity { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.identity > div { flex: 1; min-width: 0; }
.identity strong { display: block; font-size: 15.5px; overflow-wrap: anywhere; }
.identity .hint { margin: 0; }
.identity-email { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.identity-email:empty { display: none; }
.identity-check { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--green-bg); color: var(--green); }
.identity-check .i { width: 15px; height: 15px; stroke-width: 2.4; }
.cloud-account { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Detail sheet */
.sheet { position: fixed; inset: 0 0 0 auto; width: min(620px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0 0 0 auto; overflow-y: auto; border-left: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-lg); overscroll-behavior: contain; }
.sheet[open] { animation: sheet-in .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheet-in { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 24px; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: 13px; font-weight: 600; }
.sheet-body { padding: 22px 24px 40px; }
.d-title { margin: 12px 0 6px; font-size: 22px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.d-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-3); font-size: 13.5px; }
.d-meta span { display: inline-flex; align-items: center; gap: 6px; }
.d-meta .i { width: 15px; height: 15px; }
.d-section { padding: 18px 0; border-top: 1px solid var(--line); }
.d-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.d-section-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.d-section p { font-size: 13.5px; }
.price-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.price-line strong { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.price-form { margin-top: 12px; padding: 16px; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-soft); }
.price-form input { background: var(--surface); }
.price-input { position: relative; display: flex; align-items: center; }
.price-input input { padding-right: 52px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-input span { position: absolute; right: 14px; color: var(--ink-3); font-size: 13px; }
.price-preview { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 14px; font-size: 13px; color: var(--ink-2); }
.price-preview strong { font-variant-numeric: tabular-nums; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.form-actions .link-btn { margin-right: auto; }
.entry-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.entry-top h4 { margin: 0; font-size: 14px; }
.entry-top strong { color: var(--green); font-size: 16px; font-variant-numeric: tabular-nums; }
.entry-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.offset-entry { padding: 14px; border: 1px solid var(--sky-bg); border-radius: 12px; background: var(--surface); }
.offset-entry + .offset-entry { margin-top: 10px; }
.offset-equation { margin-top: 6px; font-size: 13px !important; color: var(--ink-2); }
.offset-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.candidate-list { display: grid; gap: 12px; margin-top: 12px; }
.candidate { padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-xs); }
.candidate-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.candidate-top h4 { margin: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.candidate-top p { font-size: 12.5px !important; color: var(--ink-3); }
.candidate-top strong { display: grid; justify-items: end; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.candidate-top strong small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.candidate-warning { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); font-size: 13px; }
.candidate-warning strong { display: block; margin-bottom: 2px; }
.candidate-warning p { font-size: 13px !important; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 12px 0 0; font-size: 13px; }
.kv > span { color: var(--ink-3); overflow-wrap: anywhere; }
.kv b { display: block; color: var(--ink); font-weight: 600; }
.kv.compare { grid-template-columns: 1fr; margin-bottom: 4px; padding: 10px 12px; border-radius: 10px; background: var(--rose-bg); }
.kv.compare > span { color: var(--rose); }
.kv.compare b { display: inline; }
.candidate-date { margin-top: 10px; font-size: 12.5px !important; color: var(--ink-3); }
.candidate-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.search-inline { display: flex; gap: 8px; margin-top: 12px; }
.search-inline input { flex: 1; min-width: 0; }
.search-result-note { margin-top: 12px; font-size: 13px !important; color: var(--ink-3); }
.accordion { border-top: 1px solid var(--line); }
.accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.accordion > summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s; }
.accordion[open] > summary::after { transform: rotate(-135deg); }
.accordion-body { padding-bottom: 16px; }
.accordion.nested { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; margin-top: 12px; }
.accordion.nested > summary { font-size: 13.5px; padding: 11px 0; }
.history { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.history li { position: relative; padding-left: 20px; font-size: 13.5px; }
.history li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.history li p { font-size: 12.5px !important; color: var(--ink-3); }
.history li.muted::before { display: none; }
.source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 13px; }
.source-grid > div > span { display: block; color: var(--ink-3); font-size: 12px; }
.source-grid strong { font-weight: 600; overflow-wrap: anywhere; }
pre { max-height: 320px; margin: 0; padding: 12px; overflow: auto; border-radius: 10px; background: var(--surface-2); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.settlement { border: 1px solid var(--teal-bg); border-radius: 14px; padding: 16px; margin-top: 4px; background: linear-gradient(160deg, var(--teal-bg), transparent 55%); }
.settlement p { color: var(--ink-2); }
.settlement-periods { margin-top: 10px; font-size: 12.5px !important; color: var(--ink-3) !important; }

.summary-label { display: inline-flex; align-items: center; gap: 8px; }
.summary-label .i { width: 16px; height: 16px; color: var(--ink-3); }
.reason-field { margin: 14px 0 0; }
.settlement .mini-table-wrap { margin: 12px 0 10px; }
.settlement-footnote { margin-top: 12px; }
.d-section > .hint + .offset-entry, .d-section > .offset-entry + .hint { margin-top: 10px; }
.d-section .candidate-list + .accordion, .d-section > .hint + .accordion { margin-top: 14px; }
.d-head .status { margin-bottom: 2px; }
.preview-sample { margin-top: 8px; }
.mini-pill .i { width: 13px; height: 13px; }
.btn.ghost.tone-danger { color: var(--rose); }
.btn.ghost.tone-danger:hover:not(:disabled) { background: var(--rose-bg); }
.accordion-body > .hint:first-child { margin: 0 0 10px; }
.accordion-body > input { margin-bottom: 2px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: #0f1628; color: #f2f4fa; font-size: 14px; line-height: 1.5; box-shadow: var(--shadow-lg); animation: toast-in .22s cubic-bezier(.2, .8, .2, 1); }
.toast a { color: #b0b8ff; font-weight: 600; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

.app-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 26px 0 4px; font-size: 12.5px; color: var(--ink-4); }
.app-footer a { display: inline-block; margin: -8px -6px; padding: 8px 6px; color: var(--ink-3); text-decoration: none; }
.app-footer a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (min-width: 721px) and (max-width: 1280px) {
  .table th, .table td { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 900px) {
  .auth-panel { grid-template-columns: 1fr; }
  .auth-aside { gap: 24px; padding: 28px 24px 30px; }
  .auth-pitch h1 { margin-bottom: 16px; font-size: clamp(26px, 6vw, 34px); }
  .auth-visual { display: none; }
  .auth-main { align-items: start; padding: 96px 20px 48px; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; height: auto; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); overflow: visible; border-right: 0; border-bottom: 1px solid var(--side-line); }
  .sidebar > .brand { padding: 0; }
  .brand-text small { display: none; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .account-chip { order: 2; width: auto; margin-left: auto; padding: 3px; border: 0; border-radius: 99px; background: transparent; }
  .account-chip:hover:not(:disabled) { background: var(--side-hover); }
  .account-chip-text, .account-chip-caret { display: none; }
  .switcher { order: 3; display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; }
  .switcher-label, .switcher-note { display: none; }
  .switcher-control { flex: 1; min-width: 0; }
  .switcher-control select { height: 40px; }
  .switcher-actions .side-btn { flex: none; width: 40px; height: 40px; padding: 0; }
  .switcher-actions .side-btn span { display: none; }
  .sidebar-foot { display: none; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 6px 8px; padding-bottom: max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--side-line); background: rgba(8, 12, 24, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .nav a { flex-direction: column; justify-content: center; gap: 3px; height: 54px; padding: 0 4px; border-radius: 12px; font-size: 11.5px; }
  .nav a .i { width: 21px; height: 21px; }
  .nav a.active::before { display: none; }
  .nav a.active { background: rgba(255, 255, 255, .08); }
  main { padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); }
  body:is(.booting, .setup-required, .startup-failed) main { padding-bottom: 40px; }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .page-head { align-items: flex-start; margin-bottom: 18px; }
  .page-kicker { display: none; }
}
@media (max-width: 720px) {
  .kv, .source-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .panel-head { padding: 16px; }
  .search { width: 100%; }
  .search kbd { display: none; }
  .pagination { padding: 12px 16px; }
  .modal, .modal.sm { width: 100vw; max-width: 100vw; max-height: 94dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .modal[open] { animation: sheet-up .24s cubic-bezier(.2, .8, .2, 1); }
  .modal-head { padding: 16px 16px 14px 18px; }
  .modal-body { padding: 16px 18px 18px; }
  .modal-actions { margin: 18px -18px -18px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); bottom: -18px; }
  .modal-actions .btn { flex: 1; }
  .field-pair { grid-template-columns: 1fr; }
  .password-status { margin-left: 0; }
  .sheet { width: 100vw; border-left: 0; }
  .sheet-body { padding: 18px 18px 40px; }
  .d-title { font-size: 19px; }
  .setup-actions .btn { flex: 1; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .sidebar, .pagination, .app-footer, .toast, #first-steps { display: none !important; }
  .app-shell { display: block; }
  main { max-width: none; padding: 0; }
  body { background: #fff; }
  .panel, .statement { box-shadow: none; break-inside: avoid; }
}

/* ================= Task-oriented layout (v3.2) ================= */
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--ink-3); font-size: 11px; line-height: 1; }
.dot.json { background: var(--accent); }
.dot.pdf { background: var(--green-dot); }

/* Sidebar */
.side-cta { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #6676f7, #4353d4); color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(79, 95, 224, .35), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .15s, box-shadow .15s, filter .15s; }
.side-cta:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(79, 95, 224, .42), inset 0 1px 0 rgba(255, 255, 255, .22); }
.side-cta .i { width: 18px; height: 18px; stroke-width: 2.2; }
.side-cta kbd { margin-left: auto; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .14); color: #fff; }
.nav a { position: relative; }
.nav-badge { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: auto; padding: 0 7px; border-radius: 99px; background: var(--rose-dot); color: #fff; font-size: 11.5px; font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; }
.nav-fab { display: none; }
.nav-files { margin-top: 10px; }
.nav-files::after { content: ""; position: absolute; left: 12px; right: 12px; top: -6px; height: 1px; background: var(--side-line); }

/* Global drop + result */
.drop-overlay { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(7, 10, 22, .58); backdrop-filter: blur(6px); pointer-events: none; animation: pop .15s ease-out; }
.drop-card { display: grid; justify-items: center; gap: 8px; padding: 44px 64px; border: 2px dashed rgba(255, 255, 255, .5); border-radius: 26px; background: rgba(17, 23, 38, .75); color: #fff; text-align: center; }
.drop-card strong { font-size: 20px; }
.drop-card span:last-child { color: #b9c0d4; font-size: 14px; }
.drop-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, #6676f7, #4353d4); }
.drop-icon .i { width: 30px; height: 30px; }
.result { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--green-line); border-radius: 16px; background: linear-gradient(120deg, var(--green-bg), transparent 60%), var(--surface); box-shadow: var(--shadow-sm); animation: pop .2s ease-out; }
.result-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--green-dot); color: #fff; }
.result-icon .i { stroke-width: 2.4; }
.result-body { flex: 1; min-width: 220px; }
.result-body > strong { font-size: 15px; }
.result-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 6px; }
.result-facts span { display: grid; }
.result-facts small { font-size: 11.5px; color: var(--ink-3); }
.result-facts b { font-size: 15px; font-variant-numeric: tabular-nums; }
.result-facts .paid b { color: var(--green); }
.result-facts .remaining b { color: var(--amber); }
.result-facts .warn b { color: var(--rose); }
.result-actions { display: flex; align-items: center; gap: 8px; }

/* Onboarding */
.onboard { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 20px 28px; margin-bottom: 24px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); }
.onboard-drop { display: grid; justify-items: center; gap: 8px; padding: 52px 24px; border: 2px dashed var(--accent-line); border-radius: 18px; background: radial-gradient(90% 90% at 50% 0%, var(--accent-soft), transparent 70%); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.onboard-drop:hover, .onboard-drop:focus-visible { border-color: var(--accent); }
.onboard-drop h2 { margin: 6px 0 0; font-size: 21px; letter-spacing: -.02em; }
.onboard-drop p { max-width: 380px; color: var(--ink-3); font-size: 14px; }
.onboard-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg, #6676f7, #4353d4); color: #fff; box-shadow: 0 12px 26px rgba(79, 95, 224, .35); }
.onboard-icon .i { width: 28px; height: 28px; }
.onboard-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.onboard-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.onboard-steps strong { display: block; font-size: 14.5px; }
.onboard-steps p { font-size: 13px; color: var(--ink-3); }
.onboard > .link { grid-column: 1 / -1; justify-self: center; }

/* Cards */
.card { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.card-head .hint { margin-top: 1px; }
.variance-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.variance-metric { display: flex; flex-direction: column; justify-content: space-between; gap: 7px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.variance-metric > span { font-size: 12.5px; color: var(--ink-2); }
.variance-metric > strong { font-size: 21px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.variance-metric.variance > strong { color: var(--amber); }
.variance-metric.accepted > strong { color: var(--sky); }
.variance-metric.collectible > strong { color: var(--rose); }
.variance-metric.discounted > strong { color: var(--teal); }
.variance-note { margin-top: 12px; line-height: 1.65; }
.variance-report-card { margin-top: 16px; }
.variance-report-card .field-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.variance-report-card select { min-width: 95px; }
.variance-report-table { min-width: 820px; margin-top: 16px; font-size: 13px; }
.variance-report-table caption { text-align: left; padding: 8px 0; font-weight: 700; color: var(--ink); }
.variance-report-table th { font-weight: 600; }
.variance-report-table th.num { white-space: normal; min-width: 110px; }
.variance-bulk { margin: 14px 0; }
.variance-bulk > summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.variance-bulk .accordion-body { padding: 12px 0 0; }
#variance-groups { display: grid; gap: 8px; margin-top: 12px; max-height: 440px; overflow: auto; }
.variance-group { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface-2); cursor: pointer; }
.variance-group:hover { border-color: var(--accent); background: var(--accent-soft); }
.variance-group > span:first-child { display: grid; gap: 4px; min-width: 0; }
.variance-group strong { font-size: 13.5px; overflow-wrap: anywhere; }
.variance-group small { color: var(--ink-3); font-size: 12px; }
.variance-group > span:last-child { display: inline-flex; align-items: center; flex: none; gap: 8px; font-size: 12px; }
.variance-selection { display: grid; gap: 8px; max-height: 290px; overflow: auto; margin-bottom: 18px; padding: 2px; }
.variance-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; cursor: pointer; }
.variance-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.variance-check:has(input:disabled) { opacity: .65; cursor: default; }
.variance-check > span { display: grid; gap: 3px; min-width: 0; }
.variance-check strong { overflow-wrap: anywhere; }
.variance-check small { color: var(--ink-2); font-size: 12px; }
#variance-kind-note { margin: -4px 0 16px; }
#variance-reason { width: 100%; min-height: 78px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
#variance-preview-total { margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); line-height: 1.7; }
@media (max-width: 760px) {
  .variance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variance-metric { padding: 10px; }
  .variance-metric > strong { font-size: 18px; }
  .variance-report-card .card-head { flex-wrap: wrap; }
  .variance-group { align-items: flex-start; flex-direction: column; gap: 8px; }
  .variance-selection { max-height: 230px; }
}
.legend { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* Home */
.todo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.todo:hover { border-color: var(--line-2); background: var(--surface-hover); transform: translateX(2px); }

.col { max-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 4px 2px 3px; border: 0; border-radius: 10px; background: none; color: var(--ink-3); cursor: pointer; transition: background .15s; }
.col:hover { background: var(--surface-2); }
.col.selected { background: var(--accent-soft); color: var(--accent-strong); }
.file-badge.sm { width: 34px; height: 34px; border-radius: 10px; }
.file-badge.sm .i { width: 17px; height: 17px; }

/* Room inside the scroll box for the hover lift and focus outline, which it would clip. */
.coverage { overflow-x: auto; margin: -5px; padding: 5px 5px 7px; }
.cov-grid { display: grid; grid-template-columns: 86px repeat(6, minmax(34px, 1fr)); align-items: center; gap: 6px; min-width: 320px; }
.cov-grid.cols-12 { grid-template-columns: 96px repeat(12, minmax(38px, 1fr)); min-width: 640px; }
.cov-row-label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cov-cell { display: grid; place-items: center; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-3); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.cov-cell:hover { transform: translateY(-1px); }
.cov-cell .i { width: 15px; height: 15px; stroke-width: 2.4; }
.cov-cell.json.has { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); }
.cov-cell.pdf.has { border-color: var(--green-line); background: var(--green-bg); color: var(--green); }
.cov-cell.missing { border: 1.5px dashed var(--line-2); background: transparent; color: var(--ink-4); font-size: 15px; }
.cov-cell.missing:hover { border-color: var(--accent); color: var(--accent); }
.cov-cell.pending { border-style: dotted; background: transparent; color: var(--ink-4); }
.cov-cell.before { border: 1px dashed var(--line); color: transparent; opacity: .55; }
.cov-cell.before:hover { color: var(--ink-4); opacity: 1; }
.cov-month { display: grid; font-size: 11.5px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--ink-3); }
.cov-month small { font-size: 10px; font-weight: 500; color: var(--ink-4); }
.cov-month.now { color: var(--accent); }

.hospitals-card { margin-top: 16px; }
.hospitals-card > summary.card-head { margin: 0; cursor: pointer; }
.hospitals-card[open] > summary.card-head { margin-bottom: 14px; }
.summary-caret { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); color: var(--ink-3); transition: transform .2s; }
.hospitals-card[open] .summary-caret { transform: rotate(180deg); }
.overview-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.overview-totals > div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.overview-totals span { display: block; font-size: 12px; color: var(--ink-3); }
.overview-totals strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.overview-totals.small { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.overview-totals.small strong { font-size: 15px; }
.overview-progress { margin-bottom: 6px; }
.overview-foot { display: grid; justify-items: start; gap: 8px; margin-top: 14px; }
.hospital-list { display: grid; font-size: 14px; color: var(--ink-3); }
.hospital-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px 20px; padding: 12px 2px; border-top: 1px solid var(--line); color: var(--ink); }
.hospital-row.is-active .hospital-name strong { color: var(--accent); }
.hospital-name { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px; border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; cursor: pointer; }
.hospital-name:hover { background: var(--surface-2); }
.hospital-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.hospital-text strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.hospital-text small { font-size: 12.5px; color: var(--ink-3); }
.hospital-stat span { display: block; font-size: 12px; color: var(--ink-3); }
.hospital-stat strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.hospital-stat.remaining strong { color: var(--amber); }

/* Studies */
.toolbar { margin-bottom: 12px; }
.toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.month-control { display: flex; align-items: center; gap: 6px; }
.month-picker-wrap { position: relative; }
.month-button { display: inline-flex; align-items: center; gap: 9px; min-width: 190px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-xs); }
.month-button .caret { margin-left: auto; color: var(--ink-3); transition: transform .15s; }
.month-button[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--focus); }
.month-button[aria-expanded="true"] .caret { transform: rotate(180deg); }
.month-button > .i:first-child { color: var(--accent); }
.month-menu { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 16px; width: min(640px, calc(100vw - 32px)); padding: 14px; }
.popover-title { margin: 2px 6px 8px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.month-options { display: grid; gap: 2px; max-height: 330px; overflow: auto; }
.month-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.month-option:hover { background: var(--surface-3); }
.month-option.selected { background: var(--accent-soft); }
.month-option > span { display: grid; font-size: 14px; font-weight: 600; }
.month-option small { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.month-option strong { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.month-option .is-owed { color: var(--amber); }
.month-option .is-clear { color: var(--green); }
.month-menu-days { padding-left: 16px; border-left: 1px solid var(--line); }
.weekdays, .day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.weekdays { margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--ink-4); text-align: center; }
.day-cell { display: grid; place-items: center; align-content: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-4); font-size: 13px; line-height: 1.05; cursor: pointer; }
.day-cell small { min-height: 10px; font-size: 9.5px; font-weight: 700; color: var(--accent); }
.day-cell.has { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.day-cell.has:hover { background: var(--surface-3); }
.day-cell.selected { background: var(--primary); color: var(--on-primary); }
.day-cell.selected small { color: inherit; }
.day-cell:disabled { cursor: default; }
.toolbar .search { flex: 1; min-width: 220px; max-width: 420px; width: auto; }
.toolbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.more-filters .menu-panel { min-width: 250px; }
.more-filters .field-label { margin: 10px 6px 6px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-3); }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-3); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.tab:hover { color: var(--ink); }
.tab > span { display: inline-grid; place-items: center; min-width: 22px; height: 19px; padding: 0 6px; border-radius: 99px; background: var(--line); color: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.tab.tone-review > span { background: var(--rose-bg); color: var(--rose); }

/* Review */
.review-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; gap: 16px; }
.review-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.review-list { display: grid; align-content: start; gap: 6px; flex: 1; min-height: 120px; overflow: auto; padding: 2px; outline: none; }
.review-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; width: 100%; padding: 11px 12px 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.review-item:hover { border-color: var(--line-2); background: var(--surface-hover); }
.review-item.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.review-item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rose-dot); }
.review-item[data-review-payment]::before { background: var(--amber-dot); }
/* Modality sits at the right under the amount; the patient line truncates first. */
.review-side-foot { display: flex; justify-content: center; padding-top: 8px; border-top: 1px solid var(--line); }
.review-detail { position: sticky; top: 16px; min-height: 420px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); overscroll-behavior: contain; }
.review-placeholder { display: grid; justify-items: center; gap: 6px; padding: 90px 20px; text-align: center; color: var(--ink-3); }
.review-placeholder h3 { margin: 4px 0 0; color: var(--ink); font-size: 16px; }
.review-done { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--green-line); border-radius: 14px; background: var(--green-bg); color: var(--green); }
.review-done > .i { stroke-width: 2.4; }
.review-done span { display: grid; flex: 1; }
.review-done small { color: var(--ink-2); }
.back-link { margin-bottom: 14px; }
.match-list { display: grid; gap: 8px; margin-top: 10px; }
.match-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.match-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.match-text strong { display: block; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.match-text small { font-size: 12px; color: var(--ink-3); }
.match-amount { font-size: 13px; font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty.compact { padding: 26px 12px; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.empty-icon.ok { background: var(--green-bg); color: var(--green); }

/* Payments */
.payments-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; gap: 16px; }
.panel-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.select-sm { width: auto; min-width: 150px; height: 36px; font-size: 13.5px; }
.search.sm { width: 240px; }
.search.sm input { height: 36px; }
.panel-note { margin: 0; padding: 0 20px 12px; }

/* Files: a month timeline, newest first. Colours follow the coverage card:
   study files are accent, payment reports green. */
#view-files .card { margin-bottom: 16px; }
.files-panel { overflow: visible; }
#file-range { min-width: 148px; height: 34px; border-radius: 9px; font-size: 13px; }
.fm-list { position: relative; isolation: isolate; display: grid; padding: 0 20px 20px; }
.fm-list::before { content: ""; position: absolute; z-index: 0; top: 18px; bottom: 30px; left: 45px; width: 2px; border-radius: 2px; background: var(--line); }
.fm-year { display: flex; align-items: center; gap: 14px; padding: 14px 0 6px; font-size: 12px; color: var(--ink-3); }
.fm-year strong { position: relative; z-index: 1; width: 52px; padding: 3px 0; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.fm-year::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fm { scroll-margin-top: 20px; }
.fm-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 32px; align-items: center; gap: 16px; margin: 0 -10px; padding: 9px 10px; border-radius: 14px; cursor: pointer; transition: background .15s; }
details.fm > .fm-head:hover { background: color-mix(in srgb, var(--surface-3) 55%, transparent); }
details.fm > .fm-head:focus-visible { outline: none; box-shadow: var(--focus); }
.fm[open] > .fm-head .summary-caret { transform: rotate(180deg); }
.fm-head .summary-caret .i { width: 16px; height: 16px; }
.fm.flash > .fm-head { animation: fm-flash 1.6s var(--ease); }
@keyframes fm-flash { 0%, 35% { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); } 100% { background: transparent; box-shadow: none; } }

.fm-tile { position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; width: 52px; height: 52px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); line-height: 1.15; }
.fm-tile b { font-size: 14.5px; font-weight: 750; color: var(--ink); }
.fm-tile small { font-size: 10.5px; font-weight: 600; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.fm-mark { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 19px; height: 19px; border: 2px solid var(--surface); border-radius: 99px; color: #fff; }
.fm-mark .i { width: 11px; height: 11px; stroke-width: 3; }
.tone-ok .fm-tile { border-color: var(--green-line); background: var(--green-bg); }
.tone-ok .fm-tile b { color: var(--green); }
.tone-ok .fm-mark { background: var(--green-dot); }
.tone-warn .fm-tile { border-color: var(--amber-line); background: var(--amber-bg); }
.tone-warn .fm-tile b { color: var(--amber); }
.tone-warn .fm-mark { background: var(--amber-dot); }
.tone-pending .fm-tile { border-style: dashed; border-color: var(--accent-line); background: var(--accent-soft); }
.tone-pending .fm-tile b { color: var(--accent-strong); }
.tone-pending .fm-mark { background: var(--accent); }
.tone-empty .fm-tile { border-style: dashed; }
.tone-empty .fm-tile b { color: var(--ink-4); }

.fm-title { display: grid; gap: 2px; min-width: 0; }
.fm-title strong { font-size: 14.5px; font-weight: 650; }
.fm-title small { font-size: 12.5px; color: var(--ink-3); }
.tone-ok .fm-title small { color: var(--green); }
.tone-warn .fm-title small { color: var(--amber); }
.fm-gap .fm-head { grid-template-columns: 52px minmax(0, 1fr) auto; cursor: default; }
.fm-gap .fm-title strong { color: var(--ink-3); font-weight: 600; }
.fm-gap-actions { display: flex; gap: 2px; }
.fm-gap-actions .btn { color: var(--ink-3); }

.fm-chips { display: flex; gap: 6px; }
.fm-chip { display: flex; align-items: center; gap: 7px; width: 142px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.fm-chip > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fm-chip > .i { flex: none; width: 15px; height: 15px; }
.fm-chip.json > .i { color: var(--accent); }
.fm-chip.pdf > .i { color: var(--green-dot); }
.fm-chip-value { display: grid; gap: 5px; text-align: right; }
.fm-chip-value b { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fm-chip:is(.missing, .pending, .linked) { border-style: dashed; background: transparent; }
.fm-chip.missing { border-color: var(--amber-line); color: var(--amber); }
.fm-chip.missing > .i { color: var(--amber); }
.fm-chip.pending { color: var(--ink-4); }
.fm-chip.pending > .i { color: var(--ink-4); }

.fm-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 14px 68px; }
.fm[open] > .fm-body { animation: view-in .28s var(--ease) both; }
.fm-slot { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.fm-slot-head { display: flex; align-items: center; gap: 10px; }
.fm-slot-head h4 { flex: 1; margin: 0; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.fm-slot .file-badge.sm { width: 30px; height: 30px; border-radius: 9px; }
.fm-slot .file-badge.sm .i { width: 16px; height: 16px; }
.fm-slot .file-badge.pdf { background: var(--green-bg); color: var(--green); }
.fm-figure strong { display: block; font-size: 22px; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fm-figure small { font-size: 12px; color: var(--ink-3); }
.fm-files { display: grid; gap: 10px; }
.fm-file { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fm-file-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.fm-file-text strong { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.fm-file-amount { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fm-file-text small { font-size: 11.5px; color: var(--ink-3); }
.fm-file-text .fm-file-name { overflow: hidden; color: var(--ink-4); text-overflow: ellipsis; white-space: nowrap; }
.fm-file-actions { display: flex; align-items: center; gap: 2px; flex: none; }
/* A file month whose rows are all parked: the same list item, title struck
   through and hatched, and the reason across it on hover or focus instead of
   a tooltip. */
.fm-file.is-parked { position: relative; padding-bottom: 10px; outline: none; }
.fm-file.is-parked::before { content: ""; position: absolute; inset: 1px -10px 0; z-index: 0; border-radius: 0 0 10px 10px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 8px, transparent 8px 16px); pointer-events: none; }
.fm-file.is-parked > :not(.fm-file-why) { position: relative; z-index: 1; }
.fm-file.is-parked .fm-file-text strong { color: var(--ink-3); }
.fm-file.is-parked s { text-decoration-thickness: 1.5px; text-decoration-color: var(--ink-3); }
.fm-file.is-parked .fm-file-actions { z-index: 3; align-self: start; }
.fm-file-why { position: absolute; inset: 1px -10px 0; z-index: 2; display: grid; place-items: center; padding: 10px 20px; border-radius: 0 0 10px 10px; background: color-mix(in srgb, var(--surface-2) 88%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s var(--ease); pointer-events: none; }
.fm-file-why p { max-width: 460px; margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.6; color: var(--ink); text-align: center; }
/* Stay out of the way while the menu is being used. */
.fm-file.is-parked:is(:hover, :focus):not(:has(.fm-file-actions:hover, .fm-file-actions:focus-within)) .fm-file-why { opacity: 1; }
.fm-file.is-parked:focus-visible::before { box-shadow: var(--focus); }
@media (prefers-reduced-motion: reduce) { .fm-file-why { transition: none; } }
.fm-slot:is(.is-missing, .is-pending, .is-linked) { border-style: dashed; background: transparent; }
.fm-slot.is-missing { border-color: var(--amber-line); background: color-mix(in srgb, var(--amber-bg) 40%, transparent); }
.fm-slot:is(.is-pending, .is-linked) .file-badge { opacity: .6; }
.fm-empty { display: grid; justify-items: start; gap: 10px; }
.fm-empty p { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; color: var(--ink-3); }
.fm-empty p .i { width: 16px; height: 16px; }
.is-missing .fm-empty p { color: var(--amber); }

.fm-more > summary::-webkit-details-marker { display: none; }
.fm-more[open] > summary { background: var(--surface-3); color: var(--ink); }
.fm-more .popover { top: calc(100% + 6px); min-width: 176px; padding: 6px; }
.fm-more .menu-item { gap: 10px; font-size: 13.5px; }
.fm-more .menu-item .i { width: 16px; height: 16px; color: var(--ink-3); }
.fm-more .menu-item.danger, .fm-more .menu-item.danger .i { color: var(--rose); }
.fm-more .menu-item.danger:hover { background: var(--rose-bg); }
.fm-more-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0 68px; padding: 11px 14px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--surface); font-size: 13px; color: var(--ink-3); }

@media (max-width: 900px) { .fm { scroll-margin-top: 140px; } }
@media (max-width: 760px) {
  .fm-list { padding: 0 16px 16px; }
  .fm-list::before { display: none; }
  .fm-head { grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 8px 12px; }
  .fm-tile { width: 44px; height: 44px; border-radius: 12px; }
  .fm-tile b { font-size: 13px; }
  .fm-year strong { width: 44px; }
  .fm-chips { grid-column: 1 / -1; grid-row: 2; }
  .fm-chip { flex: 1 1 0; width: auto; min-width: 0; gap: 8px; padding: 0 10px; }
  .fm-gap .fm-head { grid-template-columns: 44px minmax(0, 1fr); }
  .fm-gap-actions { grid-column: 2; }
  .fm-body { grid-template-columns: minmax(0, 1fr); margin-left: 0; }
  .fm-file { flex-wrap: wrap; }
  .fm-file-text { flex-basis: 100%; }
  .fm-file-text .fm-file-name { white-space: normal; overflow-wrap: anywhere; }
  .fm-more-note { margin-left: 0; }
}

/* Import */
.modal-icon.accent { background: var(--accent-soft); color: var(--accent); }
.dropzone.big { align-content: center; min-height: 210px; padding: 34px 20px; }
.dropzone-icons { display: flex; gap: 10px; margin-bottom: 4px; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; font-size: 12.5px; color: var(--ink-4); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.type-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.type-choice { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.type-choice:hover { border-color: var(--accent-line); background: var(--surface-hover); }
.type-choice strong { display: block; font-size: 14px; }
.type-choice small { font-size: 12.5px; color: var(--ink-3); }
.stepper { display: flex; gap: 8px; margin: 0; padding: 14px 22px 0; list-style: none; counter-reset: step; }
.stepper li { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink-4); white-space: nowrap; counter-increment: step; }
.stepper li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 1.5px solid var(--line-2); border-radius: 50%; font-size: 11.5px; }
.stepper li:not(:last-child)::after { content: ""; flex: 1; height: 1.5px; border-radius: 2px; background: var(--line); }
.stepper[data-step="1"] li:nth-child(1), .stepper[data-step="2"] li:nth-child(2), .stepper[data-step="3"] li:nth-child(3) { color: var(--ink); }
.stepper[data-step="1"] li:nth-child(1)::before, .stepper[data-step="2"] li:nth-child(2)::before, .stepper[data-step="3"] li:nth-child(3)::before { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stepper[data-step="2"] li:nth-child(1)::before, .stepper[data-step="3"] li:nth-child(-n+2)::before { content: "✓"; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.stepper[data-step="2"] li:nth-child(1)::after, .stepper[data-step="3"] li:nth-child(-n+2)::after { background: var(--accent); }
.profile-links { display: grid; gap: 2px; margin: 0 0 16px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.side-link:hover { background: var(--surface-3); color: var(--ink); }

/* Auth visual */

@media (min-width: 901px) {
  .toolbar { position: sticky; top: 0; z-index: 25; margin: -12px 0 12px; padding: 12px 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
@media (max-width: 1180px) {
  .overview-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hospital-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hospital-name { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .payments-layout { grid-template-columns: minmax(0, 1fr); }
  .review-layout { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
  .onboard { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app-shell { grid-template-rows: auto minmax(0, 1fr); }
  .side-cta { display: none; }
  .nav { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; }
  .nav-files { display: none !important; }
  .nav-fab { display: grid; place-items: center; justify-self: center; width: 54px; height: 54px; margin-top: -26px; border: 4px solid var(--side-bg); border-radius: 50%; background: linear-gradient(135deg, #6676f7, #4353d4); color: #fff; box-shadow: 0 10px 22px rgba(79, 95, 224, .45); cursor: pointer; }
  .nav-fab .i { width: 24px; height: 24px; stroke-width: 2.4; }
  .nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 17px; margin: 0; padding: 0 5px; font-size: 10px; }
  .review-layout { grid-template-columns: minmax(0, 1fr); }
  .review-side, .review-detail { position: static; max-height: none; }
  .review-list { overflow: visible; }
  .review-detail:has(.review-placeholder) { display: none; }
  .month-menu { position: fixed; left: 12px; right: 12px; top: auto; width: auto; grid-template-columns: minmax(0, 1fr); max-height: 70vh; overflow: auto; }
  .month-menu-days { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .toolbar-end { margin-left: 0; }
  .drop-card { padding: 32px 28px; }
}
@media (max-width: 640px) {
  .month-control { width: 100%; }
  .month-picker-wrap { flex: 1; }
  .month-button { width: 100%; min-width: 0; }
  .toolbar .search { min-width: 0; max-width: none; flex-basis: 100%; }
  .toolbar-end { width: 100%; }
  .toolbar-end .btn, .toolbar-end .menu { flex: 1; }
  .toolbar-end .menu > summary { width: 100%; }
  .tabs { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .card { padding: 16px; }
  .overview-totals, .overview-totals.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hospital-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-choices { grid-template-columns: minmax(0, 1fr); }
  .stepper { padding: 12px 18px 0; }
  .stepper li { font-size: 11.5px; }
  .result-actions { width: 100%; }
  .result-actions .btn { flex: 1; }
  .panel-tools { width: 100%; }
  .search.sm, .select-sm { flex: 1; width: auto; min-width: 0; }
  .match-item { grid-template-columns: minmax(0, 1fr) auto; }
  .match-item .status, .match-item > .i { display: none; }
}

/* Chart sizing without inline styles (CSP style-src 'self') */
.h-0 { height: 0%; }
.h-1 { height: 1%; }
.h-2 { height: 2%; }
.h-3 { height: 3%; }
.h-4 { height: 4%; }
.h-5 { height: 5%; }
.h-6 { height: 6%; }
.h-7 { height: 7%; }
.h-8 { height: 8%; }
.h-9 { height: 9%; }
.h-10 { height: 10%; }
.h-11 { height: 11%; }
.h-12 { height: 12%; }
.h-13 { height: 13%; }
.h-14 { height: 14%; }
.h-15 { height: 15%; }
.h-16 { height: 16%; }
.h-17 { height: 17%; }
.h-18 { height: 18%; }
.h-19 { height: 19%; }
.h-20 { height: 20%; }
.h-21 { height: 21%; }
.h-22 { height: 22%; }
.h-23 { height: 23%; }
.h-24 { height: 24%; }
.h-25 { height: 25%; }
.h-26 { height: 26%; }
.h-27 { height: 27%; }
.h-28 { height: 28%; }
.h-29 { height: 29%; }
.h-30 { height: 30%; }
.h-31 { height: 31%; }
.h-32 { height: 32%; }
.h-33 { height: 33%; }
.h-34 { height: 34%; }
.h-35 { height: 35%; }
.h-36 { height: 36%; }
.h-37 { height: 37%; }
.h-38 { height: 38%; }
.h-39 { height: 39%; }
.h-40 { height: 40%; }
.h-41 { height: 41%; }
.h-42 { height: 42%; }
.h-43 { height: 43%; }
.h-44 { height: 44%; }
.h-45 { height: 45%; }
.h-46 { height: 46%; }
.h-47 { height: 47%; }
.h-48 { height: 48%; }
.h-49 { height: 49%; }
.h-50 { height: 50%; }
.h-51 { height: 51%; }
.h-52 { height: 52%; }
.h-53 { height: 53%; }
.h-54 { height: 54%; }
.h-55 { height: 55%; }
.h-56 { height: 56%; }
.h-57 { height: 57%; }
.h-58 { height: 58%; }
.h-59 { height: 59%; }
.h-60 { height: 60%; }
.h-61 { height: 61%; }
.h-62 { height: 62%; }
.h-63 { height: 63%; }
.h-64 { height: 64%; }
.h-65 { height: 65%; }
.h-66 { height: 66%; }
.h-67 { height: 67%; }
.h-68 { height: 68%; }
.h-69 { height: 69%; }
.h-70 { height: 70%; }
.h-71 { height: 71%; }
.h-72 { height: 72%; }
.h-73 { height: 73%; }
.h-74 { height: 74%; }
.h-75 { height: 75%; }
.h-76 { height: 76%; }
.h-77 { height: 77%; }
.h-78 { height: 78%; }
.h-79 { height: 79%; }
.h-80 { height: 80%; }
.h-81 { height: 81%; }
.h-82 { height: 82%; }
.h-83 { height: 83%; }
.h-84 { height: 84%; }
.h-85 { height: 85%; }
.h-86 { height: 86%; }
.h-87 { height: 87%; }
.h-88 { height: 88%; }
.h-89 { height: 89%; }
.h-90 { height: 90%; }
.h-91 { height: 91%; }
.h-92 { height: 92%; }
.h-93 { height: 93%; }
.h-94 { height: 94%; }
.h-95 { height: 95%; }
.h-96 { height: 96%; }
.h-97 { height: 97%; }
.h-98 { height: 98%; }
.h-99 { height: 99%; }
.h-100 { height: 100%; }
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* ---------- Help page ---------- */
.help-body { background: var(--bg); }
.help-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 4vw, 40px); background: var(--side-bg); color: var(--side-ink); border-bottom: 1px solid var(--side-line); }
.help-top .btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--side-ink); box-shadow: none; }
.help-top .btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); }
.help-hero { padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 40px) clamp(32px, 5vw, 56px); color: #eef1f8; background: radial-gradient(80% 90% at 10% 0%, rgba(96, 112, 255, .34), transparent 60%), radial-gradient(60% 70% at 100% 100%, rgba(35, 196, 150, .16), transparent 62%), #0a0f1f; }
.help-hero-inner { max-width: 1080px; margin: 0 auto; }
.help-hero .eyebrow { color: #a8b1ff; }
.help-hero h1 { max-width: 720px; margin: 12px 0 14px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.025em; }
.help-hero p { max-width: 640px; color: #c1c8da; font-size: 16px; }
.help-footer { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 40px; font-size: 12.5px; color: var(--ink-4); }

/* Remembered prices */
.price-rules > summary { display: flex; align-items: center; gap: 8px; }
.rule-count { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.rule-count.is-suspended { background: var(--rose-bg); color: var(--rose); }
#price-rule-list { display: grid; gap: 8px; margin-top: 12px; max-height: 440px; overflow: auto; }
.rule-item.is-suspended { border-color: var(--rose-line); background: var(--rose-bg); }
.rule-item.is-suspended .rule-state { color: var(--rose); font-weight: 600; }
.rule-item.is-inactive { opacity: .7; }
.rule-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.rule-note > div { display: grid; gap: 3px; min-width: 0; }
.rule-note strong { font-size: 13.5px; }
.rule-note small { color: var(--ink-2); font-size: 12px; overflow-wrap: anywhere; }
.rule-note .btn { flex: none; }
.rule-note.is-suspended { border-color: var(--rose-line); background: var(--rose-bg); }
.rule-note.is-suspended strong { color: var(--rose); }
.rule-summary > p { margin: 0 0 10px; font-size: 13px; overflow-wrap: anywhere; }
.rule-block { margin-top: 16px; }
.rule-block h3 { margin: 0 0 6px; font-size: 14px; }
.rule-block.is-suspended h3 { color: var(--rose); }
.rule-studies { display: grid; gap: 6px; max-height: 220px; overflow: auto; margin: 8px 0 0; padding: 0; list-style: none; }
.rule-studies li { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.rule-studies strong { overflow-wrap: anywhere; }
.rule-studies small { color: var(--ink-2); font-size: 12px; }
#price-rule-dialog .modal-actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .rule-note { flex-direction: column; align-items: stretch; }
}

/* ===== UI pass 3: quieter copy, interactive money flow, command palette ===== */
:root { --flow-paid: var(--green-dot); --flow-accepted: #4c8df6; --flow-discounted: #22b3be; --flow-collectible: var(--rose-dot); --flow-variance: var(--amber-dot); --flow-unpaid: #8a94ad; --ease: cubic-bezier(.2, .8, .2, 1); }
/* The backdrop has no colour of its own: a soft light from the top and a fine
   grain behind the cards (the ledger look keeps its paper grain). Sign-in adds
   a dot grid in that light; colour comes only when something happens there. */
:root {
  --page-light: rgba(255, 255, 255, .85); --page-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .08 0 0 0 0 .07 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --page-grain-alpha: .09;
  --auth-spot: #fff; --auth-dot: rgba(20, 20, 19, .17); --auth-dot-hot: rgba(20, 20, 19, .42); --auth-edge: rgba(20, 20, 19, .045); --auth-rim: transparent;
  --auth-card-bg: color-mix(in srgb, var(--surface) 94%, transparent); --auth-card-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 20, 19, .05), 0 36px 80px -34px rgba(60, 40, 20, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-light: rgba(255, 255, 255, .045); --page-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .96 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --page-grain-alpha: .06;
    --auth-spot: rgba(255, 255, 255, .13); --auth-dot: rgba(255, 255, 255, .15); --auth-dot-hot: rgba(255, 255, 255, .42); --auth-edge: rgba(0, 0, 0, .28); --auth-rim: rgba(255, 255, 255, .42);
    --auth-card-bg: color-mix(in srgb, var(--surface) 90%, transparent); --auth-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .18), 0 40px 90px -30px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --page-light: rgba(255, 255, 255, .045); --page-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .96 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --page-grain-alpha: .06;
  --auth-spot: rgba(255, 255, 255, .13); --auth-dot: rgba(255, 255, 255, .15); --auth-dot-hot: rgba(255, 255, 255, .42); --auth-edge: rgba(0, 0, 0, .28); --auth-rim: rgba(255, 255, 255, .42);
  --auth-card-bg: color-mix(in srgb, var(--surface) 90%, transparent); --auth-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .18), 0 40px 90px -30px rgba(0, 0, 0, .6);
}
body { background: radial-gradient(1500px 460px at 50% -180px, var(--page-light), transparent 72%), var(--bg); background-attachment: fixed; }
:root:not([data-look="ledger"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--page-grain); opacity: var(--page-grain-alpha); }
@media print { body::before { display: none; } }
#page-description:empty { display: none; }
.page-head { align-items: center; margin-bottom: 20px; }
.page-head h1 { letter-spacing: -.025em; }
.view:not([hidden]) { animation: view-in .38s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card { border-radius: 18px; border-color: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--shadow-xs); }
.card-head { align-items: center; }
.card-head h2 { font-size: 15px; font-weight: 650; }

/* Command palette */
.palette-trigger { display: inline-flex; align-items: center; gap: 10px; min-width: 280px; height: 40px; padding: 0 10px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink-3); font: inherit; font-size: 13.5px; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color .15s, color .15s, box-shadow .15s; backdrop-filter: blur(8px); }
.palette-trigger:hover { border-color: var(--line-2); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.palette-trigger span { flex: 1; text-align: left; }
.palette-trigger kbd, .palette-search kbd, .palette-item kbd, .palette-foot kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink-3); font: 600 11px var(--font); }
.palette { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
.palette::backdrop { background: rgba(8, 12, 24, .45); backdrop-filter: blur(3px); }
.palette[open] { animation: palette-in .18s var(--ease); }
@keyframes palette-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.palette-box { display: flex; flex-direction: column; max-height: inherit; }
.palette-search { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.palette-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.palette-list { flex: 1; overflow: auto; padding: 6px 8px 10px; }
.palette-group { margin: 10px 10px 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-4); letter-spacing: .02em; }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.palette-item.active { background: var(--accent-soft); }
.palette-item.active .palette-icon { background: var(--accent); color: var(--on-accent); }
.palette-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--surface-3); color: var(--ink-2); transition: background .12s, color .12s; }
.palette-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.palette-text strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-text small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-empty { padding: 28px; text-align: center; color: var(--ink-3); }
.palette-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.palette-foot kbd { margin-right: 3px; }

/* Home */

@keyframes glow-drift { from { transform: translate3d(-3%, -2%, 0) rotate(0deg); } to { transform: translate3d(4%, 3%, 0) rotate(8deg); } }
@keyframes ring-in { from { stroke-dashoffset: 163.36; } }
@keyframes flow-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.todo { padding: 10px 12px; border-color: transparent; background: var(--surface-2); }
.todo:hover { border-color: var(--line); background: var(--surface-hover); }

@keyframes bar-up { from { transform: scaleY(0); } }

@keyframes fill-in { from { transform: scaleX(0); } }

.variance-report-card { margin-top: 16px; }
.variance-report-card > summary { cursor: pointer; list-style: none; margin: 0; }
.variance-report-card > summary::-webkit-details-marker { display: none; }
.variance-report-card:not([open]) > summary { margin-bottom: 0; }
.hospitals-card { margin-top: 16px; }

/* Studies: bulk tools as a compact row */
.bulk-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.bulk-tools > .variance-bulk { flex: 1 1 320px; margin: 0; padding: 12px 16px; }
.bulk-tools > .variance-bulk > summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.bulk-tools > .variance-bulk > summary::-webkit-details-marker { display: none; }
.bulk-tools > .variance-bulk > summary .i { color: var(--accent); }
.bulk-tools > .variance-bulk[open] { flex-basis: 100%; }
#ledger-footnote { display: none; }

@media (max-width: 900px) {
  .palette-trigger { min-width: 0; width: 100%; }
  .page-head { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
  .palette { margin-top: 8vh; }
  .palette-trigger kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view:not([hidden]), .palette[open] { animation: none !important; }
}

/* Payments polish */
#receipt-filter-context { display: none; }

/* Quick start page */
.quick { max-width: 960px; margin: -40px auto 0; padding: 0 clamp(16px, 4vw, 32px) 56px; position: relative; }
.quick-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.quick-step { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-md); }
.quick-no { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-weight: 750; }
.quick-step h2 { margin: 0 0 6px; font-size: 17px; }
.quick-step p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.quick-note { margin: 22px 4px 36px; color: var(--ink-2); font-size: 14px; text-align: center; }
.quick-note kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font: 600 12px var(--font); }
.quick-faq h2 { margin: 0 0 12px; font-size: 18px; }
.quick-faq details { border-bottom: 1px solid var(--line); }
.quick-faq summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; font-weight: 600; cursor: pointer; list-style: none; }
.quick-faq summary::-webkit-details-marker { display: none; }
.quick-faq summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--ink-3); transition: transform .2s; }
.quick-faq details[open] summary::after { transform: rotate(45deg); }
.quick-faq details p { margin: 0 4px 16px; color: var(--ink-2); line-height: 1.7; }
.help-footer a { color: var(--accent); font-weight: 600; }
@media (max-width: 760px) { .quick-steps { grid-template-columns: minmax(0, 1fr); } .quick { margin-top: -28px; } }
.help-body .help-hero-inner { max-width: 896px; }
.help-body .help-hero { padding-bottom: clamp(56px, 7vw, 80px); }
.help-footer { text-align: center; }

/* Login scene (canvas) */
.auth-aside { padding-bottom: 0; }
.auth-visual { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 320px; margin: 0 calc(-1 * clamp(28px, 4.5vw, 72px)); }
.auth-canvas { display: block; flex: 1 1 auto; width: 100%; min-height: 280px; }
.auth-scene-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 4px clamp(28px, 4.5vw, 72px) 28px; font-size: 12.5px; color: #aab2c9; }
.auth-scene-legend i.sd { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 99px; vertical-align: 1px; }
.sd.json { background: #969fff; box-shadow: 0 0 10px #969fff; }
.sd.pdf { background: #e8edff; box-shadow: 0 0 10px #e8edff; }
.sd.paid { background: #2fd39a; box-shadow: 0 0 10px #2fd39a; }
.sd.stray { background: #f0a327; box-shadow: 0 0 10px #f0a327; }
.auth-scene-legend b { margin-left: 2px; color: #e9ecf6; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .auth-visual { display: none; } .auth-aside { padding-bottom: 30px; } }
/* iOS Safari zooms into any focused field under 16px. */
@media (pointer: coarse) { .auth-card input { font-size: 16px; } }

/* Hospital Sharing rate */
.sharing-input { align-items: center; }
.sharing-input input { flex: 0 1 110px; text-align: right; font-variant-numeric: tabular-nums; }
.input-unit { color: var(--ink-3); font-weight: 600; }
.sharing-input .btn { margin-left: auto; }

/* Payments: statement first, PDF rows on demand */
.receipt-rows-box > summary { cursor: pointer; list-style: none; padding-bottom: 18px; }
.receipt-rows-box > summary::-webkit-details-marker { display: none; }
.receipt-rows-box > summary:hover .summary-caret { color: var(--ink); }
.receipt-rows-box[open] > summary { padding-bottom: 12px; }
.receipt-rows-box[open] .summary-caret { transform: rotate(180deg); }
.receipt-tools { padding: 0 20px 14px; }

/* Review: pick several rows and decide once */
.review-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.review-tools .select-sm { min-width: 0; width: auto; max-width: 52%; height: 32px; font-size: 12.5px; }
.review-pick-all { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.review-pick-all span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-pick-all:has(input:disabled) { color: var(--ink-4); cursor: default; }
.review-pick-all input, .review-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.review-views button { height: 32px; font-size: 12.5px; }
.review-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); animation: pop .14s ease-out; }
.review-bulk strong { flex: 1 1 100%; font-size: 12.5px; font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.review-bulk-actions { display: flex; flex: 1; align-items: center; gap: 6px; }
.review-bulk-actions .btn { flex: 1; padding: 0 10px; }
.review-bulk-actions .btn .i { width: 15px; height: 15px; }
.review-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: stretch; gap: 4px; }
.review-pick { display: grid; place-items: center; border-radius: 8px; cursor: pointer; }
.review-pick:hover { background: var(--surface-3); }
.review-pick.is-off { cursor: default; }
.review-pick.is-off:hover { background: none; }
.review-pick.is-off::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--line-2); }
/* The input branch preserves :has(input:checked) specificity; rows use the mirrored class. */
.review-row:is(.is-picked, input.is-picked) .review-item:not(.selected) { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.status.ignored { background: var(--sky-bg); color: var(--sky); }
.ignored-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sky-bg); color: var(--sky); font-size: 13px; line-height: 1.5; }
.ignored-note .i { width: 16px; height: 16px; margin-top: 2px; }
.entry-actions { align-items: center; }
.ignore-summary { margin: 0 0 12px; font-size: 15px; }
.ignore-summary strong { font-variant-numeric: tabular-nums; }
.ignore-notes { margin: 0 0 14px; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }

/* Import progress: real stages, byte-accurate upload bar */
.upload-progress { display: grid; gap: 10px; margin: 4px 0 2px; padding: 14px 16px; border: 1px solid var(--accent-line); border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.up-stages { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--ink-4); }
.up-stages li { display: inline-flex; align-items: center; gap: 6px; }
.up-stages li span, .up-stages li .i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; background: var(--surface-3); font-size: 10.5px; }
.up-stages li .i { padding: 3px; background: var(--green-dot); color: #fff; stroke-width: 3; }
.up-stages li.done { color: var(--green); }
.up-stages li.active { color: var(--accent-strong); }
.up-stages li.active span { background: var(--accent); color: var(--on-accent); }
.up-bar { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 99px; background: var(--surface-3); appearance: none; -webkit-appearance: none; }
.up-bar::-webkit-progress-bar { border-radius: 99px; background: var(--surface-3); }
.up-bar::-webkit-progress-value { border-radius: 99px; background: var(--accent); transition: width .2s; }
.up-bar::-moz-progress-bar { border-radius: 99px; background: var(--accent); }
.up-bar:indeterminate { background: linear-gradient(90deg, var(--surface-3) 0%, var(--accent-line) 40%, var(--accent) 50%, var(--accent-line) 60%, var(--surface-3) 100%) 0 0 / 250% 100%; animation: up-sweep 1.3s linear infinite; }
.up-bar:indeterminate::-webkit-progress-bar { background: transparent; }
.up-bar:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes up-sweep { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.up-detail { margin: 0; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Several files at once */
#batch-dialog { width: min(680px, calc(100vw - 32px)); }
.batch-overall { display: grid; gap: 8px; margin-bottom: 12px; }
.batch-overall p { display: grid; gap: 2px; margin: 0; }
.batch-overall strong { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.batch-overall span { font-size: 12.5px; color: var(--ink-3); }
.batch-list { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.batch-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s, background .15s; }
.batch-item .file-badge.sm { width: 34px; height: 34px; }
.batch-text { display: grid; gap: 4px; min-width: 0; }
.batch-text strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.batch-text small { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.batch-text small b { font-weight: 700; color: var(--ink-2); }
.batch-mark .i { width: 18px; height: 18px; }
.batch-item.is-ready, .batch-item.is-saved { border-color: var(--green-line); }
.batch-item.is-ready .batch-mark, .batch-item.is-saved .batch-mark, .batch-item.is-saved small b, .batch-item.is-ready small b { color: var(--green); }
.batch-item.is-saved { background: color-mix(in srgb, var(--green-bg) 45%, var(--surface)); }
.batch-item.is-error { border-color: var(--amber-line); background: color-mix(in srgb, var(--amber-bg) 45%, var(--surface)); }
.batch-item.is-error .batch-mark, .batch-item.is-error small b { color: var(--amber); }
.batch-item:is(.is-uploading, .is-reading, .is-waiting, .is-saving) { border-color: var(--accent-line); }
.batch-item:is(.is-uploading, .is-reading, .is-waiting, .is-saving) small b { color: var(--accent-strong); }
.batch-options { display: grid; gap: 12px; margin-bottom: 4px; }
#batch-notice { margin-bottom: 12px; }
@media (max-width: 640px) { .batch-item { grid-template-columns: auto minmax(0, 1fr) auto; } .batch-item > .btn { grid-column: 2 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .up-bar:indeterminate { animation: none; } }

/* Modality: one colour per modality from the validated categorical order
   (blue, orange, aqua, yellow, magenta, green), grey for anything else.
   The colour is only ever a dot beside its label. */
:root { --m-xr: #2a78d6; --m-ct: #eb6834; --m-mri: #1baf7a; --m-mg: #eda100; --m-us: #e87ba4; --m-nm: #008300; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m-xr: #3987e5; --m-ct: #d95926; --m-mri: #199e70; --m-mg: #c98500; --m-us: #d55181; --m-nm: #008300; } }
:root[data-theme="dark"] { --m-xr: #3987e5; --m-ct: #d95926; --m-mri: #199e70; --m-mg: #c98500; --m-us: #d55181; --m-nm: #008300; }
.m-xr { --m: var(--m-xr); } .m-ct { --m: var(--m-ct); } .m-mri { --m: var(--m-mri); } .m-mg { --m: var(--m-mg); }
.m-us { --m: var(--m-us); } .m-nm { --m: var(--m-nm); } .m-other { --m: var(--ink-4); }

/* Summary: evenly spaced figures over one full-width meter */
.summary { display: grid; gap: 16px; margin-bottom: 12px; padding: 18px 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); }
.summary:empty { display: none; }
.summary-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.summary-figures.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.summary-figure { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 0 22px; border-left: 1px solid var(--line); }
.summary-figure:first-child { padding-left: 0; border-left: 0; }
.summary-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.summary-figure[class*="tone-"] .summary-label::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 3px; background: var(--tone); }
.summary-figure.tone-paid { --tone: var(--green-dot); }
.summary-figure.tone-remaining { --tone: var(--amber-dot); }
.summary-figure.tone-excess { --tone: var(--violet); }
.summary-figure.tone-done { --tone: var(--line-2); }
.summary-figure strong { white-space: nowrap; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.summary-figure small { font-size: 12px; color: var(--ink-3); }
.meter { display: block; overflow: hidden; border-radius: 99px; }
.meter-rest { fill: color-mix(in srgb, var(--amber-dot) 38%, var(--surface)); }
.meter.is-empty .meter-rest { fill: var(--surface-3); }
.meter-done { fill: var(--green-dot); }
.meter-gap { stroke: var(--surface); stroke-width: 2; }
.summary-note { margin: -6px 0 0; font-size: 12px; color: var(--ink-4); }

@media (max-width: 640px) {
  .summary { gap: 12px; padding: 14px 16px 16px; }
  .summary-figures, .summary-figures.n-2 { grid-template-columns: minmax(0, 1fr); }
  .summary-figure, .review-detail .d-summary .summary-figure, #study-drawer .d-summary .summary-figure { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 9px 0; border-left: 0; border-top: 1px solid var(--line); }
  .summary-figure:first-child { padding-top: 0; border-top: 0; }
  .summary-figure strong, .d-summary .summary-figure strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 17px; }
}

/* A modality tag: the colour dot always sits beside its name */
.d-summary { margin: 20px 0 16px; padding: 16px 18px; box-shadow: none; background: var(--surface-2); }
.d-summary .meter-gap { stroke: var(--surface-2); }
.d-summary .summary-figure strong { font-size: 20px; }
.review-detail .d-summary .summary-figure, #study-drawer .d-summary .summary-figure { padding: 0 16px; }
.review-detail .d-summary .summary-figure:first-child, #study-drawer .d-summary .summary-figure:first-child { padding-left: 0; }

/* Study detail: a light page with no boxes but the one open decision.
   Figures, then that decision, then evidence rows, then tools folded away. */
.d-body { max-width: 720px; margin: 0 auto; }

.d-act { --tone: var(--rose); --tone-bg: var(--rose-bg); --tone-line: var(--rose-line); margin: 0 0 24px; padding: 14px 16px 16px; border: 1px solid var(--tone-line); border-radius: 14px; background: var(--tone-bg); }
.d-act.tone-variance { --tone: var(--amber); --tone-bg: var(--amber-bg); --tone-line: var(--amber-line); }
.d-act.tone-overpaid { --tone: var(--violet); --tone-bg: var(--violet-bg); --tone-line: color-mix(in srgb, var(--violet) 35%, transparent); }
.d-act.tone-neutral { --tone: var(--ink-2); --tone-bg: var(--surface-2); --tone-line: var(--line-2); }
.d-act-title { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--tone); }
.d-act-title .i { flex: none; width: 17px; height: 17px; margin-top: 2px; }
.d-act > p { margin: -4px 0 12px; font-size: 13px; color: var(--ink-2); }
.d-act > :last-child { margin-bottom: 0; }
.d-act .rule-note { margin: 0 0 12px; background: var(--surface); }
.d-act .candidate-list { margin-top: 0; }
.d-act .reason-field { margin-top: 12px; }
.d-act > input, .d-act .search-inline input { background: var(--surface); }
.d-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.d-choice { display: grid; align-content: start; gap: 2px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.d-choice:hover { border-color: var(--accent); background: var(--surface-hover); }
.d-choice:active { transform: scale(.99); }
.d-choice strong { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.d-choice strong .i { width: 16px; height: 16px; stroke-width: 2; }
.d-choice small { font-size: 12.5px; color: var(--ink-3); }
.d-act > .btn.ghost { margin-top: 8px; }

.d-label { margin: 0 0 2px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.menu-item.danger, .menu-item.danger .i { color: var(--rose); }
.menu-item.danger:hover { background: var(--rose-bg); }
.menu-item .i { width: 16px; height: 16px; margin-right: 8px; }

.d-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.d-tool { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.d-tool .i { width: 14px; height: 14px; }
.d-tool:hover { border-color: var(--line-2); color: var(--ink); }
.d-tool[aria-expanded="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); }
.d-tool-panel { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.d-tool-panel .search-inline { margin-top: 0; }
.d-tool-panel .reason-field { margin-top: 12px; }
.d-tool-panel .history { margin: 0; }

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

/* Export: patient identifiers are opt-in */
.export-menu .menu-panel { min-width: 260px; }
.export-menu .menu-item { display: grid; gap: 1px; }
.export-menu .menu-item strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.export-menu .menu-item small { font-size: 12px; color: var(--ink-3); }

/* Privacy: masked names/HN hold only the mask, drawn in the style chosen in
   settings, so hovering, selecting or zooming never shows the real text.
   Glass wraps transparent placeholder dots that only give the width;
   ghost is made-up letters, blurred. Hovering any mask fades it and shows a
   lock; clicking it asks for the PIN (app.js). */
:root { --pii-glass-top: rgba(14, 20, 34, .075); --pii-glass-bottom: rgba(14, 20, 34, .03); --pii-glass-edge: rgba(14, 20, 34, .1); --pii-glass-hi: rgba(255, 255, 255, .9); --pii-sheen: rgba(255, 255, 255, .9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pii-glass-top: rgba(255, 255, 255, .09); --pii-glass-bottom: rgba(255, 255, 255, .025); --pii-glass-edge: rgba(255, 255, 255, .09); --pii-glass-hi: rgba(255, 255, 255, .12); --pii-sheen: rgba(255, 255, 255, .22); } }
:root[data-theme="dark"] { --pii-glass-top: rgba(255, 255, 255, .09); --pii-glass-bottom: rgba(255, 255, 255, .025); --pii-glass-edge: rgba(255, 255, 255, .09); --pii-glass-hi: rgba(255, 255, 255, .12); --pii-sheen: rgba(255, 255, 255, .22); }
.pii.is-masked { user-select: none; cursor: pointer; }
/* The box is exactly the mask's size, so the lock sits in its middle. Masks
   are spans inside rows that style their own spans; the doubled classes
   outrank rules like ".kv span", and text-fill keeps the placeholder dots
   unseen whatever colour the row passes down. */
.pii-box.pii-box { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.pii-box::after { content: ""; position: absolute; inset: 0; width: .85em; height: .85em; margin: auto; background: var(--accent); opacity: 0; transform: scale(.7); pointer-events: none; transition: opacity .18s, transform .18s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7.2' rx='2'/%3E%3Cpath d='M5.4 7V5.2a2.6 2.6 0 0 1 5.2 0V7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7.2' rx='2'/%3E%3Cpath d='M5.4 7V5.2a2.6 2.6 0 0 1 5.2 0V7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pii.is-masked:hover .pii-box::after { opacity: 1; transform: none; }
.pii-ghost { transition: opacity .2s; }
.pii.is-masked:hover .pii-ghost { opacity: .3; }
.pii-glass.pii-glass { position: relative; display: inline-block; height: 1.5em; padding: 0 .55em; overflow: hidden; color: transparent; -webkit-text-fill-color: transparent; font-size: .8em; line-height: 1.5em; letter-spacing: .3em; vertical-align: middle; }

/* Glass: a frosted capsule; hovering the row sweeps a sheen across. */
.pii-glass { border-radius: 999px;
  background: linear-gradient(105deg, transparent 40%, var(--pii-sheen) 50%, transparent 60%) 100% 0 / 250% 100% no-repeat, linear-gradient(180deg, var(--pii-glass-top), var(--pii-glass-bottom));
  box-shadow: inset 0 0 0 1px var(--pii-glass-edge), inset 0 1px 0 var(--pii-glass-hi); transition: box-shadow .2s; }
.pii-glass::before { content: ""; position: absolute; inset: .5em .6em; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 .65em, transparent .65em .9em); filter: blur(2px); opacity: .4; transition: opacity .2s; }
:is(tr, li, a, button, .pii.is-masked):hover .pii-glass { background-position: 0 0, 0 0; transition: background-position .9s var(--ease), box-shadow .2s; }
.pii.is-masked:hover .pii-glass { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 var(--pii-glass-hi); }
.pii.is-masked:hover .pii-glass::before { opacity: .12; }

/* Ghost: made-up letters, blurred, fading out at both ends. */
.pii-ghost.pii-ghost { display: inline-block; padding: 0 .5em; margin: 0 -.5em; color: var(--ink-2); filter: blur(.26em); white-space: nowrap; vertical-align: bottom;
  -webkit-mask: linear-gradient(90deg, transparent, #000 .8em, #000 calc(100% - .8em), transparent); mask: linear-gradient(90deg, transparent, #000 .8em, #000 calc(100% - .8em), transparent); }

/* After the PIN: names sharpen in a wave from the middle of the screen (app.js
   sets --pii-d by distance). */
.pii-reveal { animation: pii-reveal .5s var(--ease) both; animation-delay: var(--pii-d, 0ms); }
@keyframes pii-reveal { from { opacity: 0; filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  .pii-glass, .pii-glass::before, .pii-ghost, .pii-box::after { transition: none !important; }
  .pii-reveal { animation: none; }
}
.privacy-lock { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.privacy-lock-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); }
.pii-open .privacy-lock-icon { background: var(--accent-soft); color: var(--accent); }
.privacy-lock-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.privacy-lock-text strong { font-size: 14px; }
.privacy-lock-text .hint { margin: 0; font-size: 12.5px; }
.field-note { margin-left: 6px; font-weight: 500; color: var(--ink-3); }
.privacy-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.privacy-option { display: grid; gap: 6px; justify-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.privacy-option:hover:not(:disabled) { border-color: var(--ink-4); }
.privacy-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }
.privacy-option:disabled { opacity: .5; cursor: not-allowed; }
.privacy-option-title { font-size: 13px; font-weight: 600; }
.privacy-sample { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* PIN dialog: a lock whose ring fills as digits go in, six boxes drawn under
   each real input (which stays on top, invisible, to take typing and taps) and
   a keypad. States on the dialog: is-unlock (only the PIN), pin-ok (unlocking),
   pin-bad (wrong PIN), pin-wait (the server's pause after too many wrong PINs). */
@media (min-width: 641px) { .passcode-modal.modal.sm { width: min(400px, calc(100vw - 24px)); } }
.passcode-modal { overflow-x: hidden; }
.passcode-modal .modal-head { flex-direction: column; align-items: center; gap: 10px; padding: 26px 22px 2px; border-bottom: 0; text-align: center;
  background: radial-gradient(120% 90% at 50% -25%, color-mix(in srgb, var(--pin-tone, var(--accent)) 16%, transparent), transparent 70%), var(--surface); transition: background .3s; }
.passcode-modal.pin-ok { --pin-tone: var(--green-dot); }
.passcode-modal.pin-bad { --pin-tone: var(--rose-dot); }
.passcode-modal.pin-wait { --pin-tone: var(--amber-dot); }
.passcode-modal #passcode-close { position: absolute; top: 12px; right: 12px; }
.passcode-modal .modal-body { padding-top: 14px; }
.passcode-modal.is-unlock #passcode-current-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.passcode-modal.is-unlock .modal-actions { display: none; }
.passcode-modal .passcode-links { text-align: center; }
.passcode-modal.pin-leaving { animation: pin-leave .22s var(--ease) forwards; }
@keyframes pin-leave { to { opacity: 0; transform: scale(.96); } }

.pin-lock { position: relative; display: block; width: 72px; height: 72px; flex: none; }
.pin-lock svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pin-ring-track { fill: none; stroke: var(--line); stroke-width: 3; }
.pin-ring { fill: none; stroke: var(--pin-tone, var(--accent)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 201.06; transform: rotate(-90deg); transform-origin: 38px 38px; transition: stroke-dashoffset .28s var(--ease), stroke .3s; }
.pin-face { fill: color-mix(in srgb, var(--pin-tone, var(--accent)) 14%, transparent); transition: fill .3s; }
.pin-body { fill: var(--pin-tone, var(--accent)); transition: fill .3s; }
.pin-shackle { fill: none; stroke: var(--pin-tone, var(--accent)); stroke-width: 3.2; stroke-linecap: round; transform-origin: 46px 34px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), stroke .3s; }
.pin-hole { fill: var(--surface); }
.pin-wait .pin-ring { transition: stroke-dashoffset 1s linear, stroke .3s; }
.pin-ok .pin-shackle { transform: translateY(-5px) rotate(28deg); }
.pin-lock::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; pointer-events: none; }
.pin-lock.pulse::after { animation: pin-pulse .5s var(--ease); }
.pin-ok .pin-lock::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--green-dot); border-radius: 50%; pointer-events: none; animation: pin-burst .7s var(--ease) forwards; }
@keyframes pin-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
@keyframes pin-burst { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.8); } }

.pin-entry { position: relative; }
.passcode-modal .pin-entry .pin-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.pin-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pin-boxes i { display: grid; place-items: center; height: 54px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, opacity .2s; }
.pin-boxes i.cur { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.pin-boxes i.cur::before { content: ""; width: 2px; height: 22px; border-radius: 2px; background: var(--accent); animation: pin-caret 1s steps(1) infinite; }
.pin-boxes i.on::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); animation: pin-pop .28s cubic-bezier(.34, 1.56, .64, 1); }
.pin-input:disabled + .pin-boxes i { opacity: .55; }
.pin-boxes.is-shaking { animation: pin-shake .5s cubic-bezier(.36, .07, .19, .97); }
.pin-boxes.is-shaking i { box-shadow: inset 0 0 0 1.5px var(--rose-dot); opacity: 1; }
.pin-boxes.is-shaking i.on::before { background: var(--rose-dot); }
.pin-boxes i.drop::before { animation: pin-drop .22s var(--ease) forwards; }
.pin-ok .pin-boxes i { box-shadow: inset 0 0 0 1.5px var(--green-dot); opacity: 1; animation: pin-done .4s var(--ease) forwards; }
.pin-ok .pin-boxes i.on::before { background: var(--green-dot); }
.pin-ok .pin-boxes i:nth-child(2) { animation-delay: 35ms; } .pin-ok .pin-boxes i:nth-child(3) { animation-delay: 70ms; }
.pin-ok .pin-boxes i:nth-child(4) { animation-delay: 105ms; } .pin-ok .pin-boxes i:nth-child(5) { animation-delay: 140ms; }
.pin-ok .pin-boxes i:nth-child(6) { animation-delay: 175ms; }
@keyframes pin-caret { 50% { opacity: 0; } }
@keyframes pin-pop { from { transform: scale(.3); } }
@keyframes pin-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
@keyframes pin-drop { to { opacity: 0; transform: translateY(8px) scale(.5); } }
@keyframes pin-done { 30% { transform: scale(1.04); } to { opacity: 0; transform: scale(.7); } }

.pin-pips { display: flex; justify-content: center; gap: 5px; height: 3px; margin: 12px 0 0; opacity: 0; transition: opacity .3s; }
.pin-pips.show { opacity: 1; }
.pin-pips i { width: 16px; height: 3px; border-radius: 3px; background: var(--ink-4); opacity: .5; transition: background .3s, opacity .3s; }
.pin-pips i.used { background: var(--rose-dot); opacity: .9; }
.pin-wait-text { margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--amber-dot); font-variant-numeric: tabular-nums; }

.pin-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.pin-key { position: relative; height: 50px; overflow: hidden; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, transform .1s; touch-action: manipulation; }
.pin-key:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.pin-key:active:not(:disabled) { transform: scale(.95); }
.pin-key.soft { background: transparent; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.pin-key:disabled { opacity: .4; cursor: default; }
.pin-ink { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 40%, transparent); pointer-events: none; animation: pin-ink .45s var(--ease) forwards; }
@keyframes pin-ink { to { opacity: 0; transform: scale(12); } }
@media (prefers-reduced-motion: reduce) {
  .pin-boxes i.on::before, .pin-boxes i.cur::before, .pin-boxes.is-shaking, .pin-ok .pin-boxes i, .pin-lock::before, .pin-lock::after, .passcode-modal.pin-leaving, .pin-ink { animation: none !important; }
  .pin-ring, .pin-shackle, .pin-face, .pin-body { transition: none; }
}
.passcode-links { margin: 4px 0 0; }
.passcode-modal .hint:empty { display: none; }
.passcode-links .link-btn[hidden] { display: none; }
#privacy-toggle[aria-pressed="true"] { color: var(--side-accent); }
.account-chip-status:empty { display: none; }
/* The phone tab bar has no room for Files; the top bar carries it instead. */
#files-shortcut { display: none; }
@media (max-width: 900px) {
  .sidebar-foot { display: flex; order: 1; margin-left: auto; }
  .sidebar-foot > :not(#privacy-toggle, #files-shortcut) { display: none; }
  :is(#privacy-toggle, #files-shortcut) { width: 40px; height: 40px; padding: 0; justify-content: center; }
  #files-shortcut { display: flex; }
  :is(#privacy-toggle, #files-shortcut) span { display: none; }
  .account-chip { margin-left: 0; }
}

/* ================= Warm palette (default) =================
   Warm grays and a clay accent, after the Claude app. The navy look above
   stays as data-palette="classic". The light block also matches in dark
   mode, so each dark block below repeats every token it sets. */
:root:not([data-palette="classic"]) {
  --bg: #f5f4ee;
  --surface: #ffffff;
  --surface-2: #faf9f5;
  --surface-3: #f0eee6;
  --surface-hover: #f7f6f1;
  --line: #e7e5dc;
  --line-2: #d8d5c9;
  --ink: #141413;
  --ink-2: #3d3d3a;
  --ink-3: #6c6b65;
  --ink-4: #a3a198;
  --primary: #141413;
  --primary-hover: #2e2d2a;
  --on-primary: #ffffff;
  --accent: #ad4f2d;
  --accent-strong: #933f21;
  --accent-soft: #f8ece6;
  --accent-line: #eccbbd;
  --on-accent: #ffffff;
  --focus: 0 0 0 3px rgba(198, 97, 63, .24);
  --gray: #6c6b65;
  --gray-bg: #efeee8;
  --flow-unpaid: #9c9a92;
  --side-bg: #efede6;
  --side-bg-2: #f8f7f3;
  --side-hover: rgba(20, 20, 19, .05);
  --side-active: rgba(20, 20, 19, .07);
  --side-line: #e2dfd5;
  --side-ink: #141413;
  --side-ink-2: #6c6b65;
  --side-accent: #ad4f2d;
  --side-fill: #ffffff;
  --side-fill-hover: #fdfcfa;
  --side-edge: #dbd8cc;
  --side-active-ink: #141413;
  --side-chip-hover: #ffffff;
  --side-nav-bg: rgba(239, 237, 230, .94);
  --shadow-xs: 0 1px 2px rgba(20, 20, 19, .05);
  --shadow-sm: 0 1px 2px rgba(20, 20, 19, .04), 0 2px 8px rgba(20, 20, 19, .04);
  --shadow-md: 0 6px 16px rgba(20, 20, 19, .07), 0 1px 3px rgba(20, 20, 19, .05);
  --shadow-lg: 0 28px 64px rgba(20, 20, 19, .2), 0 6px 18px rgba(20, 20, 19, .08);
  --select-caret: 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='%239c9a92' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-palette="classic"]):not([data-theme="light"]) {
    --bg: #262624;
    --surface: #30302e;
    --surface-2: #343331;
    --surface-3: #3b3a37;
    --surface-hover: #373634;
    --line: #3e3d39;
    --line-2: #4d4c47;
    --ink: #faf9f5;
    --ink-2: #c2c0b6;
    --ink-3: #9c9a92;
    --ink-4: #6f6d66;
    --primary: #faf9f5;
    --primary-hover: #ffffff;
    --on-primary: #141413;
    --accent: #e08a6c;
    --accent-strong: #eba085;
    --accent-soft: rgba(224, 138, 108, .13);
    --accent-line: rgba(224, 138, 108, .36);
    --on-accent: #141413;
    --focus: 0 0 0 3px rgba(224, 138, 108, .3);
    --gray: #a8a69c;
    --gray-bg: rgba(200, 196, 182, .12);
    --flow-unpaid: #8a887f;
    --side-bg: #1f1e1d;
    --side-bg-2: #282826;
    --side-hover: rgba(255, 255, 255, .05);
    --side-active: rgba(255, 255, 255, .08);
    --side-line: rgba(255, 255, 255, .07);
    --side-ink: #f5f4ef;
    --side-ink-2: #a09e95;
    --side-accent: #e08a6c;
    --side-fill: rgba(255, 255, 255, .05);
    --side-fill-hover: rgba(255, 255, 255, .08);
    --side-edge: rgba(255, 255, 255, .1);
    --side-active-ink: #ffffff;
    --side-chip-hover: #2f2e2c;
    --side-nav-bg: rgba(31, 30, 29, .94);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .35);
    --select-caret: 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='%239c9a92' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}
:root:not([data-palette="classic"])[data-theme="dark"] {
  --bg: #262624;
  --surface: #30302e;
  --surface-2: #343331;
  --surface-3: #3b3a37;
  --surface-hover: #373634;
  --line: #3e3d39;
  --line-2: #4d4c47;
  --ink: #faf9f5;
  --ink-2: #c2c0b6;
  --ink-3: #9c9a92;
  --ink-4: #6f6d66;
  --primary: #faf9f5;
  --primary-hover: #ffffff;
  --on-primary: #141413;
  --accent: #e08a6c;
  --accent-strong: #eba085;
  --accent-soft: rgba(224, 138, 108, .13);
  --accent-line: rgba(224, 138, 108, .36);
  --on-accent: #141413;
  --focus: 0 0 0 3px rgba(224, 138, 108, .3);
  --gray: #a8a69c;
  --gray-bg: rgba(200, 196, 182, .12);
  --flow-unpaid: #8a887f;
  --side-bg: #1f1e1d;
  --side-bg-2: #282826;
  --side-hover: rgba(255, 255, 255, .05);
  --side-active: rgba(255, 255, 255, .08);
  --side-line: rgba(255, 255, 255, .07);
  --side-ink: #f5f4ef;
  --side-ink-2: #a09e95;
  --side-accent: #e08a6c;
  --side-fill: rgba(255, 255, 255, .05);
  --side-fill-hover: rgba(255, 255, 255, .08);
  --side-edge: rgba(255, 255, 255, .1);
  --side-active-ink: #ffffff;
  --side-chip-hover: #2f2e2c;
  --side-nav-bg: rgba(31, 30, 29, .94);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .35);
  --select-caret: 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='%239c9a92' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Sidebar: flat, and light in light mode, so the white-on-navy fills above
   switch to the --side-* tokens. */
:root:not([data-palette="classic"]) .sidebar { background: var(--side-bg); }
:root:not([data-palette="classic"]) .switcher-control select { border-color: var(--side-edge); background-color: var(--side-fill); }
:root:not([data-palette="classic"]) .switcher-control select:hover:not(:disabled) { background-color: var(--side-fill-hover); }
:root:not([data-palette="classic"]) .switcher-control select:focus { border-color: var(--side-accent); box-shadow: var(--focus); }
:root:not([data-palette="classic"]) .switcher-actions .side-btn { background: var(--side-fill); }
:root:not([data-palette="classic"]) .nav a.active { color: var(--side-active-ink); box-shadow: none; }
:root:not([data-palette="classic"]) .account-chip:hover:not(:disabled) { background: var(--side-chip-hover); border-color: var(--side-edge); }
:root:not([data-palette="classic"]) .help-top .btn { background: var(--side-fill); border-color: var(--side-edge); }
:root:not([data-palette="classic"]) .help-top .btn:hover { background: var(--side-fill-hover); }
@media (max-width: 900px) {
  :root:not([data-palette="classic"]) .nav { background: var(--side-nav-bg); }
  :root:not([data-palette="classic"]) .nav a.active { background: var(--side-active); }
}

/* Clay replaces the indigo gradients. */
:root:not([data-palette="classic"]) .brand-mark { background: linear-gradient(150deg, #d5704d 0%, #a2452a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(198, 97, 63, .28); }
:root:not([data-palette="classic"]) .avatar { background: linear-gradient(150deg, #e3906f, #b5532f); }
:root:not([data-palette="classic"]) :is(.side-cta, .drop-icon, .onboard-icon, .nav-fab) { background: linear-gradient(135deg, #d97757, #b5532f); }
:root:not([data-palette="classic"]) .side-cta { box-shadow: 0 8px 20px rgba(181, 83, 47, .28), inset 0 1px 0 rgba(255, 255, 255, .2); }
:root:not([data-palette="classic"]) .side-cta:hover { box-shadow: 0 12px 26px rgba(181, 83, 47, .34), inset 0 1px 0 rgba(255, 255, 255, .2); }
:root:not([data-palette="classic"]) .onboard-icon { box-shadow: 0 12px 26px rgba(181, 83, 47, .3); }
:root:not([data-palette="classic"]) .nav-fab { box-shadow: 0 10px 22px rgba(181, 83, 47, .4); }

/* Dark feature panels turn warm charcoal. */
:root:not([data-palette="classic"]) .auth-aside { background: radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, .065), transparent 62%), #1c1b1a; }
:root:not([data-palette="classic"]) .help-hero { background: radial-gradient(80% 90% at 10% 0%, rgba(217, 119, 87, .28), transparent 60%), radial-gradient(60% 70% at 100% 100%, rgba(35, 196, 150, .12), transparent 62%), #1f1e1d; }
:root:not([data-palette="classic"]) .toast { background: #30302e; }
:root:not([data-palette="classic"]) .drop-card { background: rgba(38, 38, 36, .8); }
:root:not([data-palette="classic"]) :is(.toast a, .auth-pitch .eyebrow, .help-hero .eyebrow) { color: #f0b196; }
:root:not([data-palette="classic"]) :is(.brand.on-dark .brand-text small) { color: #b5b2a7; }
:root:not([data-palette="classic"]) :is(.help-hero p, .auth-points, .auth-scene-legend, .drop-card span:last-child) { color: #c9c6bb; }
:root:not([data-palette="classic"]) .drop-overlay { background: rgba(20, 20, 19, .58); }
:root:not([data-palette="classic"]) dialog::backdrop { background: rgba(20, 20, 19, .5); }

/* Font picker: each option previews itself. */
.font-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.font-choice { display: grid; justify-items: center; gap: 1px; padding: 10px 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-3); cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s; }
.font-choice:hover { border-color: var(--line-2); color: var(--ink); }
.font-choice[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 1px var(--accent); }
.font-choice-sample { font-size: 20px; line-height: 1.35; color: var(--ink); }
.font-choice small { font-size: 12px; font-weight: 500; white-space: nowrap; }
.font-choice.f-line-seed { font-family: var(--font-line-seed); }
.font-choice.f-plex-looped { font-family: var(--font-plex-looped); }
.font-choice.f-google-sans { font-family: var(--font-google-sans); }

/* ================= Studio design =================
   A top bar instead of the sidebar, and infographic pages. It is the only
   design; its rules keep the html:not([data-design="classic"]) wrapper so
   they still outrank the base rules above. */
.study-grid, .study-side, .studio-only, .receipt-grid, .study-strip, .study-top, .side-search { display: none; }
html:not([data-design="classic"]) {
  & main { max-width: 1360px; }
  /* Sign-in stays full-bleed: outranks the width cap and top-bar padding here. */
  & .signed-out main { max-width: none; padding: 0; }
  & .page-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }

  /* Top bar: the sidebar's own controls, laid out in one row. */
  @media (min-width: 901px) {
    & .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    & .sidebar {
      --side-bg: color-mix(in srgb, var(--bg) 84%, transparent); --side-bg-2: var(--surface);
      --side-ink: var(--ink); --side-ink-2: var(--ink-3); --side-hover: var(--surface-hover); --side-active: var(--surface);
      --side-line: var(--line); --side-accent: var(--accent); --side-fill: var(--surface); --side-fill-hover: var(--surface-hover);
      --side-edge: var(--line); --side-active-ink: var(--ink); --side-chip-hover: var(--surface-hover);
      position: sticky; top: 0; z-index: 40; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px;
      height: 64px; padding: 0 28px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line);
      background: var(--side-bg); color: var(--ink); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    }
    & .sidebar > .brand { order: 0; flex: none; padding: 0; }
    & .sidebar .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
    & .sidebar .brand-mark svg { width: 24px; height: 24px; }
    & .sidebar .brand-text small { display: none; }
    & .sidebar .brand-text strong { font-size: 16px; }
    & .sidebar .nav { order: 1; display: flex; flex: none; gap: 2px; margin-left: 14px; padding: 4px; border-radius: 12px; background: var(--surface-3); }
    & .sidebar .nav a { height: 34px; gap: 7px; padding: 0 14px; border-radius: 9px; font-size: 14px; }
    & .sidebar .nav a .i { display: none; }
    & .sidebar .nav a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
    & .sidebar .nav a.active::before { display: none; }
    & .sidebar .nav-files { margin-top: 0; }
    & .sidebar .nav-files::after, & .sidebar .nav-fab { display: none; }
    & .sidebar .nav-badge { min-width: 20px; height: 18px; margin-left: 2px; font-size: 11px; }
    & .sidebar .switcher { order: 2; display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 0; border: 0; background: none; }
    & .sidebar .switcher-label, & .sidebar .switcher-note { display: none; }
    & .sidebar .switcher-control select { width: 210px; height: 36px; font-size: 13.5px; }
    & .sidebar .switcher-actions .side-btn { width: 34px; height: 34px; padding: 0; justify-content: center; background: none; }
    & .sidebar .switcher-actions .side-btn span { display: none; }
    & .sidebar .side-cta { order: 3; flex: none; height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
    & .sidebar .side-cta kbd { display: none; }
    & .sidebar .sidebar-foot { order: 4; display: flex; gap: 2px; margin-top: 0; }
    & .sidebar .sidebar-foot .side-btn { width: 34px; height: 34px; padding: 0; justify-content: center; }
    & .sidebar .sidebar-foot .side-btn span { display: none; }
    & .sidebar .account-chip { order: 5; width: auto; padding: 2px; border: 0; border-radius: 99px; background: none; }
    & .sidebar .account-chip-text, & .sidebar .account-chip-caret { display: none; }
    & main { padding-top: 32px; }
  }
  @media (min-width: 901px) and (max-width: 1240px) {
    & .sidebar .switcher-control select { width: 160px; }
    & .sidebar .side-cta span { display: none; }
    & .sidebar .side-cta { width: 36px; padding: 0; justify-content: center; }
    & .sidebar .nav a { padding: 0 11px; }
  }

  /* Studies: the original toolbar and filters, a month-grouped list, and a
     sticky summary with a chart beside it. */
  & #study-list .table-wrap { display: none; }
  & .study-grid { display: block; --cols: minmax(0, 1fr) 104px 112px 150px 136px 18px; }
  & #study-list { overflow: clip; }
  @media (min-width: 1101px) {
    & #view-studies:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 20px; align-items: start; }
    & #view-studies > * { grid-column: 1; min-width: 0; }
    & #view-studies > .toolbar { grid-column: 1 / -1; }
    & #view-studies > #study-side { display: grid; grid-column: 2; grid-row: 2 / span 8; position: sticky; top: 84px; }
  }
  & .srow-head, & .srow { display: grid; grid-template-columns: var(--cols); gap: 14px; align-items: center; padding: 0 20px; }
  & .srow-head { height: 42px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--ink-4); }
  & .srow-head .num, & .srow .num { text-align: right; }
  & .sgot-head { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
  & .got-toggle { display: inline-flex; padding: 2px; border-radius: 7px; background: var(--surface-3); }
  & .got-toggle button { display: grid; place-items: center; width: 24px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--ink-4); cursor: pointer; }
  & .got-toggle button .i { width: 14px; height: 14px; }
  & .got-toggle button:hover { color: var(--ink); }
  & .got-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
  & .sgroup { display: flex; align-items: center; gap: 10px; padding: 18px 20px 9px; border-bottom: 1px solid var(--line); background: var(--surface); }
  & .sgroup strong { font-size: 15px; font-weight: 700; }
  & .sgroup > span { font-size: 12.5px; color: var(--ink-3); }
  & .sgroup-sum { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  & .sgroup-sum .sgot-bar { width: 72px; flex: none; }
  & .sgroup-sum b { font-size: 14px; font-weight: 700; color: var(--ink); }
  @media (min-width: 901px) { & .sgroup { position: sticky; top: 64px; z-index: 2; } }
  & .srow { min-height: 62px; padding-block: 10px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; }
  & .srow:hover { background: var(--surface-hover); }
  & .srow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
  & .srow.is-excluded { opacity: .55; }
  & .srow-main { display: grid; min-width: 0; }
  & .srow-main strong, & .srow-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  & .srow-main strong { font-size: 14.5px; font-weight: 600; }
  & .srow-sub { font-size: 12.5px; color: var(--ink-3); }
  & .srow-date { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
  & .srow-exp { display: grid; justify-items: end; font-size: 14px; color: var(--ink-2); }
  & .sgot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 22px; }
  & .sgot-bar { display: block; flex: 1; max-width: 84px; height: 6px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
  & .sgot-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green-dot); }
  & .sgot.tone-part .sgot-bar i { background: var(--amber-dot); }
  & .sgot small { width: 38px; font-size: 12px; text-align: right; color: var(--ink-3); }
  & .sgot strong { display: none; font-size: 14.5px; font-weight: 700; }
  & .sgot.tone-full strong { color: var(--green); }
  & .sgot.tone-part strong { color: var(--amber); }
  & .sgot.tone-none strong { color: var(--ink-4); font-weight: 500; }
  & .sgot:hover :is(.sgot-bar, small), & .study-grid[data-received="amount"] .sgot :is(.sgot-bar, small) { display: none; }
  & .sgot:hover strong, & .study-grid[data-received="amount"] .sgot strong { display: inline; }
  & .srow-status { text-align: right; }
  & .sst { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  & .sst .i { width: 14px; height: 14px; stroke-width: 2.4; }
  & .sst.ok { color: var(--green); } & .sst.warn { color: var(--amber); } & .sst.late { color: var(--rose); }
  & .sst.sky { color: var(--sky); } & .sst.violet { color: var(--violet); } & .sst.muted { font-weight: 500; color: var(--ink-3); }
  @media (max-width: 760px) {
    & .srow-head { display: none; }
    & .srow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    & .srow-date, & .srow-exp { display: none; }
    & .srow-main { grid-row: 1 / span 2; }
    & .sgot { grid-column: 2; grid-row: 1; }
    & .srow-status { grid-column: 2; grid-row: 2; }
  }

  & .study-side { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-xs); }
  & .side-empty { margin: 0; font-size: 13px; color: var(--ink-3); }
}

/* Panels and the match ring on the payments page. */
html:not([data-design="classic"]) {
  & .sh-ring-chart { position: relative; width: 164px; height: 164px; }
  & .sh-ring-chart svg { width: 100%; height: 100%; }
  & .sh-ring-track { fill: none; stroke: var(--surface-3); stroke-width: 11; }
  & .sh-ring-value { fill: none; stroke: var(--flow-paid); stroke-width: 11; stroke-linecap: round; }
  & .sh-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  & .sh-ring-text strong { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
  & .sh-ring-text span { font-size: 13px; color: var(--ink-3); }
  & .sh-ring-meta { display: grid; gap: 8px; width: 100%; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
  & .sh-ring-meta div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
  & .sh-ring-meta dt { color: var(--ink-3); }
  & .sh-ring-meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
  & .sh-panel { min-width: 0; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-xs); }
  & .sh-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  & .sh-panel-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
  & .sh-panel-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
}

/* Overview: capsule bars with an orange month range, activity rings and a
   storage-style money bar, in the status colours the other pages use. */
:root {
  --ov-paid: #34c759; --ov-accepted: var(--flow-accepted); --ov-variance: var(--flow-variance); --ov-wait: var(--flow-unpaid);
  --ov-late1: color-mix(in srgb, var(--flow-unpaid) 55%, var(--ink-2)); --ov-late2: #e0762e; --ov-late3: var(--rose-dot); --ov-review: var(--rose-dot);
  --ov-paid-ink: #248a3d; --ov-accepted-ink: var(--flow-accepted); --ov-variance-ink: var(--amber); --ov-wait-ink: var(--ink-2); --ov-late2-ink: #e0762e; --ov-late3-ink: var(--rose); --ov-review-ink: var(--rose);
  --ov-hair: rgba(20, 20, 19, .08);
  /* The overview's own vivid green for received money; the chart and the
     outer ring light it with a gradient, the bars and tiles use it flat. */
  --ov-chart: var(--ov-paid); --ov-chart-2: #5fd97f; --ov-chart-ink: var(--ov-paid-ink); --ov-chart-track: color-mix(in srgb, var(--ov-paid) 16%, transparent);
  --ov-chart-red: var(--rose-dot); --ov-chart-red-ink: var(--rose);
  --ov-ra1: var(--ov-paid); --ov-ra2: #a3e635; --ov-rb1: #00a8e8; --ov-rb2: #47e3ff; --ov-rc1: #ff2d55; --ov-rc2: #ff7aa2;
  --ov-card-line: rgba(20, 20, 19, .055); --ov-card-shadow: 0 1px 2px rgba(20, 20, 19, .05), 0 12px 32px -18px rgba(20, 20, 19, .16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ov-hair: rgba(255, 255, 255, .08); --ov-card-line: rgba(255, 255, 255, .065); --ov-card-top: rgba(255, 255, 255, .022);
    --ov-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(0, 0, 0, .28), 0 18px 40px -22px rgba(0, 0, 0, .6);
    --ov-paid: #30d158; --ov-paid-ink: #30d158; --ov-chart-2: #6be38a; --ov-ra2: #b6f34a; --ov-rb1: #00b4f0; --ov-rb2: #5cecff; --ov-rc1: #ff2d55; --ov-rc2: #ff85aa;
  }
}
:root[data-theme="dark"] {
  --ov-hair: rgba(255, 255, 255, .08); --ov-card-line: rgba(255, 255, 255, .065); --ov-card-top: rgba(255, 255, 255, .022);
    --ov-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(0, 0, 0, .28), 0 18px 40px -22px rgba(0, 0, 0, .6);
  --ov-paid: #30d158; --ov-paid-ink: #30d158; --ov-chart-2: #6be38a; --ov-ra2: #b6f34a; --ov-rb1: #00b4f0; --ov-rb2: #5cecff; --ov-rc1: #ff2d55; --ov-rc2: #ff85aa;
}
.ov-h-paid { --h: var(--ov-paid); --h-ink: var(--ov-paid-ink); }
.ov-h-accepted { --h: var(--ov-accepted); --h-ink: var(--ov-accepted-ink); }
.ov-h-variance { --h: var(--ov-variance); --h-ink: var(--ov-variance-ink); }
.ov-h-wait { --h: var(--ov-wait); --h-ink: var(--ov-wait-ink); }
.ov-h-late1 { --h: var(--ov-late1); --h-ink: var(--ink-3); }
.ov-h-unknown { --h: var(--ink-4); --h-ink: var(--ink-3); }
.ov-h-late2 { --h: var(--ov-late2); --h-ink: var(--ov-late2-ink); }
.ov-h-late3 { --h: var(--ov-late3); --h-ink: var(--ov-late3-ink); }
.chart-tip .ov-key { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--h); }
.chart-tip .tip-go { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--ink-3); }
/* A modality's tip: its figures and a small bar for each month. */
.chart-tip .ov-peek { width: 264px; }
.chart-tip .ov-peek strong small { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.ov-peek svg { display: block; width: 100%; height: auto; margin: 10px 0 6px; overflow: visible; }
.ov-peek .pk-exp { fill: var(--m); opacity: .22; }
.ov-peek .pk-got { fill: var(--m); }
.ov-peek .out { opacity: .4; }
.ov-peek text { font-size: 9.5px; fill: var(--ink-3); text-anchor: middle; }
.ov-peek-keys { display: flex; gap: 12px; margin: 0; font-size: 11.5px; color: var(--ink-3); }
.ov-peek-keys i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--m); }
.ov-peek-keys i.exp { opacity: .25; }
.chart-tip .ov-peek .tip-go { color: var(--m); }

:root:not([data-look="ledger"]) .ov-card { background: linear-gradient(180deg, var(--ov-card-top, transparent), transparent 140px), var(--surface); }
html:not([data-design="classic"]) {
  & .home-studio { display: block; }
  & .ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
  & .ov-span-12 { grid-column: span 12; } & .ov-span-8 { grid-column: span 8; } & .ov-span-4 { grid-column: span 4; }
  & .ov-card { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px 22px; border: 1px solid var(--ov-card-line); border-radius: 22px; background: var(--surface); box-shadow: var(--ov-card-shadow); color: var(--ink); font: inherit; text-align: left; }
  & .ov-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
  & .ov-ttl { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); }
  & .ov-ttl .i { width: 18px; height: 18px; stroke-width: 2.1; color: var(--h-ink, var(--accent)); }
  & .ov-meta { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  & .ov-seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-3); }
  & .ov-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
  & .ov-seg button:hover:not(:disabled) { color: var(--ink); }
  & .ov-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
  & .ov-seg button:disabled { opacity: .4; cursor: default; }
  @media (pointer: coarse) { & .ov-seg button { height: 36px; } }

  /* Headline figure: the range, or the month under the pointer. */
  & .ov-figure { margin: 12px 0 4px; }
  & .ov-figure p { margin: 0; }
  & .ov-figure-label { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); transition: color .15s; }
  & .ov-figure-label.scrub { color: var(--accent); }
  & .ov-figure .ov-figure-big { display: flex; align-items: baseline; gap: 2px; margin: 4px 0; font-size: 48px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  & .ov-dec { font-size: .44em; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
  & .ov-figure-big small { margin-left: 10px; font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
  & .ov-figure-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 24px; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  & .ov-figure-sub b { color: var(--ink); }
  & .ov-delta { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12.5px; font-weight: 700; }
  & .ov-delta .i { width: 13px; height: 13px; stroke-width: 2.6; }
  & .ov-delta.up { background: color-mix(in srgb, var(--ov-chart) 16%, transparent); color: var(--ov-chart-ink); }
  & .ov-delta:is(.down, .late) { background: color-mix(in srgb, var(--ov-chart-red) 14%, transparent); color: var(--ov-chart-red-ink); }
  & .ov-delta.down .i { transform: rotate(180deg); }

  /* Monthly chart: capsules for what was expected, filled by what arrived. */
  & .ov-chart { --bw: 22px; position: relative; margin-top: 22px; }
  & .ov-chart.n-13, & .ov-chart.n-14, & .ov-chart.n-15, & .ov-chart.n-16, & .ov-chart.n-17, & .ov-chart.n-18 { --bw: 16px; }
  & .ov-chart:is(.n-19, .n-20, .n-21, .n-22, .n-23, .n-24) { --bw: 12px; }
  & .ov-plot { position: relative; height: 230px; margin-right: 52px; cursor: crosshair; user-select: none; touch-action: pan-y; }
  & .ov-grid-lines i { position: absolute; left: 0; right: -52px; border-top: 1px solid var(--ov-hair); }
  & .ov-grid-lines i.base { border-top-color: color-mix(in srgb, var(--ink) 16%, transparent); }
  & .ov-grid-lines span { position: absolute; right: -52px; width: 44px; margin-bottom: -8px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  & .ov-cols { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  & .ov-col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; padding: 0; border: 0; background: none; cursor: inherit; }
  & .ov-col:focus-visible { outline: none; }
  & .ov-col:focus-visible .ov-track { box-shadow: var(--focus); }
  & .ov-track { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: min(var(--bw), 70%); border-radius: 99px; background: var(--ov-chart-track); transform-origin: bottom; transition: height .5s var(--ease), opacity .2s; }
  & .ov-fill { display: block; width: 100%; border-radius: 99px; background: linear-gradient(180deg, var(--ov-chart-2), var(--ov-chart)); transition: height .5s var(--ease); }
  & .ov-flag { position: absolute; left: 50%; top: -13px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--ov-chart-red); box-shadow: 0 0 0 2.5px var(--surface); }
  & .ov-chart.has-sel .ov-col.out .ov-track { opacity: .28; }
  & .ov-chart.has-hover .ov-col:not(.hover):not(.out) .ov-track { opacity: .55; }
  & .ov-cursor { position: absolute; top: -10px; bottom: 0; z-index: 2; width: 0; border-left: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); opacity: 0; pointer-events: none; transition: opacity .12s; }
  & .ov-cursor.on { opacity: 1; }
  & .ov-avg { position: absolute; left: 0; right: -52px; z-index: 2; border-top: 1.5px dashed color-mix(in srgb, var(--ov-chart) 70%, transparent); pointer-events: none; transition: bottom .5s var(--ease); }
  & .ov-avg span { position: absolute; left: 0; top: -11px; padding: 1px 7px; border-radius: 6px; background: var(--ov-chart); color: #06290f; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
  & .ov-brush { position: absolute; top: -14px; bottom: -6px; z-index: 0; border: 1px solid var(--accent-line); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, transparent); transition: left .3s var(--ease), width .3s var(--ease), opacity .2s; }
  & .ov-plot.all :is(.ov-brush, .ov-handle) { opacity: 0; pointer-events: none; }
  & .ov-brush.live, & .ov-brush.live ~ .ov-handle { transition: none; }
  & .ov-handle { position: absolute; top: 50%; z-index: 3; width: 10px; height: 40px; margin-top: -20px; border: 1.5px solid var(--accent); border-radius: 6px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); transform: translateX(-50%); cursor: ew-resize; transition: left .3s var(--ease), opacity .2s; }
  & .ov-handle::after { content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; border-left: 1.5px solid var(--accent-line); transform: translateX(-50%); }
  & .ov-x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 10px 52px 0 0; }
  & .ov-x span { display: grid; justify-items: center; font-size: 12px; color: var(--ink-3); transition: color .15s, opacity .2s; }
  & .ov-x span.hover { color: var(--accent); font-weight: 700; }
  & .ov-x span.out { opacity: .45; }
  & .ov-x em { min-height: 15px; font-size: 10.5px; font-style: normal; color: var(--ink-3); }
  & .ov-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; font-size: 12.5px; color: var(--ink-3); }
  & .ov-keys { display: flex; gap: 16px; }
  & .ov-keys span { display: inline-flex; align-items: center; gap: 6px; }
  & .ov-keys i { width: 10px; height: 10px; border-radius: 4px; }
  & .ov-keys .k-got { background: var(--ov-chart); } & .ov-keys .k-exp { background: var(--ov-chart-track); } & .ov-keys .k-late { width: 7px; height: 7px; border-radius: 50%; background: var(--ov-chart-red); }

  /* Rings */
  & .ov-rings { display: grid; place-items: center; margin: 14px 0 6px; }
  & .ov-rings svg { width: 196px; height: 196px; overflow: visible; }
  & .ov-ring { transition: opacity .2s; }
  & .ov-ring-track { fill: none; stroke-width: 17; }
  & .ov-ring-arc { fill: none; stroke-width: 17; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .25)); transition: stroke-dasharray 1s var(--ease); }
  & .ov-ring-a .ov-ring-track { stroke: color-mix(in srgb, var(--ov-ra1) 18%, transparent); }
  & .ov-ring-b .ov-ring-track { stroke: color-mix(in srgb, var(--ov-rb1) 18%, transparent); }
  & .ov-ring-c .ov-ring-track { stroke: color-mix(in srgb, var(--ov-rc1) 18%, transparent); }
  & .ov-rs-a1 { stop-color: var(--ov-ra1); } & .ov-rs-a2 { stop-color: var(--ov-ra2); } & .ov-rs-b1 { stop-color: var(--ov-rb1); } & .ov-rs-b2 { stop-color: var(--ov-rb2); } & .ov-rs-c1 { stop-color: var(--ov-rc1); } & .ov-rs-c2 { stop-color: var(--ov-rc2); }
  & .ov-rings.has-focus .ov-ring:not(.is-focus) { opacity: .25; }
  & .ov-ring-list { display: flex; flex-direction: column; margin-top: 10px; }
  & .ov-ring-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ov-hair); }
  & .ov-ring-row span { font-size: 13.5px; color: var(--ink-3); }
  & .ov-ring-row span small { display: block; font-size: 12.5px; }
  & .ov-ring-row b { font-size: 21px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  & .ov-ring-row b small { margin-left: 3px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
  & .ov-ring-row.a b { color: var(--ov-paid-ink); } & .ov-ring-row.b b { color: var(--ov-rb1); } & .ov-ring-row.c b { color: var(--ov-rc1); }

  /* Tiles: what is still open */
  & .ov-tile { gap: 10px; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
  & .ov-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .1); }
  & .ov-tile:focus-visible { outline: none; box-shadow: var(--focus); }
  & .ov-tile .ov-ttl { color: var(--h-ink); }
  & .ov-go-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-3); }
  & .ov-go-label .i { width: 15px; height: 15px; }
  & .ov-tile-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  & .ov-tile-body > span:first-child { display: grid; min-width: 0; }
  & .ov-tile-big { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  & .ov-tile-big small { margin-left: 5px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
  & .ov-tile-sub { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
  & .ov-spark { display: flex; flex: none; align-items: flex-end; gap: 4px; height: 52px; }
  & .ov-spark i { width: 6px; min-height: 3px; border-radius: 99px; background: var(--h); opacity: .85; transition: height .5s var(--ease), opacity .15s; }
  & .ov-spark i.zero { background: var(--ov-hair); opacity: 1; }
  & .ov-spark.has-hot i:not(.on):not(.zero) { opacity: .3; }

  /* Money bar: where the money is now. On the first look the bar fills from the
     left, the bracket over what is open draws out from its notch and light
     runs over what arrived. The bracket also draws each time open money comes
     back into view, and glides with the bar as the range changes. Money still
     on its way keeps drifting; 3+ cycles late pulses. */
  & :is(.ov-mb-seg, .ov-mb-item).ov-h-paid { --h: #7eb064; }
  & .ov-mb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 16px 0 10px; }
  & .ov-mb-head p { margin: 0; font-size: 13px; color: var(--ink-3); }
  & .ov-mb-head strong { display: block; margin-top: 2px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  & .ov-mb-open-figure { text-align: right; }
  & .ov-mb-stage { position: relative; margin-top: 22px; transition: padding-bottom .3s var(--ease); }
  & .ov-mb-stage.has-ghost { padding-bottom: 26px; }
  & .ov-mb-bar { display: flex; gap: 3px; height: 38px; }
  & .ov-mb-open { --brace: color-mix(in srgb, var(--ink) 30%, transparent); position: relative; display: flex; gap: 3px; flex: 1 1 0; min-width: 0; transition: flex-grow .5s var(--ease); }
  & .ov-mb-open::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 10px; border: 1.5px solid var(--brace); border-bottom: 0; border-radius: 6px 6px 0 0; }
  & .ov-mb-open::after { content: ""; position: absolute; left: 50%; top: -24px; width: 1.5px; height: 6px; margin-left: -.75px; border-radius: 1px; background: var(--brace); transform-origin: bottom; }
  & .ov-mb-open[hidden], & .ov-mb-seg[hidden], & .ov-mb-item[hidden] { display: none; }
  & .ov-mb-seg { position: relative; display: grid; place-items: center; flex: 1 1 0; min-width: 5px; height: 100%; overflow: hidden; border-radius: 7px; background: var(--h); font-style: normal; cursor: pointer; container-type: inline-size; transition: flex-grow .5s var(--ease), opacity .2s, transform .15s; }
  /* A segment's share sits inside it while there is room for the text. */
  & .ov-mb-pct { position: relative; z-index: 1; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); font-variant-numeric: tabular-nums; pointer-events: none; }
  @container (max-width: 50px) { & .ov-mb-pct { display: none; } }
  & .ov-mb-seg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
  & .ov-mb-open .ov-mb-seg::after { left: -16px; background: linear-gradient(-45deg, rgba(255, 255, 255, .16) 25%, transparent 25% 50%, rgba(255, 255, 255, .16) 50% 75%, transparent 75%) 0 0 / 16px 16px; animation: ov-mb-drift 1.6s linear infinite; }
  & .ov-mb-seg.ov-h-late3::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .3); opacity: 0; pointer-events: none; animation: ov-mb-pulse 1.8s ease-in-out infinite; }
  & .ov-money.is-new .ov-mb-bar { animation: ov-mb-fill 1.1s var(--ease) .1s both; }
  & .ov-money.is-new .ov-mb-open::before { animation: ov-mb-brace .8s var(--ease) .95s both; }
  & .ov-money.is-new .ov-mb-open::after { animation: ov-mb-notch .3s var(--ease) .8s both; }
  & .ov-money:not(.is-new) .ov-mb-open.is-drawing::before { animation: ov-mb-brace .8s var(--ease) .15s both; }
  & .ov-money:not(.is-new) .ov-mb-open.is-drawing::after { animation: ov-mb-notch .3s var(--ease) both; }
  & .ov-money.is-new .ov-mb-seg.ov-h-paid::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%); transform: translateX(-120%); animation: ov-mb-sweep 1.1s var(--ease) 1.05s; }
  & .ov-money.is-new .ov-mb-pct { animation: ov-fade .4s ease .8s both; }
  & .ov-money.is-new .ov-mb-ghost { animation: ov-fade .4s ease 1.4s both; }
  /* Where the period before stands now: a dashed mark with its share below. */
  & .ov-mb-ghost { position: absolute; top: -5px; bottom: 16px; z-index: 1; width: 0; margin-left: -1px; border-left: 2px dashed color-mix(in srgb, var(--ink) 55%, transparent); pointer-events: none; transition: left .5s var(--ease); }
  & .ov-mb-ghost[hidden] { display: none; }
  & .ov-mb-ghost span { position: absolute; top: 100%; left: 0; margin-top: 2px; padding: 1px 8px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
  & .ov-mb-ghost.is-start span { transform: translateX(-8px); }
  & .ov-mb-ghost.is-end span { transform: translateX(calc(-100% + 8px)); }
  & .ov-mb-seg.is-first { border-top-left-radius: 99px; border-bottom-left-radius: 99px; }
  & .ov-mb-seg.is-last { border-top-right-radius: 99px; border-bottom-right-radius: 99px; }
  & .ov-mb-bar.has-focus .ov-mb-seg:not(.is-focus) { opacity: .22; }
  & .ov-mb-seg.is-focus { transform: scaleY(1.12); }
  & .ov-mb-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; margin-top: 20px; }
  & .ov-mb-item { display: grid; gap: 1px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: opacity .2s; }
  & .ov-mb-item span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); }
  & .ov-mb-item span i { width: 9px; height: 9px; border-radius: 50%; background: var(--h); }
  & .ov-mb-item b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
  & .ov-mb-item small { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  & .ov-mb-item:hover b { color: var(--h-ink); }
  & .ov-mb-legend.has-focus .ov-mb-item:not(.is-focus) { opacity: .35; }

  & .ov-go { width: 16px; height: 16px; color: var(--ink-3); }

  /* Modality, in the colours the app already uses, kept quieter than the money
     cards: colour marks the modality (strip, received part) and the rest stays
     neutral, so a pink US never reads as 3+ cycles late. The row pointed at
     takes its full colour. */
  & .ov-mod-strip { position: relative; display: flex; gap: 3px; height: 6px; margin: 18px 0 8px; clip-path: inset(-10px 0); overflow: clip; overflow-clip-margin: 10px; }
  & .ov-mod-strip i { flex: 1 1 0; min-width: 6px; border-radius: 99px; background: var(--m); opacity: .55; cursor: pointer; transform-origin: left; transition: opacity .3s, transform .2s var(--ease); }
  & .ov-modcard.is-open .ov-mod-strip i { opacity: .85; }
  & .ov-modcard.has-focus .ov-mod-strip i:not(.is-focus) { opacity: .18; }
  & .ov-mod-strip i.is-focus { opacity: 1; transform: scaleY(1.7); }
  & .ov-mod-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  & .ov-mod-keys span { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: opacity .2s; }
  & .ov-mod-keys i { width: 7px; height: 7px; border-radius: 50%; background: var(--m); opacity: .8; }
  & .ov-mod-keys b { font-weight: 600; color: var(--ink-3); }
  & .ov-modcard.has-focus .ov-mod-keys [data-mod]:not(.is-focus) { opacity: .4; }
  & .ov-mod-keys .ov-mod-hint { margin-left: auto; cursor: default; }
  & .ov-mod-hint .when-open, & .ov-modcard.is-open .ov-mod-hint .when-closed { display: none; }
  & .ov-modcard.is-open .ov-mod-hint .when-open { display: inline; }
  & #ov-mod-sort { transition: opacity .25s; }
  & .ov-modcard:not(.is-open) #ov-mod-sort { opacity: 0; pointer-events: none; }
  /* The rows fold under the strip. Pointing at the card (or tabbing into it)
     opens them: the card grows, a light runs along the strip, rows rise in
     turn and their bars fill. */
  & .ov-mod-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
  & .ov-modcard.is-open .ov-mod-drawer { grid-template-rows: 1fr; }
  /* The clip has no padding or margin of its own, so folded it is exactly 0 tall. */
  & .ov-mod-clip { min-height: 0; margin: 0 -10px; overflow: hidden; }
  & .ov-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; padding: 10px 10px 4px; }
  & .ov-modcard:not(.is-open) .ov-mod { opacity: 0; transition: opacity .15s; }
  & .ov-mod-strip::after { content: ""; position: absolute; inset: -2px 0; background: linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, .75) 50%, transparent 58%); transform: translateX(-60%); opacity: 0; pointer-events: none; }
  & .ov-modcard.is-open .ov-mod-strip::after { animation: ov-mod-scan .8s var(--ease); }
  & .ov-modcard.is-open .ov-mod { animation: ov-mod-rise .55s var(--ease) calc(var(--i, 0) * 45ms + 60ms) backwards; }
  & .ov-modcard.is-open .ov-mod-bar i { animation: ov-mod-grow .9s var(--ease) calc(var(--i, 0) * 45ms + 160ms) backwards; }
  & .ov-modcard.is-open .ov-mod-pct { animation: ov-mod-chip .9s var(--ease) calc(var(--i, 0) * 45ms + 160ms) backwards; }
  & .ov-modcard.is-open .ov-mod-bar .got::after { animation: ov-mb-sweep 1s var(--ease) calc(var(--i, 0) * 45ms + 950ms); }
  & .ov-mod { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) 200px; align-items: center; gap: 16px; margin: 0 -10px; padding: 12px 10px; border: 0; border-bottom: 1px solid var(--ov-hair); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: opacity .2s, transform .45s var(--ease); }
  & .ov-mod::before { content: ""; position: absolute; inset: 2px 0; border-radius: 12px; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--m) 9%, transparent), transparent 70%); transition: opacity .2s; }
  & .ov-mod:hover::before, & .ov-mod.is-focus::before { opacity: 1; }
  & .ov-mod:focus-visible { outline: none; border-radius: 12px; box-shadow: var(--focus); }
  & .ov-modcard.has-focus .ov-mod:not(.is-focus) { opacity: .45; }
  & .ov-mod-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 700; }
  & .ov-mod-name > span:last-child { display: grid; line-height: 1.25; }
  & .ov-mod-name small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
  & .ov-mod-glyph { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--surface-3); color: var(--ink-3); transition: background .2s, color .2s; }
  & .ov-mod:is(:hover, .is-focus) .ov-mod-glyph { background: color-mix(in srgb, var(--m) 16%, transparent); color: var(--m); }
  & .ov-mod-glyph .i { width: 17px; height: 17px; stroke-width: 1.7; }
  & .ov-mod-bar { position: relative; height: 10px; border-radius: 99px; background: var(--surface-3); }
  & .ov-mod-bar i { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; border-radius: inherit; transition: width .5s var(--ease), opacity .2s; }
  & .ov-mod-bar .exp { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 11%, transparent) 0 3px, transparent 3px 6px); }
  & .ov-mod-bar .got { background: var(--m); opacity: .78; }
  & .ov-mod:is(:hover, .is-focus) .ov-mod-bar .got { opacity: 1; }
  /* Light runs over what arrived: as the rows open, and on each hover. */
  & .ov-mod-bar .got::before, & .ov-mod-bar .got::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
  & .ov-mod:hover .got::before { animation: ov-mb-sweep .9s var(--ease); }
  & .ov-mod-pct { position: absolute; top: 50%; z-index: 1; padding: 0 6px; border-radius: 99px; background: var(--surface); color: var(--ink-2); font-size: 11px; font-weight: 600; line-height: 1.45; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px var(--line-2); transform: translate(-50%, -50%); pointer-events: none; transition: left .5s var(--ease), color .2s, box-shadow .2s; }
  & .ov-mod:is(:hover, .is-focus) .ov-mod-pct { color: color-mix(in srgb, var(--m) 60%, var(--ink)); box-shadow: 0 0 0 1.5px var(--m); }
  & .ov-mod-amount { font-size: 13px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
  & .ov-mod-amount strong { font-size: 14.5px; color: var(--ink); }
  & .ov-mod-amount small { display: block; font-size: 12px; }
  & .ov-mod-amount small b { font-weight: 600; color: var(--ink-2); }
  /* First look: the strip grows in. */
  & .ov-modcard.is-new .ov-mod-strip i { animation: ov-mod-strip .7s var(--ease) calc(var(--i, 0) * 70ms) both; }

  /* First look: bars rise, rings sweep. */
  & .ov-grid.is-entering .ov-track { animation: ov-rise .9s var(--ease) both; }

  @media (max-width: 1100px) {
    & .ov-span-8, & .ov-span-4 { grid-column: span 12; }
    & .ov-mods { grid-template-columns: minmax(0, 1fr); }
    & .ov-mod-keys .ov-mod-hint { display: none; }
  }
  @media (max-width: 760px) {
    & .ov-grid { gap: 14px; }
    & .ov-card { padding: 16px; border-radius: 18px; }
    & .ov-top { flex-wrap: wrap; }
    & .ov-figure-big { font-size: 36px; }
    & .ov-figure-big small { font-size: 15px; }
    & .ov-plot { height: 190px; margin-right: 38px; }
    & :is(.ov-grid-lines i, .ov-avg) { right: -38px; }
    & .ov-grid-lines span { right: -38px; width: 34px; font-size: 10.5px; }
    & .ov-x { margin-right: 38px; }
    & .ov-x span { font-size: 10.5px; }
    & .ov-foot > span:last-child { display: none; }
    & .ov-mb-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & .ov-mb-head strong { font-size: 22px; }
    & .ov-mb-bar { height: 32px; }
    & .ov-mod { grid-template-columns: 104px minmax(0, 1fr); }
    & .ov-mod-amount { grid-column: 1 / -1; text-align: left; }
  }
}
@keyframes ov-rise { from { transform: scaleY(0); } }
@keyframes ov-fade { from { opacity: 0; } }
@keyframes ov-mb-fill { from { clip-path: inset(-30px 100% -30px 0); } to { clip-path: inset(-30px -30px -30px 0); } }
@keyframes ov-mb-draw { from { clip-path: inset(0 100% 0 0); } }
/* The bracket opens both ways from its notch, lit in the accent, then settles. */
@keyframes ov-mb-brace { 0% { clip-path: inset(-4px 50% 0 50%); border-color: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); } 55% { clip-path: inset(-4px 0 0 0); border-color: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); } 100% { clip-path: inset(-4px 0 0 0); } }
@keyframes ov-mb-notch { from { transform: scaleY(0); background: var(--accent); } }
@keyframes ov-mb-sweep { to { transform: translateX(120%); } }
@keyframes ov-mb-drift { to { transform: translateX(16px); } }
@keyframes ov-mb-pulse { 50% { opacity: 1; } }
@keyframes ov-mod-strip { from { opacity: 0; transform: scaleX(0); } }
@keyframes ov-mod-grow { from { width: 0; } }
@keyframes ov-mod-chip { from { left: 0; opacity: 0; } 40% { opacity: 0; } }
@keyframes ov-mod-rise { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(3px); } }
@keyframes ov-mod-scan { 15%, 80% { opacity: 1; } to { opacity: 0; transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) {
  :is(.ov-track, .ov-fill, .ov-ring-arc, .ov-mb-seg, .ov-brush, .ov-handle, .ov-avg, .ov-mod-bar i, .ov-spark i) { animation: none !important; transition: none !important; }
  :is(.ov-mb-bar, .ov-mb-open, .ov-mb-seg, .ov-mb-pct, .ov-mb-ghost, .ov-mb-stage, .ov-mod, .ov-mod-strip, .ov-mod-strip i, .ov-mod-bar i, .ov-mod-pct, .ov-mod-drawer, #ov-mod-sort)::before,
  :is(.ov-mb-bar, .ov-mb-open, .ov-mb-seg, .ov-mb-pct, .ov-mb-ghost, .ov-mb-stage, .ov-mod, .ov-mod-strip, .ov-mod-strip i, .ov-mod-bar i, .ov-mod-pct, .ov-mod-drawer, #ov-mod-sort)::after,
  :is(.ov-mb-bar, .ov-mb-open, .ov-mb-seg, .ov-mb-pct, .ov-mb-ghost, .ov-mb-stage, .ov-mod, .ov-mod-strip, .ov-mod-strip i, .ov-mod-bar i, .ov-mod-pct, .ov-mod-drawer, #ov-mod-sort) { animation: none !important; transition: none !important; }
}

/* Studio review: a flat queue and the detail. */
html:not([data-design="classic"]) {
  @media (min-width: 901px) {
    & .review-side, & .review-detail { top: 84px; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); }
  }
  & .review-side, & .review-detail { border-radius: 20px; box-shadow: var(--shadow-xs); }
  & .review-list { gap: 2px; }
  & .review-item { border-color: transparent; background: none; }
  & .review-item:hover { background: var(--surface-hover); }
  & .review-item.selected { border-color: transparent; background: var(--surface-3); box-shadow: inset 3px 0 0 var(--accent); }
  & .review-side-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  & .review-keys.studio-only { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
}

/* Studio payments: timeline, statement waterfall, matching, origin months. */
html:not([data-design="classic"]) {
  & .payments-studio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
  & .payments-studio:empty { display: none; }
  & .payments-layout { grid-template-columns: minmax(0, 1fr); }
  & .sp-periods { display: flex; align-items: flex-start; gap: 18px; }
  & .sp-all { display: grid; flex: none; gap: 1px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
  & .sp-all small { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
  & .sp-all.selected { border-color: var(--ink); background: var(--ink); color: var(--bg); }
  & .sp-all.selected small { color: inherit; opacity: .7; }
  /* The rail scrolls sideways once the periods need more room than it has
     (app.js). Its padding leaves room for the selected dot's rings, the fades
     show only on a side with more, and --n (the period count) puts the line
     between the first and last dots. */
  & .sp-rail { position: relative; flex: 1; min-width: 0; }
  & .sp-scroll { margin: -16px 0 -6px; padding: 16px 0 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 64px;
    --fade-l: 0px; --fade-r: 0px; -webkit-mask: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); mask: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); transition: --fade-l .3s var(--ease), --fade-r .3s var(--ease); }
  & .sp-scroll::-webkit-scrollbar { display: none; }
  & .sp-rail.can-prev .sp-scroll { --fade-l: 72px; }
  & .sp-rail.can-next .sp-scroll { --fade-r: 72px; }
  & .sp-rail.is-overflow .sp-scroll { cursor: grab; }
  & .sp-rail.is-dragging :is(.sp-scroll, .sp-period) { cursor: grabbing; user-select: none; }
  & .sp-line { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); width: max-content; min-width: 100%; }
  & .sp-line::before { content: ""; position: absolute; left: calc(50% / var(--n, 12)); right: calc(50% / var(--n, 12)); top: 11px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px); }
  & .sp-period { position: relative; display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 0 2px 4px; border: 0; background: none; color: var(--ink-3); cursor: pointer; }
  & .sp-period i { width: 24px; height: 24px; margin-bottom: 8px; border: 2px dashed var(--line-2); border-radius: 50%; background: var(--bg); transition: transform .15s; }
  & .sp-period strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
  & .sp-period small { overflow: hidden; max-width: 100%; font-size: 12px; color: var(--ink-4); white-space: nowrap; text-overflow: ellipsis; }
  & .sp-period.has i { border: 0; background: var(--flow-paid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--flow-paid) 22%, transparent); }
  & .sp-period.has strong { color: var(--ink); }
  & .sp-period.has small { font-weight: 600; color: var(--ink-2); }
  & .sp-period.selected i { transform: scale(1.2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--flow-paid) 22%, transparent), 0 0 0 9px color-mix(in srgb, var(--flow-paid) 12%, transparent); }
  & .sp-period.selected strong { color: var(--green); }
  & .sp-period:hover i { transform: scale(1.15); }
  & .sp-period:focus-visible { outline: none; }
  & .sp-period:focus-visible i { outline: 2px solid var(--accent); outline-offset: 4px; }

  /* Arrows sit over the faded ends, on the line of dots. */
  & .sp-nav { position: absolute; top: -4px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--ink-2); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.8); transition: opacity .2s, transform .25s var(--ease), background .15s, color .15s, border-color .15s; }
  & .sp-nav.is-prev { left: -4px; }
  & .sp-nav.is-next { right: -4px; }
  & .sp-nav .i { width: 16px; height: 16px; stroke-width: 2.2; }
  & .sp-rail.can-prev .sp-nav.is-prev, & .sp-rail.can-next .sp-nav.is-next { opacity: 1; pointer-events: auto; transform: none; }
  & .sp-nav:hover { border-color: color-mix(in srgb, var(--flow-paid) 50%, var(--line)); background: var(--surface); color: var(--ink); }
  & .sp-nav:active { transform: scale(.9); }

  /* The map: a thin track with a segment per period (lit where a report
     exists), the years under it, and a window over the part the rail shows.
     Drag the window, or press anywhere on the map to go there. */
  & .sp-map { position: relative; display: none; height: 30px; margin: 10px 2px 0; padding: 5px 0 17px; cursor: pointer; touch-action: none; user-select: none; }
  & .sp-rail.is-overflow .sp-map { display: block; }
  & .sp-map-bars { display: flex; align-items: center; gap: 3px; height: 100%; }
  & .sp-map-bars i { position: relative; flex: 1; min-width: 0; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink-4) 14%, transparent); transition: background .25s; }
  & .sp-map-bars i.has { background: color-mix(in srgb, var(--ink-4) 38%, transparent); }
  & .sp-map-bars i.has.in-view { background: color-mix(in srgb, var(--flow-paid) 70%, transparent); }
  & .sp-map-bars i.is-selected { background: var(--flow-paid); box-shadow: 0 0 8px color-mix(in srgb, var(--flow-paid) 60%, transparent); }
  & .sp-map-bars i[data-year]::after { content: attr(data-year); position: absolute; left: 0; top: calc(100% + 9px); font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--ink-4); }
  & .sp-map-window { position: absolute; top: 0; bottom: 12px; min-width: 18px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 99px;
    background: color-mix(in srgb, var(--ink) 4%, transparent); cursor: grab; transition: border-color .2s, background .2s; }
  & .sp-map:hover .sp-map-window { border-color: color-mix(in srgb, var(--ink) 30%, transparent); background: color-mix(in srgb, var(--ink) 7%, transparent); }
  & .sp-rail.is-scrubbing .sp-map-window { border-color: color-mix(in srgb, var(--flow-paid) 70%, transparent); background: color-mix(in srgb, var(--flow-paid) 10%, transparent); cursor: grabbing; }
  @media (hover: none) { & .sp-nav { display: none; } }
  @media (prefers-reduced-motion: reduce) { & :is(.sp-scroll, .sp-nav, .sp-map-bars i, .sp-map-window) { transition: none; } }

  & .sp-statement { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  & .sp-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  & .sp-badge .i { width: 14px; height: 14px; stroke-width: 2.4; }
  & .sp-badge.ok { background: var(--green-bg); color: var(--green); }
  & .sp-badge.warn { background: var(--amber-bg); color: var(--amber); }
  & .sp-waterfall .sh-panel-head p { overflow: hidden; max-width: 460px; white-space: nowrap; text-overflow: ellipsis; }
  & .wf { display: grid; gap: 14px; }
  & .wf-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 130px; align-items: center; gap: 18px; }
  & .wf-label { font-size: 14px; color: var(--ink-2); }
  & .wf-track { display: block; overflow: visible; }
  & .wf-row.base rect { fill: color-mix(in srgb, var(--ink-4) 55%, transparent); }
  & .wf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
  & .wf-hatch-bg { fill: color-mix(in srgb, var(--rose-dot) 45%, transparent); }
  & .wf-hatch-line { fill: var(--rose-dot); }
  & .wf-track text { font-size: 12.5px; fill: var(--ink-4); }
  & .wf-row.is-none .wf-value { color: var(--ink-4); }
  & .wf-row.plus rect { fill: var(--sky); opacity: .8; }
  & .wf-row.total rect { fill: var(--flow-paid); }
  & .wf-row.total { padding-top: 14px; border-top: 1px dashed var(--line-2); }
  & .wf-value { font-size: 16px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
  & .wf-row.minus .wf-value { color: var(--rose); }
  & .wf-row.total .wf-value { font-size: 24px; color: var(--green); }
  & .sp-match { display: grid; align-content: center; justify-items: center; gap: 16px; }
  & .sp-match .sh-ring-meta dt { display: inline-flex; align-items: center; gap: 7px; }
  & .sp-match .sh-ring-meta .i { width: 15px; height: 15px; }
  & .sp-match .sh-ring-meta .is-open dt, & .sp-match .sh-ring-meta .is-open .link { color: var(--amber); }
  & .sp-origin-bar { display: flex; gap: 4px; }
  & .sp-seg { position: relative; display: grid; flex: 0 1 auto; gap: 1px; min-width: 124px; padding: 16px 14px 14px; overflow: hidden; border-radius: 14px; background: color-mix(in srgb, var(--c) 20%, var(--surface)); transition: opacity .2s, transform .15s; }
  & .sp-seg i { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
  & .sp-seg strong { font-size: 14px; font-weight: 700; }
  & .sp-seg span { overflow: hidden; font-size: 17px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  & .sp-seg small { overflow: hidden; font-size: 12px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
  & .sp-origin-bar:hover .sp-seg:not(:hover) { opacity: .35; }
  & .sp-seg:hover { transform: translateY(-2px); }
  & .sp-seg.tone-1 { --c: #8fb8e8; } & .sp-seg.tone-2 { --c: #6f9fdc; } & .sp-seg.tone-3 { --c: #4f86cf; }
  & .sp-seg.tone-4 { --c: #3a6fb8; } & .sp-seg.tone-5 { --c: #2a5a9c; } & .sp-seg.tone-6 { --c: #1f4a86; }
  & #receipt-rows-box { border-radius: 20px; box-shadow: var(--shadow-xs); }
  @media (max-width: 1100px) {
    & .sp-statement { grid-template-columns: minmax(0, 1fr); }
    & .sp-origin-bar { flex-wrap: wrap; }
    & .sp-seg { flex: 1 1 140px; }
  }
  @media (max-width: 760px) {
    & .sp-periods { flex-direction: column; align-items: stretch; }
    & .sp-line { grid-auto-columns: minmax(96px, 1fr); }
    & .wf-row { grid-template-columns: minmax(0, 1fr) auto; }
    & .wf-track { grid-column: 1 / -1; grid-row: 2; }
  }
}

/* Phones: the payments match ring shrinks beside its figures. */
@media (max-width: 760px) {
  html:not([data-design="classic"]) {
    & .sh-ring-chart { width: 112px; height: 112px; }
    & .sh-ring-text strong { font-size: 22px; }
    & .sh-ring-meta { padding-top: 0; border-top: 0; }
  }
}

/* Studio review: a quiet queue and the detail as one story. */
html:not([data-design="classic"]) {
  & .review-progress { flex: none; width: 300px; margin-left: auto; }
  & .rp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--ink-3); }
  & .rp-head strong { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  & .rp-cells { display: flex; gap: 4px; }
  & .rp-cells i { flex: 1; height: 8px; border-radius: 3px; background: var(--surface-3); }
  & .rp-cells i.accept { background: var(--flow-paid); }
  & .rp-cells i.follow { background: var(--rose-dot); }
  & .rp-bar { overflow: hidden; height: 8px; border-radius: 4px; background: var(--surface-3); }
  & .rp-bar i { display: block; height: 100%; background: var(--flow-paid); }

  & .review-list { margin: 0 -12px; padding: 0 12px; }
  & .review-row { position: relative; grid-template-columns: 18px minmax(0, 1fr); gap: 2px; }
  /* Keep the indicator box stable: inserting/removing it relays out the queue.
     Repeat the selected class to retain the previous selector specificity. */
  & .review-row::before { content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); visibility: hidden; }
  & .review-row.is-selected.is-selected::before { visibility: visible; }
  & .review-row:is(.is-picked, input.is-picked) .review-item:not(.selected) { border-color: transparent; }
  & .review-pick { position: relative; }
  & .review-pick:hover { background: none; }
  & .review-pick.is-off::before { display: none; }
  & .review-pick input { position: absolute; inset: 0; margin: auto; opacity: 0; transition: opacity .12s; }
  & .review-row:hover .review-pick input, & .review-pick input:checked, & .review-pick input:focus-visible, & .review-list.has-picks .review-pick input { opacity: 1; }
  & .review-item.sq { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 6px; border: 0; border-radius: 12px; background: none; }
  & .review-item.sq::before { display: none; }
  & .review-item.sq:hover { background: var(--surface-hover); }
  & .review-item.sq.selected { background: var(--surface-3); box-shadow: none; }
  & .sq-main { display: grid; flex: 1; gap: 1px; min-width: 0; }
  & .sq-main strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  & .sq-main small { overflow: hidden; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
  & .sq-amt { display: grid; flex: none; justify-items: end; gap: 1px; max-width: 46%; }
  & .sq-amt b { font-size: 14px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  & .sq-amt small { overflow: hidden; max-width: 100%; font-size: 11.5px; color: var(--ink-4); white-space: nowrap; text-overflow: ellipsis; }
  & .sq-amt.tone-variance b { color: var(--amber); }
  & .sq-amt.tone-excess b { color: var(--violet); }
  & .sq-amt.tone-review small { color: var(--rose); }
  & .sq-amt.tone-paid b { color: var(--green); }
  & .sq-amt .has-match { color: var(--accent); }
  & .review-keys.studio-only { gap: 12px; }
  & .review-keys > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
  & .review-side-foot .btn { padding: 0 8px; }
  & .review-side-foot .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  & .review-detail { padding: 28px 32px 30px; }
  & .sd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  & .sd-top .status { height: 26px; margin: 0; padding: 0 11px; font-size: 12.5px; font-weight: 600; }
  & .sd-top .status::before { display: none; }
  & .sd-nav { font-size: 12.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
  & .sd-top + .d-title { margin: 12px 0 6px; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
  & .sd-hero { margin: 26px 0; }
  & .sd-money { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
  & .sd-got, & .sd-side { display: grid; gap: 2px; min-width: 0; }
  & .sd-got > span, & .sd-side > span { font-size: 14px; font-weight: 500; color: var(--ink-3); }
  & .sd-side { justify-items: end; margin-left: auto; text-align: right; }
  & .sd-got strong, & .sd-side strong { font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  & .sd-got small { margin-left: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
  & .sd-side.tone-remaining strong { color: var(--amber); }
  & .sd-side.tone-unpaid strong { color: var(--ink-2); }
  & .sd-side.tone-excess strong { color: var(--violet); }
  & .sd-side.tone-accepted strong { color: var(--sky); }
  & .sd-side.tone-collectible strong { color: var(--rose); }
  & .sd-side.tone-done { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: var(--green); }
  & .sd-side.tone-done .i { width: 18px; height: 18px; stroke-width: 2.6; }
  & .sd-meter { display: flex; gap: 3px; height: 14px; margin-top: 14px; overflow: hidden; }
  & .sd-meter i { display: block; height: 100%; border-radius: 5px; }
  & .sd-paid { flex: none; background: var(--flow-paid); }
  & .sd-gap { flex: 1; min-width: 4px; background: var(--surface-3); }
  & .sd-hero.tone-remaining .sd-gap { background: repeating-linear-gradient(135deg, var(--amber-dot) 0 4px, color-mix(in srgb, var(--amber-dot) 45%, transparent) 4px 8px); }
  & .sd-hero.tone-accepted .sd-gap { background: repeating-linear-gradient(135deg, var(--sky) 0 4px, color-mix(in srgb, var(--sky) 40%, transparent) 4px 8px); }
  & .sd-hero.tone-collectible .sd-gap { background: repeating-linear-gradient(135deg, var(--rose-dot) 0 4px, color-mix(in srgb, var(--rose-dot) 45%, transparent) 4px 8px); }
  & .sd-hero.tone-excess .sd-paid { background: var(--violet); }
  & .sd-formula { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

  & .d-act.tone-variance { margin-bottom: 30px; padding: 20px; border-radius: 18px; }
  & .d-act.tone-variance .d-act-title { margin-bottom: 14px; font-size: 16px; font-weight: 700; }
  & .d-act.tone-variance .d-act-title .i { display: none; }
  & .d-act .d-choices { gap: 12px; }
  & .d-act .d-choice:has(kbd) { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; transition: transform .15s, box-shadow .15s, border-color .15s; }
  & .d-act .d-choice:has(kbd):hover { transform: translateY(-2px); border-color: var(--line-2); background: var(--surface); box-shadow: var(--shadow-md); }
  & .d-choice kbd { flex: none; min-width: 26px; height: 26px; font-size: 12.5px; }
  & .d-choice > span { display: grid; gap: 2px; }
  & .d-choice > span strong { font-size: 15px; font-weight: 700; }
  & .d-choice > span small { font-size: 13px; color: var(--ink-3); }
  & .sd-remember { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
  & .sd-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

  & .sd-trail { padding-top: 0; border-top: 0; }
  & .sd-trail .d-label { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
  & .sd-timeline { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  & .sd-timeline::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 18px; width: 2px; background: var(--line); }
  & .sd-step { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 9px 0; }
  & .sd-dot { position: relative; z-index: 1; width: 16px; height: 16px; flex: none; margin-top: 3px; border: 3px solid var(--surface); border-radius: 50%; background: var(--ink-4); box-shadow: 0 0 0 1px var(--line-2); }
  & .sd-step.tone-paid .sd-dot { background: var(--flow-paid); box-shadow: 0 0 0 1px var(--flow-paid); }
  & .sd-step.tone-accepted .sd-dot { background: var(--sky); box-shadow: 0 0 0 1px var(--sky); }
  & .sd-step.tone-collectible .sd-dot { background: var(--rose-dot); box-shadow: 0 0 0 1px var(--rose-dot); }
  & .sd-step.tone-now .sd-dot { background: var(--amber-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber-dot) 30%, transparent); }
  & .sd-step.tone-now strong { color: var(--amber); }
  & .sd-step.tone-muted .sd-dot { border: 2px dashed var(--line-2); background: var(--surface); box-shadow: none; }
  & .sd-step.tone-muted strong { color: var(--ink-3); }
  & .sd-step-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
  & .sd-step-text strong { font-size: 14.5px; font-weight: 600; }
  & .sd-step-text small { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
  & .sd-step-text small .i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
  & .sd-step-text .price-form { margin-top: 10px; }
  & .sd-step-actions { display: flex; flex: none; align-items: center; gap: 4px; }
  & .sd-pdf { gap: 6px; }
  & .sd-trail + .settlement, & .sd-trail ~ .d-section { margin-top: 8px; }
  @media (max-width: 760px) {
    & .review-progress { width: 100%; }
    & .review-detail { padding: 20px; }
    & .sd-top + .d-title { font-size: 24px; }
    & .sd-got strong, & .sd-side strong { font-size: 30px; }
    & .d-act .d-choices { grid-template-columns: minmax(0, 1fr); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-design="classic"]) .d-act .d-choice:has(kbd):hover { transform: none; }
}

/* Studio payments rows: grouped by invoice month, invoice first. */
html:not([data-design="classic"]) {
  & #receipt-rows-box .table-wrap { display: none; }
  & .receipt-grid { display: block; --cols: 104px minmax(0, 1fr) 104px 88px 104px 174px 32px; }
  & .prow-head > :nth-child(6), & .prow-match { justify-self: center; }
  & .prow-head, & .prow { display: grid; grid-template-columns: var(--cols); gap: 14px; align-items: center; padding: 0 20px; }
  & .prow-head { height: 42px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--ink-4); }
  & .prow-head .num, & .prow .num { text-align: right; font-variant-numeric: tabular-nums; }
  & .pgroup { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px 9px; border-bottom: 1px solid var(--line); }
  & .pgroup strong { font-size: 15px; font-weight: 700; }
  & .pgroup span { font-size: 12.5px; color: var(--ink-3); }
  & .pgroup b { margin-left: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
  & .prow { min-height: 62px; padding-block: 10px; border-bottom: 1px solid var(--line); transition: background .12s; }
  & .prow:hover { background: var(--surface-hover); }
  & .prow-inv, & .prow-main > span { display: grid; min-width: 0; }
  & .prow-inv strong { font-size: 14px; font-weight: 700; }
  & .prow-inv small, & .prow-main small { overflow: hidden; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
  & .prow-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
  & .prow-main strong { overflow: hidden; font-size: 14.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  & .prow-gross { font-size: 14px; color: var(--ink-2); }
  & .prow-sharing { font-size: 14px; color: var(--ink-3); }
  & .prow-net { display: grid; justify-items: end; font-size: 14.5px; font-weight: 700; }
  & .prow-net small { font-size: 11.5px; font-weight: 500; color: var(--sky); }
  & .pchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0; border-radius: 99px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  & .pchip .i { width: 13px; height: 13px; stroke-width: 2.2; }
  & button.pchip { cursor: pointer; }
  & button.pchip:hover { filter: brightness(1.12); }
  & .pchip.tone-green { background: var(--green-bg); color: var(--green); }
  & .pchip.tone-teal { background: var(--teal-bg); color: var(--teal); }
  & .pchip.tone-sky { background: var(--sky-bg); color: var(--sky); }
  & .pchip.tone-amber { background: var(--amber-bg); color: var(--amber); }
  & .prow-pdf { opacity: 0; transition: opacity .12s; }
  & .prow:hover .prow-pdf, & .prow-pdf:focus-visible { opacity: 1; }
  @media (hover: none) { & .prow-pdf { opacity: 1; } }
  @media (max-width: 1100px) {
    & .receipt-grid { --cols: 92px minmax(0, 1fr) 96px 150px 32px; }
    & .prow-head > :nth-child(3), & .prow-head > :nth-child(4), & .prow-gross, & .prow-sharing { display: none; }
  }
  @media (max-width: 760px) {
    & .prow-head { display: none; }
    & .prow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding-inline: 16px; }
    & .prow-inv { grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
    & .prow-main { grid-column: 1; }
    & .prow-net { grid-column: 2; grid-row: 2; }
    & .prow-match { grid-column: 1; justify-self: start; }
    & .prow-pdf { grid-column: 2; justify-self: end; }
    & .pgroup { padding-inline: 16px; }
  }
}

/* Studio studies, second pass: one toolbar row, the status strip, modality
   from the side donut, quiet paid rows and a ring for what was received. */
.chart-tip { position: fixed; z-index: 60; min-width: 180px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); color: var(--ink); font-size: 12.5px; pointer-events: none; }
.chart-tip strong { display: block; margin-bottom: 6px; font-size: 13.5px; }
.chart-tip dl { display: grid; gap: 3px; margin: 0; }
.chart-tip dl div { display: flex; justify-content: space-between; gap: 16px; }
.chart-tip dt { color: var(--ink-3); }
.chart-tip dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
html:not([data-design="classic"]) {
  @media (min-width: 901px) {
    & .sidebar .nav { margin-right: auto; }
    & .sidebar .side-search { order: 2; display: inline-flex; align-items: center; gap: 8px; width: 190px; height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-4); font-size: 13.5px; cursor: pointer; transition: color .15s, border-color .15s; }
    & .sidebar .side-search .i { width: 16px; height: 16px; }
    & .sidebar .side-search kbd { margin-left: auto; }
    & .sidebar .side-search:hover { border-color: var(--line-2); color: var(--ink-2); }
    & #palette-open { display: none; }
    & .sidebar .switcher-actions, & .sidebar .sidebar-foot { display: none; }
  }
  @media (min-width: 901px) and (max-width: 1240px) {
    & .sidebar .side-search { width: 36px; padding: 0; justify-content: center; }
    & .sidebar .side-search :is(span, kbd) { display: none; }
  }

  /* The list's own search is the only one this page needs. */
  & body:has(#view-studies:not([hidden])) #palette-open { display: none; }
  & #view-studies:not(.show-groups) #variance-bulk { display: none; }
  & #view-studies .bulk-tools { margin: 0; }
  & #view-studies .bulk-tools > :not([hidden]) { margin-bottom: 16px; }
  & #view-studies .toolbar { margin-bottom: 26px; }
  @media (min-width: 1101px) {
    & #view-studies > #study-strip { grid-column: 1 / -1; }
    & #view-studies > #study-side { grid-row: 3 / span 8; }
  }

  /* Status strip */
  & .study-strip { display: block; margin: 0 0 26px; }
  & .study-strip:empty { display: none; }
  & :is(.ss-stat, .st-chip).tone-all { --tone: var(--ink); }
  & :is(.ss-stat, .st-chip).tone-paid { --tone: var(--flow-paid); }
  & :is(.ss-stat, .st-chip).tone-accepted { --tone: var(--flow-accepted); }
  & :is(.ss-stat, .st-chip).tone-variance { --tone: var(--flow-variance); }
  & :is(.ss-stat, .st-chip).tone-collectible { --tone: var(--flow-collectible); }
  & :is(.ss-stat, .st-chip).tone-overpaid { --tone: var(--violet); }
  & :is(.ss-stat, .st-chip).tone-pending, & .st-chip.tone-attention { --tone: var(--rose-dot); }
  & :is(.ss-stat, .st-chip).tone-unpaid { --tone: var(--flow-unpaid); }
  & .st-chip.tone-other { --tone: var(--ink-4); }
  & .ss-legend { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 36px; }
  & .ss-stat { position: relative; display: grid; gap: 3px; min-width: 0; padding: 0 0 14px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: opacity .18s; }
  & .ss-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
  & .ss-label i { width: 9px; height: 9px; border-radius: 3px; background: var(--tone); }
  & .ss-stat strong { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  & .ss-stat.tone-all strong { font-size: 30px; }
  & .ss-stat small { font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }
  & .ss-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--tone); opacity: 0; transform: scaleX(.4); transform-origin: left; transition: opacity .18s, transform .25s var(--ease); }
  & .ss-stat.on::after { opacity: 1; transform: none; }
  & .study-strip.filtered .ss-stat:not(.on) { opacity: .45; }
  & .ss-stat:hover { opacity: 1 !important; }
  & .ss-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
  & .ss-flag { display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0 0 14px auto; padding: 0 14px; border: 1px solid var(--rose-line); border-radius: 99px; background: var(--rose-bg); color: var(--rose); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
  & .ss-flag .i { width: 15px; height: 15px; }
  & .ss-flag b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--rose-dot); color: #fff; font-size: 12px; }
  & .ss-flag.on { background: var(--rose-dot); color: #fff; }
  & .ss-flag.on b { background: rgba(255, 255, 255, .25); }
  & .ss-bar { display: block; margin-top: 10px; overflow: visible; }
  & .ss-bar rect { cursor: pointer; transition: opacity .2s; }
  & .ss-paid { fill: var(--flow-paid); }
  & .ss-accepted { fill: var(--flow-accepted); }
  & .ss-variance { fill: var(--flow-variance); }
  & .ss-collectible { fill: var(--flow-collectible); }
  & .ss-overpaid { fill: var(--violet); }
  & .ss-pending { fill: color-mix(in srgb, var(--rose-dot) 70%, transparent); }
  & .ss-hatch-bg { fill: color-mix(in srgb, var(--flow-variance) 35%, transparent); }
  & .ss-hatch-line { fill: var(--flow-variance); }
  & .ss-bar:hover .ss-seg:not(:hover) rect { opacity: .4; }
  & .study-strip.filtered .ss-seg:not(.on) rect { opacity: .22; }

  /* Above the list */
  & #study-list { border-radius: 20px; box-shadow: var(--shadow-xs); }
  & .study-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 54px; padding: 10px 20px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
  & .st-count { margin-right: 4px; white-space: nowrap; }
  & .st-count b { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  & .st-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; height: 28px; padding: 0 8px 0 11px; border: 0; border-radius: 99px; background: var(--surface-3); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
  & .st-chip > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  & .st-chip > i { width: 8px; height: 8px; flex: none; border-radius: 3px; background: var(--tone, var(--m)); }
  & .st-chip .i { width: 13px; height: 13px; flex: none; color: var(--ink-3); stroke-width: 2.4; }
  & .st-chip:hover .i { color: var(--ink); }
  & .st-clear { padding: 0; border: 0; background: none; color: var(--ink-3); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  & .st-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  & .st-hint { font-size: 12.5px; color: var(--ink-3); }
  & .st-action { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
  & .st-action .i { width: 15px; height: 15px; }

  /* The list */
  & .study-grid { --cols: minmax(0, 1fr) 84px 104px 132px 112px; }
  & .sth { display: inline-flex; align-items: center; gap: 3px; justify-self: start; height: 28px; padding: 0; border: 0; background: none; color: var(--ink-4); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; }
  & .sth.num { justify-self: end; }
  & .sth.mid { justify-self: center; }
  & .sth:hover { color: var(--ink-2); }
  & .sth.on { color: var(--ink); font-weight: 600; }
  & .sth-arrow { width: 13px; height: 13px; stroke-width: 2.4; opacity: 0; transition: opacity .15s, transform .2s; }
  & .sth:hover .sth-arrow { opacity: .5; }
  & .sth.on .sth-arrow { opacity: 1; }
  & .sth-arrow.asc { transform: rotate(180deg); }
  & .srow-head .sgot-head { justify-self: end; }
  & .srow-main strong { font-size: 14px; letter-spacing: .01em; }
  & .srow-date.is-repeat { color: transparent; }
  & .srow:is(:hover, :focus-visible) .srow-date.is-repeat { color: var(--ink-4); }
  & .sring { width: 20px; height: 20px; flex: none; }
  & .sring-track { fill: none; stroke: var(--surface-3); stroke-width: 4; }
  & .sring-value { fill: none; stroke: var(--flow-paid); stroke-width: 4; stroke-linecap: round; }
  & .sgot.tone-part .sring-value { stroke: var(--flow-variance); }
  & .sgot.tone-over .sring-value { stroke: var(--violet); }
  & .sgot small { width: 38px; font-weight: 400; color: var(--ink-4); }
  & .sgot:hover .sring, & .study-grid[data-received="amount"] .sring { display: none; }
  & .sgot.tone-over strong { color: var(--violet); }
  & .srow-status { text-align: right; }
  /* The tick sits under the middle of the right-aligned words and header. */
  & .srow-status .sst:is(.ok, .is-center) { justify-content: center; width: 64px; }
  /* No ring: the dash sits where the ring and percent would be. */
  & .sgot.tone-none :is(small, strong) { min-width: 66px; text-align: center; }
  & .sst { font-size: 13px; font-weight: 500; }
  & .sst.ok .i { width: 17px; height: 17px; }
  & .srow.is-quiet .srow-main strong { font-weight: 500; color: var(--ink-2); }
  & .srow.is-quiet .srow-exp { color: var(--ink-3); }
  & .srow.is-quiet .sring-value { opacity: .6; }
  & .srow.is-quiet .sst.ok .i { opacity: .75; }

  /* Side: modality donut and list */
  & .study-side { padding: 20px 22px 18px; border-radius: 20px; }
  & .study-side:empty { display: none; }
  & .sm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  & .sm-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
  & .sm-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); }
  & .sm-head .link { flex: none; font-size: 12.5px; }
  & .sm-donut { position: relative; width: 176px; height: 176px; margin: 18px auto 14px; }
  & .sm-donut svg { display: block; width: 100%; height: 100%; overflow: visible; }
  & .sm-arc { fill: none; stroke: var(--m); stroke-width: 15; cursor: pointer; transition: opacity .2s, stroke-width .2s; }
  & .sm-arc.hot, & .sm-arc.on { stroke-width: 20; }
  & .study-side:is(.has-hot, .has-pick) .sm-arc:not(.on, .hot) { opacity: .18; }
  & .sm-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
  & .sm-center strong { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  & .sm-center span { font-size: 12.5px; color: var(--ink-3); }
  & .sm-list { display: grid; gap: 2px; }
  & .sm-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 7px; margin: 0 -10px; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background .12s, opacity .2s; }
  & .sm-item:is(:hover, .hot) { background: var(--surface-hover); }
  & .sm-item.on { background: var(--surface-3); }
  & .study-side:is(.has-hot, .has-pick) .sm-item:not(.on, .hot) { opacity: .45; }
  & .sm-item > i { width: 9px; height: 9px; border-radius: 3px; background: var(--m); }
  & .sm-name { font-size: 13.5px; font-weight: 700; }
  & .sm-name small { margin-left: 8px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
  & .sm-share { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
  & .sm-bar { grid-column: 2 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
  & .sm-bar b { display: block; height: 100%; border-radius: 2px; background: var(--m); }
  & .sm-note { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-4); }
  & .sm-note i { width: 18px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink-3) 60%, var(--surface-3) 60%); }
  @media (max-width: 1100px) {
    & .study-side { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; align-items: center; margin-bottom: 20px; }
    & .study-side:empty { display: none; }
    & .sm-head, & .sm-note { grid-column: 1 / -1; }
    & .sm-donut { width: 150px; height: 150px; margin: 14px 0 0; }
  }
  @media (max-width: 760px) {
    & .study-side { grid-template-columns: minmax(0, 1fr); }
    & .sm-donut { margin: 14px auto 10px; }
    & .ss-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
    & .ss-stat.tone-all { grid-column: 1 / -1; }
    & .ss-stat strong { font-size: 20px; }
    & .ss-stat.tone-all strong { font-size: 26px; }
    & .ss-flag { justify-self: start; margin: 0; }
    & .study-top { padding-inline: 16px; }
    & .st-hint { display: none; }
    & .st-end { margin-left: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-design="classic"]) .ss-stat::after, html:not([data-design="classic"]) .sm-arc, html:not([data-design="classic"]) .sth-arrow { transition: none; }
}

/* Account dialog: the controls the studio top bar leaves out. */
.profile-hospital-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-hospital-actions .btn { flex: 1 1 auto; }

/* Billing-cycle aging: overdue words grow stronger with each missed cycle. */
html:not([data-design="classic"]) {
  & .sst.overdue { color: #e0762e; }
  & .sst.severe { font-weight: 700; }
  & :is(.ss-stat, .st-chip).tone-awaiting { --tone: var(--flow-unpaid); }
  & :is(.ss-stat, .st-chip).tone-overdue { --tone: var(--rose-dot); }
  & .ss-awaiting { fill: var(--flow-unpaid); }
  & .ss-overdue { fill: var(--rose-dot); }
}

.font-choice { padding: 12px 6px; }
/* Account settings: a window of its own. On the left, who is signed in and
   the three sections, with a raised pill that slides to the chosen one; help
   and sign-out sit at its foot. On the right, the chosen section, which
   scrolls by itself so the window never changes size. Phones stack the same
   parts, the sections as tabs across the top. app.js sets from-before /
   from-after so a section eases in from the side of the tab it came from. */
.settings-modal { width: min(820px, calc(100vw - 24px)); height: min(640px, calc(100dvh - 32px)); max-height: none; overflow: hidden; }
.settings-modal[open] { display: grid; grid-template-columns: 252px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "nav main" "foot main"; }
.settings-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.settings-nav, .settings-foot { border-right: 1px solid var(--line); background: var(--surface-2); }
.settings-nav { display: flex; flex-direction: column; gap: 20px; grid-area: nav; min-height: 0; padding: 24px 14px 12px; overflow: auto;
  background: radial-gradient(140% 50% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%), var(--surface-2); }
.settings-foot { display: grid; grid-area: foot; gap: 2px; padding: 10px 10px 14px; }

/* Who is signed in. */
.settings-me { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.settings-avatar { width: 46px; height: 46px; flex: none; font-size: 16px; box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 4.5px color-mix(in srgb, var(--accent) 50%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--accent) 85%, transparent); }
.settings-me-text { display: grid; min-width: 0; }
.settings-me-text h2 { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.settings-me-text strong { overflow: hidden; font-size: 16px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.settings-me-text .identity-email { margin: 0; overflow: hidden; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.settings-status { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; margin: -8px 0 0 6px; padding: 4px 10px 4px 8px; border-radius: 99px; background: var(--green-bg); color: var(--green); font-size: 11.5px; font-weight: 600; }
.settings-status:has(span:empty) { display: none; }
.settings-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }

/* Sections: the raised pill (ink) springs to the chosen one. */
.settings-tabs { position: relative; display: grid; gap: 4px; }
.settings-tabs [role="tab"] { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-width: 0; height: 46px; padding: 0 9px; border: 0; border-radius: 12px; background: none; color: var(--ink-3); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; transition: color .2s; }
.settings-tabs [role="tab"]:hover { color: var(--ink); }
.settings-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
.settings-tabs [role="tab"]:focus-visible { outline: none; box-shadow: var(--focus); }
.settings-tab-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--surface-3); color: var(--ink-3); transition: background .3s, color .3s, box-shadow .3s, transform .35s var(--ease); }
.settings-tab-icon .i { width: 16px; height: 16px; }
.settings-tabs [role="tab"][aria-selected="true"] .settings-tab-icon { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 90%, transparent); transform: scale(1.04); }
.settings-tab-ink { position: absolute; left: 0; right: 0; top: 0; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 11%, var(--surface)); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 22px -14px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); pointer-events: none; transition: transform .5s cubic-bezier(.3, 1.25, .4, 1); }
.settings-tabs:has([data-settings-tab="display"][aria-selected="true"]) .settings-tab-ink { transform: translateY(50px); }
.settings-tabs:has([data-settings-tab="privacy"][aria-selected="true"]) .settings-tab-ink { transform: translateY(100px); }

/* Help and sign-out. */
.settings-foot-link { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-3); font: inherit; font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.settings-foot-link .i { width: 16px; height: 16px; flex: none; }
.settings-foot-link:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
.settings-foot-link.is-danger:hover:not(:disabled) { background: var(--rose-bg); color: var(--rose); }
.settings-foot-link:disabled { opacity: .5; cursor: not-allowed; }
.settings-modal .cloud-account { margin: 0; padding: 0; border: 0; }

/* The chosen section. */
.settings-main { grid-area: main; min-width: 0; min-height: 0; padding: 26px 30px 32px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.settings-main > .alert { margin-bottom: 16px; }
.settings-panel { display: grid; align-content: start; gap: 26px; min-width: 0; }
.settings-panel.from-after { animation: settings-rise .4s var(--ease) both; }
.settings-panel.from-before { animation: settings-fall .4s var(--ease) both; }
@keyframes settings-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes settings-fall { from { opacity: 0; transform: translateY(-12px); } }
.settings-panel-title { margin: 0 44px 0 0; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.settings-section { display: grid; gap: 10px; min-width: 0; margin: 0; }
.settings-label { font-size: 13px; font-weight: 600; color: var(--ink-3); }

/* Rows: places to go, the arrow nudging on hover. */
.settings-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.settings-row { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s; }
.settings-row:first-child { border-top: 0; }
.device-row { cursor: default; }
.device-row .settings-row-text { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.device-row small { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.device-row.is-revoked { opacity: .6; }
.device-row .device-state { color: var(--ink-3); font-size: 12.5px; }
.device-list:empty { display: none; }
.device-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.settings-row:hover:not(:disabled) { background: var(--surface-hover); }
.settings-row:disabled { opacity: .5; cursor: not-allowed; }
.settings-row-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); transition: background .2s, color .2s; }
.settings-row-icon .i { width: 16px; height: 16px; }
.settings-row:hover:not(:disabled) .settings-row-icon { background: var(--accent-soft); color: var(--accent); }
.settings-row-text { flex: 1; min-width: 0; }
.settings-row-go { width: 16px; height: 16px; color: var(--ink-4); transition: transform .25s var(--ease), color .2s; }
.settings-row:hover:not(:disabled) .settings-row-go { color: var(--ink-2); transform: translateX(3px); }

/* Picks: every choice is the same card. The chosen one gets an accent ring
   and a check that pops in at its corner. */
.settings-modal .settings-pick { position: relative; min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-2); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .2s, transform .2s var(--ease); }
.settings-modal .settings-pick:hover:not(:disabled) { border-color: var(--line-2); transform: translateY(-2px); }
.settings-modal .settings-pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 26px -16px color-mix(in srgb, var(--accent) 85%, transparent); color: var(--ink); }
.settings-modal .settings-pick::after { content: ""; position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; opacity: 0; transform: scale(.4); pointer-events: none; transition: opacity .15s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 2px var(--surface); }
.settings-modal .settings-pick[aria-pressed="true"]::after { opacity: 1; transform: none; }
.settings-modal .settings-pick:focus-visible { outline: none; box-shadow: var(--focus); }
.settings-modal .settings-pick:disabled { opacity: .5; cursor: not-allowed; }
.theme-tiles, .font-choices, .settings-modal .mascot-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.look-tiles, .swatch-choices, .settings-modal .privacy-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Mode: a small app window in each look; "ตามระบบ" is half light, half dark. */
.theme-tile { display: grid; gap: 9px; justify-items: center; padding: 8px 8px 10px; font-size: 13px; font-weight: 600; }
.theme-thumb { --bg: #f5f3ef; --side: #e8e4dc; --line: #d3cdc3; position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.theme-thumb.t-dark { --bg: #1d1c1a; --side: #2a2926; --line: #45423d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.theme-thumb.t-auto { background: linear-gradient(90deg, #f5f3ef 50%, #1d1c1a 50%); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .25); }
.theme-thumb i { position: absolute; left: 0; top: 0; bottom: 0; width: 24%; background: var(--side); }
.theme-thumb.t-auto i { background: #e8e4dc; }
.theme-thumb u { position: absolute; left: 7%; top: 13%; width: 10%; aspect-ratio: 1; border-radius: 3px; background: #d97757; }
.theme-thumb b { position: absolute; left: 32%; height: 8%; border-radius: 99px; background: var(--line); transform-origin: left; }
.theme-thumb b:nth-of-type(1) { top: 24%; width: 56%; }
.theme-thumb b:nth-of-type(2) { top: 44%; width: 36%; }
.theme-thumb.t-auto b:nth-of-type(1) { background: linear-gradient(90deg, #d3cdc3 32%, #45423d 32%); }
.theme-thumb.t-auto b:nth-of-type(2) { background: linear-gradient(90deg, #d3cdc3 50%, #45423d 50%); }
.theme-tile[aria-pressed="true"] .theme-thumb b { animation: thumb-grow .6s var(--ease) both; }
.theme-tile[aria-pressed="true"] .theme-thumb b:nth-of-type(2) { animation-delay: .08s; }
@keyframes thumb-grow { from { transform: scaleX(0); } }

/* Look: the type each one sets titles in. */
.look-tile { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 14px; font-size: 14px; font-weight: 600; }
.look-sample { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; font-size: 19px; line-height: 1; }
.look-sample.l-modern { background: var(--surface-3); color: var(--ink); font-family: var(--font-line-seed); font-weight: 700; }
.look-sample.l-ledger { background: #efe7d8; color: #2b2620; font-family: "Instrument Serif", "Noto Serif Thai", Georgia, serif; font-size: 23px; }

/* Palette: the page colour with its accent inside. */
.swatch-choice { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px; font-size: 14px; font-weight: 600; }
.swatch { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.swatch i { width: 10px; height: 10px; border-radius: 50%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.swatch.s-warm { background: #2f2d2a; }
.swatch.s-warm i { background: #d97757; }
.swatch.s-navy { background: #151c2c; }
.swatch.s-navy i { background: #8f99ff; }
.swatch-choice[aria-pressed="true"] .swatch i { transform: scale(1.35); }

/* Font: the sample in each face, its name under it. */
.settings-modal .font-choice { display: grid; justify-items: center; gap: 2px; padding: 14px 6px 10px; }
.settings-modal .font-choice small { font-family: var(--font-line-seed); font-size: 11.5px; color: var(--ink-3); }

/* Privacy: the lock state leads; it turns to an open eye after the PIN. */
.settings-panel .privacy-lock { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 8%, var(--surface-2))); }
.settings-panel .privacy-lock-icon { position: relative; width: 44px; height: 44px; border-radius: 13px; }
.settings-panel .privacy-lock-icon::after { content: ""; position: absolute; inset: -1px; border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: inherit; opacity: 0; animation: lock-breathe 3s ease-in-out infinite; }
@keyframes lock-breathe { 50% { opacity: 1; transform: scale(1.12); } }
.pii-open .settings-panel .privacy-lock-icon::after { animation: none; }
.settings-panel .privacy-lock-text strong { font-size: 15px; }
.settings-modal .privacy-option { display: grid; gap: 10px; justify-items: center; padding: 20px 12px 13px; }
.settings-modal .privacy-sample { display: grid; place-items: center; height: 30px; font-size: 17px; }

@media (max-width: 640px) {
  .settings-modal { width: 100vw; max-width: 100vw; height: min(90dvh, 780px); }
  .settings-modal[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "nav" "main" "foot"; }
  .settings-close { top: 12px; right: 12px; }
  .settings-nav { gap: 12px; padding: 18px 16px 0; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-me { padding: 0 44px 0 0; }
  .settings-status { display: none; }
  .settings-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 -6px; }
  .settings-tabs [role="tab"] { justify-content: center; gap: 6px; height: 46px; padding: 0 4px; border-radius: 10px; font-size: 13px; }
  .settings-tab-icon, .settings-tabs [role="tab"][aria-selected="true"] .settings-tab-icon { width: auto; height: auto; background: none; box-shadow: none; transform: none; }
  .settings-tabs [role="tab"][aria-selected="true"] .settings-tab-icon { color: var(--accent); }
  .settings-tab-ink { top: auto; right: auto; bottom: -1px; width: calc(100% / 3); height: 2px; border-radius: 0; background: none; box-shadow: none; }
  .settings-tab-ink::before { content: ""; position: absolute; left: 22%; right: 22%; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
  .settings-tabs:has([data-settings-tab="display"][aria-selected="true"]) .settings-tab-ink { transform: translateX(100%); }
  .settings-tabs:has([data-settings-tab="privacy"][aria-selected="true"]) .settings-tab-ink { transform: translateX(200%); }
  .settings-main { padding: 20px 18px 24px; }
  .settings-panel { gap: 22px; }
  .settings-panel-title { display: none; }
  .settings-panel.from-after { animation-name: settings-in-right; }
  .settings-panel.from-before { animation-name: settings-in-left; }
  .settings-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 10px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-right: 0; }
  .settings-foot:not(:has(.cloud-account:not([hidden]))) { grid-template-columns: 1fr; }
  .settings-foot-link { justify-content: center; }
  .theme-tiles, .font-choices, .settings-modal .mascot-choices, .look-tiles, .swatch-choices, .settings-modal .privacy-options { gap: 10px; }
}
@keyframes settings-in-right { from { opacity: 0; transform: translateX(14px); } }
@keyframes settings-in-left { from { opacity: 0; transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) {
  .settings-panel.from-after, .settings-panel.from-before, .settings-panel .privacy-lock-icon::after, .theme-tile[aria-pressed="true"] .theme-thumb b { animation: none; }
  .settings-tab-ink, .settings-tab-icon, .settings-row-go, .swatch i, .settings-modal .settings-pick, .settings-modal .settings-pick::after { transition: none; }
}

/* ================= Ledger look =================
   Warm paper, a serif display face, mono labels and the sidebar, after the
   Sunseto site. Picked per viewer (data-look="ledger" on the root); it sets its
   own palette and fonts, so data-palette and data-font stay unset. The colour
   blocks carry three-part selectors, like the warm palette's dark blocks, and
   come later, so they win in every mode; component rules start with
   :root[data-look="ledger"], which outranks the studio design's wrapper. */
@font-face { font-family: "Noto Serif Thai"; src: url("/fonts/NotoSerifThai-thai-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Only Ledger draws these. */
.ov-hero, .auth-ledger { display: none; }

:root[data-look="ledger"] {
  --font: "IBM Plex Sans", "IBM Plex Sans Thai Looped", "Leelawadee UI", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-head: "Noto Serif Thai", "Instrument Serif", "IBM Plex Sans Thai Looped", Georgia, serif;
  --font-figure: "Instrument Serif", "IBM Plex Sans Thai Looped", Georgia, serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans Thai Looped", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
:root[data-look="ledger"]:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #f3efe6;
  --surface: #fffcf6;
  --surface-2: #faf6ee;
  --surface-3: #f1ebdf;
  --surface-hover: #f8f3e9;
  --line: #e3dccd;
  --line-2: #d2c8b4;
  --ink: #1d1a16;
  --ink-2: #47413a;
  --ink-3: #6e675c;
  --ink-4: #9b937f;
  --primary: #1d1a16;
  --primary-hover: #3a342c;
  --on-primary: #fffcf6;
  --accent: #ad4f2d;
  --accent-strong: #8f3f22;
  --accent-soft: #f6e7dd;
  --accent-line: #e8c6b4;
  --on-accent: #fffcf6;
  --focus: 0 0 0 3px rgba(173, 79, 45, .24);
  --green: #3f5c47; --green-bg: #e6ece2; --green-line: #c5d3c1; --green-dot: #5f8a68;
  --amber: #85601f; --amber-bg: #f5ecd9; --amber-line: #e6d2a6; --amber-dot: #c9a15a;
  --rose: #a3322a; --rose-bg: #f8e4df; --rose-line: #ecc0b6; --rose-dot: #c8493a;
  --violet: #6b4f86; --violet-bg: #efe8f3;
  --teal: #3e6e6b; --teal-bg: #e3eeec;
  --sky: #3f5f82; --sky-bg: #e6edf3;
  --gray: #6e675c; --gray-bg: #efe9dd;
  --flow-paid: var(--green-dot); --flow-accepted: #6f8fb0; --flow-discounted: #6aa3a0; --flow-collectible: var(--rose-dot); --flow-variance: var(--amber-dot); --flow-unpaid: #a79e8c;
  --m-xr: #52718f; --m-ct: #b5623a; --m-mri: #4f7d60; --m-mg: #b58b3a; --m-us: #a8607a; --m-nm: #6f7d3c;
  --side-bg: #ebe5d8;
  --side-bg-2: #f6f2ea;
  --side-hover: rgba(29, 26, 22, .05);
  --side-active: #fffcf6;
  --side-line: #ddd4c2;
  --side-ink: #1d1a16;
  --side-ink-2: #6e675c;
  --side-accent: #ad4f2d;
  --side-fill: #f6f2ea;
  --side-fill-hover: #fffcf6;
  --side-edge: #ddd4c2;
  --side-active-ink: #1d1a16;
  --side-chip-hover: #fffcf6;
  --side-nav-bg: rgba(235, 229, 216, .94);
  --shadow-xs: 0 1px 0 rgba(29, 26, 22, .04);
  --shadow-sm: 0 1px 2px rgba(29, 26, 22, .07);
  --shadow-md: 0 8px 22px rgba(29, 26, 22, .08), 0 1px 3px rgba(29, 26, 22, .05);
  --shadow-lg: 0 28px 64px rgba(29, 26, 22, .18), 0 6px 18px rgba(29, 26, 22, .08);
  --ov-paid: #2b2620; --ov-paid-ink: #2b2620; --ov-accepted: #7a7266; --ov-accepted-ink: #5f584e; --ov-variance: #c9a15a; --ov-variance-ink: #85601f; --ov-wait: #cfc4af; --ov-wait-ink: #47413a;
  --ov-late1: #e2b8a0; --ov-late2: #cf8a6c; --ov-late3: #ad4f2d; --ov-late2-ink: #9a4a2a; --ov-late3-ink: #ad4f2d; --ov-review: #ad4f2d;
  --ov-hair: #e3dccd; --ov-card-line: #e3dccd; --ov-card-shadow: none;
  --ov-chart: #2b2620; --ov-chart-2: #2b2620; --ov-chart-ink: #2b2620; --ov-chart-red: #ad4f2d; --ov-chart-red-ink: #ad4f2d;
  --ov-chart-track: repeating-linear-gradient(135deg, #e6ddcc 0 4px, #f4eee3 4px 8px);
  --ov-ra1: #2b2620; --ov-ra2: #2b2620; --ov-rb1: #ad4f2d; --ov-rb2: #ad4f2d; --ov-rc1: #c9a15a; --ov-rc2: #c9a15a;
  --ld-paper: #ece5d7;
  --ld-hatch: #e6ddcc;
  --ld-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --ld-grain-alpha: .3;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="ledger"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b1814;
    --surface: #231f1a;
    --surface-2: #26221c;
    --surface-3: #2e2922;
    --surface-hover: #2a251f;
    --line: #3a332b;
    --line-2: #4b433a;
    --ink: #f2ebdf;
    --ink-2: #d3cabb;
    --ink-3: #a69d8d;
    --ink-4: #7b7365;
    --primary: #f2ebdf;
    --primary-hover: #ffffff;
    --on-primary: #1b1814;
    --accent: #e3906a;
    --accent-strong: #eea784;
    --accent-soft: rgba(227, 144, 106, .14);
    --accent-line: rgba(227, 144, 106, .36);
    --on-accent: #1b1814;
    --focus: 0 0 0 3px rgba(227, 144, 106, .3);
    --green: #9cc4a3; --green-bg: rgba(126, 170, 134, .15); --green-line: rgba(126, 170, 134, .36); --green-dot: #7eaa86;
    --amber: #e3be7a; --amber-bg: rgba(214, 174, 98, .15); --amber-line: rgba(214, 174, 98, .36); --amber-dot: #d6ae62;
    --rose: #f0907f; --rose-bg: rgba(226, 104, 86, .15); --rose-line: rgba(226, 104, 86, .38); --rose-dot: #e26856;
    --violet: #c3a8dc; --violet-bg: rgba(160, 130, 200, .15);
    --teal: #8cc5c0; --teal-bg: rgba(110, 180, 175, .14);
    --sky: #9dbad8; --sky-bg: rgba(120, 160, 200, .15);
    --gray: #a69d8d; --gray-bg: rgba(200, 190, 170, .1);
    --flow-paid: var(--green-dot); --flow-accepted: #8eaccb; --flow-discounted: #8cc5c0; --flow-collectible: var(--rose-dot); --flow-variance: var(--amber-dot); --flow-unpaid: #857c6d;
    --m-xr: #7d9bb8; --m-ct: #d9845b; --m-mri: #7fab8d; --m-mg: #d6ad5c; --m-us: #cf8aa3; --m-nm: #9caa62;
    --side-bg: #16130f;
    --side-bg-2: #211d18;
    --side-hover: rgba(255, 255, 255, .05);
    --side-active: #2a251f;
    --side-line: #2f2922;
    --side-ink: #f2ebdf;
    --side-ink-2: #a69d8d;
    --side-accent: #e3906a;
    --side-fill: #211d18;
    --side-fill-hover: #2a251f;
    --side-edge: #3a332b;
    --side-active-ink: #f2ebdf;
    --side-chip-hover: #2a251f;
    --side-nav-bg: rgba(22, 19, 15, .94);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .35);
    --ov-paid: #efe6d6; --ov-paid-ink: #efe6d6; --ov-accepted: #a39a8a; --ov-accepted-ink: #cfc6b6; --ov-variance: #d6ae62; --ov-variance-ink: #e3be7a; --ov-wait: #5a5249; --ov-wait-ink: #d3cabb;
    --ov-late1: #a8745a; --ov-late2: #c77e5e; --ov-late3: #e3906a; --ov-late2-ink: #eea784; --ov-late3-ink: #e3906a; --ov-review: #e3906a;
    --ov-hair: #3a332b; --ov-card-line: #3a332b; --ov-card-shadow: none;
    --ov-chart: #efe6d6; --ov-chart-2: #efe6d6; --ov-chart-ink: #efe6d6; --ov-chart-red: #e3906a; --ov-chart-red-ink: #e3906a;
    --ov-chart-track: repeating-linear-gradient(135deg, #3a332b 0 4px, #2a251f 4px 8px);
    --ov-ra1: #efe6d6; --ov-ra2: #efe6d6; --ov-rb1: #e3906a; --ov-rb2: #e3906a; --ov-rc1: #d6ae62; --ov-rc2: #d6ae62;
    --ld-paper: #1f1b17;
    --ld-hatch: #3a332b;
    --ld-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .9 0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --ld-grain-alpha: .12;
  }
}
:root[data-look="ledger"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1814;
  --surface: #231f1a;
  --surface-2: #26221c;
  --surface-3: #2e2922;
  --surface-hover: #2a251f;
  --line: #3a332b;
  --line-2: #4b433a;
  --ink: #f2ebdf;
  --ink-2: #d3cabb;
  --ink-3: #a69d8d;
  --ink-4: #7b7365;
  --primary: #f2ebdf;
  --primary-hover: #ffffff;
  --on-primary: #1b1814;
  --accent: #e3906a;
  --accent-strong: #eea784;
  --accent-soft: rgba(227, 144, 106, .14);
  --accent-line: rgba(227, 144, 106, .36);
  --on-accent: #1b1814;
  --focus: 0 0 0 3px rgba(227, 144, 106, .3);
  --green: #9cc4a3; --green-bg: rgba(126, 170, 134, .15); --green-line: rgba(126, 170, 134, .36); --green-dot: #7eaa86;
  --amber: #e3be7a; --amber-bg: rgba(214, 174, 98, .15); --amber-line: rgba(214, 174, 98, .36); --amber-dot: #d6ae62;
  --rose: #f0907f; --rose-bg: rgba(226, 104, 86, .15); --rose-line: rgba(226, 104, 86, .38); --rose-dot: #e26856;
  --violet: #c3a8dc; --violet-bg: rgba(160, 130, 200, .15);
  --teal: #8cc5c0; --teal-bg: rgba(110, 180, 175, .14);
  --sky: #9dbad8; --sky-bg: rgba(120, 160, 200, .15);
  --gray: #a69d8d; --gray-bg: rgba(200, 190, 170, .1);
  --flow-paid: var(--green-dot); --flow-accepted: #8eaccb; --flow-discounted: #8cc5c0; --flow-collectible: var(--rose-dot); --flow-variance: var(--amber-dot); --flow-unpaid: #857c6d;
  --m-xr: #7d9bb8; --m-ct: #d9845b; --m-mri: #7fab8d; --m-mg: #d6ad5c; --m-us: #cf8aa3; --m-nm: #9caa62;
  --side-bg: #16130f;
  --side-bg-2: #211d18;
  --side-hover: rgba(255, 255, 255, .05);
  --side-active: #2a251f;
  --side-line: #2f2922;
  --side-ink: #f2ebdf;
  --side-ink-2: #a69d8d;
  --side-accent: #e3906a;
  --side-fill: #211d18;
  --side-fill-hover: #2a251f;
  --side-edge: #3a332b;
  --side-active-ink: #f2ebdf;
  --side-chip-hover: #2a251f;
  --side-nav-bg: rgba(22, 19, 15, .94);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .35);
  --ov-paid: #efe6d6; --ov-paid-ink: #efe6d6; --ov-accepted: #a39a8a; --ov-accepted-ink: #cfc6b6; --ov-variance: #d6ae62; --ov-variance-ink: #e3be7a; --ov-wait: #5a5249; --ov-wait-ink: #d3cabb;
  --ov-late1: #a8745a; --ov-late2: #c77e5e; --ov-late3: #e3906a; --ov-late2-ink: #eea784; --ov-late3-ink: #e3906a; --ov-review: #e3906a;
  --ov-hair: #3a332b; --ov-card-line: #3a332b; --ov-card-shadow: none;
  --ov-chart: #efe6d6; --ov-chart-2: #efe6d6; --ov-chart-ink: #efe6d6; --ov-chart-red: #e3906a; --ov-chart-red-ink: #e3906a;
  --ov-chart-track: repeating-linear-gradient(135deg, #3a332b 0 4px, #2a251f 4px 8px);
  --ov-ra1: #efe6d6; --ov-ra2: #efe6d6; --ov-rb1: #e3906a; --ov-rb2: #e3906a; --ov-rc1: #d6ae62; --ov-rc2: #d6ae62;
  --ld-paper: #1f1b17;
  --ld-hatch: #3a332b;
  --ld-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .9 0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --ld-grain-alpha: .12;
}

:root[data-look="ledger"] {
  /* Paper grain over everything but dialogs, which sit in the top layer. */
  & body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; background-image: var(--ld-grain); opacity: var(--ld-grain-alpha); }
  @media print { & body::after { display: none; } }

  /* Type: a Thai serif for titles, mono labels, serif figures. */
  & :is(#page-title, .auth-pitch h1, .auth-welcome, .setup-card h1, .onboard h2) { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; }
  & .eyebrow { font-family: var(--mono); font-weight: 500; letter-spacing: .16em; }
  & .modern-only { display: none; }

  /* Page head: the view's name in mono above the hospital, then the title. */
  & .page-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-bottom: 10px; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); }
  & .page-kicker[data-eyebrow]::before { content: attr(data-eyebrow) " —"; letter-spacing: .16em; color: var(--accent); }
  & .page-kicker .i { display: none; }
  & #page-title { font-size: 40px; line-height: 1.25; }
  & #page-description { margin-top: 6px; font-size: 14px; }

  /* Flat, warm controls. */
  & .btn { box-shadow: none; }
  & :is(.side-cta, .nav-fab) { background: var(--primary); color: var(--on-primary); box-shadow: none; }
  & :is(.drop-icon, .onboard-icon) { background: var(--accent); box-shadow: none; }
  & .avatar { background: var(--line-2); color: var(--ink-2); }
  & .toast { background: var(--primary); color: var(--on-primary); }
  & .toast a { color: inherit; }
  & .nav-badge { background: var(--accent); color: var(--on-accent); }
  & .summary-figure strong { font-family: var(--font-figure); font-size: 28px; font-weight: 400; letter-spacing: 0; }
  & .sh-ring-text strong { font-family: var(--font-figure); font-size: 38px; font-weight: 400; letter-spacing: 0; }

  /* The sidebar returns on wide screens, in the order the mockup set:
     hospital, search, pages, add file, then links and the account. */
  @media (min-width: 901px) {
    & body:not(.booting:not(:is(.has-workspace-skeleton, #workspace-skeleton[hidden])), .setup-required, .startup-failed, .signed-out) .app-shell { grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: none; }
    & .sidebar {
      --side-bg: inherit; --side-bg-2: inherit; --side-ink: inherit; --side-ink-2: inherit; --side-hover: inherit; --side-active: inherit;
      --side-line: inherit; --side-accent: inherit; --side-fill: inherit; --side-fill-hover: inherit; --side-edge: inherit; --side-active-ink: inherit; --side-chip-hover: inherit;
      position: sticky; top: 0; z-index: 30; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px;
      height: 100vh; height: 100dvh; padding: 22px 16px 16px; overflow-y: auto; border-right: 1px solid var(--side-line); border-bottom: 0;
      background: var(--side-bg); color: var(--side-ink); backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    & .sidebar > .brand { order: 0; padding: 0 6px 4px; }
    & .sidebar .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
    & .sidebar .brand-mark svg { width: 25px; height: 25px; }
    & .sidebar .brand-text strong { font-size: 16.5px; }
    & .sidebar .brand-text small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--side-ink-2); }
    & .sidebar .switcher { order: 1; display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--side-line); border-radius: 12px; background: var(--side-bg-2); }
    & .sidebar .switcher-label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--side-ink-2); }
    & .sidebar .switcher-note { display: block; }
    & .sidebar .switcher-note:empty { display: none; }
    & .sidebar .switcher-control select { width: 100%; height: 40px; font-size: 14px; }
    & .sidebar .switcher-actions { display: flex; }
    & .sidebar .switcher-actions .side-btn { flex: 1; width: auto; height: 34px; padding: 0 10px; justify-content: center; background: var(--side-fill); }
    & .sidebar .switcher-actions .side-btn span { display: inline; }
    & .sidebar .side-search { order: 2; display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--side-line); border-radius: 10px; background: var(--side-bg-2); color: var(--side-ink-2); font-size: 14px; cursor: pointer; }
    & .sidebar .side-search span { display: inline; flex: 1; text-align: left; }
    & .sidebar .side-search kbd { display: inline-grid; margin-left: auto; }
    & .sidebar .side-search:hover { border-color: var(--line-2); color: var(--side-ink); }
    & .sidebar .nav { order: 3; display: grid; gap: 2px; margin: 0; padding: 0; border-radius: 0; background: none; }
    & .sidebar .nav a { height: 42px; gap: 12px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; color: var(--side-ink-2); }
    & .sidebar .nav a .i { display: block; }
    & .sidebar .nav a:hover { background: var(--side-hover); color: var(--side-ink); }
    & .sidebar .nav a.active { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--side-line), 0 1px 0 rgba(29, 26, 22, .05); }
    & .sidebar .nav a.active .i { color: var(--accent); }
    & .sidebar .nav a.active::before { display: none; }
    & .sidebar .nav-files { margin-top: 0; }
    & .sidebar .nav-files::after { display: none; }
    & .sidebar .nav-badge { min-width: 22px; height: 20px; margin-left: auto; font-size: 11.5px; }
    & .sidebar .side-cta { order: 4; width: 100%; height: 44px; padding: 0 14px; justify-content: center; border-radius: 12px; font-size: 14.5px; }
    & .sidebar .side-cta span { display: inline; }
    & .sidebar .side-cta kbd { display: none; }
    & .sidebar .side-cta:hover { background: var(--primary-hover); filter: none; box-shadow: none; }
    & .sidebar .sidebar-foot { order: 5; display: grid; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); }
    & .sidebar .sidebar-foot .side-btn { width: auto; height: 36px; padding: 0 12px; justify-content: flex-start; }
    & .sidebar .sidebar-foot .side-btn span { display: inline; }
    & .sidebar #files-shortcut { display: none; }
    & .sidebar .account-chip { order: 6; width: 100%; padding: 8px 10px; border: 1px solid var(--side-line); border-radius: 12px; background: var(--side-bg-2); }
    & .sidebar .account-chip-text { display: grid; }
    & .sidebar .account-chip-caret { display: block; }
    & main { padding-top: 34px; }
  }
  @media (max-width: 900px) {
    & .page-kicker { display: flex; margin-bottom: 6px; }
    & #page-title { font-size: 30px; }
    & .nav-fab { border-color: var(--side-bg); box-shadow: 0 8px 18px rgba(29, 26, 22, .25); }
  }

  /* Overview: a headline strip for what is still open, then flat cards. */
  & .ov-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 24px 40px; margin: 0 0 26px; padding: 24px 0 26px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
  & .ov-hero-main { display: grid; min-width: 0; }
  & .ov-hero-main p { margin: 0; }
  & .ov-hero-label { font-size: 16px; font-weight: 600; color: var(--ink-2); }
  & :is(.ov-hero-label, .ov-ttl, .ov-hero-stat dt)[data-eyebrow]::before { content: attr(data-eyebrow); display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 400; line-height: 1.4; letter-spacing: .16em; color: var(--ink-3); }
  & .ov-hero-label[data-eyebrow]::before { font-size: 11px; color: var(--accent); }
  & .ov-hero-big { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 8px; font-family: var(--font-figure); font-size: clamp(64px, 7.2vw, 108px); font-weight: 400; line-height: .95; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums; }
  & .ov-hero-big .ov-dec { font-size: .44em; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
  & .ov-hero-big small { margin-left: 12px; font-family: var(--font); font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
  & .ov-hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 24px; margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
  & .ov-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  & .ov-hero-stat { display: grid; align-content: end; gap: 4px; min-width: 0; padding: 2px 0 2px 20px; border-left: 1px solid var(--line-2); }
  & .ov-hero-stat dt { font-size: 13.5px; color: var(--ink-2); }
  & .ov-hero-stat dd { margin: 0; }
  & .ov-hero-figure { overflow: hidden; font-family: var(--font-figure); font-size: clamp(24px, 2vw, 30px); line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); font-variant-numeric: lining-nums; }
  & .ov-hero-figure .ov-dec { font-size: .55em; font-weight: 400; color: var(--ink-3); }
  & .ov-hero-note { font-size: 12.5px; color: var(--ink-3); }
  & .ov-hero-stat.is-late dt::before, & .ov-hero-stat.is-late .ov-hero-figure { color: var(--accent); }
  & .ov-figure { display: none; }
  & .ov-delta { height: 22px; padding: 0 8px; font-size: 12px; }
  & .ov-delta.up { background: var(--green-bg); color: var(--green); }
  & .ov-delta:is(.down, .late) { background: var(--accent-soft); color: var(--accent-strong); }

  & .ov-grid { gap: 20px; }
  & .ov-card { padding: 22px 24px; border-radius: 18px; }
  & .ov-top { align-items: flex-start; }
  & .ov-ttl[data-eyebrow] { flex-direction: column; align-items: flex-start; gap: 0; font-size: 18px; }
  & .ov-ttl .i { display: none; }
  & .ov-meta { padding-top: 18px; font-size: 12.5px; }
  & .ov-seg { padding: 3px; }
  & .ov-seg button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(29, 26, 22, .1); }

  & .ov-chart { --bw: 30px; }
  & .ov-chart:is(.n-13, .n-14, .n-15, .n-16, .n-17, .n-18) { --bw: 22px; }
  & .ov-chart:is(.n-19, .n-20, .n-21, .n-22, .n-23, .n-24) { --bw: 16px; }
  & .ov-col .ov-track, & .ov-col .ov-fill { border-radius: 6px 6px 2px 2px; }
  & .ov-col .ov-fill { background: var(--ov-chart); }
  & .ov-grid-lines i { border-top-style: dashed; }
  & .ov-grid-lines i.base { border-top: 1px solid var(--line-2); }
  & .ov-grid-lines span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
  & .ov-plot .ov-avg { border-top: 1.5px dashed var(--ink-2); }
  & .ov-plot .ov-avg span { padding: 1px 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-family: var(--mono); font-size: 10.5px; font-weight: 500; }
  & .ov-plot .ov-brush { bottom: 0; border: 0; border-top: 2px solid var(--accent); border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--accent) 7%, transparent); }
  & .ov-plot .ov-handle { border-width: 2px; box-shadow: none; }
  & .ov-x em { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }
  & .ov-foot { margin-top: 14px; border-top: 1px dashed var(--line); }
  & .ov-keys i { border-radius: 3px; }

  & .ov-ring .ov-ring-track { stroke: var(--surface-3); }
  & .ov-ring .ov-ring-arc { filter: none; }
  & .ov-ring-list .ov-ring-row { align-items: center; border-top: 1px dashed var(--line); }
  & .ov-ring-row > span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--ov-ra1); }
  & .ov-ring-row.b > span::before { background: var(--ov-rb1); }
  & .ov-ring-row.c > span::before { background: var(--ov-rc1); }
  & .ov-ring-row > span { font-size: 14px; font-weight: 600; color: var(--ink); }
  & .ov-ring-row > span small { margin-left: 17px; font-weight: 400; color: var(--ink-3); }
  & .ov-ring-list .ov-ring-row b { font-family: var(--font-figure); font-size: 26px; font-weight: 400; letter-spacing: 0; color: var(--ink); }
  & .ov-ring-row b small { font-family: var(--font); }

  & .ov-tile .ov-ttl { font-size: 15.5px; color: var(--ink); }
  & .ov-tile .ov-ttl::before { color: var(--h-ink); }
  & .ov-tile:hover { border-color: var(--line-2); box-shadow: none; }
  & .ov-tile .ov-tile-big { font-family: var(--font-figure); font-size: 38px; font-weight: 400; line-height: 1; letter-spacing: -.01em; }
  & .ov-tile .ov-tile-big small { font-family: var(--font); font-size: 13px; font-weight: 600; }
  & .ov-tile.ov-h-late3 .ov-tile-big { color: var(--accent); }
  & .ov-spark i { width: 7px; border-radius: 2px; opacity: 1; }

  & :is(.ov-mb-seg, .ov-mb-item).ov-h-paid { --h: var(--ov-paid); }
  & .ov-mb-bar .ov-mb-seg { border-radius: 4px; }
  & .ov-mb-bar .ov-mb-seg.is-first { border-radius: 99px 4px 4px 99px; }
  & .ov-mb-bar .ov-mb-seg.is-last { border-radius: 4px 99px 99px 4px; }
  & .ov-mb-bar .ov-mb-seg.ov-h-wait, & .ov-mb-item.ov-h-wait span i { background: repeating-linear-gradient(135deg, var(--ov-wait) 0 3px, var(--ld-hatch) 3px 6px); }
  & .ov-mb-bar { height: 24px; }
  & .ov-mb-open { --brace: var(--ink-4); }
  & .ov-mb-head strong { font-family: var(--font-figure); font-size: 34px; font-weight: 400; letter-spacing: -.01em; }
  & .ov-mb-open-figure strong { color: var(--accent); }
  & .ov-mb-item span i { border-radius: 3px; }
  & .ov-mb-seg::before, & .ov-mb-seg::after { display: none; }
  & .ov-mb-pct { font-size: 11px; font-weight: 600; text-shadow: none; }
  & .ov-mb-seg.ov-h-wait .ov-mb-pct { color: var(--ink); }
  & .ov-mb-ghost { border-left-color: var(--ink-2); }
  & .ov-mb-ghost span { border: 1px solid var(--line); background: var(--surface); font-family: var(--mono); font-size: 10.5px; }


  & .ov-mods .ov-mod { border-bottom: 1px dashed var(--line); }
  & .ov-mod .ov-mod-name { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
  & .ov-mod .ov-mod-name small { font-family: var(--font); letter-spacing: 0; }
  & .ov-mod .ov-mod-bar { height: 10px; }
  & .ov-mod .ov-mod-bar .exp { opacity: 1; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--m) 34%, transparent) 0 3px, transparent 3px 6px); }
  & .ov-mod .ov-mod-bar .got { background: var(--m); box-shadow: none; }
  & .ov-mod::before, & .ov-mod .ov-mod-bar .got::before, & .ov-mod .ov-mod-bar .got::after { display: none; }
  & .ov-mod .ov-mod-glyph { width: 10px; height: 10px; border-radius: 3px; background: var(--m); }
  & .ov-mod .ov-mod-glyph .i { display: none; }
  & .ov-mod:is(:hover, .is-focus) .ov-mod-glyph { background: var(--m); }
  & .ov-mod .ov-mod-bar .got { opacity: 1; }
  & .ov-mod .ov-mod-pct { box-shadow: 0 0 0 1px var(--m); font-family: var(--mono); font-size: 10.5px; font-weight: 500; }
  & .ov-mod-strip i { border-radius: 3px; opacity: 1; }

  @media (max-width: 1100px) {
    & .ov-hero { grid-template-columns: minmax(0, 1fr); }
    & .ov-hero-stat:first-child { padding-left: 0; border-left: 0; }
  }
  @media (max-width: 640px) {
    & .ov-hero { gap: 18px; padding: 18px 0 20px; }
    & .ov-hero-big { font-size: 60px; }
    & .ov-hero-big small { font-size: 14px; }
    & .ov-hero-stat { align-content: start; padding-left: 10px; }
    & .ov-hero-figure { font-size: 21px; }
    & .ov-hero-note { font-size: 11.5px; }
  }

  /* Sign-in: a paper panel with a still drawing in place of the moving scene. */
  & .auth-aside { color: var(--ink); background: var(--ld-paper); }
  & .auth-aside::after { display: none; }
  & .brand.on-dark .brand-text small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
  & .auth-pitch .eyebrow { color: var(--accent); }
  & .auth-pitch h1 { line-height: 1.32; color: var(--ink); }
  /* Element types lift these past the warm palette's :is() list. */
  & .auth-pitch ul.auth-points { color: var(--ink-2); }
  & .auth-points .i { color: var(--accent); }
  & .auth-canvas { display: none; }
  & .auth-ledger { display: block; width: calc(100% - 2 * clamp(28px, 4.5vw, 72px)); max-width: 688px; height: auto; margin: auto 0 18px clamp(28px, 4.5vw, 72px); overflow: visible; }
  & .auth-visual div.auth-scene-legend { color: var(--ink-3); }
  & .auth-scene-legend b { color: var(--ink); }
  & .auth-scene-legend .sd { box-shadow: none; }
  & .auth-scene-legend .sd.json { background: var(--ink); }
  & .auth-scene-legend .sd.pdf { background: var(--line-2); }
  & .auth-scene-legend .sd.paid { background: var(--green-dot); }
  & .auth-scene-legend .sd.stray { background: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
  & .auth-main { background: var(--surface-2); }
  & #auth-submit { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
  & #auth-submit:hover:not(:disabled) { border-color: var(--accent-strong); background: var(--accent-strong); }

  & .auth-ledger text { font-family: var(--font); font-size: 11px; fill: var(--ink); }
  & .auth-ledger .la-title { font-size: 13.5px; font-weight: 700; }
  & .auth-ledger .la-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; fill: var(--ink-3); }
  & .auth-ledger .la-num { text-anchor: end; }
  & .auth-ledger .la-strong { font-weight: 700; }
  & .auth-ledger .la-muted { fill: var(--ink-3); }
  & .auth-ledger .la-stray-text { fill: var(--accent); }
  & .la-sheet-back { fill: var(--surface-3); stroke: var(--line-2); }
  & :is(.la-sheet, .la-card) { fill: var(--surface); stroke: var(--line-2); }
  & .la-card-shade { fill: var(--line); }
  & .la-rule { fill: none; stroke: var(--ink); }
  & .la-rule.la-soft { stroke: var(--line); }
  & .la-dash { fill: none; stroke: var(--line); stroke-dasharray: 3 3; }
  & .la-link { fill: none; stroke: var(--ink-4); stroke-width: 1.2; stroke-dasharray: 1 4; stroke-linecap: round; }
  & .la-ok-dot circle { fill: var(--green-dot); }
  & .la-ok-bg circle { fill: var(--green-bg); }
  & :is(.la-ok, .la-badge-tick) { fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  & .la-ok { stroke: var(--green); }
  & .la-badge { fill: var(--accent); }
  & .la-badge-tick { stroke: var(--on-accent); }
  & .la-stray { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 2.5 2; }
  & .la-stamp { opacity: .92; }
  & .la-stamp rect { fill: none; stroke: var(--accent); stroke-width: 3.2; }
  & .la-stamp .la-stamp-inner { stroke-width: 1.2; }
  & .auth-ledger .la-stamp-word { font-family: var(--font-head); font-size: 30px; font-weight: 700; text-anchor: middle; fill: var(--accent); }
  & .auth-ledger .la-stamp-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: .3em; text-anchor: middle; fill: var(--accent); }
}

/* ================= Pins and the bell =================
   Pins are the doctor's own markers: clay like the brand. What moved since
   the doctor last looked is sky, apart from every money status colour. */
.i.i-fill { fill: currentColor; }

/* Bell: beside the account in Modern's top bar, beside the logo in Ledger's
   sidebar, and in the phone's top row. The panel is outside the sidebar so
   the top bar's backdrop blur cannot trap its fixed position. */
.notif-bell {
  position: absolute; top: 22px; right: 16px; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0;
  border: 1px solid var(--side-edge, var(--line)); border-radius: 10px; background: var(--side-fill, var(--surface)); color: var(--side-ink, var(--ink));
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.notif-bell[hidden] { display: none; }
.notif-bell:hover { background: var(--side-fill-hover, var(--surface-hover)); }
.notif-bell:focus-visible { outline: none; box-shadow: var(--focus); }
.notif-bell[aria-expanded="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.notif-bell .i { width: 18px; height: 18px; }
.notif-count {
  position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box;
  border: 2px solid var(--bg); border-radius: 99px; background: var(--sky); color: var(--surface); font-size: 10.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.notif-count[hidden] { display: none; }
.notif-bell.is-new .i { transform-origin: 50% 10%; animation: bell-ring .9s var(--ease) 2; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .notif-bell.is-new .i { animation: none; } }
@media (max-width: 900px) {
  .sidebar > .notif-bell { position: relative; top: auto; right: auto; order: 2; width: 40px; height: 40px; }
  .nav-pins { display: none !important; }
}
html:not([data-design="classic"]) {
  @media (min-width: 901px) {
    & .sidebar > .notif-bell { position: relative; top: auto; right: auto; order: 5; }
    & .sidebar > .account-chip { order: 6; }
  }
}
:root[data-look="ledger"] {
  @media (min-width: 901px) {
    & .sidebar > .notif-bell { position: absolute; top: 22px; right: 16px; width: 34px; height: 34px; }
  }
}

/* Top bar: the hospital scopes every page, so it leads; pages read as work to
   do, then data to read, and files move into the add-file menu. Every control
   is 36px tall with 10px corners; tabs sit 3px inside with 7px corners. The
   sidebar and phone layouts keep the plain select and their own order. */
.switcher-dot, .switcher-face, .side-cta-more { display: none; }
.switcher-dot { --dot: var(--ink-4); }
.switcher-dot[data-tone="unassigned"] { --dot: var(--amber); }
.switcher-dot[data-tone="0"] { --dot: #3fa88c; }
.switcher-dot[data-tone="1"] { --dot: #8a7be0; }
.switcher-dot[data-tone="2"] { --dot: #4d8fe0; }
.switcher-dot[data-tone="3"] { --dot: #d9668f; }
.switcher-dot[data-tone="4"] { --dot: #9a9b3c; }
.switcher-dot[data-tone="5"] { --dot: #d97757; }
.side-cta-more .popover { min-width: 300px; padding: 6px; }
.side-cta-more .menu-item { gap: 3px; text-decoration: none; }
.side-cta-more .menu-item > span { display: grid; gap: 1px; }
.side-cta-more .menu-item strong { font-weight: 600; color: var(--ink); }
.side-cta-more .menu-item small { font-size: 12px; color: var(--ink-3); }
.menu-note { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 9px 11px 5px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.menu-note .i { flex: none; width: 15px; height: 15px; }
html:not([data-design="classic"]):not([data-look="ledger"]) {
  @media (min-width: 901px) {
    & .sidebar .switcher { order: 1; margin-left: 4px; }
    & .sidebar .switcher-control > .i:first-child { display: none; }
    & .sidebar .switcher-dot { position: absolute; left: 13px; top: 50%; display: block; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 24%, transparent); pointer-events: none; }
    & .sidebar .switcher-face { display: flex; align-items: center; gap: 8px; max-width: 300px; height: 36px; padding: 0 32px 0 31px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s; }
    & .sidebar .switcher-face > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    & .sidebar .switcher-tag { flex: none; padding: 1px 8px; border: 1px solid var(--amber-line); border-radius: 99px; background: var(--amber-bg); color: var(--amber); font-size: 11.5px; font-weight: 600; }
    /* The select still takes clicks and keys; the face only shows its value. */
    & .sidebar .switcher-control select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
    & .sidebar .switcher-control:hover .switcher-face { border-color: var(--line-2); background: var(--surface-hover); }
    & .sidebar .switcher-control:has(select:focus-visible) .switcher-face { border-color: var(--accent); box-shadow: var(--focus); }
    & .sidebar .switcher-control:has(select:disabled) .switcher-face { opacity: .6; }

    & .sidebar .nav { order: 2; margin-left: 4px; padding: 3px; border-radius: 10px; }
    & .sidebar .nav a { height: 30px; border-radius: 7px; }
    & .sidebar .nav .dfm-pill { border-radius: 7px; }
    & .sidebar .nav a[data-view="review"] { order: 1; }
    & .sidebar .nav a[data-view="pins"] { order: 2; }
    & .sidebar .nav a[data-view="studies"] { order: 3; margin-left: 13px; }
    & .sidebar .nav a[data-view="studies"]::after { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 1px; background: var(--line-2); pointer-events: none; }
    & .sidebar .nav a[data-view="payments"] { order: 4; }
    & .sidebar .nav-files { display: none; }

    & .sidebar .side-search { order: 3; }
    & .sidebar .side-search > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Adding files is monthly: a quiet button, with the files page in its menu. */
    & .sidebar .side-cta { order: 4; border: 1px solid var(--line-2); border-radius: 10px 0 0 10px; background: var(--surface); color: var(--ink); box-shadow: none; }
    & .sidebar .side-cta .i { color: var(--accent); }
    & .sidebar .side-cta:hover { background: var(--surface-hover); filter: none; transform: none; box-shadow: none; }
    & .sidebar .side-cta-more { order: 4; display: block; margin-left: -12px; }
    & .sidebar .side-cta-more > summary { display: grid; place-items: center; width: 30px; height: 36px; margin-left: -1px; border: 1px solid var(--line-2); border-radius: 0 10px 10px 0; background: var(--surface); color: var(--ink-3); list-style: none; transition: background .15s, color .15s; }
    & .sidebar .side-cta-more > summary::-webkit-details-marker { display: none; }
    & .sidebar .side-cta-more > summary:hover, & .sidebar .side-cta-more[open] > summary { background: var(--surface-hover); color: var(--ink); }
    & .sidebar .side-cta-more > summary:focus-visible { outline: none; box-shadow: var(--focus); }
    & .sidebar .side-cta-more:has(a.active) > summary { color: var(--accent); }
    & .sidebar .side-cta-more > summary .i { width: 14px; height: 14px; }

    /* Hiding names is needed the moment someone looks, so it stays one click. */
    & .sidebar .sidebar-foot { order: 5; display: flex; }
    & .sidebar .sidebar-foot > :not(#privacy-toggle) { display: none; }
    & .sidebar #privacy-toggle { width: 36px; height: 36px; border-radius: 10px; color: var(--ink-3); }
    & .sidebar #privacy-toggle:hover { background: var(--surface-hover); color: var(--ink); }
    & .sidebar #privacy-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
    & .sidebar #privacy-toggle > span { position: absolute; display: block; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    /* Icon buttons carry no frame; fields do. */
    & .sidebar > .notif-bell { order: 6; }
    & .sidebar > .notif-bell:not([aria-expanded="true"]) { border-color: transparent; background: transparent; color: var(--ink-3); }
    & .sidebar > .notif-bell:not([aria-expanded="true"]):hover { background: var(--surface-hover); color: var(--ink); }
    & .sidebar > .account-chip { order: 7; }
    & .sidebar .account-chip .avatar { width: 32px; height: 32px; }
  }
  /* The search gives way first, then the wordmark, then the tag (the dot and
     the select's title still say which hospital this is). */
  @media (min-width: 1241px) {
    & .sidebar .side-search { flex: 0 1 250px; min-width: 160px; }
  }
  @media (min-width: 901px) and (max-width: 1320px) {
    & .sidebar .brand-text { display: none; }
  }
  @media (min-width: 901px) and (max-width: 1240px) {
    & .sidebar .side-search { flex: none; }
  }
  @media (min-width: 901px) and (max-width: 1100px) {
    & .sidebar .switcher-tag { display: none; }
    & .sidebar .nav a { padding: 0 9px; }
  }
}
.nav-badge.soft { background: var(--sky-bg); color: var(--sky); }

.notif-panel {
  position: fixed; z-index: 90; display: flex; flex-direction: column; gap: 10px; width: min(400px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 96px));
  overflow: auto; padding: 14px 14px 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
  animation: palette-in .18s var(--ease);
}
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.notif-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.notif-new { padding: 1px 8px; border-radius: 99px; background: var(--sky-bg); color: var(--sky); font-size: 11.5px; font-weight: 700; }
.notif-read { margin-left: auto; font-size: 12.5px; }
.notif-lead { margin: 0; padding: 0 4px; font-size: 12.5px; color: var(--ink-3); }
.notif-list { display: grid; gap: 4px; }
.notif-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; width: 100%; padding: 10px 10px 10px 12px;
  border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
.notif-item:hover { background: var(--surface-3); }
.notif-item:focus-visible { outline: none; box-shadow: var(--focus); }
.notif-item-text { display: grid; gap: 1px; min-width: 0; }
.notif-item-text strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-text small { overflow: hidden; font-size: 12px; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.notif-change { font-size: 12.5px; font-weight: 700; color: var(--sky); white-space: nowrap; font-variant-numeric: tabular-nums; }
.notif-go { width: 14px; height: 14px; color: var(--ink-4); }
.notif-empty { display: grid; justify-items: center; gap: 4px; padding: 22px 12px 18px; text-align: center; }
.notif-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; background: var(--surface-3); color: var(--ink-3); }
.notif-empty strong { font-size: 14px; }
.notif-empty small { max-width: 300px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.notif-foot {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 2px -14px 0;
  border-top: 1px solid var(--line); background: var(--surface); color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none;
}
.notif-foot:hover { text-decoration: underline; text-underline-offset: 3px; }
.notif-foot .i { width: 15px; height: 15px; }
@media (max-width: 900px) {
  /* A sheet from the bottom, dimming the page behind it. */
  .notif-panel {
    top: auto !important; left: 0 !important; right: 0; bottom: 0; width: 100%; max-height: 78dvh; box-sizing: border-box;
    border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 0 0 100vmax rgba(20, 20, 19, .5);
  }
  /* The mascot would sit on the sheet's text. */
  body.notif-open .helper-launcher { display: none; }
}

/* Pin button in a detail header, and the mark on pinned queue rows. */
.pin-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; max-width: 280px; padding: 0 12px 0 10px; border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.pin-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.pin-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.pin-btn .i { width: 15px; height: 15px; }
.pin-btn.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.pin-btn em { overflow: hidden; max-width: 130px; padding-left: 7px; border-left: 1px solid var(--accent-line); font-style: normal; font-weight: 500; text-overflow: ellipsis; }
.sd-top .sd-nav { margin-left: auto; }
.sd-top .pin-btn { margin-left: auto; }
.sd-top .sd-nav + .pin-btn { margin-left: 4px; }
.sq-pin { width: 13px; height: 13px; margin-right: 5px; vertical-align: -1px; color: var(--accent); }

.review-filter { display: flex; gap: 6px; padding: 0 2px; }
.review-filter[hidden] { display: none; }
.review-filter button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 99px; background: transparent;
  color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.review-filter button:hover:not(:disabled) { color: var(--ink); border-color: var(--line-2); }
.review-filter button[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.review-filter button:disabled { opacity: .45; cursor: default; }
.review-filter .i { width: 13px; height: 13px; color: var(--accent); }
.review-filter .seg-count { min-width: 18px; height: 17px; padding: 0 5px; }

/* Pin dialog */
.pin-form { display: grid; gap: 18px; }
.pin-form .field { margin: 0; }
.pin-labels { min-width: 0; margin: 0; padding: 0; border: 0; }
.pin-labels legend { margin-bottom: 10px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.pin-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pin-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 99px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.pin-chip:hover { border-color: var(--accent-line); color: var(--ink); }
.pin-chip:focus-visible { outline: none; box-shadow: var(--focus); }
.pin-chip .i { width: 14px; height: 14px; }
.pin-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.pin-chip.add { border-style: dashed; color: var(--ink-3); }
.pin-chip-sep { width: 1px; height: 20px; background: var(--line-2); }
.pin-new { display: flex; gap: 8px; margin-top: 10px; }
.pin-new[hidden] { display: none; }
.pin-new input { flex: 1; min-width: 0; height: 36px; font-size: 14px; }
.pin-form textarea {
  width: 100%; box-sizing: border-box; min-height: 84px; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; transition: border-color .15s, box-shadow .15s;
}
.pin-form textarea::placeholder { color: var(--ink-4); }
.field textarea.url-list {
  width: 100%; box-sizing: border-box; min-height: 64px; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; transition: border-color .15s, box-shadow .15s;
}
.field textarea.url-list::placeholder { color: var(--ink-4); }
.field textarea.url-list:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.url-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.url-suggest[hidden] { display: none; }
.btn.capture-open { margin-top: 8px; }
.capture-hint { margin-top: 10px; }
.capture-hint a { color: var(--accent); font-weight: 700; }
.url-suggest .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pin-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.pin-notify { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.pin-notify input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.pin-notify span { display: grid; gap: 3px; }
.pin-notify strong { font-size: 14px; }
.pin-notify small { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.pin-remove { margin-right: auto; }

/* Unmatched payment detail: the money, then why no study matched. */
.pm-money { display: grid; gap: 10px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.pm-money-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.pm-money-head p { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.pm-money-head strong { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--green); font-variant-numeric: tabular-nums; }
.pm-money-head strong small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.pm-money-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pm-bar-head { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.pm-bar-head b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pm-bar { display: flex; gap: 3px; height: 12px; }
.pm-bar i { display: block; height: 100%; }
.pm-net { flex: none; border-radius: 99px 0 0 99px; background: var(--green-dot); }
.pm-share { flex: 1; min-width: 6px; border-radius: 0 99px 99px 0; background: repeating-linear-gradient(135deg, var(--ink-4) 0 4px, var(--line-2) 4px 8px); }
.pm-bar-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pm-legend-net { font-weight: 600; color: var(--green); }
.pm-legend-share { color: var(--ink-3); }
.pm-note { display: flex; gap: 8px; margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.pm-note .i { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.pm-why { display: grid; gap: 10px; margin-top: 22px; }
.pm-why-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pm-why-head h3 { margin: 0; font-size: 15px; }
.pm-why-head span { font-size: 12.5px; color: var(--ink-3); }
.pm-steps { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1.3fr); align-items: stretch; }
.pm-arrow { display: grid; place-items: center; color: var(--ink-4); }
.pm-arrow .i { width: 15px; height: 15px; }
.pm-step { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.pm-step-title { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.pm-step > strong { overflow: hidden; font-size: 15.5px; text-overflow: ellipsis; white-space: nowrap; }
.pm-step-result { display: flex; align-items: flex-start; gap: 6px; margin-top: auto; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.pm-step-result .i { width: 14px; height: 14px; flex: none; margin-top: 2px; stroke-width: 2.2; }
.pm-step.tone-no .pm-step-result { color: var(--rose); }
.pm-step.tone-ok .pm-step-result { color: var(--green); }
.pm-step.tone-warn { border-color: var(--amber-line); background: color-mix(in srgb, var(--amber-bg) 55%, var(--surface-2)); }
.pm-step.tone-warn .pm-step-result { color: var(--amber); }
.pm-months { display: flex; gap: 4px; }
.pm-months span { display: flex; flex: 1; align-items: center; justify-content: center; gap: 2px; min-width: 0; height: 26px; box-sizing: border-box; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pm-months .i { width: 11px; height: 11px; stroke-width: 3; }
.pm-months .is-in { background: var(--green-bg); color: var(--green); }
.pm-months .is-out { background: var(--surface-3); color: var(--ink-3); }
.pm-months .is-in.is-target { box-shadow: inset 0 0 0 1.5px var(--green-dot); }
.pm-months .is-out.is-target { border: 1.5px dashed var(--amber-dot); background: var(--amber-bg); color: var(--amber); }
.pm-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--amber-bg); }
.pm-verdict > .i { width: 18px; height: 18px; color: var(--amber); }
.pm-verdict-text { display: grid; gap: 2px; }
.pm-verdict-text strong { font-size: 13.5px; color: var(--amber); }
.pm-verdict-text small { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.pm-verdict-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 720px) {
  .pm-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pm-arrow { display: none; }
  .pm-verdict { grid-template-columns: auto minmax(0, 1fr); }
  .pm-verdict-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Overview card: what is being followed up, quietly. */
.ov-pin-card .ov-ttl .i { color: var(--accent); }
.ov-pin-all { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-3); text-decoration: none; transition: color .15s; }
.ov-pin-all:hover { color: var(--accent); }
.ov-pin-all .i { width: 15px; height: 15px; }
.ov-pin-sum { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.ov-pin-sum strong { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ov-pin-sum span { font-size: 13px; color: var(--ink-3); }
.ov-pin-sum em { margin-left: auto; font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--sky); }
.ov-pins { display: flex; flex-direction: column; margin: 10px -8px 0; }
.ov-pin {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 8px; border: 0; border-radius: 12px;
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
.ov-pin + .ov-pin::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; border-top: 1px solid var(--line); transition: opacity .15s; }
.ov-pin:hover { background: var(--surface-3); }
.ov-pin:hover::before, .ov-pin:hover + .ov-pin::before { opacity: 0; }
.ov-pin:focus-visible { outline: none; box-shadow: var(--focus); }
.ov-pin-text { display: grid; gap: 1px; min-width: 0; }
.ov-pin-text strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ov-pin-text small { overflow: hidden; font-size: 12.5px; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.ov-pin-figure { font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-pin-figure.is-moving { color: var(--sky); }
.ov-pin-figure.tone-short { color: var(--amber); }
.ov-pin-figure.tone-none { color: var(--rose); }
.ov-pin-figure.tone-open { color: var(--ink-2); }
.ov-pin-figure.tone-done { color: var(--green); }
.ov-pin-empty { display: grid; gap: 4px; margin-top: 16px; }
.ov-pin-empty strong { font-size: 14px; }
.ov-pin-empty small { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

/* Pins page: summary cards, then a board of rows drawn period by period.
   Row = info | history before the board | the board's months. */
.pins { display: grid; gap: 18px; }
.pins-summary { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
.pins-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pins-stat {
  --t: var(--accent); display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .2s var(--ease), box-shadow .2s;
}
.pins-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pins-stat:focus-visible { outline: none; box-shadow: var(--focus); }
.pins-stat-name { font-size: 12.5px; font-weight: 600; color: var(--t); }
.pins-stat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pins-stat-head strong { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pins-stat small { font-size: 12px; color: var(--ink-3); }
.pins-stat-viz { margin-top: auto; padding-top: 12px; }
.pins-stat.is-moving { --t: var(--sky); }
.pins-stat.is-waiting { --t: var(--amber); }
.pins-stat.is-done { --t: var(--green); }
.pins-stat[aria-pressed="true"] { border-color: var(--t); background: color-mix(in srgb, var(--t) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--t); }
.pt-delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--ink-3); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-delta.is-good { background: var(--green-bg); color: var(--green); }
.pt-delta.is-bad { background: var(--rose-bg); color: var(--rose); }
.pt-spark { position: relative; height: 46px; color: var(--t); }
.pt-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pt-spark-area { fill: currentColor; opacity: .14; }
.pt-spark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pt-spark-end { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.pt-spark-hit { position: absolute; inset: 0; display: flex; }
.pt-spark-hit span { position: relative; flex: 1; }
.pt-spark-hit span:hover::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed currentColor; opacity: .5; }
.pt-spark-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--ink-4); }
.pt-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.pt-dots i { --c: var(--t); width: 11px; height: 11px; border-radius: 3px; background: var(--c); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.pt-dots i:hover { transform: scale(1.35); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--c); }
.pt-dots i.is-moving { --c: var(--sky); }
.pt-dots i.is-waiting { --c: var(--amber-dot); }
.pt-dots i.is-late { --c: var(--rose-dot); }
.pt-dots i.is-done { --c: var(--green-dot); }
.pt-flow { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pt-flow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pt-flow-top span { font-size: 12.5px; font-weight: 600; color: var(--green); }
.pt-flow-top strong { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pt-flow-top strong small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pt-flow-bars { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-items: end; gap: 6px; height: 58px; }
.pt-flow-bars > span { display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 4px; height: 100%; font-size: 11px; color: var(--ink-3); text-align: center; }
.pt-flow-bars b { display: block; min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--green-dot); }
.pt-flow-bars b.is-zero { background: var(--surface-3); }
.pt-flow-bars b.is-next { min-height: 14px; border: 1px dashed var(--line-2); background: none; }
.pt-flow-rest { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.pt-flow-rest dt { font-size: 11.5px; color: var(--ink-3); }
.pt-flow-rest dd { margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pt-flow-rest dd.is-owed { color: var(--amber); }

.pins-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pins-kinds button { height: 30px; font-size: 13px; }
.pins-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.pins-labels .pin-chip { height: 32px; padding: 0 12px; }
.pt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-left: auto; font-size: 12px; color: var(--ink-3); }
.pt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pt-lg { display: inline-block; box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%; }
.pt-lg.is-track { width: 18px; height: 4px; border-radius: 99px; background: var(--accent); }
.pt-lg.is-in { background: var(--green-dot); }
.pt-lg.is-none { border: 2px solid var(--ink-4); }
.pt-lg.is-late { border: 2px solid var(--rose); }
.pt-lg.is-next { border: 1.5px dashed var(--ink-3); }

.pt-board { --pt-info: 300px; --pt-prev: 118px; --pt-n: 5; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: clip; }
.pt-axis { position: sticky; top: var(--pt-sticky, 0px); z-index: 5; display: grid; grid-template-columns: var(--pt-info) var(--pt-prev) minmax(0, 1fr); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pt-axis-lead { display: flex; align-items: center; padding: 0 18px; font-size: 12px; color: var(--ink-3); }
.pt-axis-prev { display: grid; align-content: center; gap: 1px; padding: 10px; border-left: 1px solid var(--line); font-size: 11px; color: var(--ink-3); text-align: center; }
.pt-axis-prev strong { font-size: 12px; color: var(--ink-2); }
.pt-months { display: grid; grid-template-columns: repeat(var(--pt-n), minmax(0, 1fr)); }
.pt-month { display: grid; gap: 1px; padding: 10px 12px; border-left: 1px solid var(--line); }
.pt-month strong { font-size: 13px; }
.pt-month small { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pt-month small.is-in { color: var(--green); }
.pt-month.is-next, .pt-cols i.is-next { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink) 3%, transparent) 6px 12px); }
.pt-month.is-next strong { color: var(--ink-2); }
.pt-group { --g: var(--ink-3); display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 18px; border: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--g) 5%, var(--surface)); color: var(--g); font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; }
.pt-axis + .pt-group { border-top: 0; }
.pt-group:hover { background: color-mix(in srgb, var(--g) 9%, var(--surface)); }
.pt-group:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.pt-group em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.pt-group > .i { width: 15px; height: 15px; margin-left: auto; color: var(--ink-3); transition: transform .2s; }
.pt-group[aria-expanded="false"] > .i { transform: rotate(-90deg); }
.pt-group-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g); }
.pt-group.is-moving { --g: var(--sky); }
.pt-group.is-waiting { --g: var(--amber); }
.pt-group.is-done { --g: var(--green); }
.pt-showmore { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px; border: 0; border-top: 1px dashed var(--line); background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pt-showmore:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); color: var(--ink); }
.pt-showmore .i { width: 14px; height: 14px; }

.pt-card { position: relative; display: grid; grid-template-columns: var(--pt-info) var(--pt-prev) minmax(0, 1fr); border-top: 1px solid var(--line); transition: background .15s; animation: view-in .35s var(--ease) both; }
.pt-group + .pt-card { border-top-style: dashed; }
.pt-card:hover { background: color-mix(in srgb, var(--ink) 2%, transparent); }
.pt-card.is-moving::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sky); }
.pt-card.is-done:not(.is-open) { opacity: .8; }
.pt-card.is-done:hover { opacity: 1; }
.pt-card.is-flash { animation: pt-flash 1.6s var(--ease); }
@keyframes pt-flash { from { box-shadow: inset 0 0 0 2px var(--accent); } to { box-shadow: inset 0 0 0 2px transparent; } }
.pt-info { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 16px 16px 14px 18px; cursor: pointer; }
.pt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pt-kind { padding: 2px 8px; border-radius: 7px; background: var(--surface-3); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.pt-kind.is-payment { background: var(--amber-bg); color: var(--amber); }
.pt-tag { padding: 2px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.pt-news { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; background: var(--sky-bg); color: var(--sky); font-size: 11px; font-weight: 700; }
.pt-news::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pt-blink 1.6s ease-in-out infinite; }
.pt-title { margin-top: 3px; overflow: hidden; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.pt-sub { overflow: hidden; font-size: 12px; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.pt-money { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; }
.pt-money > span { font-size: 12px; color: var(--ink-3); }
.pt-money b { font-size: 19px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pt-money small { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pt-money.tone-short b, .pt-money.tone-open b { color: var(--amber); }
.pt-money.tone-none b { color: var(--rose); }
.pt-money.tone-done b { color: var(--green); }
.pt-meter { display: flex; height: 6px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.pt-meter i { display: block; width: 0; height: 100%; background: var(--green-dot); transition: width .7s var(--ease); }
.pt-meter i.is-before { background: color-mix(in srgb, var(--green-dot) 45%, var(--surface-3)); }
.pt-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.pt-meta > .i { flex: none; width: 13px; height: 13px; color: var(--accent); }
.pt-actions { display: flex; gap: 2px; margin-left: auto; }
.pt-actions .icon-btn { width: 28px; height: 28px; }
.pt-toggle .i { transition: transform .2s; }
.pt-card.is-open .pt-toggle .i { transform: rotate(180deg); }

.pt-prev { display: grid; align-content: center; justify-items: center; gap: 3px; padding: 10px 8px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 1.5%, transparent); font-size: 11px; line-height: 1.4; color: var(--ink-3); text-align: center; }
.pt-prev b { font-size: 11.5px; color: var(--ink-2); }
.pt-prev .is-in { color: var(--green); font-weight: 700; }
.pt-prev .is-late { color: var(--rose); font-weight: 600; }
.pt-prev .is-closed { color: var(--green); font-weight: 600; }
.pt-prev .is-pin { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.pt-prev .is-pin .i { width: 11px; height: 11px; }

.pt-lane-wrap { min-width: 0; }
.pt-lane { position: relative; display: grid; grid-template-rows: 58px auto; min-width: 0; }
.pt-cols, .pt-cells, .pt-lane-months { grid-template-columns: repeat(var(--pt-n), minmax(0, 1fr)); }
.pt-cols { position: absolute; inset: 0; display: grid; pointer-events: none; }
.pt-cols i { border-left: 1px solid var(--line); }
.pt-cols i.is-next { border-left-style: dashed; }
.pt-lane-months { display: none; }
.pt-cells { position: relative; display: grid; align-items: end; padding-top: 14px; }
.pt-cell { display: flex; justify-content: center; }
.pt-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid transparent; border-radius: 99px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.pt-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pt-pill .i { width: 13px; height: 13px; }
.pt-pill.is-in { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.pt-pill.is-in.is-before { opacity: .55; }
.pt-pill.is-none { border-color: var(--line-2); color: var(--ink-4); font-weight: 600; }
.pt-pill.is-none.is-late { border-color: color-mix(in srgb, var(--rose) 40%, var(--line)); background: color-mix(in srgb, var(--rose) 7%, transparent); color: var(--rose); }
.pt-pill.is-open { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); font-weight: 600; }
.pt-pill.is-next { border: 1px dashed var(--ink-4); background: var(--surface); color: var(--ink-3); font-weight: 600; }
.pt-pill.is-new { position: relative; animation: pt-glow 2.4s ease-in-out infinite; }
.pt-pill.is-new::after { content: "ใหม่"; position: absolute; top: -9px; right: -8px; padding: 0 5px; border-radius: 6px; background: var(--sky); color: var(--on-accent); font-size: 9.5px; line-height: 15px; }

.pt-rail { position: relative; min-height: 72px; }
.pt-line { position: absolute; top: 18px; height: 2px; border-radius: 99px; background: var(--line-2); }
.pt-line.is-track { top: 17px; height: 4px; background: var(--accent); }
.pt-line.is-track.is-done { background: var(--green-dot); }
.pt-line.is-future { height: 0; border-top: 2px dashed var(--ink-4); background: none; }
.pt-line.from-prev::before { content: ""; position: absolute; top: 50%; left: -1px; width: 7px; height: 7px; margin-top: -4.5px; border-bottom: 2px solid; border-left: 2px solid; color: var(--line-2); transform: rotate(45deg); }
.pt-line.is-track.from-prev::before { color: var(--accent); }
.pt-today { position: absolute; top: -58px; width: 0; height: 88px; border-left: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.pt-today::after { content: ""; position: absolute; top: 12px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pt-ev { position: absolute; top: 9px; display: grid; justify-items: center; width: 0; }
.pt-dot { display: grid; place-items: center; box-sizing: border-box; width: 20px; height: 20px; margin-left: -10px; border: 2px solid var(--ink-3); border-radius: 50%; background: var(--surface); color: var(--ink); transition: transform .15s; }
.pt-dot:hover { transform: scale(1.15); }
.pt-dot .i { width: 11px; height: 11px; }
.pt-ev.is-order .pt-dot { width: 14px; height: 14px; margin: 3px 0 3px -7px; }
.pt-ev.is-pin .pt-dot { width: 24px; height: 24px; margin: -2px 0 -2px -12px; border: 0; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pt-ev.is-pin .pt-dot .i { width: 13px; height: 13px; }
.pt-ev.is-done .pt-dot, .pt-ev.is-match .pt-dot { border: 0; background: var(--green-dot); color: #0f1a14; box-shadow: 0 0 0 4px var(--green-bg); }
.pt-ev.is-accept .pt-dot { border: 0; background: var(--violet); color: #fff; box-shadow: 0 0 0 4px var(--violet-bg); }
.pt-ev-label { position: absolute; top: 28px; display: grid; justify-items: center; width: max-content; max-width: 150px; font-size: 11.5px; line-height: 1.35; color: var(--ink-2); text-align: center; transform: translateX(-50%); pointer-events: none; }
.pt-ev-label b { font-weight: 700; color: var(--ink); }
.pt-ev.is-pin .pt-ev-label > b { color: var(--accent); }
.pt-ev.is-done .pt-ev-label > b, .pt-ev.is-match .pt-ev-label > b { color: var(--green); }
.pt-ev-line { display: block; white-space: nowrap; }
.pt-ev-line + .pt-ev-line { margin-top: 2px; }
.pt-ev-line.is-pin b { color: var(--accent); }
.pt-ev-line.is-done b, .pt-ev-line.is-match b { color: var(--green); }
.pt-ev-line.is-accept b { color: var(--violet); }
.pt-rail .pt-ev.is-cluster .pt-dot { display: inline-flex; gap: 3px; width: auto; height: 24px; margin: -2px 0; padding: 0 3px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 0 0 3px var(--surface); translate: -50% 0; }
.pt-rail .pt-ev.is-cluster .pt-dot:hover { transform: none; }
.pt-cap { display: grid; place-items: center; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; font-style: normal; }
.pt-cap .i { width: 9px; height: 9px; }
.pt-cap.is-order { border: 2px solid var(--ink-3); }
.pt-cap.is-pin { background: var(--accent); color: var(--on-accent); }
.pt-cap.is-done, .pt-cap.is-match { background: var(--green-dot); color: #0f1a14; }
.pt-cap.is-accept { background: var(--violet); color: #fff; }

.pt-more { grid-column: 1 / -1; display: grid; grid-template-columns: var(--pt-info) minmax(0, 1fr); border-top: 1px dashed var(--line); background: color-mix(in srgb, var(--bg) 35%, var(--surface)); }
.pt-note { display: grid; align-content: start; gap: 10px; padding: 16px 16px 18px 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.pt-note h4, .pt-log h4 { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.pt-note p { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-3); white-space: pre-wrap; }
.pt-note-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-log { display: grid; align-content: start; gap: 8px; padding: 16px 20px 18px; border-left: 1px solid var(--line); }
.pt-log ol { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pt-log ol::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 5px; width: 2px; background: var(--line); }
.pt-log li { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; padding-left: 24px; font-size: 12.5px; }
.pt-log li::before { content: ""; position: absolute; top: 4px; left: 0; box-sizing: border-box; width: 12px; height: 12px; border: 2px solid var(--ink-3); border-radius: 50%; background: var(--surface); }
.pt-log li.is-in::before, .pt-log li.is-done::before { border: 0; background: var(--green-dot); }
.pt-log li.is-pin::before { border: 0; background: var(--accent); }
.pt-log li.is-none::before { border-color: var(--line-2); }
.pt-log li.is-wait::before { border-style: dashed; }
.pt-log li.is-fold::before { border-style: dotted; border-color: var(--ink-4); }
.pt-log li.is-fold strong { font-weight: 600; color: var(--ink-3); }
.pt-log li.is-late strong { color: var(--rose); }
.pt-log time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pt-log li strong { font-weight: 700; }
.pt-log li small { display: block; color: var(--ink-3); }
.pt-log-amount { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }

.pins-empty { display: grid; justify-items: center; gap: 8px; padding: 60px 20px; border: 1px dashed var(--line-2); border-radius: 22px; text-align: center; }
.pins-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); }
.pins-empty-icon .i { width: 26px; height: 26px; }
.pins-empty h3 { margin: 6px 0 0; font-size: 18px; }
.pins-empty p { max-width: 460px; margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.pins-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 40px 12px; color: var(--ink-3); }
@keyframes pt-blink { 50% { opacity: .35; } }
@keyframes pt-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 18%, transparent); } }
@media (max-width: 1100px) {
  .pins-summary { grid-template-columns: minmax(0, 1fr); }
}
/* Narrow: info on top, then the older-history line, then a lane that scrolls. */
@media (max-width: 900px) {
  .pins-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-legend { margin-left: 0; }
  .pt-axis { display: none; }
  .pt-card { grid-template-columns: minmax(0, 1fr); }
  .pt-prev { grid-auto-flow: column; justify-content: start; justify-items: start; gap: 8px; padding: 0 18px 8px; border: 0; background: none; text-align: left; }
  .pt-prev:empty { display: none; }
  .pt-lane-wrap { overflow-x: auto; }
  .pt-lane { min-width: 560px; grid-template-rows: 26px 58px auto; }
  .pt-lane-months { position: relative; display: grid; align-items: end; font-size: 11px; font-weight: 700; color: var(--ink-3); }
  .pt-lane-months span { padding: 0 10px; }
  .pt-today { top: -84px; height: 114px; }
  .pt-more { grid-template-columns: minmax(0, 1fr); }
  .pt-log { border-top: 1px solid var(--line); border-left: 0; }
  .pt-log li { grid-template-columns: 100px minmax(0, 1fr); }
  .pt-log li > :last-child { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .pt-card, .notif-panel, .pt-pill.is-new, .pt-news::before { animation: none; } .pt-meter i { transition: none; } }

:root[data-look="ledger"] .ov-pin + .ov-pin::before { border-top-style: dashed; }

/* Import problems: what failed, where on the page, and the next step. */
.modal.wide { width: min(880px, calc(100vw - 24px)); }
.import-problem { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--rose-line); border-radius: var(--r-lg); background: var(--rose-bg); color: var(--ink-2); font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
#problem-content.import-problem { margin: 0; }
.ip-head { display: flex; align-items: flex-start; gap: 11px; }
.ip-head > .i { flex: none; margin-top: 3px; color: var(--rose); }
.ip-head strong { display: block; color: var(--rose); font-size: 14px; }
.ip-head p { margin: 4px 0 0; }
.ip-fact { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; color: var(--ink-2); }
.ip-fact .i { width: 15px; height: 15px; color: var(--ink-3); }
.ip-details { margin: 10px 0 0; padding: 8px 12px 8px 28px; max-height: 180px; overflow: auto; border-radius: var(--r); background: var(--surface); font-size: 12.5px; color: var(--ink-2); }
.ip-details li + li { margin-top: 3px; }
.ip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.ip-actions .hint { font-size: 12.5px; }
.held-notice { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--amber-line); border-radius: var(--r-lg); background: var(--amber-bg); font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.held-notice > strong { display: flex; align-items: center; gap: 7px; color: var(--amber); font-size: 13.5px; }
.held-notice > strong .i { width: 16px; height: 16px; }
.held-notice > p { margin: 3px 0 0; }

/* Page viewer: a masked page image with the problem rows boxed over it. */
.pv { margin: 12px 0 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.pv-tabs { display: flex; gap: 4px; padding: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.pv-tab { flex: none; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pv-tab b { margin-left: 3px; padding: 0 6px; border-radius: 999px; background: var(--rose-bg); color: var(--rose); font-size: 11.5px; }
.pv-tab[aria-selected="true"] { border-color: var(--line-2); background: var(--surface-hover); color: var(--ink); }
.pv-stage { position: relative; max-height: min(420px, 52vh); overflow: auto; background: var(--surface-3, #eef0f4); cursor: zoom-in; overscroll-behavior: contain; }
.pv.zoomed .pv-stage { max-height: min(640px, 72vh); cursor: zoom-out; }
.pv-sheet { position: relative; width: 100%; margin: 0 auto; background: #fff; }
.pv.zoomed .pv-sheet { width: 200%; }
.pv-sheet img { display: block; width: 100%; height: auto; user-select: none; }
.pv-mark { position: absolute; border: 2px solid var(--rose-dot); border-radius: 4px; background: rgba(233, 73, 109, .14); pointer-events: none; }
.pv-mark.held { border-color: var(--amber-dot); background: rgba(240, 163, 39, .16); }
.pv-mark.whole { inset: 0; border-radius: 0; background: transparent; }
.pv-mark.active { box-shadow: 0 0 0 3px rgba(233, 73, 109, .28); animation: pv-pulse 1.4s ease-in-out 2; }
.pv-mark.held.active { box-shadow: 0 0 0 3px rgba(240, 163, 39, .3); }
@keyframes pv-pulse { 50% { box-shadow: 0 0 0 7px rgba(233, 73, 109, 0); } }
.pv figcaption { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.pv figcaption > .i { width: 14px; height: 14px; flex: none; }
.pv figcaption > span:first-of-type { flex: 1; min-width: 0; }
.pv-nav { display: inline-flex; align-items: center; gap: 2px; flex: none; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.batch-item .btn.sm .i { width: 14px; height: 14px; }
.batch-item.is-merged { opacity: .62; }
@media (prefers-reduced-motion: reduce) { .pv-mark.active { animation: none; } }
@media (max-width: 600px) {
  .pv.zoomed .pv-sheet { width: 300%; }
  .pv figcaption { flex-wrap: wrap; }
}

/* น้องเช็ควิเคราะห์ให้: suggestions for unexplained short payments.
   Two colour systems, never mixed:
   - the violet-blue-cyan gradient means "น้องเช็ค is talking" (frames, name, sparkles, the recommended choice);
   - the four group colours (checked for colour blindness and contrast on #ffffff and #30302e)
     mean which way a row leans: ส่วนลด blue · ยังบอกไม่ได้ gray · รองวดหน้า amber · ผิดปกติ rose. */
:root {
  --ai-1: #6d4aff; --ai-2: #3b82f6; --ai-3: #06b6d4; --ai-glow: rgba(79, 99, 255, .28);
  --g-discount: #2a78d6; --g-unsure: #9aa1b1; --g-wait: #c98500; --g-odd: #d6335f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ai-1: #a78bfa; --ai-2: #60a5fa; --ai-3: #5eead4; --ai-glow: rgba(120, 140, 255, .32); --g-discount: #3987e5; --g-unsure: #6f6d66; --g-wait: #c98500; --g-odd: #e0456b; }
}
:root[data-theme="dark"] { --ai-1: #a78bfa; --ai-2: #60a5fa; --ai-3: #5eead4; --ai-glow: rgba(120, 140, 255, .32); --g-discount: #3987e5; --g-unsure: #6f6d66; --g-wait: #c98500; --g-odd: #e0456b; }
.g-discount { --c: var(--g-discount); } .g-unsure { --c: var(--g-unsure); } .g-wait { --c: var(--g-wait); } .g-odd { --c: var(--g-odd); }

@property --ai-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ai-spin { to { --ai-angle: 360deg; } }
@keyframes ai-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ai-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ai-twinkle { 50% { transform: scale(.82) rotate(12deg); opacity: .75; } }
@keyframes ai-caret { 50% { opacity: 0; } }
@keyframes ai-sweep { 0%, 70% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(320%) skewX(-20deg); } }
@keyframes ai-grow { from { transform: scaleX(0); } }
@keyframes ai-slide { from { left: 0; opacity: 0; } }

#ai-grad .s1 { stop-color: var(--ai-1); } #ai-grad .s2 { stop-color: var(--ai-2); } #ai-grad .s3 { stop-color: var(--ai-3); }
.ai-spark { flex: none; width: 15px; height: 15px; stroke: url(#ai-grad); animation: ai-twinkle 2.8s ease-in-out infinite; }
.ai-text { background: linear-gradient(90deg, var(--ai-1), var(--ai-2) 55%, var(--ai-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The frame every น้องเช็ค surface shares */
.ai-glow { position: relative; isolation: isolate; border-radius: 16px; }
.ai-glow::before { content: ""; position: absolute; inset: 6px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--ai-angle), var(--ai-1), var(--ai-2), var(--ai-3), var(--ai-2), var(--ai-1)); filter: blur(22px); opacity: .4; animation: ai-spin 7s linear infinite; }
.ai-card {
  position: relative; border: 1px solid transparent; border-radius: 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ai-1) 12%, transparent), transparent 55%) padding-box,
    radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--ai-3) 8%, transparent), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--ai-angle), var(--ai-1), var(--ai-2), var(--ai-3), var(--ai-2), var(--ai-1)) border-box;
  box-shadow: 0 14px 40px -22px var(--ai-glow);
  animation: ai-spin 7s linear infinite;
}
.ai-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--ai-2) 12%, transparent), transparent 70%); opacity: 0; transition: opacity .35s; }
.ai-card:hover::after { opacity: 1; }
.ai-face { position: relative; display: block; flex: none; width: 44px; height: 44px; border: 1.5px solid transparent; border-radius: 50%; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, conic-gradient(from var(--ai-angle), var(--ai-1), var(--ai-2), var(--ai-3), var(--ai-2), var(--ai-1)) border-box; box-shadow: 0 0 18px -4px var(--ai-glow); animation: ai-spin 4s linear infinite; }
.ai-face .mascot { position: absolute; top: 50%; left: 50%; width: 40px; transform: translate(-37%, -50%); }
.is-thinking .ai-face { animation-duration: 1.1s; }
.ai-head { display: flex; align-items: center; gap: 11px; }
.ai-head-text { display: grid; gap: 1px; min-width: 0; }
.ai-name { font-size: 13px; font-weight: 700; }
.ai-status { font-size: 12px; color: var(--ink-3); }

/* Summary above the queue */
.ai-glow.is-brief { margin-bottom: 20px; border-radius: 20px; }
.ai-glow.is-brief::before { opacity: .22; inset: 10px 30px; }
.ai-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: center; gap: 18px 36px; padding: 20px 56px 20px 24px; border-radius: 20px; }
.ai-brief-title { margin: 12px 0 6px; font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.ai-brief-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.ai-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline 2px color-mix(in srgb, var(--c, var(--ink-3)) 70%, transparent); text-underline-offset: 5px; cursor: pointer; transition: text-decoration-color .2s; }
.ai-link:hover, .ai-link.is-hot { text-decoration-color: var(--c, var(--ink)); }
.ai-brief-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ai-btn { position: relative; overflow: hidden; border: 0 !important; background: linear-gradient(100deg, var(--ai-1), var(--ai-2) 60%, var(--ai-3)) !important; color: #fff !important; box-shadow: 0 8px 24px -10px var(--ai-glow); }
.ai-btn::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: ai-sweep 3.6s ease-in-out infinite; }
.ai-btn .i { stroke: currentColor; }
.ai-filtering { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.ai-filtering strong { color: var(--ink); }

/* Where the money is: a receipt printed on thermal paper, black ink on warm white in both themes */
.ai-receipt { --rc-paper: #fbfaf5; --rc-ink: #232220; --rc-faint: #75736c; --rc-rule: #b8b5ab; --rc-stamp: #cf2530; --g-discount: #2a78d6; --g-unsure: #9aa1b1; --g-wait: #c98500; --g-odd: #d6335f; position: relative; justify-self: center; width: min(100%, 340px); }
:root[data-theme="dark"] .ai-receipt { --rc-paper: #eeece4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-receipt { --rc-paper: #eeece4; } }
.rc-slot { position: relative; z-index: 2; height: 10px; margin: 0 -10px; border-radius: 99px; background: linear-gradient(#1b1b1a, #3a3936); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .12), 0 6px 12px -6px rgba(0, 0, 0, .5); }
.rc-clip { overflow: hidden; margin-top: -5px; padding: 0 0 10px; }
.rc-paper {
  --z: 10px;
  position: relative;
  padding: 12px 14px calc(var(--z) + 8px); background: var(--rc-paper); color: var(--rc-ink); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 10px 10px -8px rgba(0, 0, 0, .25);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--z) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--z) 100%;
}
.ai-receipt.is-printing .rc-paper { animation: rc-print 1.5s steps(14, end) .15s both; }
@keyframes rc-print { from { transform: translateY(-100%); } }
.rc-head { display: grid; justify-items: center; gap: 1px; text-align: center; }
.rc-logo { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 3px; border-radius: 7px; background: var(--rc-ink); }
.rc-logo svg { width: 19px; height: 19px; }
.rc-head strong { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.rc-head small { font-size: 11.5px; color: var(--rc-faint); }
.rc-rule { height: 0; margin: 8px 0 4px; border-top: 1.5px dashed var(--rc-rule); }
.rc-line { display: grid; grid-template-columns: 8px auto minmax(12px, 1fr) auto 70px; align-items: baseline; gap: 6px; width: 100%; padding: 3px 6px; border: 0; border-radius: 6px; background: none; color: var(--rc-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background .2s, opacity .2s; }
.rc-line i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); align-self: center; }
.rc-line .rc-dots { border-bottom: 1.5px dotted var(--rc-rule); transform: translateY(-3px); }
.rc-line b { font-weight: 500; color: var(--rc-faint); }
.rc-line em { font-style: normal; font-weight: 700; text-align: right; }
.rc-line:hover, .rc-line.is-hot, .rc-line[aria-pressed="true"] { background: rgba(0, 0, 0, .06); }
.rc-line[aria-pressed="true"] span:first-of-type { font-weight: 700; text-decoration: underline 2px var(--c); text-underline-offset: 4px; }
.rc-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 6px; font-size: 13px; }
.rc-total strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.rc-foot { margin: 6px 0 6px; font-size: 11px; color: var(--rc-faint); text-align: center; letter-spacing: .02em; }
.rc-barcode { height: 18px; margin: 0 22px; background: repeating-linear-gradient(90deg, var(--rc-ink) 0 2px, transparent 2px 4px, var(--rc-ink) 4px 5px, transparent 5px 8px, var(--rc-ink) 8px 11px, transparent 11px 12px, var(--rc-ink) 12px 13px, transparent 13px 16px); opacity: .85; }
/* The red rubber stamp: double frame, rough edges and ink speckle (#rc-ink in index.html), slammed on after printing */
.rc-stamp { position: absolute; right: 6px; bottom: 4px; z-index: 2; display: grid; justify-items: center; gap: 1px; padding: 5px 12px 6px; border: 2.5px solid var(--rc-stamp); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--rc-paper), inset 0 0 0 3.5px var(--rc-stamp); color: var(--rc-stamp); opacity: .86; mix-blend-mode: multiply; filter: url(#rc-ink); transform: rotate(-9deg); pointer-events: none; }
.rc-stamp small { font-size: 9px; font-weight: 800; letter-spacing: .22em; }
.rc-stamp strong { font-size: 21px; font-weight: 800; line-height: 1.1; letter-spacing: .04em; }
.rc-stamp em { font-family: var(--mono); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .04em; }
.rc-stamp i { width: 78%; height: 5px; margin-top: 2px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 6px, currentColor 6px 7px, transparent 7px 9px); }
.ai-receipt.is-printing .rc-stamp { animation: rc-stamp .5s cubic-bezier(.2, .9, .3, 1.25) 2.8s both; }
.ai-receipt.is-printing .rc-clip { animation: rc-thud .3s ease-out 3.1s; }
@keyframes rc-stamp { 0% { opacity: 0; transform: scale(2.4) rotate(2deg); } 70% { opacity: .95; transform: scale(.94) rotate(-10deg); } 100% { opacity: .86; transform: scale(1) rotate(-9deg); } }
@keyframes rc-thud { 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } }
.ai-off { position: absolute; top: 10px; right: 10px; z-index: 3; }
.ai-brief .is-dim { opacity: .3; }

/* Before น้องเช็ค is on: one small invitation in each place */
.ai-teaser { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; width: 100%; padding: 12px 16px; border: 1.5px solid transparent; border-radius: 16px; background: radial-gradient(120% 140% at 0 0, color-mix(in srgb, var(--ai-1) 10%, transparent), transparent 60%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--ai-1), var(--ai-2), var(--ai-3)) border-box; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .2s; }
.ai-teaser:hover { transform: translateY(-1px); }
.ai-teaser.is-brief { margin-bottom: 20px; }
.ai-teaser.is-row { margin: 0 0 14px; }
.ai-teaser-text { display: grid; flex: 1 1 220px; gap: 2px; min-width: 0; }
.ai-teaser-text strong { font-size: 15px; font-weight: 700; }
.ai-teaser-text small { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.ai-teaser-go { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; background: linear-gradient(100deg, var(--ai-1), var(--ai-2) 60%, var(--ai-3)); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ai-teaser-go .ai-spark { width: 13px; height: 13px; stroke: #fff; }
.ai-teaser.is-analyzing { cursor: progress; }
.ai-teaser.is-analyzing .ai-teaser-go { opacity: .45; }
.ai-teaser.is-analyzing::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--ai-2) 24%, transparent) 50%, transparent 80%) no-repeat; background-size: 55% 100%; animation: ai-scanx 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes ai-scanx { from { background-position: -90% 0; } to { background-position: 190% 0; } }
/* While it analyses, a light passes down the queue; then each tag pops in */
.review-item.ai-scan { background-image: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--ai-2) 22%, transparent) 50%, transparent 75%) !important; background-repeat: no-repeat !important; background-size: 250% 100% !important; animation: ai-rowscan .8s ease-out both; }
@keyframes ai-rowscan { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.ai-tag.is-new { animation: ai-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes ai-pop { from { opacity: 0; transform: scale(.4); } }

/* Whatever น้องเช็ค suggests pressing: a still gradient edge; the inside breathes as a ring pulses out, in one rhythm */
.ai-call { position: relative; isolation: isolate; animation: ai-pulse 2.6s ease-out infinite; }
.ai-call::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(120deg, color-mix(in srgb, var(--ai-1) 16%, transparent), color-mix(in srgb, var(--ai-3) 12%, transparent)); opacity: 0; animation: ai-breathe 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes ai-breathe { 50% { opacity: 1; } }
@keyframes ai-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai-2) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }

/* Queue rows: "ได้ 90%" stays under the amount; the prediction sits after the date */
.ai-tag { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; vertical-align: bottom; }
.ai-tag .ai-spark { width: 11px; height: 11px; animation: none; }
.ai-tag.is-odd { color: var(--g-odd); }

/* The verdict replaces the amber decision frame */
:root .d-act.tone-variance.is-ai { padding: 0; border: 0; background: none; }
:root .d-act.tone-variance.is-ai .d-act-title { margin-bottom: 14px; }
.d-act.is-ai .ai-glow { margin-bottom: 16px; }
.ai-verdict { padding: 16px 18px; }
.ai-reveal { transition: opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.ai-reveal.is-pending { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* The gauge: four zones in the group colours, one needle each reason nudges */
.ai-gauge { position: relative; width: min(100%, 300px); margin: 10px auto 0; }
.ai-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-zone { fill: none; stroke: var(--c); stroke-width: 14; opacity: .2; transition: opacity .4s, filter .4s; }
.g-zone.is-on { opacity: 1; filter: drop-shadow(0 0 7px var(--c)); }
.g-tick { stroke: var(--ink-4); stroke-width: 1.2; stroke-linecap: round; opacity: .45; }
.g-tick.is-long { opacity: .9; }
.g-end { fill: var(--ink-3); font-size: 11.5px; }
.g-needle { transform-box: view-box; transform-origin: 130px 124px; transform: rotate(var(--rot, 0deg)); transition: transform .75s cubic-bezier(.3, 1.45, .5, 1); }
.g-needle line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.g-hub { fill: var(--ink); stroke: var(--surface); stroke-width: 3; }
.g-ghost { transform-box: view-box; transform-origin: 130px 124px; transform: rotate(var(--ghost, 0deg)); opacity: 0; transition: opacity .2s; }
.g-ghost line { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; }
.g-trace { fill: none; stroke: var(--trace, var(--ai-2)); stroke-width: 22; opacity: 0; transition: opacity .2s; }
.ai-gauge.is-tracing .g-ghost { opacity: 1; }
.ai-gauge.is-tracing .g-trace { opacity: .35; }
.ai-verdict-text { margin-top: 4px; text-align: center; }
.ai-headline { min-height: 1.35em; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.ai-headline.is-typing::after, .ai-answer p.is-typing::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: 3px; background: linear-gradient(var(--ai-1), var(--ai-3)); vertical-align: -.1em; animation: ai-caret .7s steps(1) infinite; }
.ai-sub { margin: 4px auto 0; max-width: 34em; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.ai-why-title { margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.ai-why { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ai-reason { border-radius: 10px; transition: background .2s, opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.ai-reason:hover, .ai-reason.is-open { background: var(--surface-2); }
.ai-reason-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 8px; width: 100%; padding: 7px 8px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.55; text-align: left; cursor: default; }
.ai-reason.has-ev .ai-reason-row { cursor: pointer; }
.ai-dir { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; font-size: 12px; font-weight: 800; line-height: 1; }
.ai-dir.is-left { background: color-mix(in srgb, var(--g-discount) 18%, transparent); color: var(--g-discount); }
.ai-dir.is-right { background: color-mix(in srgb, var(--g-odd) 18%, transparent); color: var(--g-odd); }
.ai-dir.is-flat { background: var(--surface-3); color: var(--ink-3); }
.ai-more { display: flex; align-items: center; gap: 3px; margin-top: 2px; color: var(--ink-4); font-size: 12px; white-space: nowrap; }
.ai-more .i { width: 14px; height: 14px; transition: transform .25s; }
.ai-reason.is-open .ai-more .i { transform: rotate(180deg); }
.ai-reason:hover .ai-more { color: var(--ai-2); }
.ai-ev { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .8, .2, 1); }
.ai-reason.is-open .ai-ev { grid-template-rows: 1fr; }
.ai-ev > div { overflow: hidden; }
.ev { margin: 2px 8px 12px 34px; }
.ev-cap { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.ev .btn { margin-top: 10px; }
.ai-caveat { margin: 10px 8px 0; font-size: 12.5px; color: var(--ink-3); }

/* Evidence 1: the bill of that visit, line by line */
.ev-bill { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ev-bill-head { display: grid; grid-template-columns: minmax(0, 1fr) 72px 96px; gap: 12px; padding: 7px 12px; border-bottom: 1px dashed var(--line-2); font-size: 11.5px; color: var(--ink-3); }
.ev-bill-head span:not(:first-child), .ev-line > :not(:first-child) { text-align: right; }
.ev-line { display: grid; grid-template-columns: minmax(0, 1fr) 72px 96px; align-items: center; gap: 12px; padding: 9px 12px; font-size: 13px; }
.ev-line + .ev-line { border-top: 1px solid var(--line); }
.ev-line .n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ev-line .n small { display: block; font-size: 11.5px; color: var(--ink-3); }
.ev-line .p { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ev-line .g { font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-line .g small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.ev-line .g.is-none { color: var(--ink-3); font-weight: 500; }
.ev-line.is-me { background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.ev-line [data-ai-open] { padding: 0; border: 0; background: none; color: var(--ai-2); font: inherit; font-size: 11.5px; cursor: pointer; }

/* Evidence 2: this row's rate against the rates the hospital cut to this month */
.ev-rate { position: relative; padding: 30px 6px 4px; }
.ev-track { position: relative; height: 8px; border-radius: 99px; background: var(--surface-3); }
.ev-band { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); border-radius: 99px; background: color-mix(in srgb, var(--g-discount) 55%, transparent); }
.ev-mark { position: absolute; z-index: 2; top: 50%; left: var(--x); width: 16px; height: 16px; border: 3px solid var(--surface); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 14px var(--c); transform: translate(-50%, -50%); animation: ai-slide .9s cubic-bezier(.2, .8, .2, 1) both; }
.ev-mark b { position: absolute; bottom: calc(100% + 8px); left: 50%; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; transform: translateX(var(--shift, -50%)); }
.ev-scale { position: relative; height: 16px; margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.ev-scale span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.ev-scale span:first-child { transform: none; }
.ev-scale span:last-child { transform: translateX(-100%); }

/* Evidence 3: labelled bars, this row in its group colour and the rest gray */
.ev-bars { display: grid; gap: 10px; }
.ev-bar-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 12.5px; color: var(--ink-2); }
.ev-bar-top b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ev-bar-top small { color: var(--ink-3); }
.ev-bar-fill { width: var(--w); min-width: 4px; height: 10px; border-radius: 0 4px 4px 0; background: var(--ink-4); transform-origin: left; animation: ai-grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--delay, 0s); }
.ev-bar.is-me .ev-bar-fill { background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }

/* Ask น้องเช็ค a follow-up */
.ai-asks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.ai-asks > span { margin-right: 2px; font-size: 12.5px; color: var(--ink-3); }
.ai-ask { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 99px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s; }
.ai-ask .ai-spark { width: 12px; height: 12px; animation: none; }
.ai-ask:hover { border-color: var(--ai-2); color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-2) 15%, transparent); }
.ai-ask[aria-pressed="true"] { border-color: var(--ai-2); color: var(--ink); }
.ai-answer { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); animation: ai-in .35s both; }
.ai-answer .mascot { flex: none; width: 28px; margin-top: 2px; }
.ai-answer p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.ai-answer .btn { margin-top: 8px; }

/* Thinking beat */
.ai-thinking { display: none; }
.ai-verdict.is-thinking .ai-body { display: none; }
.ai-verdict.is-thinking .ai-thinking { display: grid; gap: 10px; margin-top: 12px; }
.ai-shimmer { margin: 0; font-size: 14px; font-weight: 600; background: linear-gradient(90deg, var(--ink-3) 20%, var(--ink) 40%, var(--ink-3) 60%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-shimmer 1.4s linear infinite; }
.ai-skel { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--surface-3), color-mix(in srgb, var(--ai-2) 18%, var(--surface-3)), var(--surface-3)); background-size: 200% 100%; animation: ai-shimmer 1.4s linear infinite; }
.ai-skel.short { width: 60%; }

/* The choice น้องเช็ค leans to wears the same gradient edge; no badge */
:root .d-act .d-choice.is-ai { border-color: transparent !important; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--ai-1), var(--ai-2), var(--ai-3)) border-box !important; animation: ai-pulse 2.6s ease-out infinite; }
.d-choice.is-ai strong .ai-spark { width: 14px; height: 14px; }

@media (max-width: 1100px) { .ai-brief { grid-template-columns: minmax(0, 1fr); padding-right: 24px; } .ai-brief > div:first-of-type { padding-right: 34px; } }
@media (max-width: 700px) {
  .ai-brief { padding: 16px 14px 14px; border-radius: 16px; }
  .ai-brief > div:first-of-type { padding-right: 34px; }
  .ai-brief-title { font-size: 17px; }
  .ai-brief-text { font-size: 13.5px; }
  .ai-brief-actions .btn { flex: 1 1 100%; justify-content: center; }
  .ai-headline { font-size: 19px; }
  .ev { margin-left: 8px; }
  .ev-bill-head, .ev-line { grid-template-columns: minmax(0, 1fr) 60px 84px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-card, .ai-glow::before, .ai-face, .d-act .d-choice.is-ai, .ai-spark, .ai-btn::after, .ai-shimmer, .ai-skel, .ev-mark, .ev-bar-fill, .ai-answer, .ai-call, .ai-call::before, .rc-paper, .rc-stamp, .rc-clip, .ai-tag.is-new, .ai-teaser::after { animation: none !important; }
  .g-needle, .ai-reveal, .ai-reason, .ai-ev { transition: none; }
}