/* =====================================================
   StillQuote v3.1.2 — styles
   Mobile-first; tablet + desktop progressively enhance.
   Light theme by default; dark mode follows OS or manual toggle.
   ===================================================== */

/* Sentinel value read by app.js to detect whether the new CSS is
   actually loaded (vs. iOS Safari serving the prior cached file).
   Update both this and the JS check together with each release. */
:root { --css-version: "3.3.2"; }

/* ── Design tokens ─────────────────────────────────── */
:root {
  /* Brand */
  --copper: #B5712A;
  --copper-2: #D4924A;
  --copper-deep: #8A5218;
  --copper-pale: #F5E8D4;
  --copper-tint: #FBF5EC;

  /* Neutrals — light theme */
  --bg: #F2EDE5;
  --surface: #FDFAF6;
  --surface-2: #F7F3ED;
  --line: #E8E2DA;
  --ink: #1C1A18;
  --ink-2: #2E2B27;
  --muted: #6B6460;
  --quiet: #9A9390;

  /* Semantic */
  --ok: #2E7D52;
  --ok-bg: #EAF5EE;
  --warn: #9C7510;
  --warn-bg: #FEF5DF;
  --bad: #B5362A;
  --bad-bg: #FCEAE7;
  --info: #1B6CA8;
  --info-bg: #E8F1F9;

  /* Radius / spacing / shadows */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --shadow-1: 0 1px 0 rgba(0,0,0,.04);
  --shadow-2: 0 10px 30px -16px rgba(28,26,24,.18);

  /* Sizing */
  --tap: 44px;
  --sidebar: 248px;
  --content-max: 760px;

  /* Type */
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Header / toast tokens ─────────────────────────────
     These are intentionally THEME-INVARIANT. The header stays
     black-and-copper in both light and dark mode so the brand
     identity is consistent and contrast is guaranteed. */
  --header-bg:        #1C1A18;
  --header-bg-2:      #0E0D0C;
  --header-fg:        #F5EFE6;
  --header-fg-muted:  rgba(245, 239, 230, 0.72);
  --header-fg-quiet:  rgba(245, 239, 230, 0.48);
  /* Bumped from 10%/6% — at the old alphas the chips were almost
     invisible on iOS (Safari renders thin borders softer than Chrome). */
  --header-line:      rgba(245, 239, 230, 0.22);
  --header-pill-bg:   rgba(245, 239, 230, 0.10);
  --header-pill-hover:rgba(245, 239, 230, 0.20);
  --header-pill-ring: rgba(213, 146, 74, 0.65);
}

[data-theme="dark"] {
  --bg: #131110;
  --surface: #1c1917;
  --surface-2: #221f1c;
  --line: #2e2a26;
  --ink: #f5efe6;
  --ink-2: #ddd5c8;
  --muted: #9c948a;
  --quiet: #7a7269;

  --copper: #d4924a;
  --copper-2: #e9ad6c;
  --copper-deep: #b5712a;
  --copper-pale: #3a2810;
  --copper-tint: #241a10;

  --ok: #5cbf85; --ok-bg: #14271d;
  --warn: #e3b246; --warn-bg: #2a1f0a;
  --bad: #ef7565; --bad-bg: #2c1715;
  --info: #5fa5d8; --info-bg: #122433;

  --shadow-1: 0 1px 0 rgba(0,0,0,.4);
  --shadow-2: 0 10px 30px -10px rgba(0,0,0,.5);
}

/* OS-level preference (only when no explicit override) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131110;
    --surface: #1c1917;
    --surface-2: #221f1c;
    --line: #2e2a26;
    --ink: #f5efe6;
    --ink-2: #ddd5c8;
    --muted: #9c948a;
    --quiet: #7a7269;
    --copper: #d4924a;
    --copper-2: #e9ad6c;
    --copper-deep: #b5712a;
    --copper-pale: #3a2810;
    --copper-tint: #241a10;
    --ok: #5cbf85; --ok-bg: #14271d;
    --warn: #e3b246; --warn-bg: #2a1f0a;
    --bad: #ef7565; --bad-bg: #2c1715;
    --info: #5fa5d8; --info-bg: #122433;
    --shadow-1: 0 1px 0 rgba(0,0,0,.4);
    --shadow-2: 0 10px 30px -10px rgba(0,0,0,.5);
  }
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* NO overflow-x here. iOS Safari interprets this stacked with the
     body and .app in ways that prevent the .tab-strip's internal
     touch scroll from receiving gestures, and can break sticky
     positioning. Instead we rely on every descendant being properly
     sized to fit within the viewport. */
  background: var(--bg);
  /* width: 100% on html anchors all subsequent vw/% calculations to
     the actual viewport, not to any larger initial-containing-block
     fallback iOS occasionally hands out. */
  width: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Kills the grey tap flash on iOS that can momentarily turn buttons
     white when tapped. We provide our own :active feedback instead. */
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: var(--copper); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Loading fade-in ───────────────────────────────── */
.is-loading .app, .is-loading .login-overlay { opacity: 0; }
.app, .login-overlay { transition: opacity .2s ease; }

/* ─────────────────────────────────────────────────────
   LOGIN
   ───────────────────────────────────────────────────── */
.login-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 600px at 80% -10%, var(--copper-tint), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, var(--copper-pale), transparent 50%),
    var(--bg);
  z-index: 1000;
}
.login-overlay[hidden] { display: none; }
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-2);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-logo img { max-height: 56px; max-width: 200px; margin: 0 auto 10px; object-fit: contain; }
.login-brand h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(22px, 4.2vw, 26px);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.login-brand p { font-size: 12px; color: var(--muted); margin-top: 4px; letter-spacing: .04em; }
.form-error {
  background: var(--bad-bg);
  color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────────────────
   APP SHELL
   ───────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  /* No overflow control — iOS treats overflow on a position:sticky
     ancestor as a scroll container, which breaks the sticky header
     and prevents the tab strip's internal touch-scroll from working.
     Every descendant is sized to fit instead. */
}

/* Header — always dark, so brand identity is consistent in both themes */
.app-header {
  position: sticky; top: 0; z-index: 50;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(180deg, var(--header-bg) 0%, var(--header-bg-2) 100%);
  color: var(--header-fg);
  border-bottom: 1px solid var(--header-line);
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
  /* NOTE: do NOT clip overflow on the header — the .tab-strip inside
     uses overflow-x:auto for horizontal scrolling, and on iOS Safari
     a clip/hidden parent can swallow the touch gesture before the
     strip receives it. Layout below ensures nothing actually spills. */
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  max-width: 1240px; margin: 0 auto;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-text { min-width: 0; }
.brand-glyph {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--copper-2) 0%, var(--copper-deep) 100%);
  border-radius: 9px;
  font-size: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 6px rgba(0,0,0,.35);
}
.brand-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--header-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-tag {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--header-fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.icon-btn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--header-fg-muted);
  transition: background .15s, color .15s, box-shadow .15s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover, .icon-btn:focus-visible {
  background: var(--header-pill-hover);
  color: var(--header-fg);
  outline: none;
}
.icon-btn:focus-visible { box-shadow: 0 0 0 2px var(--header-pill-ring); }
.icon-btn.danger:hover { color: #f5a89a; }

/* Tiny always-visible version chip in the header. Lets the user
   confirm at a glance which CSS version Safari has actually loaded
   without needing to navigate to the Config tab. */
.version-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--header-pill-bg);
  border: 1px solid var(--header-line);
  color: var(--header-fg-muted);
  white-space: nowrap;
}
.version-chip[data-state="ok"]  { color: #6fdcab; border-color: rgba(111, 220, 171, 0.45); }
.version-chip[data-state="bad"] { color: #f5a89a; border-color: rgba(245, 168, 154, 0.55); }
@media (max-width: 420px) {
  /* Even tinier on small phones — the icon row is tight. */
  .version-chip { font-size: 9px; padding: 2px 6px; }
}

/* Tab strip (mobile + tablet) — rides on the dark header.
   Horizontally scrollable: the 8 tabs won't always fit on a phone
   and the user swipes left to reveal the rest. iOS-specific notes:
   - overflow-x: scroll (not auto): on iOS Safari `auto` can decline
     to scroll if the parent has any overflow control on it, but
     `scroll` always establishes a scroll container.
   - touch-action: pan-x explicitly opts this strip into horizontal
     touch scrolling so Safari doesn't try to interpret the gesture
     as vertical page scrolling.
   - width: 100vw + margin negation pins the scroll container to
     the viewport regardless of where the strip sits inside the
     header. Without it, an ancestor's transform/padding could limit
     the effective scroll width.
   - We removed the previous CSS mask-image — older iOS Safari
     versions can swallow touch events on masked elements. */
.tab-strip {
  display: flex; gap: 6px;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  padding: 2px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  scroll-snap-type: x proximity;
  /* Critical: when display:flex with overflow-x:scroll, child pills
     with flex: 0 0 auto won't shrink, so the strip's scrollWidth
     reflects the natural pill widths and Safari shows scroll. */
}
.tab-strip::-webkit-scrollbar { display: none; }
.tab-pill {
  flex: 0 0 auto;
  flex-shrink: 0;       /* explicit — Safari needs this to NOT shrink pills so the strip overflows and scrolls */
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  /* Inactive pill — solid cream text and a clearly-outlined chip so
     each tab reads as a distinct, tappable affordance on the dark
     header. */
  color: var(--header-fg);
  background: var(--header-pill-bg);
  border: 1px solid var(--header-line);
  scroll-snap-align: start;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  min-height: 40px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.tab-pill:hover {
  color: var(--header-fg);
  background: var(--header-pill-hover);
  border-color: rgba(245,239,230,.32);
}
.tab-pill:active { transform: scale(.97); }
.tab-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--header-pill-ring);
}
.tab-pill.active {
  /* Use the header bg (always dark) for the text so we never end up
     with cream-on-copper poor contrast in dark mode. */
  color: var(--header-bg);
  background: linear-gradient(135deg, var(--copper-2) 0%, var(--copper) 100%);
  border-color: var(--copper-deep);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 8px rgba(181, 113, 42, 0.35);
}
.tab-pill.active:hover { color: var(--header-bg); }

/* ── Sidebar (desktop only) ─────────────────────── */
.sidebar { display: none; }
.sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; }
.sidebar-link {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r);
  color: var(--muted);
  font-size: 14px; font-weight: 500;
  text-align: left;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.sidebar-link:hover { background: var(--surface-2); color: var(--ink); }
.sidebar-link.active {
  background: var(--copper-tint);
  color: var(--copper-deep);
  border-left-color: var(--copper);
  font-weight: 600;
}
.sidebar-link.active svg { opacity: 1; }

/* ── Main / panels ─────────────────────────────── */
.main {
  /* Use logical/clamped padding so this works on notched iPhones and
     in landscape, and so the inner content can never push past the
     viewport edges. */
  padding-top: 16px;
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .main { padding: 22px 24px calc(48px + env(safe-area-inset-bottom)); }
}
.panel { display: none; min-width: 0; }
.panel.active { display: block; min-width: 0; max-width: 100%; }
.panel > * + * { margin-top: 14px; }

/* ── Cards ─────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-1);
  /* Two defensive rules for small phones: 100% so the card can never
     exceed the panel width, and min-width:0 so flex/grid descendants
     can shrink below their content's intrinsic min-width instead of
     pushing the card off-screen. */
  max-width: 100%;
  min-width: 0;
  /* Allow very long unbroken strings (refs, emails, URLs) to break
     onto a new line rather than overflow horizontally. */
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.card-head { margin-bottom: 14px; }
.card-head h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper-deep);
  display: flex; align-items: center; gap: 10px;
}
.card-head h3::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ── Fields ────────────────────────────────────── */
.field { display: block; min-width: 0; }
.field + .field, .field + .field-row, .field-row + .field { margin-top: 12px; }
.field > span:first-child,
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
/* Flex-wrap layout (not grid) for the two-up field rows. iOS Safari
   has documented quirks where CSS Grid's minmax(0, 1fr) tracks can
   still resolve wider than expected when children are inputs with
   intrinsic min-content widths (placeholder text, monospace fonts).
   Flex with explicit flex-basis: calc(50% - half-gap) + flex-grow:1
   + min-width:0 yields rock-solid 50/50 columns on every browser. */
.field-row, .field-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.field-row > * {
  /* 50/50 split. The calc accounts for the gap so two children
     plus a single 10px gap exactly fill the row. */
  flex: 1 1 calc(50% - 5px);
  min-width: 0;
  max-width: 100%;
}
.field-grid > * {
  flex: 1 1 calc(50% - 5px);
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 360px) {
  /* Stack on very narrow phones — guarantees inputs aren't too short. */
  .field-row > *, .field-grid > * {
    flex: 1 1 100%;
  }
}
@media (min-width: 480px) {
  /* Three-up on small tablets and up. (gap*2)/3 = 6.67px so subtract that. */
  .field-grid > * {
    flex: 1 1 calc(33.333% - 7px);
  }
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  /* Inputs in grid/flex defaulted to min-content sizing which on iOS
     could push their column wider than expected. min-width:0 + the
     parent's minmax(0, 1fr) keeps them inside the column. */
  min-width: 0;
  max-width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
textarea {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.55;
  min-height: 92px; resize: vertical;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--copper);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--copper) 25%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--quiet); }

/* Read-only / disabled inputs: visually distinct, no focus ring */
input[readonly], input:disabled, textarea[readonly], textarea:disabled {
  background: var(--surface);
  color: var(--muted);
  cursor: default;
  border-style: dashed;
}
input[readonly]:focus, textarea[readonly]:focus {
  border-color: var(--line);
  box-shadow: none;
  background: var(--surface);
}

.input-with-unit { position: relative; }
.input-with-unit input { padding-right: 48px; }
.input-with-unit .unit {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--quiet);
  pointer-events: none;
}

.combo { display: flex; gap: 8px; min-width: 0; }
.combo input { flex: 1 1 0; min-width: 0; }
.combo .btn-ghost { flex-shrink: 0; }

.hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.hint strong { color: var(--ink); font-weight: 500; }

/* ── Segment ───────────────────────────────────── */
.segment {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 3px;
  gap: 3px;
}
.seg-btn {
  flex: 1; padding: 0 8px;
  min-height: 38px;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  border-radius: 7px;
}
.seg-btn.active {
  background: var(--copper);
  color: white;
  font-weight: 600;
}

/* ── Toggle row ────────────────────────────────── */
.toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  gap: 12px;
}
.toggle:first-of-type { border-top: 0; padding-top: 4px; }
.toggle-text { flex: 1; min-width: 0; }
.toggle-text > span { display: block; font-size: 14px; color: var(--ink); }
.toggle-text > small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.switch {
  position: relative;
  width: 44px; height: 26px; flex-shrink: 0;
}
.switch input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.switch span {
  position: absolute; inset: 0;
  background: var(--line);
  border-radius: 13px;
  transition: background .2s;
}
.switch span::after {
  content: ''; position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s;
}
.switch input:checked + span { background: var(--copper); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--copper) 30%, transparent); }

/* ── Metrics — flex-wrap for the same iOS-reliability reason as field-row */
.metric-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  min-width: 0;
  width: 100%;
}
.metric {
  flex: 1 1 calc(50% - 5px);
  min-width: 0;
  max-width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  overflow-wrap: anywhere;
}
.metric-featured {
  /* Featured metric spans full row in the flex layout. */
  flex: 1 1 100%;
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-deep) 100%);
  border-color: var(--copper-deep);
  color: white;
}
.metric-featured .metric-label,
.metric-featured .metric-sub { color: rgba(255,255,255,.78); }
.metric-featured .metric-value { color: white; font-size: 30px; }
.metric-wholesale {
  background: var(--info-bg);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
}
.metric-wholesale .metric-label,
.metric-wholesale .metric-value { color: var(--info); }
.metric-good { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.metric-good .metric-value { color: var(--ok); }
.metric-bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.metric-bad .metric-value { color: var(--bad); }
.metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.metric-value {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.metric-sub { margin-top: 4px; font-size: 11px; color: var(--muted); }

@media (min-width: 600px) {
  .metric { flex: 1 1 calc(33.333% - 7px); }
  .metric-featured { flex: 1 1 calc(33.333% - 7px); }
}

/* ── Breakdown ─────────────────────────────────── */
.breakdown {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.breakdown .row {
  display: flex; justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  color: var(--ink-2);
  min-width: 0;
}
.breakdown .row span { min-width: 0; overflow-wrap: anywhere; }
.breakdown .row:last-child { border-bottom: 0; }
.breakdown .row span:last-child { font-family: var(--font-mono); }
.breakdown .row.dimmed { opacity: .35; }
.breakdown .row-total {
  font-weight: 600;
  font-size: 15px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 0;
  color: var(--ink);
}

/* ── Alerts ────────────────────────────────────── */
.alert {
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 12px;
  border: 1px solid;
}
.alert.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
.alert.bad  { background: var(--bad-bg);  border-color: color-mix(in srgb, var(--bad) 30%, transparent);  color: var(--bad);  }
.alert.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
.alert strong { font-weight: 600; }

/* ── Buttons ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--r);
  font-size: 14px; font-weight: 500;
  letter-spacing: .01em;
  transition: opacity .15s, transform .1s, background .15s;
  position: relative;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--copper); color: white; }
.btn-primary:hover { background: var(--copper-deep); }
.btn-ghost {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--copper-tint); border-color: var(--copper-2); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn-row .btn { flex: 1; min-width: 120px; }

/* Loading state on the login button */
.btn .btn-spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.btn[data-loading="true"] .btn-spinner { display: inline-block; }
.btn[data-loading="true"] .btn-label { opacity: 0.6; }
.btn[data-loading="true"] { pointer-events: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Suggest dropdown ─────────────────────────── */
.suggest {
  position: relative; z-index: 5;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.suggest-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: var(--tap); justify-content: center;
}
.suggest-item:first-child { border-top: 0; }
.suggest-item:hover { background: var(--copper-tint); }
.suggest-item strong { font-weight: 500; }
.suggest-item small { font-size: 11px; color: var(--muted); }

/* ── Documents (quote/invoice) ────────────────── */
.document {
  padding: 22px;
  /* The doc-table inside can be wide on certain rows; let the
     document itself stay inside the card. */
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 480px) {
  .document { padding: 16px; }
}
.doc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--copper);
  margin-bottom: 16px;
  flex-wrap: wrap;          /* logo wraps below text on narrow screens */
  min-width: 0;
}
.doc-head > div { min-width: 0; flex: 1 1 220px; }
.doc-row-status {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.doc-row-status > div { min-width: 0; }
.doc-company {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--copper-deep);
  margin-bottom: 2px;
}
.doc-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.doc-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--quiet);
  margin-top: 2px;
}
.doc-client { font-size: 14px; color: var(--muted); margin-top: 8px; }
.doc-logo {
  width: 96px; height: 60px;
  flex-shrink: 0;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 11px;
  color: var(--quiet);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color .15s;
}
.doc-logo:hover { border-color: var(--copper-2); }
.doc-logo img { width: 100%; height: 100%; object-fit: contain; }
.doc-logo img:not([src]), .doc-logo img[src=""] { display: none; }
.doc-logo:has(img[src]:not([src=""])) span { display: none; }
.doc-logo-print { display: none; max-width: 96px; max-height: 60px; object-fit: contain; }
/* table-layout: fixed — the most important responsive fix in the
   document. Without this, long descriptions in <td> would auto-size
   the table wider than 100% and push the whole document off-screen
   on iOS. With fixed layout, columns share the available width and
   cells wrap their content. */
.doc-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 14px;
  table-layout: fixed;
}
.doc-table td { overflow-wrap: anywhere; word-break: break-word; }
.doc-table th {
  text-align: left;
  font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--quiet);
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--line);
}
.doc-table th.amt { text-align: right; }
.doc-table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.doc-table td:last-child { text-align: right; font-family: var(--font-mono); }
.doc-table .line-name { font-weight: 500; color: var(--ink); }
.doc-table .line-detail { font-size: 11px; color: var(--muted); margin-top: 2px; }
.doc-total {
  display: flex; justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 2px solid var(--ink);
  font-weight: 600;
  font-size: 17px;
  min-width: 0;
}
.doc-total > span { min-width: 0; overflow-wrap: anywhere; }
.doc-total-value { font-family: var(--font-mono); color: var(--copper); flex-shrink: 0; }
.doc-notes {
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 14px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 14px;
  white-space: pre-line;
}
.doc-notes:empty { display: none; }
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--line);
  color: var(--muted);
}
.status-badge.paid { background: var(--ok-bg); color: var(--ok); }

/* ── Upload zones / preview ───────────────────── */
.upload-zone {
  width: 100%;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.upload-zone:hover, .upload-zone:focus-visible {
  border-color: var(--copper-2);
  background: var(--copper-tint);
  outline: none;
}
.upload-zone > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.upload-zone > small { font-size: 11px; color: var(--muted); }
.logo-preview { max-width: 160px; max-height: 80px; margin-top: 10px; object-fit: contain; }
.logo-preview:not([src]), .logo-preview[src=""] { display: none; }

/* ── Connection status badge ──────────────────── */
.conn-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 12px; gap: 10px;
}
.conn-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.conn-badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
}
.conn-badge[data-state="ok"]      { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok)   30%, transparent); }
.conn-badge[data-state="error"]   { background: var(--bad-bg);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad)  30%, transparent); }
.conn-badge[data-state="testing"] { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ── Client list & history ────────────────────── */
.client-list { margin-top: 12px; }
.client-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.client-item > div:first-child { min-width: 0; flex: 1 1 auto; }
.client-item:first-child { border-top: 0; }
.client-name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.client-meta { font-size: 11px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.client-actions { display: flex; gap: 6px; flex-shrink: 0; }

.history-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 10px;
  transition: border-color .15s, transform .1s;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.history-item:hover { border-color: var(--copper-2); }
.history-top {
  display: flex; justify-content: space-between;
  gap: 8px; align-items: flex-start;
  min-width: 0;
}
.history-top > div:first-child { min-width: 0; flex: 1 1 auto; }
.history-ref { font-family: var(--font-mono); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.history-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.history-date { font-size: 11px; color: var(--quiet); font-family: var(--font-mono); text-align: right; line-height: 1.4; flex-shrink: 0; }
.history-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.badge {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--muted);
}
.badge.invoice { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.badge.synced  { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
.del-btn {
  width: 32px; height: 32px;
  border-radius: 6px;
  color: var(--quiet);
  display: grid; place-items: center;
}
.del-btn:hover { background: var(--bad-bg); color: var(--bad); }

/* Sync rows */
.sync-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  min-width: 0;
}
.sync-row > div { min-width: 0; overflow-wrap: anywhere; }
.sync-row:first-child { border-top: 0; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; }
.sync-dot.ok { background: var(--ok); }
.sync-dot.no { background: var(--quiet); }

/* ── Empty state ─────────────────────────────── */
.empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.empty strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }

/* ── Toast (the "status bubble") — always dark/cream regardless of theme */
.toast {
  position: fixed;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  background: var(--header-bg);
  color: var(--header-fg);
  border: 1px solid var(--header-line);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 12px 36px -10px rgba(0,0,0,.55);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .15s;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
  opacity: 0;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Small-phone header tightening ────────────── */
@media (max-width: 420px) {
  .header-inner { padding: 10px 12px; gap: 8px; }
  .brand-glyph { width: 32px; height: 32px; font-size: 16px; }
  .brand-name { font-size: 15px; }
  .brand-tag { display: none; }
  .icon-btn { width: 40px; height: 40px; border-radius: 9px; }
  .tab-strip { padding: 0 12px 10px; gap: 5px; }
  .tab-pill { padding: 8px 13px; font-size: 13px; min-height: 38px; }
}

/* ─────────────────────────────────────────────────────
   DESKTOP LAYOUT
   ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .app {
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "hd hd"
      "sb mn";
  }
  .app-header { grid-area: hd; }
  .sidebar {
    grid-area: sb;
    display: block;
    background: var(--surface);
    border-right: 1px solid var(--line);
    position: sticky;
    top: 72px;
    height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .main {
    grid-area: mn;
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
    padding: 28px 32px;
  }
  .tab-strip { display: none; }
  .header-inner { padding: 14px 24px; }
}

/* ─────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────── */
@media print {
  .app-header, .sidebar, .btn, .btn-row, .no-print, .toast { display: none !important; }
  .panel { display: none !important; }
  .panel.print-target { display: block !important; padding: 0 !important; }
  body, html, .app, .main { background: white !important; color: black !important; max-width: 100% !important; }
  .card, .document {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
  }
  .doc-logo { display: none !important; }
  .doc-logo-print { display: block !important; }
  .doc-head { border-bottom-color: black !important; }
  .doc-total { border-top-color: black !important; }
}

/* ── Incoming tab — branding display card ──────────── */
.incoming-brand-card {
  padding: 14px 18px;
}
.incoming-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.incoming-logo {
  max-height: 48px;
  max-width: 120px;
  object-fit: contain;
  flex-shrink: 0;
  display: none; /* shown by JS when a logo is loaded */
}
.incoming-company-display {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--copper-deep);
  letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Hidden by default; JS shows it when company name or logo is set */
#incoming-brand-card { display: none; }

/* ── Logo display-only (quote / invoice doc header) ── */
.doc-logo-display {
  width: 96px; height: 60px;
  flex-shrink: 0;
  overflow: hidden;
  display: none; /* shown by JS only when a logo is loaded */
}
.doc-logo-display img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.doc-logo-display.has-logo { display: block; }

/* ── Static logo wrap in Config branding card ──────── */
.logo-static-wrap {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.logo-static-wrap .logo-preview { margin-top: 0; }

/* ── Load saved records panel rows ─────────────────── */
.load-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.load-item:first-child { border-top: 0; }
.load-item-info { min-width: 0; flex: 1 1 auto; }
.load-ref {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  overflow-wrap: anywhere;
}
.load-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Admin: subsection headings inside the server-connection card ── */
.subsection-head {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 18px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

/* ── Config: read-only branding display block ───────── */
.brand-display-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.brand-display-block .brand-display-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ── Admin: user rows ───────────────────────────────── */
.user-row {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
  transition: border-color .15s;
}
.user-row:hover { border-color: var(--copper-2); }
.user-row-editing {
  border-color: var(--copper-2);
  background: var(--copper-tint);
}
.user-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.user-row-info { min-width: 0; flex: 1 1 auto; }
.user-row-name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.user-row-meta { font-size: 11px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.user-row-badges { display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; }
.user-row-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
}
.user-row-last { font-size: 11px; color: var(--quiet); font-family: var(--font-mono); }
.user-row-actions { display: flex; gap: 6px; flex-shrink: 0; }

.badge.admin-badge   { background: var(--copper-tint); border-color: var(--copper-2); color: var(--copper-deep); }
.badge.inactive-badge{ background: var(--bad-bg);     border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }

/* ── Workflow strip above the Quote / Invoice document ─────────
   Surfaces the same status + tracking badges as the History card so
   the user knows where a loaded record sits in the workflow without
   bouncing to History. Hidden by default; revealed when a record is
   loaded (state.activeRecord set). */
.workflow-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 12px;
}
.workflow-strip[hidden] { display: none; }
.workflow-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.workflow-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  min-width: 0;
}

/* Quote workflow status badges */
.badge.status-sent      { background: var(--info-bg);  border-color: color-mix(in srgb, var(--info) 30%, transparent);  color: var(--info); }
.badge.status-accepted  { background: var(--ok-bg);    border-color: color-mix(in srgb, var(--ok)   30%, transparent);  color: var(--ok); }
.badge.status-declined  { background: var(--bad-bg);   border-color: color-mix(in srgb, var(--bad)  30%, transparent);  color: var(--bad); }
.badge.status-expired   { background: var(--warn-bg);  border-color: color-mix(in srgb, var(--warn) 35%, transparent);  color: var(--warn); }
.badge.status-opened    { background: var(--copper-tint); border-color: var(--copper-2); color: var(--copper-deep); }

/* Admin: trash item rows */
.trash-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 8px;
  background: var(--surface);
}
.trash-item-info  { min-width: 0; flex: 1 1 auto; }
.trash-item-head  { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.trash-item-title { font-family: var(--font-mono); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.trash-item-meta  { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.trash-item-when  { font-size: 11px; color: var(--quiet); font-family: var(--font-mono); margin-top: 2px; }
.trash-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Admin: audit log rows */
.audit-row {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  min-width: 0;
}
.audit-row:first-child { border-top: 0; }
.audit-row-head {
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--font-mono);
}
.audit-row-time   { color: var(--quiet); flex-shrink: 0; }
.audit-row-action { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.audit-row-meta   { color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.audit-row-detail { color: var(--copper-deep); }

/* ── List controls (sort dropdown above clients/history) ── */
.list-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.list-controls-label {
  font-size: 12px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.list-sort-select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 5px 26px 5px 8px;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236B6460' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.list-sort-select:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--copper) 25%, transparent);
}

/* ── List pagination (clients + history share the same bar) ── */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.page-info {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}