/* Merchvio design system v3 ("Evergreen & Ember", owner-approved 14 Oct 2026).
   Identity: a calm paper-and-ink workspace for people who run shipments and ledgers. Deep evergreen carries trust and money
   (links, focus, secondary actions, the rail); one ember button per screen is the only hot thing in sight; alabaster paper
   instead of grey. Newsreader gives page titles and headline figures their voice, Geist does the work, Geist Mono holds codes
   and SKUs. Distinct from the sister stores' petrol teal and gold. Tokens first (colour, type, space, radius, elevation,
   motion); hover and active steps are mixed in OKLCH so they darken evenly. Colour pairs are checked against WCAG AA in both
   themes; profit and loss never rely on hue alone (the sign is always printed). */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-400i.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Colour: surfaces (alabaster paper, white sheets) */
  --canvas: #F6F4EE; --surface: #FFFFFF; --subtle: #EFECE4; --raised: #FFFFFF; --wash: #FAF9F5;
  --text: #10201A; --text-2: #3C4D45; --muted: #5B6B63;
  --border: #E2E0D7; --border-strong: #C6C8BE; --border-control: #7A867F;
  /* Colour: action and meaning. Evergreen = primary (links, focus, secondary actions); ember = the one call to action. */
  --link: #166A4A; --primary: #166A4A; --primary-hover: color-mix(in oklch, #166A4A 88%, black); --primary-active: color-mix(in oklch, #166A4A 78%, black);
  --primary-ink: #FFFFFF; --primary-soft: #E3F0E9; --primary-soft-ink: #0F5238;
  --accent: #F25A2B; --accent-hover: color-mix(in oklch, #F25A2B 90%, black); --accent-active: color-mix(in oklch, #F25A2B 80%, black); --accent-ink: #1A0A04; --accent-strong: #C8401A; --accent-soft: #FCE6DD;
  --ok-bg: #DFF2E7; --ok: #157A4B; --warn-bg: #FFF0D6; --warn: #9C5A00;
  --bad-bg: #FBE3E0; --bad: #B83535; --info-bg: #E3F0E9; --info: #0F5238; /* loss red text is a step darker than the solid #C83E3E so it passes AA on its tint */
  --danger: #C83E3E; --danger-hover: color-mix(in oklch, #C83E3E 86%, black); --danger-ink: #FFFFFF;
  /* Sidebar: the alabaster menu panel (and the classic accordion) */
  --side-bg: #EFECE4; --side-text: #3C4D45; --side-strong: #10201A; --side-hover: #E4E1D7; --side-panel: transparent;
  --side-active: #FFFFFF; --side-accent: #F25A2B; --side-border: #E2E0D7; --side-muted: #5B6B63;
  /* Rail and the phone drawer: deep evergreen, ember marks the current section */
  --rail-bg: #0B1F18; --rail-ink: #CFE2D7; --rail-strong: #FFFFFF; --rail-muted: #8FA79B; --rail-hover: color-mix(in srgb, #FFFFFF 9%, transparent);
  --rail-on: #F25A2B; --rail-on-ink: #1A0A04; --rail-border: #1F4235;
  /* Chart segments (evergreen, ember, sand, sage, clay, slate; validated on both surfaces). --c1..6 are aliases. */
  --seg-1: #166A4A; --seg-2: #F25A2B; --seg-3: #C4A265; --seg-4: #4E8F74; --seg-5: #8C5A3C; --seg-6: #6B7F93;
  --c1: var(--seg-1); --c2: var(--seg-2); --c3: var(--seg-3); --c4: var(--seg-4); --c5: var(--seg-5); --c6: var(--seg-6);
  /* Type */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem;
  /* Space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;
  /* Space above a form's action row. One name for both `.form-actions` and the bare-button default beside it, so the two can
     never drift apart. Keeps the value the design system has always used; change it here and every form follows. */
  --form-actions-gap: 22px;
  /* Radius */
  --radius-xs: 6px; --radius-sm: 9px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px;
  /* Elevation: layered, tinted with the ink colour so shadows never look grey-on-grey */
  --elev-1: 0 1px 0 rgba(16,32,26,.04), 0 1px 2px rgba(16,32,26,.06);
  --elev-2: 0 1px 2px rgba(16,32,26,.05), 0 8px 20px -8px rgba(16,32,26,.12);
  --elev-3: 0 2px 4px rgba(16,32,26,.05), 0 18px 40px -14px rgba(16,32,26,.22);
  --elev-4: 0 4px 8px rgba(16,32,26,.08), 0 30px 70px -20px rgba(16,32,26,.35);
  --shadow-sm: var(--elev-1); --shadow: var(--elev-2); --shadow-pop: var(--elev-3);
  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: .12s; --t: .2s; --t-slow: .4s;
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 32%, transparent);
  --sidebar: 252px; --rail: 68px; --topbar: 60px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --canvas: #0B1F18; --surface: #12352A; --subtle: #193E31; --raised: #174033; --wash: #103027;
  --text: #E6EDE8; --text-2: #BFCDC5; --muted: #9AA8A1;
  --border: #1F4235; --border-strong: #2E5A49; --border-control: #5F8371;
  --link: #4DB889; --primary: #2E9B6E; --primary-hover: color-mix(in oklch, #2E9B6E 88%, white); --primary-active: color-mix(in oklch, #2E9B6E 78%, white);
  --primary-ink: #04150D; --primary-soft: #1A4A37; --primary-soft-ink: #9FE3C2;
  --accent: #FF7A4D; --accent-hover: color-mix(in oklch, #FF7A4D 90%, white); --accent-active: color-mix(in oklch, #FF7A4D 80%, white); --accent-ink: #1A0A04; --accent-strong: #FF7A4D; --accent-soft: #4A2416;
  --ok-bg: #16382A; --ok: #7FE0B0; --warn-bg: #3A2B10; --warn: #F2B544;
  --bad-bg: #3D1C1C; --bad: #FF7B7B; --info-bg: #1A4A37; --info: #9FE3C2;
  --danger: #FF7B7B; --danger-hover: color-mix(in oklch, #FF7B7B 88%, white); --danger-ink: #2A0E0E;
  --side-bg: #0E2A20; --side-text: #BFCDC5; --side-strong: #EEF3EF; --side-hover: #16382C; --side-panel: transparent;
  --side-active: #1A4A37; --side-accent: #FF7A4D; --side-border: #1F4235; --side-muted: #9AA8A1;
  --rail-bg: #061410; --rail-ink: #CFE2D7; --rail-strong: #FFFFFF; --rail-muted: #8FA79B; --rail-hover: color-mix(in srgb, #FFFFFF 9%, transparent);
  --rail-on: #FF7A4D; --rail-on-ink: #1A0A04; --rail-border: #1F4235;
  --seg-1: #2E9B6E; --seg-2: #FF7A4D; --seg-3: #D9BC82; --seg-4: #7FE0B0; --seg-5: #C58B66; --seg-6: #9DB2C4;
  --elev-1: 0 1px 0 rgba(0,0,0,.4); --elev-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -8px rgba(0,0,0,.55);
  --elev-3: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px -14px rgba(0,0,0,.7); --elev-4: 0 30px 70px -20px rgba(0,0,0,.8);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --canvas: #0B1F18; --surface: #12352A; --subtle: #193E31; --raised: #174033; --wash: #103027;
    --text: #E6EDE8; --text-2: #BFCDC5; --muted: #9AA8A1;
    --border: #1F4235; --border-strong: #2E5A49; --border-control: #5F8371;
    --link: #4DB889; --primary: #2E9B6E; --primary-hover: color-mix(in oklch, #2E9B6E 88%, white); --primary-active: color-mix(in oklch, #2E9B6E 78%, white);
    --primary-ink: #04150D; --primary-soft: #1A4A37; --primary-soft-ink: #9FE3C2;
    --accent: #FF7A4D; --accent-hover: color-mix(in oklch, #FF7A4D 90%, white); --accent-active: color-mix(in oklch, #FF7A4D 80%, white); --accent-ink: #1A0A04; --accent-strong: #FF7A4D; --accent-soft: #4A2416;
    --ok-bg: #16382A; --ok: #7FE0B0; --warn-bg: #3A2B10; --warn: #F2B544;
    --bad-bg: #3D1C1C; --bad: #FF7B7B; --info-bg: #1A4A37; --info: #9FE3C2;
    --danger: #FF7B7B; --danger-hover: color-mix(in oklch, #FF7B7B 88%, white); --danger-ink: #2A0E0E;
    --side-bg: #0E2A20; --side-text: #BFCDC5; --side-strong: #EEF3EF; --side-hover: #16382C; --side-panel: transparent;
    --side-active: #1A4A37; --side-accent: #FF7A4D; --side-border: #1F4235; --side-muted: #9AA8A1;
    --rail-bg: #061410; --rail-ink: #CFE2D7; --rail-strong: #FFFFFF; --rail-muted: #8FA79B; --rail-hover: color-mix(in srgb, #FFFFFF 9%, transparent);
    --rail-on: #FF7A4D; --rail-on-ink: #1A0A04; --rail-border: #1F4235;
    --seg-1: #2E9B6E; --seg-2: #FF7A4D; --seg-3: #D9BC82; --seg-4: #7FE0B0; --seg-5: #C58B66; --seg-6: #9DB2C4;
    --elev-1: 0 1px 0 rgba(0,0,0,.4); --elev-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -8px rgba(0,0,0,.55);
    --elev-3: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px -14px rgba(0,0,0,.7); --elev-4: 0 30px 70px -20px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}

/* Base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 450 var(--fs-md)/1.55 var(--font); font-feature-settings: "tnum" 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--font); color: var(--text); }
h1 { font: 400 var(--fs-3xl)/1.1 var(--font-display); margin: 0; letter-spacing: -.01em; }
h2 { font-size: var(--fs-lg); margin: 1.8rem 0 .6rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
h3 { font-size: var(--fs-md); margin: 1.25rem 0 .4rem; font-weight: 600; }
p { margin: 0 0 .75rem; }
code, pre { font-family: var(--font-mono); font-size: .88em; }
code { background: var(--subtle); padding: 1px 6px; border-radius: 5px; }
pre { background: var(--subtle); padding: 12px; border-radius: var(--radius); overflow: auto; }
pre.recovery-key { white-space: pre-wrap; word-break: break-all; user-select: all; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; border-radius: 6px; box-shadow: var(--elev-3); }
.muted { color: var(--muted); } .small { font-size: var(--fs-sm); } .right { text-align: right; } .nowrap { white-space: nowrap; }
.grow { flex: 1; } .hidden { display: none !important; } .lede { color: var(--text-2); margin-bottom: 1rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 15px; height: 15px; } .ic.lg { width: 22px; height: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .tnum, .money, table, .stat, .kpi-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
:root[data-theme="dark"] :focus-visible { outline-color: var(--primary); }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* Shell */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar); background: var(--side-bg); color: var(--side-text); position: sticky; top: 0; height: 100vh; height: 100dvh; flex-shrink: 0; display: flex; flex-direction: column; transition: width var(--t) var(--ease); z-index: 40; border-right: 1px solid var(--side-border); }
.side-head { padding: 18px 16px 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.sidebar .brand { color: var(--side-strong); }
.brand-name { font: 400 1.65rem/1 var(--font-display); letter-spacing: -.01em; }
/* The brand mark. ONE file, everywhere: public_html/assets/brand/mark.svg (evergreen tile, alabaster M, ember dot). The tab icon,
   both sidebar layouts, the sign-in panel and the website all load that same file, so changing the logo once changes all of them -
   there is deliberately no second copy to keep in step. It reads on the dark rail and on the alabaster classic sidebar alike, which
   is why there is no per-surface variant any more. See docs/guide/03 "The logo". */
.brand .logo { width: 32px; height: 32px; border-radius: 9px; flex: none; background: url("/assets/brand/mark.svg") center / contain no-repeat; font-size: 0; color: transparent; }
.nav { flex: 1; overflow-y: auto; padding: 10px 12px 12px; scrollbar-width: thin; scrollbar-color: var(--side-border) transparent; overscroll-behavior: contain; }
.nav-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 11px; border-radius: var(--radius-sm); color: var(--side-text); text-decoration: none; font: inherit; font-size: .92rem; font-weight: 500; background: none; border: 0; cursor: pointer; text-align: left; margin: 1px 0; position: relative; transition: background var(--t-fast), color var(--t-fast); }
.nav-link:hover { background: var(--side-hover); color: var(--side-strong); }
.nav-link.active { background: var(--side-active); color: var(--side-strong); font-weight: 600; box-shadow: var(--elev-1), 0 0 0 1px var(--side-border); }
.nav-link.active::before, .nav-link.has-active::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--side-accent); }
.nav-link .ic { color: var(--side-muted); } .nav-link:hover .ic, .nav-link.active .ic, .nav-link.has-active .ic { color: var(--primary); }
:root[data-theme="dark"] .nav-link .ic { color: var(--side-muted); }
.nav-link .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t) var(--ease); flex: none; }
.nav-sec { margin: 1px 0; }
.nav-sec.open > .nav-toggle { color: var(--side-strong); font-weight: 600; }
.nav-sec.open > .nav-toggle .chev { transform: rotate(180deg); }
.nav-sec .nav-link { margin: 0; }
.nav-sub { display: none; position: relative; margin: 2px 0 8px 21px; padding: 2px 0 2px 0; border-left: 1px solid var(--side-border); }
.nav-sec.open > .nav-sub { display: block; }
.nav-sub a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 6px 16px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; color: var(--side-text); text-decoration: none; font-size: .9rem; position: relative; }
.nav-sub a:hover { background: var(--side-hover); color: var(--side-strong); }
.nav-sub a.active { color: var(--side-strong); font-weight: 600; background: var(--side-active); }
.nav-sub a.active::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--side-accent); }
.nav-sub .sub-head { padding: 10px 10px 3px 16px; font-size: var(--fs-xs); font-weight: 700; color: var(--side-muted); letter-spacing: .01em; }
.nav-sub .sub-head:first-child { padding-top: 4px; }
.side-foot { padding: 10px 12px 14px; border-top: 1px solid var(--side-border); position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px; border-radius: var(--radius); background: none; border: 0; color: var(--side-text); cursor: pointer; font: inherit; text-align: left; }
.user-btn:hover, .user-btn[aria-expanded="true"] { background: var(--side-hover); }
.rail .user-btn:hover, .rail .user-btn[aria-expanded="true"] { background: var(--rail-hover); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-soft-ink); display: grid; place-items: center; font-weight: 600; font-size: .8rem; flex: none; letter-spacing: .02em; }
.avatar.big { width: 40px; height: 40px; font-size: .95rem; }
.user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.user-meta b { color: var(--side-strong); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.user-meta small { color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); }
.chev.up { transform: rotate(180deg); }
.user-btn[aria-expanded="true"] .chev.up { transform: rotate(0); }
.menu { position: absolute; left: 12px; width: 288px; max-width: calc(100vw - 24px); bottom: calc(100% - 4px); background: var(--raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-3); padding: 6px; z-index: 60; }
.menu.drop { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; }
.menu-head { display: flex; gap: 10px; align-items: center; padding: 10px; }
.menu-head b, .menu-head small { display: block; line-height: 1.25; }
.menu-head small { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.menu a, .menu .menu-danger, .menu .menu-btn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-xs); color: var(--text); text-decoration: none; width: 100%; background: none; border: 0; font: inherit; font-size: .92rem; cursor: pointer; text-align: left; }
.menu a:hover, .menu .menu-danger:hover, .menu .menu-btn:hover, .menu a:focus-visible, .menu .menu-danger:focus-visible { background: var(--subtle); }
.menu .menu-danger { color: var(--danger); }
.menu .ic { color: var(--muted); } .menu .menu-danger .ic { color: var(--danger); }
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-label { padding: 6px 10px 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.menu-ws { display: flex; gap: 10px; align-items: center; padding: 6px 10px 8px; font-weight: 600; } .menu-ws .ic { color: var(--muted); flex: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; background: var(--subtle); border-radius: var(--radius-sm); margin: 4px; }
.seg button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; border-radius: 7px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--elev-1); font-weight: 600; }
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--subtle); border-radius: var(--radius-sm); margin: 4px; }
.theme-pick button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 7px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.theme-pick button:hover { color: var(--text); }
.theme-pick button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--elev-1); font-weight: 600; }
.scrim { display: none; }

/* Classic menu folded to icons (desktop); the rail + panel layout reads the same attribute as "panel closed" (rail.css) */
@media (min-width: 861px) {
:root[data-nav="closed"] .sidebar { width: var(--rail); }
:root[data-nav="closed"] .brand-name, :root[data-nav="closed"] .nav-link .lbl, :root[data-nav="closed"] .nav-link .chev,
:root[data-nav="closed"] .nav-sub, :root[data-nav="closed"] .user-meta, :root[data-nav="closed"] .user-btn .chev { display: none; }
:root[data-nav="closed"] .side-head { padding: 18px 0 10px; display: grid; place-items: center; }
:root[data-nav="closed"] .nav { padding: 8px 10px; }
:root[data-nav="closed"] .nav-link { justify-content: center; padding: 10px 0; }
:root[data-nav="closed"] .nav-link .nav-badge { position: absolute; top: 2px; right: 2px; margin: 0; }
:root[data-nav="closed"] .nav-link.active::before, :root[data-nav="closed"] .nav-link.has-active::before { left: -10px; }
:root[data-nav="closed"] .user-btn { justify-content: center; padding: 6px 0; }
:root[data-nav="closed"] .menu { left: 8px; }
}

/* Main column and header */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 0 var(--sp-6); height: var(--topbar); background: color-mix(in srgb, var(--canvas) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.company { font-weight: 600; color: var(--text-2); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
.icon-btn { display: inline-grid; place-items: center; min-width: 38px; height: 38px; border-radius: var(--radius-sm); border: 0; background: none; color: var(--text-2); cursor: pointer; text-decoration: none; position: relative; transition: background var(--t-fast), color var(--t-fast); }
.icon-btn:hover { background: var(--subtle); color: var(--text); }
.cmdk-btn { display: flex; align-items: center; gap: 10px; flex: 0 1 380px; min-width: 0; height: 38px; margin-left: 12px; padding: 0 8px 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.cmdk-btn:hover { border-color: var(--border-control); box-shadow: var(--elev-1); color: var(--text-2); }
.cmdk-btn .cmdk-t { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd, .kbd { font: 600 .72rem/1 var(--font); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--wash); color: var(--text-2); white-space: nowrap; }
.topbar .help-link { display: inline-flex; align-items: center; gap: 6px; }
.bell { position: relative; } .bell-badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; padding: 0 4px; border-radius: 8px; margin: 0; }
main { padding: var(--sp-7) var(--sp-7) 56px; max-width: 1440px; width: 100%; }
.crumbs { margin: 0 0 var(--sp-3); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--border-strong); }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text-2); }
.page-head { display: flex; align-items: flex-end; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-head .muted, .page-head .sub { max-width: 70ch; margin-top: 6px; font-size: .95rem; color: var(--muted); }
.page-head h1 + .status-line { margin-top: 8px; }

/* Cards, grids, stacks. Vertical rhythm comes from .stack and from the main column, never from adjacent-sibling rules on .card. */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); box-shadow: var(--elev-1); }
main > .card + .card, main > .table-wrap + .card, main > .card + .table-wrap, main > .card + .grid, main > .grid + .card, main > .grid + .grid, main > .table-wrap + .grid, .stack > * + * { margin-top: var(--sp-4); }
.card > h1:first-child, .card > h2:first-child, .card > h3:first-child { margin-top: 0; }
/* A form card starts with its hidden fields (CSRF token, action): its heading is still the first thing shown. */
.card > input[type=hidden]:first-child + :is(h1, h2, h3), .card > input[type=hidden]:first-child + input[type=hidden] + :is(h1, h2, h3) { margin-top: 0; }
.grid { display: grid; gap: var(--sp-4); }
.grid > * { margin-top: 0; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat { font: 400 var(--fs-3xl)/1.05 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: var(--fs-sm); }
/* A card marked "stat" holds a label and a .big number: only the number uses the display face. */
.card.stat { font: inherit; letter-spacing: normal; }
.card.stat .big { font: 400 var(--fs-3xl)/1.05 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.span-all { grid-column: 1 / -1; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-4); }
.card-head h2, .card-head h3 { margin: 0; }
/* Sections fold to their header bar (App\Core\Folds, app.js; owner 21 Oct 2026). Folded: only the header (title, and a .card-head's facts and actions) shows. */
.fold-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-4); }
.fold-head :is(h2, h3) { margin: 0; }
.card-head > .fold-btn + :is(h2, h3) { margin-right: auto; }
.fold-btn { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: -6px; padding: 0; border: 0; border-radius: var(--radius-xs, 6px); background: none; color: var(--muted); cursor: pointer; }
.fold-btn:hover { background: var(--surface-2, rgba(127,127,127,.12)); color: var(--text); }
.fold-btn:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; }
.fold-btn svg { transition: transform var(--t-fast, .15s); }
.card.is-folded .fold-btn svg { transform: rotate(-90deg); }
.card.is-folded > :not(.fold-head):not(.card-head) { display: none !important; }
.card.is-folded > .fold-head, .card.is-folded > .card-head { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .fold-btn svg { transition: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; min-height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; box-shadow: var(--elev-1); transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); white-space: nowrap; }
a.btn, a.btn:hover { color: var(--text); text-decoration: none; }
.btn:hover { background: var(--wash); border-color: var(--border-control); }
.btn:active { transform: translateY(1px); }
/* .btn.primary is the one ember call to action on a screen; .btn.evergreen is the quieter secondary action (export, compare). */
.btn.primary, a.btn.primary, a.btn.primary:hover { color: var(--accent-ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary:active { background: var(--accent-active); border-color: var(--accent-active); }
.btn.evergreen, a.btn.evergreen, a.btn.evergreen:hover { color: var(--primary-ink); }
.btn.evergreen { background: var(--primary); border-color: var(--primary); }
.btn.evergreen:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.evergreen:active { background: var(--primary-active); border-color: var(--primary-active); }
.btn.danger, a.btn.danger, a.btn.danger:hover { color: var(--danger-ink); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn.ghost, a.btn.ghost { background: none; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { background: var(--subtle); color: var(--text); }
.btn.small { min-height: 32px; padding: 0 11px; font-size: var(--fs-sm); }
.btn.block { width: 100%; min-height: 44px; }
.btn.link, a.btn.link { border: 0; background: none; padding: 0; min-height: 0; box-shadow: none; color: var(--link); text-decoration: underline; font-weight: 500; }
.btn.danger.subtle, a.btn.danger.subtle { background: transparent; color: var(--danger); border-color: transparent; box-shadow: none; }
.btn.danger.subtle:hover { background: var(--bad-bg); }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn[aria-busy=true] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy=true]::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--text-2); border-right-color: transparent; border-radius: 50%; animation: mvspin .6s linear infinite; }
.btn.primary[aria-busy=true]::after { border-color: var(--accent-ink); border-right-color: transparent; }
.btn.evergreen[aria-busy=true]::after { border-color: var(--primary-ink); border-right-color: transparent; }
.btn.danger[aria-busy=true]::after { border-color: var(--danger-ink); border-right-color: transparent; }
@keyframes mvspin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Forms */
label { display: block; font-weight: 600; margin: 14px 0 5px; font-size: .9rem; }
.help { color: var(--muted); font-size: var(--fs-sm); margin-top: 3px; font-weight: 400; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], input[type=search], input[type=tel], input[type=time], input[type=datetime-local], input[type=month], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
input:hover, select:hover, textarea:hover { border-color: var(--text-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B63' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; vertical-align: middle; accent-color: var(--primary); flex: none; }
input[type=file] { width: 100%; padding: 10px; border: 1px dashed var(--border-control); border-radius: var(--radius); background: var(--subtle); color: var(--text-2); font: inherit; }
input[type=file]::file-selector-button { margin-right: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--bad); }
input[inputmode=numeric]:not([type=number]) { letter-spacing: .3em; font-size: 1.15rem; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; margin: 10px 0; }
.check > input { margin-top: 2px; }
.check small.help { display: block; margin-top: 2px; }
.field-error { color: var(--bad); font-size: var(--fs-sm); margin-top: 3px; }
.field-error::before { content: "\26A0\FE0E "; }
.field-error:empty { display: none; } /* placeholders filled by scripts stay invisible until there is a message */
.has-error input, .has-error select, .has-error textarea { border-color: var(--bad); }
.form-card { max-width: 720px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.form-actions { display: flex; gap: 8px; margin-top: var(--form-actions-gap); flex-wrap: wrap; align-items: center; }
/* A form's action never sits flush against the field, paragraph or group above it (owner, 16 Oct 2026: "it should not happen
   again at any place"). `.form-actions` is the primitive and is what a new screen should use. The rule below is the DEFAULT for a
   form card that submits with a bare button, so a screen written later inherits the rhythm instead of re-introducing the bug, and
   both spacings come from one token so they can never drift apart.
   Scope, deliberately narrow: the form element itself carries `.card` or `.form-card` (the block-flow admin form containers), and
   the one-line layouts are excluded by name because they lay their own actions out and must not gain a stray margin - `.filters`,
   `.btn-row`, `.inline` and `.inline-form` are flex or inline, where a top margin pushes a control out of line with its field.
   `~` plus the hidden-input exclusion means a form whose only preceding content is csrf_field() keeps its button where it was, so
   a card whose whole body IS the button does not gain a gap it never needed.
   Add `.flush-actions` to a form that genuinely wants its action tight against the line above (a single-row control inside a card);
   it is an opt-out that has to be typed, not a default that has to be remembered. */
form:is(.card, .form-card):not(.inline-form, .inline, .filters, .btn-row, .flush-actions) > :not(input[type=hidden], [hidden]) ~ button.btn[type=submit] { margin-top: var(--form-actions-gap); }
.inline-form { display: inline; }
/* Two inline action forms side by side (Retry + Remove in a table row, Approve + Reject, ...) must never touch, also when a
   narrow cell wraps them onto two lines (owner, 18 Oct 2026). Horizontal space goes on the RIGHT of the first, so a wrapped
   second form still lines up with the first; the vertical space is on the buttons (an inline form takes no vertical margin). */
.inline-form:has(+ .inline-form) { margin-right: var(--sp-2, 8px); }
.inline-form:has(+ .inline-form) .btn, .inline-form + .inline-form .btn { margin-block: 3px; }
/* Bare buttons side by side in block content (a card, a paragraph, a cell): the space character alone gives ~4 px and 0 px once
   they wrap. Flex containers (.btn-row, .form-actions, ...) already use gap, so they are not listed. DESIGN_SYSTEM rule 5. */
:is(.card, p, td, li, dd, div:not([class])) > .btn:has(+ .btn) { margin-right: 4px; }
:is(.card, p, td, li, dd, div:not([class])) > :is(.btn:has(+ .btn), .btn + .btn) { margin-block: 3px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-4); align-items: end; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--elev-1); }
.filters > * { width: auto; min-width: 150px; }
.filters label { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.filters.card { border: 1px solid var(--border); }
.filters .grow { min-width: 200px; }

/* Tables v2: sticky header inside a scroll area, quiet header row, tabular figures. Add .zebra for banding; html[data-density=compact] or .dense tightens rows. */
.table-wrap { overflow: auto; max-height: min(80vh, 1100px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--elev-1); }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--wash); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: .01em; }
thead th { position: sticky; top: 0; z-index: 2; background: var(--wash); box-shadow: 0 1px 0 var(--border); border-bottom: 0; }
tr:last-child > td { border-bottom: 0; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
.zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--subtle) 55%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
td a.btn { font-weight: 600; }
td.nowrap, td.ref, a.ref { white-space: nowrap; }
.dense th, .dense td, :root[data-density="compact"] th, :root[data-density="compact"] td { padding-top: 7px; padding-bottom: 7px; }
:root[data-density="compact"] .btn.small { min-height: 28px; }
.row-sel td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.table-note { padding: 10px 16px; color: var(--muted); font-size: var(--fs-sm); border-top: 1px solid var(--border); }
.pager { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--muted); font-size: var(--fs-sm); }

/* Badges and status */
/* Badges. Only the first letter is raised ("off or incomplete" -> "Off or incomplete", raw statuses like "backorder" -> "Backorder"),
   never every word. ::first-letter needs a block-level box without generated content in front, so the dot is a background
   gradient instead of ::before. */
.badge { display: inline-block; vertical-align: middle; padding: 1px 10px 1px 22px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; background-color: var(--subtle); color: var(--text-2); border: 1px solid var(--border); line-height: 1.7; white-space: nowrap;
  background-image: radial-gradient(circle at 12px 50%, currentColor 0 3px, transparent 3.6px); background-repeat: no-repeat; }
.badge::first-letter { text-transform: uppercase; }
.badge.fx-no-dot, .badge.plain { background-image: none; padding-left: 10px; }
.badge.as-is::first-letter { text-transform: none; }
.badge.ok { background-color: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge.warn { background-color: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.bad { background-color: var(--bad-bg); color: var(--bad); border-color: transparent; }
.badge.info { background-color: var(--info-bg); color: var(--info); border-color: transparent; }
.badge.solid { background-color: var(--primary); color: var(--primary-ink); border-color: transparent; }
.pill { display: inline-block; padding: 1px 9px; border-radius: var(--radius-pill); background: var(--subtle); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.pill.on { background: var(--primary-soft); color: var(--primary-soft-ink); }
.text-bad { color: var(--bad); font-weight: 600; } .text-ok { color: var(--ok); font-weight: 600; } .text-warn { color: var(--warn); font-weight: 600; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px 1px 4px; border-radius: var(--radius-pill); background: var(--subtle); color: var(--text-2); font-variant-numeric: tabular-nums; }
.delta .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.delta.up { background: var(--ok-bg); color: var(--ok); } .delta.down { background: var(--bad-bg); color: var(--bad); }
.delta.neutral .ic { display: none; } .delta.neutral { padding-left: 7px; }

/* Alerts, toasts, empty states, skeletons */
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: var(--sp-4); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); transition: opacity var(--t-slow); }
.alert.success { background: var(--ok-bg); color: var(--ok); }
.alert.error, .alert.bad { background: var(--bad-bg); color: var(--bad); }
.alert.warning { background: var(--warn-bg); color: var(--warn); }
.alert.info { background: var(--info-bg); color: var(--info); }
.alert a { color: inherit; font-weight: 700; }
.alert.fade { opacity: 0; }
.alert-x { margin-left: auto; border: 0; background: none; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: .7; padding: 0 2px; }
.alert-x:hover { opacity: 1; }
/* An alert that starts with a bold lead-in is one flowing sentence, not flex columns ("Needs a look:" must not wrap word by word). */
.alert:has(> strong:first-child), .alert:has(> b:first-child) { display: block; position: relative; padding-right: 36px; }
.alert:has(> strong:first-child) > .alert-x, .alert:has(> b:first-child) > .alert-x { position: absolute; top: 9px; right: 10px; }
.toasts { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 90; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--text); color: var(--canvas); box-shadow: var(--elev-4); font-size: .92rem; animation: mvtoast var(--t) var(--ease); }
.toast { background: #0B1F18; color: #EEF3EF; }
.toast .ic { margin-top: 1px; color: #7FE0B0; } .toast.error .ic { color: #FF8E8E; } .toast.warning .ic { color: #F2B544; }
.toast .t-body { flex: 1; } .toast button { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; } .toast button:hover { opacity: 1; }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t); }
@keyframes mvtoast { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.empty { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--muted); }
.empty::before { content: ""; width: 56px; height: 56px; border-radius: 18px; background-color: var(--primary-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166A4A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.8 1.1z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 28px; }
:root[data-theme="dark"] .empty::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FE0B0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.8 1.1z'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .empty::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FE0B0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.8 1.1z'/%3E%3C/svg%3E"); } }
.empty h2, .empty h3, .empty .empty-title { margin: 6px 0 0; color: var(--text); font-size: var(--fs-lg); font-weight: 700; }
.empty p { max-width: 46ch; margin: 0; }
.empty .btn { margin-top: 10px; }
.fx-empty .empty::before, .empty.no-art::before { display: none; }
.skeleton, .skel { display: block; border-radius: var(--radius-xs); background: linear-gradient(100deg, var(--subtle) 30%, color-mix(in srgb, var(--subtle) 40%, var(--surface)) 50%, var(--subtle) 70%); background-size: 220% 100%; animation: mvshimmer 1.4s linear infinite; min-height: 1em; }
.skel.line { height: 12px; margin: 8px 0; } .skel.title { height: 22px; width: 40%; } .skel.block { height: 90px; border-radius: var(--radius); }
@keyframes mvshimmer { to { background-position: -220% 0; } }

/* Tabs, stepper, key-value, lists */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.tabs a, .tabs button { padding: 9px 14px; text-decoration: none; color: var(--text-2); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-weight: 500; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.tabs a:hover, .tabs button:hover { color: var(--text); }
.tabs a.active, .tabs [aria-selected=true] { color: var(--text); border-color: var(--primary); font-weight: 700; }
.tabs .count { font-size: var(--fs-xs); font-weight: 700; padding: 0 7px; border-radius: var(--radius-pill); background: var(--subtle); color: var(--text-2); line-height: 1.6; }
.tabs .active .count, .tabs [aria-selected=true] .count { background: var(--primary-soft); color: var(--primary-soft-ink); }
.tab-panel[hidden] { display: none; }
.article { max-width: 760px; } .article h2, .article h3 { margin-top: 1.4rem; } .article li { margin: .25rem 0; }
.perm-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; }
.qr-box { margin: 10px 0; } .qr-box svg { display: block; width: 200px; max-width: 100%; height: auto; border-radius: 6px; }
ul.plain { list-style: none; margin: 0; padding: 0; } ul.plain li { padding: 6px 0; border-top: 1px solid var(--border); } ul.plain li:first-child { border-top: 0; }
details { margin: 8px 0; }
summary { cursor: pointer; padding: 6px 0; }
.bar { height: 8px; background: var(--subtle); border-radius: 4px; overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--primary); }
.w25 { width: 25%; } .w50 { width: 50%; } .w75 { width: 75%; } .w100 { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chip { display: inline-flex; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--subtle); color: var(--text); text-decoration: none; font-size: .88rem; border: 1px solid var(--border); }
.chip:hover { border-color: var(--primary); color: var(--link); }

/* Dialog */
dialog.mv-dialog { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--elev-4); background: var(--raised); color: var(--text); width: min(440px, 92vw); }
dialog.mv-dialog[open] { animation: mvpop var(--t) var(--ease); }
dialog.mv-dialog::backdrop { background: rgba(11,31,24,.55); backdrop-filter: blur(3px); }
dialog.mv-dialog h2 { margin: 0 0 8px; font-size: var(--fs-lg); }
dialog.mv-dialog p { margin: 0 0 20px; font-size: 1rem; color: var(--text-2); }
.mv-dialog-a { display: flex; justify-content: flex-end; gap: 8px; }
@keyframes mvpop { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* Dashboard: the ledger strip */
.dash-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.dash-top h1 { font-size: var(--fs-3xl); }
.dash-top h1 em { font-style: italic; }
.dash-date { color: var(--muted); font-size: .95rem; margin-top: 6px; }
.dash-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-2); overflow: hidden; margin-bottom: var(--sp-5); }
.kpi { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--sp-5) var(--sp-6) var(--sp-4); color: inherit; text-decoration: none; min-width: 0; transition: background var(--t-fast); }
a.kpi:hover { background: var(--wash); }
.strip > .kpi + .kpi { box-shadow: inset 1px 0 0 var(--border); }
.kpi-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kpi-value { font: 400 clamp(1.9rem, 2.4vw, 2.6rem)/1.05 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.kpi-value small { font: 600 var(--fs-sm)/1 var(--font); color: var(--muted); letter-spacing: 0; margin-right: 4px; }
.kpi-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); min-height: 22px; }
.kpi svg.spark { display: block; width: 100%; height: 36px; margin-top: auto; padding-top: 6px; overflow: visible; }
.kpi { min-height: 150px; }
.spark .area { fill: var(--c1); opacity: .12; } .spark .line { fill: none; stroke: var(--c1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .spark .dot { fill: var(--c1); stroke: var(--surface); stroke-width: 2; }
.kpi.is-alert .kpi-value { color: var(--bad); }
.kpi.is-alert::after { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--bad); border-radius: 0 3px 3px 0; }
/* Profit and loss figures: evergreen (mint in the dark) with a plus, loss red with a minus; the sign is printed, the colour only confirms it. */
.kpi-value.up, .kpi.is-up .kpi-value, .stat.up, .big.up, .money.up { color: var(--ok); } .kpi-value.down, .kpi.is-down .kpi-value, .stat.down, .big.down, .money.down { color: var(--bad); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; margin-bottom: var(--sp-5); }
.dash-grid > * { margin-top: 0 !important; min-width: 0; }
.dash-col { display: grid; gap: var(--sp-5); align-content: start; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-1); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.panel-head h2 { margin: 0; font-size: var(--fs-md); }
.panel-head .count { font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--warn-bg); color: var(--warn); margin-left: 8px; }
.panel-body { padding: var(--sp-4) var(--sp-5); }
.attn { list-style: none; margin: 0; padding: 0; }
.attn-group { padding: 10px var(--sp-5) 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.attn li a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px var(--sp-5); color: inherit; text-decoration: none; border-top: 1px solid var(--border); transition: background var(--t-fast); }
.attn li:first-child a { border-top: 0; }
.attn li a:hover { background: var(--wash); }
.attn-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn); }
.attn-ic.sev-high { background: var(--bad-bg); color: var(--bad); }
.attn-t { font-weight: 600; font-size: .93rem; } .attn-n { color: var(--muted); font-size: var(--fs-sm); display: block; font-weight: 400; }
.attn-v { font: 400 1.5rem/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.attn-v.txt { font: 700 var(--fs-xs)/1.4 var(--font); padding: 2px 10px; border-radius: var(--radius-pill); background: var(--subtle); color: var(--text-2); }
.attn-v.txt.alert { background: var(--warn-bg); color: var(--warn); }
.attn-more { display: block; padding: 11px var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; text-align: center; text-decoration: none; }
.clear-state { display: flex; align-items: center; gap: 14px; padding: var(--sp-6) var(--sp-5); }
.clear-state .attn-ic { background: var(--ok-bg); color: var(--ok); }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: var(--sp-4) var(--sp-5); }
.quick a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; background: var(--wash); transition: border-color var(--t-fast), background var(--t-fast); }
.quick a:hover { border-color: var(--primary); background: var(--primary-soft); }
.quick .ic { color: var(--primary); }
.activity { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-5) var(--sp-4); }
.activity li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; position: relative; }
.activity li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); align-self: center; justify-self: center; }
.activity li + li { border-top: 1px dashed var(--border); }
.activity a { color: var(--text); text-decoration: none; font-weight: 600; } .activity a:hover { text-decoration: underline; }
.activity time, .activity .when { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.widget-slot { margin-bottom: var(--sp-5); }
.dash-edit { display: none; }
.is-editing .dash-edit { display: flex; }
.dash-tile[data-hidden="1"] { display: none; }
.is-editing .dash-tile[data-hidden="1"] { display: block; opacity: .5; }
.tile-ctl { display: none; gap: 4px; position: absolute; top: 8px; right: 8px; z-index: 3; }
.is-editing .tile-ctl { display: flex; }
.tile-ctl button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.tile-ctl button:hover { background: var(--subtle); color: var(--text); }
.dash-tile { position: relative; }
.setup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: center; padding: var(--sp-5); }
.ring { width: 64px; height: 64px; }
.ring .track { fill: none; stroke: var(--subtle); stroke-width: 6; } .ring .val { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring text { font: 700 14px var(--font); fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); }
.health-grid > div { background: var(--surface); padding: var(--sp-4) var(--sp-5); }

/* Sign-in and install: split layout */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 5fr) 6fr; background: var(--canvas); }
.auth-side { position: relative; overflow: hidden; background: #0B1F18; color: #A8B8AF; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; isolation: isolate; }
.auth-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 105% 105%, rgba(242,90,43,.28), transparent 60%), radial-gradient(700px 500px at -10% -10%, rgba(46,155,110,.3), transparent 60%); }
.auth-side::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.auth-side .brand { color: #fff; }
.auth-pitch { color: #fff; font: 400 clamp(2.4rem, 4vw, 3.6rem)/1.04 var(--font-display); letter-spacing: -.015em; max-width: 14ch; margin: auto 0 0; }
.auth-pitch em { color: #FF8A5C; }
.auth-sub { max-width: 40ch; margin: 0; font-size: 1.02rem; }
.auth-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.auth-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.auth-list .ic { color: #7FE0B0; margin-top: 2px; }
.auth-ledger { display: grid; gap: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; max-width: 380px; backdrop-filter: blur(6px); }
.auth-ledger div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.auth-ledger div + div { border-top: 1px solid rgba(255,255,255,.1); }
.auth-ledger b { color: #fff; font-weight: 600; } .auth-ledger .up { color: #7FE0B0; }
.auth-main { display: grid; place-items: center; padding: 32px 24px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card:has(.wide-auth) { max-width: 640px; }
.auth-card .form-card { max-width: none; }
.auth-card h1 { font-size: var(--fs-3xl); margin-bottom: 6px; }
.auth-card .lede { color: var(--muted); margin-bottom: 20px; }
.auth-card label { margin-top: 18px; }
.auth-card input:not([type="checkbox"]):not([type="radio"]) { min-height: 46px; }
.mobile-brand { display: none; margin-bottom: 28px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: none; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: pointer; }
.pw-toggle:hover { color: var(--text); background: var(--subtle); }
.js .pw-toggle { display: grid; }
.caps-hint { color: var(--warn); font-size: var(--fs-sm); margin-top: 6px; font-weight: 600; }
.trust { margin: 16px 0 0; }
.auth-card .form-actions + .help { margin-top: 16px; }
.code-input { text-align: center; font-size: 1.6rem !important; letter-spacing: .5em !important; font-variant-numeric: tabular-nums; padding-left: .5em !important; }
.trusted-note { margin: 4px 0 10px; color: var(--ok); font-weight: 600; }
.error-page { text-align: center; max-width: 520px; margin: 8vh auto; }
.error-page .code { font: 400 7rem/1 var(--font-display); font-style: italic; color: var(--border-strong); }
.error-page h1 { font-size: var(--fs-2xl); margin: 6px 0 10px; }
.error-page .btn { margin: 4px; }

/* Mobile tab bar */
.tabbar { display: none; }
@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-105%); transition: transform var(--t) var(--ease); width: 288px; box-shadow: var(--elev-4); visibility: hidden; }
  .sidebar.open { transform: none; visibility: visible; }
  .scrim.show { display: block; position: fixed; inset: 0; background: rgba(11,31,24,.55); backdrop-filter: blur(2px); z-index: 35; }
  main { padding: 20px 16px 96px; } .topbar { padding: 0 12px; }
  h1 { font-size: var(--fs-2xl); }
  .kv { grid-template-columns: 1fr; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .mobile-brand { display: flex; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > .kpi + .kpi { box-shadow: none; }
  .strip > .kpi:nth-child(even) { box-shadow: inset 1px 0 0 var(--border); }
  .strip > .kpi:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--border); }
  .strip > .kpi:nth-child(n+3):nth-child(even) { box-shadow: inset 1px 0 0 var(--border), inset 0 1px 0 var(--border); }
  .kpi { padding: var(--sp-4); } .kpi-value { font-size: 1.7rem; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: .7rem; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 10px; position: relative; }
  .tabbar .on { color: var(--primary); } :root[data-theme="dark"] .tabbar .on { color: var(--primary); }
  .tabbar .on::before { content: ""; position: absolute; top: -7px; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .tabbar .nav-badge { background: var(--primary); color: var(--primary-ink); }
  .tabbar .nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; }
  .toasts { bottom: 76px; right: 16px; left: 16px; width: auto; }
  .cmdk-btn { flex: 1; margin-left: 4px; } .cmdk-btn kbd, .cmdk-btn .cmdk-t { display: none; } .cmdk-btn { flex: 0 0 38px; justify-content: center; padding: 0; margin-left: auto; }
  .topbar .help-link span { display: none; }
}
@media (max-width: 700px) {
  main { padding-left: 14px; padding-right: 14px; }
  .company { display: none; }
  .table-wrap { max-height: none; }
  .table-wrap:has(table.stack) { border: 0; background: none; box-shadow: none; overflow: visible; }
  .table-wrap table.stack thead { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }
  .table-wrap table.stack, .table-wrap table.stack tbody { display: block; }
  .table-wrap table.stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-1); }
  .table-wrap table.stack td { display: block; border: 0; padding: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .table-wrap table.stack td::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; margin-bottom: 1px; }
  .table-wrap table.stack td:first-child { grid-column: 1 / -1; font-weight: 700; font-size: 1rem; }
  .table-wrap table.stack td:first-child::before { display: none; }
  .table-wrap table.stack td:empty { display: none; }
  .table-wrap table.stack td.num { text-align: left; }
  .table-wrap table.stack td:last-child:has(.btn, form) { grid-column: 1 / -1; }
  .table-wrap table.stack td:last-child:has(.btn, form)::before { display: none; }
  .btn.small { min-height: 38px; }
  .chat, .chat.info-open { height: calc(100dvh - 56px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .skeleton, .skel { animation: none; }
  .btn[aria-busy=true]::after { animation: mvspin 2s linear infinite !important; animation-duration: 2s !important; }
}
@media (forced-colors: active) { .btn, .card, .panel, .strip, .badge { border: 1px solid CanvasText; } }
@media print { :root { --canvas: #fff; --surface: #fff; --text: #000; --text-2: #222; --muted: #444; --border: #bbb; --link: #0B3D2B; --ok: #0B5A36; --bad: #9A2222; } .sidebar, .topbar, .actions, .btn, .scrim, .tabbar, .toasts, .crumbs, .np-fly { display: none !important; } main { padding: 0; max-width: none; } body { background: #fff; color: #000; } a { color: inherit; text-decoration: none; } .card, .panel, .strip, .table-wrap, .set-card { box-shadow: none; } .table-wrap { max-height: none; overflow: visible; } thead th { position: static; } .kpi-value, .stat, h1 { color: #000; } }

/* ---- Navigation badge ------------------------------------------------------------------ */
.nav-badge { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }
.nav-sub a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---- Forms and admin helpers ------------------------------------------------------------- */
.checks { display: grid; gap: 4px; margin: 8px 0 12px; max-height: 260px; overflow: auto; }
.row-line { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.rule-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.rule-form select, .rule-form input { width: auto; min-width: 160px; }
.danger-zone { border-color: var(--danger); }
.pad { padding: 16px; }

/* ---- Chat ------------------------------------------------------------------------------------ */
body.chat-page main { padding: 0; max-width: none; }
body.chat-page .crumbs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* full-height chat: its own header names the page */
.chat { position: relative; display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 56px); min-height: 460px; background: var(--surface); border-top: 1px solid var(--border); overflow: hidden; }
.chat.info-open { grid-template-columns: 340px 1fr 300px; }
.chat button { font: inherit; color: inherit; }
.chat-side { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.chat-side-head { display: flex; gap: 8px; padding: 12px; }
.chat-side-head input { flex: 1; min-width: 0; }
.chat-tabs { display: flex; gap: 4px; padding: 0 12px 8px; flex-wrap: wrap; }
.chat-tabs button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 3px 12px; cursor: pointer; font-size: .84rem; color: var(--text-2); }
.chat-tabs button.on { background: var(--primary-soft); color: var(--primary-soft-ink); border-color: var(--primary-soft); font-weight: 600; }
.chat-list { overflow-y: auto; flex: 1; }
.chat-sect { padding: 10px 14px 4px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.chat-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); background: none; cursor: pointer; }
.chat-item:hover { background: var(--subtle); }
.chat-item.on { background: var(--primary-soft); }
.chat-item-mid { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chat-item-top, .chat-item-bot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-item-top b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-top small { color: var(--muted); font-size: .76rem; flex: none; }
.chat-prev { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .86rem; }
.chat-count { background: var(--primary); color: var(--primary-ink); border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 0 7px; line-height: 19px; }
.chat-count.muted { background: var(--border-control); }
.chat-flag { font-size: .78rem; }
.avatar.group { background: var(--primary-soft); color: var(--primary-soft-ink); }
.avatar.online { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ok); }
.chat-main { display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--canvas); }
.chat-empty { margin: auto; text-align: center; padding: 24px; }
.chat-empty .ic.big { width: 44px; height: 44px; color: var(--muted); }
.chat-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-pane[hidden], .chat-empty[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.chat-head input { width: 200px; }
.chat-back { display: none; }
.chat-title { display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; text-align: left; padding: 0; min-width: 0; }
.chat-title-text { display: grid; min-width: 0; }
.chat-title-text small { color: var(--muted); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; }
.chat-older { align-self: center; margin-bottom: 8px; }
.chat-day { align-self: center; margin: 12px 0 6px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: .76rem; padding: 2px 12px; border-radius: 999px; }
.chat-sys { align-self: center; color: var(--muted); font-size: .8rem; margin: 4px 0; }
.chat-msg { display: flex; align-items: flex-start; gap: 4px; max-width: 78%; position: relative; flex-wrap: wrap; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.flash .bubble { outline: 2px solid var(--accent); }
.bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px 10px 4px; min-width: 70px; box-shadow: var(--shadow-sm); overflow-wrap: anywhere; }
.chat-msg.mine .bubble { background: var(--primary-soft); border-color: transparent; color: var(--text); }
.bubble.deleted { color: var(--muted); font-style: italic; }
.bubble .who { font-size: .78rem; font-weight: 700; color: var(--primary-soft-ink); }
.bubble .fwd { font-size: .76rem; color: var(--muted); font-style: italic; }
.bubble .txt { white-space: pre-wrap; }
.bubble .txt a { color: var(--primary-soft-ink); text-decoration: underline; }
.bubble .mention { color: var(--primary-soft-ink); font-weight: 600; }
.bubble .meta { display: flex; justify-content: flex-end; gap: 6px; font-size: .7rem; color: var(--muted); margin-top: 2px; }
.bubble .ticks { color: var(--muted); } .bubble .ticks.read { color: var(--link); }
.bubble .star { color: var(--accent-strong); }
.bubble .quote { display: grid; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--primary); background: var(--subtle); padding: 3px 8px; border-radius: 6px; margin-bottom: 4px; cursor: pointer; }
.bubble .quote span { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.bubble .img-wrap img { display: block; max-width: 260px; max-height: 260px; border-radius: 8px; margin-bottom: 4px; }
.file-card { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; background: var(--subtle); border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; }
.file-card .fx { display: grid; } .file-card small { color: var(--muted); }
.msg-act { opacity: 0; border: 0; background: none; cursor: pointer; color: var(--muted); border-radius: 6px; padding: 0 6px; align-self: center; }
.chat-msg:hover .msg-act, .msg-act:focus-visible { opacity: 1; }
.reacts { flex-basis: 100%; display: flex; gap: 4px; margin-top: -6px; padding: 0 8px; }
.chat-msg.mine .reacts { justify-content: flex-end; }
.react { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 0 8px; cursor: pointer; font-size: .82rem; }
.react.mine { background: var(--primary-soft); border-color: var(--primary); }
.chat-typing { min-height: 18px; padding: 0 18px; font-size: .8rem; color: var(--muted); }
.chat-reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 14px; background: var(--subtle); border-left: 3px solid var(--primary); font-size: .86rem; }
.chat-locked { padding: 14px; text-align: center; background: var(--surface); border-top: 1px solid var(--border); }
.chat-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--border); }
.chat-compose textarea { flex: 1; resize: none; max-height: 140px; min-height: 38px; padding: 8px 12px; border-radius: 18px; }
.chat-compose[hidden] { display: none; }
.icon-btn { background: none; border: 0; cursor: pointer; border-radius: 8px; padding: 6px 9px; color: var(--text-2); font-size: 1.1rem; }
.icon-btn:hover { background: var(--subtle); }
.chat-filechip { display: flex; justify-content: space-between; padding: 6px 14px; background: var(--subtle); font-size: .86rem; }
.chat-emoji { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 14px; background: var(--surface); border-top: 1px solid var(--border); }
.chat-emoji[hidden], .chat-info[hidden], .chat-modal[hidden], .chat-menu[hidden], .chat-search-results[hidden], .chat-reply[hidden], .chat-filechip[hidden], .chat-locked[hidden] { display: none; }
.chat-emoji button { border: 0; background: none; font-size: 1.25rem; cursor: pointer; border-radius: 6px; padding: 2px 4px; }
.chat-emoji button:hover { background: var(--subtle); }
.chat-search-results { max-height: 220px; overflow: auto; background: var(--surface); border-bottom: 1px solid var(--border); }
.search-hit { display: grid; width: 100%; text-align: left; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--border); background: none; cursor: pointer; }
.chat-info { border-left: 1px solid var(--border); padding: 14px; overflow-y: auto; background: var(--surface); }
.chat-info:not([hidden]) { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 320px; box-shadow: var(--shadow-pop); z-index: 3; }
.info-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.info-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.info-block { display: grid; gap: 8px; margin: 10px 0; }
.member { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.member-t { flex: 1; display: grid; min-width: 100px; } .member small { color: var(--muted); }
.chat-modal { position: absolute; inset: 0; background: rgba(11,31,24,.5); display: grid; place-items: center; z-index: 5; }
.chat-modal-box { background: var(--surface); border-radius: 14px; padding: 16px; width: min(440px, 92%); max-height: 86%; overflow: auto; box-shadow: var(--shadow-pop); display: grid; gap: 10px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.pick-list { max-height: 300px; overflow: auto; display: grid; gap: 2px; }
.chat-menu { position: absolute; z-index: 6; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); min-width: 190px; padding: 4px; }
.chat-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.chat-menu button:hover { background: var(--subtle); } .chat-menu .danger { color: var(--danger); }
.menu-emoji { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu-emoji button { width: auto; padding: 3px 6px; font-size: 1.15rem; }
.chat-toast { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--surface); padding: 8px 16px; border-radius: 999px; z-index: 9; font-size: .88rem; }
@media (max-width: 860px) {
  .chat, .chat.info-open { grid-template-columns: 1fr; height: calc(100vh - 56px); }
  .chat-main { display: none; }
  .chat.has-open .chat-side { display: none; }
  .chat.has-open .chat-main { display: flex; }
  .chat-back { display: inline-block; }
  .chat-head input { display: none; }
  .chat-msg { max-width: 92%; }
  .chat-info:not([hidden]) { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) { .chat-msg.flash .bubble { transition: outline-color .3s; } }
.check-lead { display: flex; justify-content: space-between; gap: 8px; align-items: center; }


/* Printable documents (purchase orders) */
.doc { max-width: 820px; margin: 0 auto; padding: 24px; background: var(--surface, #fff); }
.doc-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid currentColor; padding-bottom: 12px; margin-bottom: 16px; }
.doc h1 { margin: 0 0 4px; }
.doc table { width: 100%; }
.doc-actions { max-width: 820px; margin: 12px auto 0; display: flex; gap: 8px; padding: 0 24px; }
@media print { .doc-actions { display: none !important; } .doc { padding: 0; max-width: none; } }

/* Settings */
.set-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.set-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.set-nav a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-weight: 500; }
.set-nav a:hover { background: var(--subtle); color: var(--text); }
.set-nav a.active { background: var(--primary-soft); color: var(--primary-soft-ink); font-weight: 600; }
.set-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.set-title { margin: 0; font-size: 1.25rem; }
.set-tools { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.set-tools input[type=search] { min-width: 220px; }
.set-scope { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.set-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 24px; padding: 16px 20px; border-bottom: 1px solid var(--border); align-items: start; }
.set-row label { font-weight: 600; }
.set-row .help { color: var(--muted); font-size: .88rem; margin-top: 3px; }
.set-row input[type=text], .set-row input[type=number], .set-row select, .set-row textarea { width: 100%; }
.set-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.set-meta .btn.link { padding: 0; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--subtle); color: var(--muted); font-size: .78rem; }
.pill.on { background: var(--primary-soft); color: var(--primary-soft-ink); }
.set-empty { padding: 24px; text-align: center; color: var(--muted); }
.set-bar { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border-strong); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -6px 14px -8px rgba(16,32,26,.18); }
.set-bar input { flex: 1; min-width: 0; }
.set-state { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.set-state.dirty { color: var(--warn); font-weight: 600; }
@media (max-width: 800px) { .set-layout { grid-template-columns: 1fr; } .set-nav { position: static; flex-direction: row; flex-wrap: wrap; } .set-row { grid-template-columns: 1fr; gap: 10px; } .set-bar { flex-wrap: wrap; } }
.set-tools { flex-wrap: nowrap; }
.set-tools input[type=search] { width: 240px; min-width: 0; }
.set-scope select { width: auto; min-width: 200px; }
@media (max-width: 1100px) { .set-tools { flex-wrap: wrap; } }

/* Document viewer */
.doc-view { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.doc-frame { width: 100%; height: calc(100vh - 220px); min-height: 420px; border: 0; border-radius: var(--radius-sm); background: var(--subtle); }
.doc-img { display: block; max-width: 100%; margin: 0 auto; }
.doc-text { max-height: calc(100vh - 220px); overflow: auto; margin: 0; white-space: pre-wrap; }
.file-dl { display: inline-block; font-size: .8rem; margin-top: 4px; }
.viewonly { font-size: .82rem; margin-left: 10px; cursor: pointer; }

/* Bell popup */
.bell-wrap { position: relative; }
.bell-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 24px); background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); z-index: 60; overflow: hidden; }
.bell-pop[hidden] { display: none; }
.bell-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.bell-list { list-style: none; margin: 0; padding: 4px 0; max-height: 340px; overflow-y: auto; }
.bell-list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; text-decoration: none; color: var(--text); }
.bell-list a:hover, .bell-list a:focus-visible { background: var(--subtle); }
.bell-empty { padding: 20px 16px; color: var(--muted); text-align: center; }
.bell-all { display: block; padding: 11px 16px; text-align: center; border-top: 1px solid var(--border); font-weight: 600; text-decoration: none; }
.bell-all:hover { background: var(--subtle); }

.poll { display: grid; gap: 6px; min-width: 240px; }
.poll-q { font-weight: 600; }
.poll-opt { position: relative; display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; cursor: pointer; overflow: hidden; color: inherit; font: inherit; }
.poll-opt.mine { border-color: var(--primary); }
.poll-opt:disabled { cursor: default; opacity: .85; }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--primary) 16%, transparent); z-index: 0; }
.poll-lbl, .poll-n { position: relative; z-index: 1; }
.poll-n { font-size: .8rem; white-space: nowrap; }
.poll-opts { display: grid; gap: 6px; margin: 8px 0; }

audio.voice { width: 240px; max-width: 100%; height: 36px; }
#chat-mic-btn.recording { color: var(--danger-ink); background: var(--danger); border-radius: 8px; padding: 0 8px; }

/* ---- Form builder and fill-in page (Google-Forms-like question cards) ---- */
.q-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 12px; box-shadow: var(--shadow-sm); position: relative; }
.q-card.active { border-color: var(--primary); box-shadow: var(--shadow); }
.q-card.active::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 5px; border-radius: 0 4px 4px 0; background: var(--primary); }
.q-card.has-error { border-color: var(--bad); }
.q-card[hidden] { display: none; }
.q-title { display: block; font-weight: 600; font-size: 1.02rem; margin-bottom: 4px; }
.q-title .req, .req { color: var(--danger); }
.q-card .check { padding: 5px 0; }
.q-display h2 { margin: 0 0 4px; } .q-display h3 { margin: 0 0 6px; } .q-body { margin: 0; white-space: pre-wrap; color: var(--text-2); }
.q-media { display: block; max-width: 100%; max-height: 420px; border-radius: 8px; margin: 8px 0; }
.check .q-other, .q-other { width: auto; min-width: 160px; margin-left: 6px; min-height: 32px; padding: 3px 8px; }
.q-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 0; }
.q-scale-pt { display: grid; justify-items: center; gap: 4px; cursor: pointer; min-width: 34px; }
.q-scale-end { color: var(--muted); font-size: .88rem; }
.form-grid > .q-card { margin-bottom: 0; }
.form-grid { gap: 12px; }
.form-card:has(.q-card) { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: 770px; }

.fb-page .content, .fb-page main { max-width: none; }
.fb { max-width: 980px; margin: 0 auto; }
.fb-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fb-bar-l, .fb-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-saved.bad { color: var(--bad); font-weight: 600; }
.fb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.fb-tab { border: 0; background: none; font: inherit; font-weight: 600; padding: 10px 16px; cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.fb-tab.on { color: var(--primary); border-bottom-color: var(--primary); }
.fb-main { display: grid; grid-template-columns: minmax(0, 770px) 64px; gap: 16px; justify-content: center; align-items: start; }
.fb-main[hidden] { display: none; }
.fb-col { min-width: 0; }
.fb-title { border-top: 10px solid var(--primary); padding-top: 14px; }
.fb-title::before { display: none; }
.fb .fb-h1 { font-size: 1.7rem; font-weight: 650; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 4px 0; min-height: 0; background: transparent; }
.fb .fb-desc { border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 4px 0; min-height: 0; background: transparent; color: var(--text-2); }
.fb .fb-h1:hover, .fb .fb-desc:hover, .fb .q-label:hover, .fb .q-help:hover { border-bottom-color: var(--border-strong); }
.fb .fb-h1:focus, .fb .fb-desc:focus { outline: none; box-shadow: none; border-bottom: 2px solid var(--primary); }
.fb-tools { position: sticky; top: 76px; display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); }
.fb-tool { display: grid; justify-items: center; gap: 0; border: 0; background: none; border-radius: 8px; padding: 8px 2px; cursor: pointer; font: inherit; color: var(--text-2); font-size: 1.15rem; line-height: 1.2; }
.fb-tool:hover, .fb-tool:focus-visible { background: var(--primary-soft); color: var(--primary-soft-ink); }
.fb-tool-l { font-size: .68rem; font-weight: 600; }
.fb-head { display: grid; grid-template-columns: minmax(0, 1fr) 230px auto; gap: 10px; align-items: end; margin-bottom: 6px; }
.fb .q-label { font-size: 1.05rem; font-weight: 600; background: var(--subtle); border: 0; border-bottom: 2px solid var(--border-strong); border-radius: 6px 6px 0 0; padding: 12px 12px 8px; }
.fb .q-label:focus { outline: none; border-bottom-color: var(--primary); box-shadow: none; }
.fb .q-help { border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; padding: 4px 0; min-height: 0; font-size: .9rem; margin-bottom: 8px; }
.fb .q-help:focus { outline: none; box-shadow: none; border-bottom: 2px solid var(--primary); }
.fb-card-tools { display: flex; gap: 2px; }
.fb-x { border: 0; background: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; font-size: 1.1rem; color: var(--muted); font: inherit; line-height: 1; }
.fb-x:hover:not(:disabled), .fb-x:focus-visible { background: var(--subtle); color: var(--text); } .fb-x:disabled { opacity: .35; cursor: default; }
.fb-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; } .fb-row.wrap > * { flex: 1 1 200px; }
.fb-row select, .fb-row input { width: auto; }
.fb-f { margin: 6px 0; } .fb-f label { font-size: .85rem; color: var(--muted); font-weight: 600; display: block; margin-bottom: 2px; }
.w-s { max-width: 150px; }
.fb-opt-row { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.fb .fb-opt { border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; min-height: 36px; padding: 4px 2px; flex: 1; }
.fb .fb-opt:hover { border-bottom-color: var(--border-strong); } .fb-opt:focus { outline: none; box-shadow: none; border-bottom: 2px solid var(--primary); }
.fb-dot, .fb-box { flex: none; width: 16px; height: 16px; border: 2px solid var(--border-control); display: inline-block; }
.fb-dot { border-radius: 50%; } .fb-box { border-radius: 3px; } .fb-num { flex: none; min-width: 22px; color: var(--muted); }
.fb-opt-add { display: flex; gap: 8px; margin: 8px 0 2px 24px; flex-wrap: wrap; }
.fb-mock-line { border-bottom: 1px dotted var(--border-control); color: var(--muted); padding: 8px 0; width: min(60%, 360px); }
.fb-mock-sel { border: 1px solid var(--border-strong); border-radius: 6px; padding: 8px 12px; color: var(--muted); width: min(60%, 300px); }
.fb-mock-c { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--text-2); }
.fb-mock-scale { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0; }
.fb-pt { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: .85rem; }
.fb-n { width: 22px; text-align: center; color: var(--muted); }
.fb-heading { font-size: 1.3rem; }
.fb-more { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.fb-more summary { cursor: pointer; font-weight: 600; color: var(--text-2); padding: 4px 0; }
.fb-more-b h4 { margin: 14px 0 4px; font-size: .9rem; }
.fb-foot { display: flex; gap: 8px; align-items: center; justify-content: flex-end; border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; flex-wrap: wrap; }
.fb-req { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--border-strong); font-weight: 600; }
.fb-req input { width: 38px; height: 20px; }
.fb-q:not(.active) { cursor: pointer; }
.fb-q:not(.active):hover { border-color: var(--border-control); }
.fb-empty { text-align: center; color: var(--muted); }
.fb-set h2 { margin: 0 0 8px; font-size: 1.05rem; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.fb-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 12px; border-radius: 999px; background: var(--subtle); border: 1px solid var(--border); }
.fb-addrow { display: flex; gap: 8px; } .fb-addrow input { max-width: 240px; }
.fb-modal { position: fixed; inset: 0; background: rgba(11,31,24,.55); display: grid; place-items: center; z-index: 100; padding: 16px; }
.fb-modal[hidden] { display: none; }
.fb-modal-box { background: var(--surface); border-radius: 14px; padding: 20px; width: min(520px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-pop); }
.fb-modal-box h2 { margin: 0 0 10px; font-size: 1.15rem; }
.fb-modal-a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.fb-many textarea { margin: 6px 0 10px; }
@media (max-width: 760px) {
  .fb-main { grid-template-columns: minmax(0, 1fr); }
  .fb-tools { position: fixed; top: auto; bottom: 0; left: 0; right: 0; grid-auto-flow: column; border-radius: 12px 12px 0 0; z-index: 40; }
  .fb-col { padding-bottom: 80px; }
  .fb-head { grid-template-columns: 1fr; }
  .q-card.active::before { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .q-card { transition: border-color .12s, box-shadow .12s; } }
.form-grid:has(.q-card) { grid-template-columns: minmax(0, 1fr); }
.fb input[type=checkbox][role=switch] { width: 38px; height: 20px; }

.check input.q-other { width: auto; min-width: 200px; }

/* ---- Forms list ---- */
.fx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fx-head h1 { margin: 0 0 2px; } .fx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.fx-tools input[type=search] { max-width: 300px; border-radius: 999px; padding-left: 16px; }
.fx-seg { display: inline-flex; background: var(--subtle); border-radius: 999px; padding: 3px; }
.fx-seg button { border: 0; background: none; font: inherit; font-weight: 600; font-size: .88rem; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--text-2); }
.fx-seg button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.fx-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; display: grid; gap: 14px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s; }
.fx-card[hidden] { display: none; }
.fx-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); transform: translateY(-2px); }
.fx-main { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.fx-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 600; font-size: 1.2rem; font-family: var(--font-display); color: #fff; margin-bottom: 4px; background: var(--seg-1); }
.fx-h212 { background: var(--seg-6); } .fx-h262 { background: var(--seg-5); } .fx-h152 { background: var(--seg-1); } .fx-h28 { background: var(--seg-2); color: var(--accent-ink); }
.fx-h340 { background: var(--accent-strong); } .fx-h190 { background: var(--seg-4); } .fx-h48 { background: var(--seg-3); color: #2A1E08; }
.fx-title { font-weight: 650; font-size: 1.08rem; line-height: 1.25; overflow-wrap: anywhere; }
.fx-desc { color: var(--text-2); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.fx-meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 12px; }
.fx-count b { font-size: 1.3rem; font-weight: 700; margin-right: 2px; }
.fx-st { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--subtle); color: var(--text-2); }
.fx-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.fx-st-active { background: var(--ok-bg); color: var(--ok); } .fx-st-active::before { background: var(--ok); }
.fx-st-draft { background: var(--warn-bg); color: var(--warn); } .fx-st-draft::before { background: var(--warn); }
.fx-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-links { display: flex; gap: 14px; font-size: .88rem; font-weight: 600; } .fx-links a { text-decoration: none; } .fx-links a:hover { text-decoration: underline; }
.fx-edit { color: var(--primary); }
.fx-empty { text-align: center; padding: 56px 16px; max-width: 460px; margin: 0 auto; }
.fx-empty-art { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.fx-empty-art span { width: 54px; height: 72px; border-radius: 10px; border: 2px solid var(--border-strong); background: var(--surface); position: relative; }
.fx-empty-art span:nth-child(1) { transform: rotate(-8deg); } .fx-empty-art span:nth-child(3) { transform: rotate(8deg); }
.fx-empty-art span:nth-child(2) { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-6px); }
.fx .fb-modal-box label { display: block; margin-top: 10px; font-weight: 600; }
.fx .fb-modal-box input[type=text] { margin-top: 4px; }
.trusted-note { margin: 4px 0 10px; color: var(--ok); font-weight: 600; }

/* Fill-in page header */
.q-head { border-top: 10px solid var(--primary); border-radius: 12px; padding: 20px 22px; margin-bottom: 14px; }
.q-head h1 { margin: 0 0 4px; font-size: 1.7rem; } .q-head .muted { margin: 0; }
.q-head, .form-card:has(.q-card) { max-width: 770px; }


/* ---- Shared small components that older screens rely on (kept in step with the v2 tokens) ---- */
.nav-badge { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.sidebar :focus-visible { outline-color: var(--primary); }
.table-wrap a:focus-visible { outline-offset: -2px; }
.danger-zone { background: color-mix(in srgb, var(--bad-bg) 35%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
fieldset.q-group { border: 0; padding: 0; margin: 0; min-width: 0; }
legend.q-title { padding: 0; float: left; width: 100%; margin-bottom: 4px; }
fieldset.q-group > :not(legend) { clear: both; }
.bell-pop { border-radius: var(--radius); box-shadow: var(--elev-3); border-color: var(--border); }
.bell-list a strong { font-size: .92rem; }
.set-nav a.active { background: var(--primary-soft); color: var(--primary-soft-ink); }
.set-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); }
.fx-card { border-radius: var(--radius-lg); }
.auth-card .alert { margin-bottom: 18px; }
.chat-count, .chat-tabs button.on { font-weight: 700; }
.q-head { border-top-color: var(--primary); }
.doc { font-family: var(--font); }
.doc h1 { font-family: var(--font-display); }
.form-empty { max-width: 770px; }
/* Mobile bottom bar spacing for pages that fill the viewport */
@media (max-width: 860px) { body.chat-page main { padding-bottom: 0; } .chat, .chat.info-open { height: calc(100dvh - var(--topbar) - 62px); } .fb-tools { bottom: 62px; } }
.error-search { display: flex; gap: 8px; max-width: 420px; margin: 20px auto; }
.error-search input { flex: 1; }
.user-wrap { position: relative; }
.topbar .user-btn { width: auto; padding: 0; min-width: 38px; border-radius: 50%; }
.topbar .user-btn:hover, .topbar .user-btn[aria-expanded="true"] { background: var(--subtle); }
.topbar .user-btn .avatar { width: 30px; height: 30px; font-size: .75rem; }
.menu { right: 0; }
.dash-editbar { justify-content: space-between; align-items: center; flex-wrap: wrap; }
a.setup { color: inherit; text-decoration: none; }
a.setup:hover { background: var(--wash); }
.kpi, .kpi:hover { text-decoration: none; }
.attn-ic.sev-high { background: var(--bad-bg); color: var(--bad); }

/* Report period picker */
.period { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin-bottom: var(--sp-4); }
.seg-links { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--subtle); border-radius: var(--radius-sm); }
.seg-links a { padding: 6px 12px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.seg-links a:hover { color: var(--text); }
.seg-links a.on { background: var(--surface); color: var(--text); box-shadow: var(--elev-1); }
.period-custom { display: flex; gap: 10px; align-items: end; }
.period-custom label { margin: 0 0 4px; }
.period-custom input { min-width: 150px; }
.compare-toggle { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; padding: 8px 0; }
.compare-toggle .knob { width: 34px; height: 20px; border-radius: 999px; background: var(--border-control); position: relative; transition: background var(--t-fast); }
.compare-toggle .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--t-fast); }
.compare-toggle.on .knob { background: var(--primary); } .compare-toggle.on .knob::after { transform: translateX(14px); }
.statement td, .statement th { padding-top: 9px; padding-bottom: 9px; }
.statement tr.total th { background: var(--wash); border-top: 1px solid var(--border-strong); }
.statement tr.grand th { font-size: 1rem; background: var(--primary-soft); color: var(--primary-soft-ink); }
.statement .neg { color: var(--bad); }
.aging-item { margin-right: 14px; }
.upper { text-transform: uppercase; }
.alert.warn { background: var(--warn-bg); color: var(--warn); }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--text); text-decoration: underline; }
td a[href^="/orders/"], td a[href^="/purchasing/"], td a[href^="/returns/"], td a[href^="/finance/journals/"] { white-space: nowrap; }