/* Bench & Counter POS — v18 "Minimalist Modern" design system, rethemed v62: Forest & Amber.
   Clarity through structure, character through bold detail. One electrifying
   accent — the Electric Blue signature gradient (#1B5E3F → #3E8763) —
   concentrated where it matters; a warm near-monochrome slate canvas
   everywhere else. Dual-font identity: Calistoga (personality, display) ·
   Inter (clarity, UI) · JetBrains Mono (technical accents, labels).
   Inverted slate sections (sidebar, login) with dot texture + radial glows;
   whitespace as a precision instrument; motion that breathes, never shouts.
   Restraint in quantity, confidence in execution. */
* { box-sizing: border-box; margin: 0; }
:root {
  /* -- Minimalist Modern core tokens */
  --bg: #FAFAFA;                 /* warm off-white canvas */
  --ink: #10241A;                /* slate-900 — text AND inverted backgrounds */
  --ink-2: #2E463A;              /* slate-700 secondary text */
  --sub: #5F7268;                /* slate-500 muted foreground */
  --muted: #EEF4EF;              /* slate-100 subtle fills */
  --card: #FFFFFF;               /* elevated surfaces — pure white for lift */
  --line: #DFE8E1;               /* slate-200 structural borders */
  /* -- the single, electrifying accent */
  --accent: #1B5E3F; --accent-2: #3E8763;
  --grad-blue: linear-gradient(135deg, #1B5E3F, #3E8763);   /* THE signature */
  --accent-soft: rgba(27, 94, 63, .06);
  --accent-border: rgba(27, 94, 63, .3);
  /* legacy aliases so every existing rule inherits the new accent */
  --blue: var(--accent); --blue-deep: #134B31; --blue-soft: #E3EFE7;
  --blue-50: #F0F6F1; --blue-100: #E3EFE7;
  --sky: var(--accent-2); --grad-sky: linear-gradient(135deg, #3E8763, #6BA985);
  /* -- semantic: color for PURPOSE, not decoration */
  --ok: #16A34A; --ok-soft: #DCFCE7;
  --warn: #A16207; --warn-soft: #FEF9C3;
  --danger: #DC2626; --danger-soft: #FEE2E2;
  --green: var(--ok); --red: var(--danger);
  /* -- shadow scale + accent-tinted lift for featured elements */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow: 0 4px 6px rgba(0, 0, 0, .05), 0 10px 24px rgba(16, 36, 26, .05);
  --shadow-raise: 0 10px 15px rgba(0, 0, 0, .07), 0 20px 40px rgba(16, 36, 26, .06);
  --shadow-pop: 0 20px 25px rgba(0, 0, 0, .1), 0 30px 70px rgba(16, 36, 26, .12);
  --shadow-accent: 0 4px 14px rgba(27, 94, 63, .25);
  --shadow-accent-lg: 0 8px 24px rgba(27, 94, 63, .35);
  /* glass aliases retired → clean white surfaces (kept for legacy rules) */
  --glass: #FFFFFF;
  --gloss: inset 0 1px 0 rgba(255, 255, 255, .9);
  /* -- keyboard focus ring: accent, offset like ring-2 ring-offset-2 */
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --track: -.02em;
  /* -- the dual-font identity */
  --font-ui: "Inter", -apple-system, system-ui, "Segoe UI", Helvetica, sans-serif;
  --font-display: "Calistoga", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
body { font: 15px/1.5 var(--font-ui); background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; }
/* v20 reference-ERP: app headings are bold Inter (clean sans hierarchy);
   Calistoga survives where the BRAND speaks — the login. */
h1, h2, h3 { font-family: var(--font-ui); font-weight: 700; letter-spacing: var(--track); line-height: 1.15; }
h4, .stat b { letter-spacing: -.01em; line-height: 1.2; }
/* gradient text — the signature applied to a key word */
.grad-text { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
button { font: inherit; cursor: pointer; transition: box-shadow .15s, transform .12s, background .15s, border-color .15s, color .15s, opacity .15s; }
button:focus-visible, .chip:focus-visible, .nav-item:focus-visible { outline: none; box-shadow: var(--ring); }
input, select, textarea { font: inherit; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; width: 100%; color: var(--ink); transition: border-color .15s, box-shadow .15s, background .15s; }
input:hover, select:hover, textarea:hover { border-color: #d3dcea; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
input.invalid, select.invalid, textarea.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(217, 45, 32, .15); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
input[type="search"] { background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%23999" viewBox="0 0 16 16"><path d="M11.7 10.3a6 6 0 1 0-1.4 1.4l3 3 1.4-1.4-3-3zM2 7a5 5 0 1 1 10 0A5 5 0 0 1 2 7z"/></svg>') 12px center no-repeat; padding-left: 34px; border-radius: 999px; }

/* ---------- login — INVERTED section: deep slate, dot texture, radial
     glow, and a rotating decorative ring. The dramatic first impression. ---------- */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  position: relative; overflow: hidden; background: var(--ink); color: #fff; }
/* texture: dot grid felt more than seen + ambient accent glows */
.login::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 32px 32px; opacity: .04; }
.login::after { content: ""; position: absolute; pointer-events: none;
  width: 640px; height: 640px; left: -180px; top: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 94, 63, .35), transparent 65%); filter: blur(80px); }
/* v27.3: JARVIS-style HUD ring — three concentric circles orbiting the PIN
   column: slow dashed ring, counter-rotating dotted ring, and a fast glowing
   arc sweep. Sized so the whole pad sits comfortably inside. */
.login-ring { position: absolute; width: 680px; height: 680px; border-radius: 50%;
  border: 1.5px dashed rgba(62, 135, 99, .3); pointer-events: none;
  animation: ring-rotate 60s linear infinite; }
.login-ring::before { content: ""; position: absolute; inset: -18px; border-radius: 50%;
  border: 1px dotted rgba(62, 135, 99, .35);
  animation: ring-rotate-rev 40s linear infinite; }
.login-ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(27, 94, 63, .6); border-right-color: rgba(62, 135, 99, .3);
  filter: drop-shadow(0 0 8px rgba(27, 94, 63, .5));
  animation: ring-rotate 7s linear infinite; }
@keyframes ring-rotate { to { transform: rotate(360deg); } }
@keyframes ring-rotate-rev { to { transform: rotate(-360deg); } }
/* the brand mark's viewBox carries whitespace under the pavilion tip —
   pull the wordmark up so logo + name read as one lockup */
.login > svg { margin-bottom: -22px; position: relative; z-index: 1; }
.login h1 { font-family: var(--font-display); font-weight: 400; font-size: 34px; color: #fff;
  letter-spacing: var(--track); position: relative; z-index: 1; }
.login .dim { color: rgba(255, 255, 255, .55); z-index: 1; }
.dots { display: flex; gap: 10px; z-index: 1; }
.dot { width: 15px; height: 15px; border: 2px solid var(--accent-2); border-radius: 50%; }
.dot.on { background: var(--grad-blue); border-color: transparent; box-shadow: var(--shadow-accent); }
.err { color: var(--danger); font-weight: 600; z-index: 1; }
.login .err { color: #F87171; }
.pad { display: grid; grid-template-columns: repeat(3, 86px); gap: 12px; z-index: 1; }
.pad button { height: 68px; font-size: 22px; color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
  background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .15s, transform .12s, border-color .15s; }
.pad button:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .2); }
.pad button:active { transform: scale(.96); background: rgba(27, 94, 63, .35); border-color: var(--accent-border); }

/* ---------- shell: floating LIGHT sidebar (reference-ERP style).
     White rounded card, grouped sections, and the active module unfolds its
     child tree — dot bullets, filled dot marks "you are here". ---------- */
.shell { display: flex; min-height: 100vh; align-items: stretch; }
.side { width: 236px; flex: 0 0 236px; background: var(--card); color: var(--ink-2);
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px; margin: 12px 0 12px 12px;
  position: sticky; top: 12px; height: calc(100vh - 24px); z-index: 20;
  transition: width .15s, flex-basis .15s; box-shadow: var(--shadow-sm); }
.shell.min .side { width: 72px; flex-basis: 72px; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-dot { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.logo-txt b { font: 700 14.5px var(--font-ui); color: var(--ink); letter-spacing: -.01em; }
.logo-txt i { font-style: normal; font-size: 10.5px; color: var(--sub); }
.side-ctl { display: flex; gap: 2px; }
.side-ctl button { background: none; border: none; color: #B1C2B6; font-size: 13px; padding: 2px 5px; border-radius: 8px; }
.side-ctl button:hover, .side-ctl .pin.on { color: var(--accent); }
.side-scroll { flex: 1; overflow-y: auto; padding: 2px 0 8px; }
/* v27.3: one uniform menu — no group labels, no dividers; permissions decide visibility */
.nav-sec + .nav-sec { margin-top: 0; }
.nav-group { font-size: 12px; font-weight: 500; color: var(--sub); padding: 10px 16px 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: calc(100% - 20px); margin: 2px 10px; padding: 10px 12px;
  background: none; border: none; color: var(--ink-2); text-align: left; font-size: 14px; font-weight: 500;
  white-space: nowrap; border-radius: 10px; transition: background .15s, color .15s; }
.nav-item .ic { font-size: 17px; width: 22px; text-align: center; line-height: 1; }
.nav-item:hover { background: var(--muted); color: var(--ink); }
.nav-item:active { transform: scale(.985); }
/* active module = quiet gray pill (the reference's signifier), not a shout */
.nav-item.on { background: var(--muted); color: var(--ink); font-weight: 600; }
.nav-chev { margin-left: auto; font-size: 12px; color: #B1C2B6; }
.shell.min .nav-item { justify-content: center; padding: 12px 0; }
.shell.min .nav-group { display: none; }
/* the unfolded child tree: dot bullets on a soft indent line */
.nav-sub { display: flex; flex-direction: column; margin: 2px 14px 8px 30px; padding-left: 8px;
  border-left: 1px solid var(--line); animation: rise-in .2s ease-out; }
.nav-child { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: none; background: none;
  text-align: left; font-size: 13.5px; color: var(--sub); border-radius: 8px; transition: color .15s, background .15s; }
.nav-child:hover { color: var(--ink); background: var(--muted); }
.nc-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #C5D3C9; background: transparent; flex-shrink: 0; transition: background .15s, border-color .15s; }
.nav-child.on { color: var(--ink); font-weight: 600; }
.nav-child.on .nc-dot { background: var(--ink); border-color: var(--ink); }
/* bottom user card (opens the profile menu upward) */
.side-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--line); }
.user-card { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; text-align: left; }
.user-card:hover { border-color: #C5D3C9; background: #FCFCFD; }
.user-card .avatar { width: 34px; height: 34px; font-size: 14px; flex-shrink: 0; }
.uc-who { flex: 1; min-width: 0; line-height: 1.25; }
.uc-who b { display: block; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-who i { font-style: normal; font-size: 11.5px; color: var(--sub); display: flex; align-items: center; }
.uc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 5px; }
.uc-chev { color: #B1C2B6; font-size: 12px; }
.shell.min .user-card { justify-content: center; padding: 6px; }
.profile.card { position: relative; width: 100%; }
.profile.card .profile-menu { bottom: calc(100% + 10px); top: auto; left: 0; right: auto; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px;
  background: rgba(250, 250, 250, .85); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.userchip { display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-blue); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-accent); }
.userchip .who { line-height: 1.15; text-align: right; }
.userchip .who b { display: block; font-size: 14px; }
.userchip .who span { font-size: 12px; color: var(--sub); }
.userchip .out { background: none; border: none; color: var(--blue); font-weight: 700; font-size: 13px; }

/* ---------- pages — 4pt rhythm: 4 · 8 · 12 · 16 · 24 · 32 ---------- */
.page { padding: 24px; animation: rise-in .3s cubic-bezier(.16, 1, .3, 1); }
.page.narrow { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-top: 28px; }
/* menus & submenus sit centered — the module chrome reads as one centered
   navigation block on every page */
.page-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h2 { font-size: 20px; font-weight: 800; letter-spacing: var(--track); margin-right: 8px; }
.page-head select, .page-head input[type="date"] { width: auto; border-radius: 999px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px;
  margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.dim { color: var(--sub); font-size: 13px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #EBF2EC; }
.row.big { font-size: 19px; font-weight: 700; letter-spacing: var(--track); border-bottom: none; padding: 12px 0 8px; }
.row.trade { color: var(--ok); font-weight: 700; }
.row-gap { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row-gap.end { justify-content: flex-start; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
h4 { margin: 12px 0 8px; font-size: 14px; color: var(--ink-2); }

/* ---------- buttons / chips — every control gets FOUR states:
     default · hover (lift) · pressed (sink) · disabled (grayed, inert) ---------- */
.btn { padding: 10px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); font-weight: 500; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn:hover:not(:disabled) { border-color: var(--accent-border); box-shadow: var(--shadow); transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }
/* primary = Electric Blue (v22: no solid black buttons anywhere) */
.btn.primary { background: var(--accent); border: none; color: #fff; font-weight: 600; border-radius: 12px;
  box-shadow: var(--shadow-accent); }
.btn.primary:hover:not(:disabled) { background: #134B31; box-shadow: var(--shadow-accent-lg); }
.btn.primary:active:not(:disabled) { background: #0E3D27; }
.btn.danger { color: var(--danger); border-color: rgba(220, 38, 38, .25); }
.btn.danger:hover:not(:disabled) { background: var(--danger-soft); border-color: rgba(220, 38, 38, .4); }
.btn.ghost { background: none; border-color: transparent; box-shadow: none; color: var(--sub); }
.btn.ghost:hover:not(:disabled) { background: var(--muted); color: var(--ink); transform: none; box-shadow: none; }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.btn.big { padding: 16px; font-size: 17px; width: 100%; border-radius: 14px; }
.btn.wide { width: 100%; }
.btn:disabled { cursor: default; transform: none; color: #93A79A; background: var(--muted);
  border-color: transparent; box-shadow: none; }
.btn.primary:disabled { background: #A9C6B4; color: #fff; }
/* busy state — spinner replaces certainty with feedback while work runs */
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid rgba(120, 140, 180, .35); border-top-color: var(--blue); border-radius: 50%;
  animation: spin .7s linear infinite; }
.btn.primary.busy::after { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.x { background: none; border: none; color: var(--danger); font-size: 14px; padding: 2px 6px; border-radius: 8px; }
.x:hover { background: var(--danger-soft); }
.x:active { transform: scale(.92); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* v40.1: chips read as REAL buttons — bordered at rest, solid accent when
   selected. Selection must survive the finger leaving the glass. */
.chip { padding: 9px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2, var(--sub)); text-align: center; }
.chip:hover { border-color: var(--accent-2); background: var(--accent-soft); color: var(--blue-deep); }
.chip:active { transform: scale(.96); }
.chip.on, .chip.on:hover { background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: var(--shadow); }
.chip.req { border-color: #ecc56a; background: var(--warn-soft); color: var(--warn); }
.chip.on.req { background: #fff; color: var(--ink); }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sub); font-weight: 600; }
.field span em { color: var(--red); font-style: normal; }
.field input, .field select, .field textarea { font-size: 15px; font-weight: 400; }

/* ---------- cart ---------- */
.cart-layout { display: flex; min-height: calc(100vh - 69px); }
.cart-left { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cart-right { width: 380px; flex: 0 0 380px; background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -10px 0 30px rgba(23, 43, 99, .04); padding: 18px; display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 69px; height: calc(100vh - 69px); overflow-y: auto; }
.cart-lines { flex: 1; overflow-y: auto; min-height: 120px; }
.cart-lines .row.click { cursor: pointer; }
.cart-lines .row.click:hover { background: var(--blue-soft); border-radius: 10px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ptile { border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 14px;
  text-align: left; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.ptile:hover { transform: translateY(-2px); box-shadow: var(--shadow-raise); }
.ptile:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }
.ptile b { font-size: 14px; } .ptile span { color: var(--blue); font-weight: 700; }
.trade-form { display: flex; flex-direction: column; gap: 10px; }
.wo-panel { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px; background: linear-gradient(180deg, #FCFDFE, var(--muted)); }
.wo-panel .wo-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }

/* ---------- explorer ---------- */
.explorer { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); }
.exp-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px;
  padding: 10px 12px; background: var(--muted); border: 1px solid var(--line); border-radius: 16px; }
.exp-bar + .exp-bar { margin-top: -2px; }
.exp-bar input[type="search"] { max-width: 250px; }
.exp-bar select, .exp-bar input { width: auto; padding: 8px 12px; border-radius: 999px; }
.rangepair { display: inline-flex; gap: 4px; }
.rangepair input { width: 130px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap;
  user-select: none; color: var(--sub); font-weight: 500; font-size: 12.5px; background: #F6F9F7; }
th:first-child { border-top-left-radius: 10px; } th:last-child { border-top-right-radius: 10px; }
td { padding: 10px 10px; border-bottom: 1px solid #f2f5fa; }
tr.click { cursor: pointer; } tr.click:hover { background: var(--blue-soft); }
.thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 10px; }

/* ---------- stats — clean white tiles, mono labels, staggered entrance ---------- */
.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px;
  min-width: 180px; flex: 1; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: box-shadow .3s, border-color .3s; }
.stat:hover { box-shadow: var(--shadow); border-color: #C5D3C9; }
/* the section-label voice: monospace, uppercase, wide tracking */
.stat span { font-size: 12px; color: var(--sub); display: block; font-weight: 500; margin-bottom: 4px; }
.stat b { font-size: 24px; letter-spacing: var(--track); line-height: 1.15; }
.stat em { font-style: normal; font-size: 12px; color: var(--ok); display: block; font-weight: 600; margin-top: 2px; }
/* staggered entrance — content settles in, top row first */
.stat-row .stat { animation: rise-in .4s cubic-bezier(.16, 1, .3, 1) backwards; }
.stat-row .stat:nth-child(2) { animation-delay: .05s; } .stat-row .stat:nth-child(3) { animation-delay: .1s; }
.stat-row .stat:nth-child(4) { animation-delay: .15s; } .stat-row .stat:nth-child(5) { animation-delay: .2s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- modal / toast — micro-interactions: every action answered ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(20, 30, 55, .35);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px;
  animation: fade-in .18s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  width: 560px; max-width: 96vw; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop);
  animation: pop-in .22s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.modal.wide { width: 980px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 17px; letter-spacing: -.2px; }
.modal-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; }
/* toast slides UP into view — the confirming micro-interaction; a leading ✓
   signifies success without words, ✕ signifies failure (semantic red) */
.toast { background: rgba(23, 35, 59, .92); backdrop-filter: blur(8px); color: #fff; padding: 12px 20px;
  border-radius: 999px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  animation: toast-in .28s cubic-bezier(.2, .9, .3, 1.2); display: flex; align-items: center; gap: 8px; }
.toast::before { content: "✓"; color: #4ADE80; font-weight: 800; flex-shrink: 0; }
.toast.err { background: rgba(217, 45, 32, .95); }
.toast.err::before { content: "✕"; color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

/* ---------- pickers, stones, media, perms ---------- */
.pick-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.pick-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 14px; background: #fff; text-align: left; }
.pick-row:hover { border-color: var(--blue); box-shadow: 0 4px 12px rgba(27, 94, 63,.1); }
.pick-row:active { transform: scale(.99); background: var(--blue-50); }
.stones { display: flex; flex-direction: column; gap: 10px; }
.stone-row { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: linear-gradient(180deg, #FCFDFE, #F5F8F5); }
.stone-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.media-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.media-row img, .media-row video { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.tax-comp { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: #F6F9F7; }
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.perm-row { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.perm-row input { width: auto; }
/* v65: drawn module glyph tile on the Settings → Modules toggles (nav-matched) */
.mod-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  flex-shrink: 0; border-radius: 9px; background: var(--wash); color: var(--accent); margin-top: 1px; }

/* ---------- status pills — semantic colors carry the MEANING:
     blue in-flight · amber attention · green done · red stopped ---------- */
.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  text-transform: capitalize; background: var(--muted); color: var(--sub); }
.pill.open, .pill.ordered { background: var(--blue-100); color: var(--blue-deep); }
.pill.partial, .pill.backordered { background: var(--warn-soft); color: var(--warn); }
.pill.received, .pill.credited, .pill.applied, .pill.completed { background: var(--ok-soft); color: var(--ok); }
.pill.sent, .pill.in_process { background: #e8e3fd; color: #5230b8; }
.pill.canceled, .pill.closed, .pill.refund, .pill.refunded { background: var(--danger-soft); color: #b3261e; }
.prodpick { position: relative; }
.prodpick .pick-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 6px; margin: 4px 0 0;
  animation: drop-in .16s ease-out; }
td.up { color: var(--green); font-weight: 700; }
td.down { color: var(--red); font-weight: 700; }
.reflink { background: none; border: none; padding: 0; color: var(--blue); font-weight: 700; cursor: pointer; font-size: inherit; }
.reflink:hover { text-decoration: underline; }
.history h4 { margin: 10px 0 4px; }

/* ---------- home dashboard ---------- */
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.home-grid .panel { margin-bottom: 0; }
.spark rect { transition: opacity .15s; } .spark rect:hover { opacity: .75; }

/* ---------- sales hub / signature / settings ---------- */
.saleshub .cart-layout { min-height: calc(100vh - 126px); }
.saleshub .cart-right { top: 126px; height: calc(100vh - 126px); }
.signpad canvas { width: 100%; height: 170px; border: 1.5px dashed #B2C3B7; border-radius: 16px; background: #fff;
  touch-action: none; display: block; margin-bottom: 8px; }
.terms-box { max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  font-size: 13px; color: var(--sub); white-space: pre-wrap; background: #fff; }
.sign-review { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: linear-gradient(180deg, #FCFDFE, #F5F8F5); }
.listedit { display: flex; flex-direction: column; gap: 6px; }
.listrow { display: flex; gap: 6px; align-items: center; border-radius: 8px; }
.listrow input { flex: 1; }
.listrow.dragging { opacity: .45; outline: 2px dashed var(--blue, #1B5E3F); }
.drag-h { cursor: grab; user-select: none; color: #9aa3af; padding: 4px 6px;
  font-size: 15px; line-height: 1; touch-action: none; }
.drag-h:active { cursor: grabbing; }
.listrow .x.mv { font-size: 13px; }
.listrow .x.mv:disabled { opacity: .25; }

/* ---------- range picker / kanban / inventory grid / tags ---------- */
.rangepick { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.kanban { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 10px; }
.kb-col { min-width: 244px; width: 244px; background: rgba(241, 245, 249, .8); backdrop-filter: blur(6px);
  border-radius: 18px; padding: 10px; flex-shrink: 0; }
.kb-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 10px; }
.kb-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px;
  margin-bottom: 10px; cursor: pointer; box-shadow: var(--shadow-sm); }
.kb-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raise); }
.kb-card:active { transform: translateY(0) scale(.98); }
.kb-top { display: flex; gap: 6px; align-items: center; }
.kb-title { font-size: 13px; font-weight: 600; margin: 2px 0; }
.kb-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; }
.kb-foot select { padding: 4px 8px; font-size: 12px; width: auto; border-radius: 999px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 14px; }
.inv-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  text-align: left; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); cursor: pointer; }
.inv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raise); }
.inv-card:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }
.inv-card img, .inv-noimg { width: 100%; height: 132px; object-fit: cover; border-radius: 12px; }
.inv-noimg { display: flex; align-items: center; justify-content: center; font-size: 40px;
  background: linear-gradient(160deg, var(--muted), #E3EFE7); }
.inv-card b { font-size: 13.5px; line-height: 1.25; }
/* price is the differentiated element — color + weight draw the eye to it */
.inv-price { color: var(--blue); font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.tag-preview { border: 1.5px dashed #B2C3B7; border-radius: 8px; background: #fff; padding: 2px 4px;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.linecost { display: inline-flex; gap: 4px; align-items: center; }
.linecost input { padding: 4px 8px; }
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-dot { width: 26px; height: 26px; border-radius: 9px; background: var(--grad-blue); display: inline-block;
  box-shadow: var(--shadow-accent); }

/* ---- v11: global search (centered, every page) ---- */
.gsearch { flex: 1; max-width: 620px; margin: 0 auto; position: relative; }
.gsearch input { border-radius: 999px; padding: 9px 16px 9px 34px; background-color: rgba(255,255,255,.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gsearch-drop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 55;
  background: rgba(255,255,255,.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-pop);
  max-height: min(64vh, 560px); overflow-y: auto; padding: 8px;
  animation: drop-in .16s ease-out; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
.gs-group { padding: 4px 0; }
.gs-group + .gs-group { border-top: 1px solid var(--line); }
.gs-head { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--sub); padding: 6px 10px 4px; }
.gs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%;
  text-align: left; background: none; border: none; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; }
.gs-row:hover { background: var(--blue-soft); }
.gs-row:active { transform: scale(.99); }
.gs-label { font-weight: 600; color: var(--ink); }
.gs-sub { color: var(--sub); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-empty { padding: 14px; color: var(--sub); font-size: 13.5px; }

/* ---- v11: global quick actions (+ New, every page) ---- */
.topbar-right { display: flex; align-items: center; gap: 14px; }
.quickmenu { position: relative; }
.qm-btn { padding: 9px 16px; font-size: 14px; }
.qm-drop { width: 210px; }

/* ---- v11: quick service tiles + browsers ---- */
.ptile.qs { background: linear-gradient(180deg, #F1F6F2, #EDF2FF); border: 1px solid #D6E0F5; }
.ptile.qs .qs-ic, .ptile.browse .qs-ic { font-size: 20px; }
.ptile.browse { background: var(--glass); border: 1.5px dashed #B8CFC0; box-shadow: none; }
.ptile.browse:hover { border-color: var(--blue); }
.pick-list.tall { max-height: 54vh; }

/* ---- v15/v19: directory landings — ONE white card, every parent group a
     column inside it, children tight beneath their titles ---- */
.tb-cart { font-size: 14.5px; font-weight: 700; padding: 9px 18px; }
.rep-dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-sm); padding: 24px 28px; max-width: 1100px; margin: 0 auto; }
.rep-group, .panel.rep-group { background: none; border: none; box-shadow: none; padding: 0;
  margin: 0; gap: 2px; }
.rep-parent { font-size: 15.5px; font-weight: 400; letter-spacing: 0; margin-bottom: 4px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rep-link { display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 8px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: #4C5F53;
  font-family: inherit; }
.rep-link:hover { background: var(--blue-soft); color: var(--blue-deep); font-weight: 600; }
.rep-link:active { transform: scale(.99); }
.rep-head h2 .rep-cur { color: var(--blue-deep); }
.rep-jump { width: auto; border-radius: 999px; padding: 8px 14px; font-size: 13.5px; }
.chart-bar select { width: auto; padding: 6px 10px; border-radius: 999px; font-size: 13px; }
.chart-toggle { padding: 6px 10px; font-size: 14px; }
.rangepick select { border-radius: 999px; }

/* ---- v13: chrome, counter flows, tag canvas, compare engine ---- */
.tb-ic { padding: 9px 13px; font-size: 16px; border-radius: 999px; }
.ptile.flow { background: linear-gradient(180deg, #fdfaf3, #faf3e3); border: 1px solid #eadfc3; }
.cmp-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; margin-bottom: 12px;
  box-shadow: var(--shadow); }
.cmp-bar select { width: auto; min-width: 170px; }
.tag-canvas-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tag-canvas { position: relative; background: #fff; border: 1.5px dashed #B2C3B7; border-radius: 6px;
  overflow: hidden; touch-action: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); }
.tag-el { position: absolute; cursor: grab; user-select: none; white-space: nowrap; line-height: 1.05;
  color: #111; padding: 1px 2px; border: 1px dashed transparent; border-radius: 3px; }
.tag-el:hover { border-color: #B8CFC0; background: rgba(46, 101, 72,.05); }
.tag-el.sel { border-color: var(--blue); background: rgba(46, 101, 72,.09); cursor: grabbing; }
.tag-el.badge { border: 1.5px solid #111 !important; border-radius: 3px; font-weight: 800; padding: 0 3px; }
.tag-el.badge.sel { outline: 2px solid var(--blue); }
.tag-qr { position: absolute; cursor: grab; border: 1px dashed transparent; border-radius: 3px; }
.tag-qr:hover, .tag-qr.sel { border-color: var(--blue); background: rgba(46, 101, 72,.07); }

/* ---- v12: inventory tools row + by-category view + deposit handoff ---- */
.inv-tools { width: 100%; margin-bottom: 12px; }
.inv-tools input[type="search"] { width: 340px; }
.cat-view { display: flex; flex-direction: column; gap: 18px; }
.cat-section { background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px 18px; box-shadow: var(--shadow); }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.cat-head b { font-size: 15.5px; letter-spacing: -.2px; }
.dep-now { border-top: 1.5px dashed #cfd9ea; margin-top: 10px; padding-top: 12px; }

/* ---- v10: parent/child hierarchy for tabs & trees ---- */
/* l1 = parent level (bigger, bolder); l2 = child level (smaller, indented,
   left accent bar) — a consistent visual grammar across every module. */
.chips.l1 { gap: 6px; }
.chips.l1 .chip { font-size: 14.5px; font-weight: 700; padding: 10px 18px; color: var(--ink-2); }
.chips.l1 .chip.on { color: #fff; background: var(--accent); border: none;
  box-shadow: var(--shadow-accent); }
.chips.l2 { padding-left: 0; border-left: none; }  /* v19: centered chrome — hierarchy reads from size, not the side bar */
.chips.l2 .chip { font-size: 12.8px; padding: 7px 13px; }
.child-arrow { color: #a8b3c7; font-weight: 700; }

/* ---- v10: sales landing (Lightspeed Register style) ---- */
.sl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sl-tile { border: 1px solid var(--line); border-radius: 20px; background: var(--glass);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  padding: 20px 16px 16px; text-align: left; display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--shadow-sm); }
.sl-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-raise); }
.sl-tile:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }
.sl-tile .sl-ic { font-size: 26px; margin-bottom: 4px; }
.sl-tile b { font-size: 15.5px; letter-spacing: var(--track); }
.sl-tile .sl-sub { color: var(--sub); font-size: 12.5px; }
.sl-tile.primary { background: var(--accent); border: none; color: #fff;
  box-shadow: var(--shadow-accent); }
.sl-tile.primary .sl-sub { color: rgba(255,255,255,.8); }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.sl-grid .panel { margin-bottom: 0; }
.sl-grid .row.click { cursor: pointer; border-radius: 10px; }
.sl-grid .row.click:hover { background: var(--blue-soft); }
.drawer-embed .stat-row { margin-bottom: 8px; }
.drawer-embed .stat { padding: 12px 16px; min-width: 130px; }
.drawer-embed .stat b { font-size: 19px; }

/* ---- v10: profile menu (time clock · my settings · switch user) ---- */
.profile { position: relative; }
.avatar-btn { background: none; border: none; padding: 0; border-radius: 50%; }
.avatar-btn:hover .avatar { box-shadow: var(--shadow-accent-lg); }
.profile-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; z-index: 50;
  background: rgba(255,255,255,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 18px; padding: 10px;
  box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 4px;
  animation: drop-in .16s ease-out; }
.pm-head { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line); }
.pm-item { display: block; width: 100%; text-align: left; padding: 11px 12px; border: none; background: none;
  border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--ink); }
.pm-item:hover { background: var(--blue-soft); color: var(--blue-deep); }
.pm-clock { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 8px 2px;
  background: linear-gradient(180deg, #FCFDFE, var(--muted)); display: flex; flex-direction: column; gap: 8px; }
.pm-clock-head { display: flex; justify-content: space-between; align-items: center; }
.pingate { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }

/* ---- v10: report charts ---- */
.chartbox { background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.chart-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chart-bar select { width: auto; padding: 7px 12px; border-radius: 999px; }
.chart-xy { width: 100%; height: 230px; margin-top: 10px; }
.chart-pie { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.chart-legend { display: flex; flex-direction: column; gap: 4px; min-width: 240px; flex: 1; }
.chart-leg-row { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.chart-leg-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-dot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }
.lab-details { margin-top: 8px; }
.lab-details summary { cursor: pointer; padding: 4px 0; }
.lab-details .grid4 { margin-top: 8px; }

/* ---- v09: calendar ---- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { margin-bottom: 4px; text-align: center; font-weight: 700; }
.cal-cell { min-height: 96px; background: #F6F9F7; border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; overflow: hidden; }
.cal-cell:hover { border-color: var(--blue); }
.cal-cell.empty { background: transparent; border: none; cursor: default; }
.cal-cell.today { background: var(--blue-soft); border-color: var(--blue); }
.cal-daynum { font-size: 12px; font-weight: 700; color: var(--sub); }
.cal-cell.today .cal-daynum { color: var(--blue-deep); }
.cal-evt { display: block; width: 100%; text-align: left; border: none; background: var(--accent); color: #fff;
  border-radius: 8px; padding: 3px 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cal-evt.dimmed { background: #d4dbe8; color: #576A5E; box-shadow: none; }

/* ---- v18: section-label system + living indicators ---- */
/* The badge that opens a flagship section: pill, accent tint, mono voice,
   pulsing dot — "carefully designed interface element, not just text". */
.sec-label { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px;
  border: 1px solid var(--accent-border); background: var(--accent-soft); padding: 7px 16px; }
.sec-label .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: pulse-dot 2s ease-in-out infinite; }
.sec-label span:last-child { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .15em; color: var(--accent); }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .65; } }
/* directory landings breathe: generous top spacing + centered rhythm */
.rep-dir { margin-top: 8px; }
.rep-parent { font-size: 19px; }
.rep-link { font-size: 14px; color: var(--ink-2); }
/* landing headers pick up the display voice at a bolder size */
.page-head.dir h2 { font-size: 26px; }

/* ---- v19: centered module chrome ---- */
/* The container IS the signifier: one pill houses the mode toggle, the
   selected half fills with the signature gradient. */
.mod-nav { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; }
.chips.seg { background: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px; gap: 2px; }
.chips.l1.seg { padding-left: 4px; }
.mod-sub { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.mod-sub select { width: auto; border-radius: 999px; padding: 7px 12px; font-size: 13px; }
/* centered section-label on directory landings */
.sec-wrap { text-align: center; margin-bottom: 14px; }
/* directory link rows: tighter, hover = the house hover */
.rep-link { padding: 6px 10px; font-size: 13.5px; }

/* ---- v20: breadcrumbs + page title (reference-ERP chrome) ---- */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sub);
  white-space: nowrap; min-width: 150px; }
.crumb-ic { font-size: 15px; }
.crumb.cur { color: var(--ink); font-weight: 600; }
.crumb-sep { color: #C5D3C9; }
/* ONE bold left-aligned title per page — the anchor the reference leads with */
.page-title { padding: 20px 24px 0; animation: rise-in .3s cubic-bezier(.16, 1, .3, 1); }
.page-title h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.page-title + .page, .page-title + .saleshub .page { animation: none; }
/* title sits above module content — trim the module's own top padding */
.page-title ~ .page { padding-top: 16px; }

/* ---- v20_1: the cart is Electric Blue again — the same accent as the
   customer & sale number links, so the eye connects them ---- */
.btn.primary.tb-cart { background: var(--accent); box-shadow: var(--shadow-accent); }
.btn.primary.tb-cart:hover:not(:disabled) { background: #134B31; box-shadow: var(--shadow-accent-lg); }
.btn.primary.tb-cart:active:not(:disabled) { background: #0E3D27; }

/* ---- v21: CRM expansion — leads board, tasks, bell, clickable dashboard ---- */
/* the split-compare chart keeps its aspect ratio at any width — no stretching */
.cmp-xy { width: 100%; height: auto; display: block; }
/* clickable dashboard cards — the card IS the link to what it summarizes */
.stat.click, .panel.click { cursor: pointer; }
.stat.click:hover { border-color: var(--accent-border); box-shadow: var(--shadow); }
.panel.click:hover { border-color: var(--accent-border); box-shadow: var(--shadow); }
.panel.click:active, .stat.click:active { transform: scale(.995); }
/* tasks & follow-ups on the calendar: outlined amber chips vs solid events */
.cal-evt.cal-task { background: var(--warn-soft); color: #6B4E00; border: 1px solid #EAD48A; }
/* top-bar bell */
.bell { position: relative; }
.bell .btn.has-due { border-color: var(--accent-border); }
.bell-badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 0 0 2px var(--bg); animation: pulse-dot 2s ease-in-out infinite; }
.bell-menu { width: 330px; }
.bell-row { display: flex; align-items: center; gap: 6px; }

/* ---- v22: unsaved-changes guard bar ---- */
.guard-bar { display: flex; align-items: center; gap: 10px; padding: 10px 20px;
  background: var(--warn-soft); border-bottom: 1px solid #EAD48A; font-weight: 600; font-size: 13.5px;
  animation: drop-in .16s ease-out; }
.guard-bar span:first-child { color: var(--warn); flex: 1; }

/* ---- v22: omnichannel inbox ---- */
.inbox { display: flex; gap: 16px; align-items: stretch; min-height: 480px; }
.ib-list { width: 300px; flex: 0 0 300px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 8px; overflow-y: auto; max-height: 70vh; display: flex; flex-direction: column; gap: 2px; }
.ib-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: none; background: none;
  border-radius: 10px; text-align: left; width: 100%; }
.ib-row:hover { background: var(--blue-soft); }
.ib-row.on { background: var(--muted); }
.ib-ch { font-size: 18px; flex-shrink: 0; }
.ib-who { flex: 1; min-width: 0; line-height: 1.3; }
.ib-who b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-who i { font-style: normal; font-size: 12px; color: var(--sub); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-thread { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; display: flex; flex-direction: column; max-height: 70vh; }
.ib-empty { padding: 24px; max-width: 520px; }
.ib-head { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ib-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ib-msg { max-width: 72%; display: flex; flex-direction: column; gap: 3px; }
.ib-msg.in { align-self: flex-start; }
.ib-msg.out { align-self: flex-end; align-items: flex-end; }
.ib-bubble { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.ib-msg.in .ib-bubble { background: var(--muted); border-bottom-left-radius: 4px; }
.ib-msg.out .ib-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ib-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: center; }

/* ---- v22: containers hug their content — no full-width stretching ---- */
.chartbox { width: fit-content; min-width: 340px; max-width: min(760px, 100%); margin-left: auto; margin-right: auto; }
.chartbox .chart-xy, .chartbox .cmp-xy { width: min(680px, 100%); }
.cmp-bar, .rangepick { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
/* pie legend: percentages sit right beside the graph, not across the page */
.chart-pie { gap: 14px; justify-content: center; }
.chart-legend { flex: 0 1 auto; min-width: 0; max-width: 280px; }
.stat { flex: 0 1 auto; min-width: 170px; }
.stat-row { justify-content: center; }

/* ---- v23: ONE compare filter container — what → how → when → shape ---- */
.cmp-filter { width: fit-content; max-width: 100%; margin: 0 auto 14px; gap: 10px; }
.cmp-grid { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; justify-content: center; }
.cmp-grid select { width: auto; min-width: 150px; }
/* the embedded time-frame picker sheds its own card chrome inside the filter */
.cmp-filter .rangepick { border: none; box-shadow: none; background: none; padding: 0; margin: 0; width: auto; }
.cmp-h2h { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center;
  border-top: 1px dashed var(--line); padding-top: 10px; }

/* ---- v24: Analytics secondary rail — lives beside the permanent nav ---- */
.rep-page { display: flex; gap: 16px; align-items: flex-start; }
.rep-rail { width: 210px; flex: 0 0 210px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 8px; position: sticky; top: 76px;
  max-height: calc(100vh - 100px); overflow-y: auto; box-shadow: var(--shadow-sm); }
.rr-sec { margin-top: 10px; }
.rr-group { font-size: 12px; font-weight: 600; color: var(--sub); padding: 6px 10px 4px; }
.rr-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; padding: 8px 10px; border-radius: 9px;
  font-size: 13.5px; color: var(--ink-2); transition: background .15s, color .15s; }
.rr-item:hover { background: var(--blue-soft); color: var(--blue-deep); }
.rr-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #C5D3C9;
  background: transparent; flex-shrink: 0; transition: background .15s, border-color .15s; }
.rr-item.on { background: var(--muted); color: var(--ink); font-weight: 600; }
.rr-item.on .rr-dot { background: var(--accent); border-color: var(--accent); }
.rr-home { font-weight: 600; }
.rep-main { flex: 1; min-width: 0; }
/* report title above content — clear anchor, no pills */
.rep-title-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.rep-title-row h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
/* the landing card sits flush in the main column now */
.rep-main .rep-dir { margin: 0; max-width: none; }

/* ---- v26: channel readiness dot + timeline rows ---- */
.ch-ready { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-left: 6px; vertical-align: middle; }
.tl-row { align-items: flex-start; }
.tl-meta { white-space: nowrap; flex-shrink: 0; }

/* ---- v27: lock screen overlay + Diamond Mind brand mark ---- */
/* .lockscreen reuses the .login look but must sit ON TOP of the live app
   (nothing unmounts underneath — the ticket/cart survive the lock). */
.lockscreen { position: fixed; inset: 0; z-index: 200; animation: fade-in .2s ease-out; }
.lock-sub { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
.logo-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-mark svg { display: block; }

/* ---- v28: slide-over inbox — quick triage on top of any page ---- */
.drawer-veil { position: fixed; inset: 0; z-index: 120; background: rgba(16, 36, 26, .38);
  animation: fade-in .15s ease-out; }
.inbox-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(880px, 96vw);
  background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(16, 36, 26, .25);
  display: flex; flex-direction: column;
  animation: drawer-in .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes drawer-in { from { transform: translateX(48px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--card);
  font-size: 15px; flex-shrink: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px;
  display: flex; flex-direction: column; }
.drawer-body .inbox { flex: 1; min-height: 0; }
/* the drawer is narrower than the CRM page — slim the conversation list */
.inbox-drawer .ib-list { width: 250px; flex-basis: 250px; }
.inbox-drawer .page-head { flex-wrap: wrap; }

/* ---- v28.1: messaging inside the customer profile ---- */
.cust-msgs { display: flex; flex-direction: column; gap: 10px; }
.cust-msgs .chip { position: relative; }
.cm-unread { position: static; margin-left: 6px; }
.cm-thread { max-height: 280px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card); padding: 12px; }

/* ---- v28.2: unified profile message stream — channel marked per message ---- */
.cm-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.cm-ch { font-size: 12px; opacity: .85; }

/* ---- v29: POS permanent actions + configurable quick tiles ---- */
.pos-fixed { margin-bottom: 4px; }
.pos-tiles { border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px 12px;
  background: var(--card); }
.pos-tiles-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; font-size: 12.5px; }
.pos-tiles.editing .ptile.qs { outline: 1.5px dashed var(--accent-border); }
.ptile { position: relative; }
.tile-x { position: absolute; top: 6px; right: 8px; }

/* ---- v29: inventory filter dropdowns + pinned selections ---- */
.fdrop { position: relative; display: inline-block; }
.fdrop-caret { font-size: 10px; opacity: .6; }
.fdrop-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-raise); padding: 6px; min-width: 190px; max-height: 300px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  animation: fade-in .12s ease-out; }
.fdrop-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.fdrop-opt:hover { background: var(--blue-soft); }
.fdrop-opt input { width: auto; }
.filt-pills { justify-content: center; margin-bottom: 8px; }
.filt-pill { display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-soft); color: var(--blue-deep); border-radius: 999px;
  padding: 5px 8px 5px 12px; font-size: 13px; }

/* ---- v29: resizable long-text fields (leads notes/interest) ---- */
.grow-txt { resize: both; min-height: 70px; max-width: 100%; }

/* ---- v29: home — centered ranges, row links ---- */
.home-ranges { display: flex; justify-content: center; margin-bottom: 14px; }
.row-link { display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: none; border: none; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px);
  border-radius: 9px; font: inherit; text-align: left; }
.row-link:hover { background: var(--blue-soft); color: var(--blue-deep); }

/* ---- v29: tax drill-down cards ---- */
.stat.click.on { border-color: var(--accent); box-shadow: var(--shadow-accent); }

/* Google Places suggestions must float above modals */
.pac-container { z-index: 400 !important; border-radius: 12px; box-shadow: var(--shadow-raise);
  border: 1px solid var(--line); font-family: var(--font-ui); }

/* ---- v30: cart card fits the screen — no page scroll on iPad ----
   The card floats like the sidebar: rounded, 12px off the bottom edge,
   aligned with the nav card's bottom. Lines scroll INSIDE the card. */
.saleshub .cart-right { top: 126px; height: calc(100vh - 138px); border: 1px solid var(--line);
  border-left: 1px solid var(--line); border-radius: 16px; margin: 0 12px 12px 0;
  overflow-y: hidden; padding: 14px 16px; gap: 6px; }
.cart-right .cart-lines { flex: 1 1 auto; min-height: 60px; overflow-y: auto; }
.cart-right .wo-panel { flex-shrink: 0; max-height: 32vh; overflow-y: auto; }
.cart-right > .row, .cart-right > .btn { flex-shrink: 0; }
.cart-right .row.big { font-size: 17px; }

/* ---- v30.1: the PIN pad reads on LIGHT ground too ----
   .pad was styled for the dark login/lock screens; inside a white modal the
   keys were white-on-white — present, tappable, invisible. Light variant: */
.pingate .pad button { color: var(--ink); background: var(--muted);
  border: 1px solid var(--line); }
.pingate .pad button:hover { background: var(--blue-soft); border-color: var(--accent-border); }
.pingate .pad button:active { background: rgba(27, 94, 63, .15); border-color: var(--accent); }

/* ---- v32: rail group labels + rail polish (Settings & Analytics) ---- */
.rr-group { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sub); padding: 10px 10px 4px; }
.rep-rail .rr-item { width: 100%; }

/* ---- v32.1: compact list cards — a wall of inputs becomes a tidy grid ---- */
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.list-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  box-shadow: var(--shadow-sm); font: inherit; }
.list-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow); transform: translateY(-1px); }
.list-card:active { transform: translateY(0); }
.lc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.lc-count { background: var(--muted); border-radius: 999px; padding: 1px 9px; font-size: 12px;
  color: var(--sub); font-weight: 600; flex-shrink: 0; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lc-pill { background: var(--muted); border-radius: 999px; padding: 2px 9px; font-size: 12px;
  color: var(--ink-2); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.lc-add { border-style: dashed; color: var(--sub); }

/* ---- v32.2: no card-in-card in Settings — the outer horizontal panel goes
   flat; content sits on the page and the sub-cards float on their own ---- */
.set-main > .panel { background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; }
.set-main > .panel > .stone-row, .set-main .lc-grid .list-card { background: var(--card); }

/* ---- v32.3: collapsible attribute rows in the item editor ---- */
.attr-acc { border-bottom: 1px dashed var(--line); }
.attr-acc:last-child { border-bottom: none; }
.attr-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 4px;
  background: none; border: none; font: inherit; text-align: left; border-radius: 10px; }
.attr-row:hover { background: var(--blue-soft); }
.attr-name { font-weight: 600; font-size: 13.5px; flex: 0 0 150px; color: var(--ink-2); }
.attr-row .lc-chips { flex: 1; min-width: 0; }
.lc-pill.attr-on { background: var(--blue-soft); color: var(--blue-deep); font-weight: 600; }
.attr-body { padding: 4px 4px 12px 158px; animation: fade-in .12s ease-out; }
@media (max-width: 900px) { .attr-body { padding-left: 4px; } }

/* ---- v33: Pop Up — the staff alert that cannot be missed ---- */
.pop-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 2px solid var(--danger); border-radius: 14px; background: var(--danger-soft);
  color: #7F1D1D; font-weight: 600; font-size: 14px; line-height: 1.4;
  animation: pop-attn .5s ease-out; box-shadow: 0 4px 14px rgba(220, 38, 38, .18); }
.pop-banner.always { animation: pop-attn .5s ease-out, pop-pulse 2.4s ease-in-out infinite; }
.pop-ic { font-size: 18px; flex-shrink: 0; }
.pop-text { flex: 1; min-width: 0; white-space: pre-wrap; }
.pop-tag { margin-right: 4px; }
.pop-x { flex-shrink: 0; color: #7F1D1D; }
@keyframes pop-attn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes pop-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(220, 38, 38, .18); }
  50% { box-shadow: 0 4px 22px rgba(220, 38, 38, .45); } }

/* ---- v33: tighter dashboard rows (home + analytics + CRM landings) ---- */
.home-grid .panel .row, .home-grid .panel .row-link,
.rep-main .panel .row, .rep-main .panel .row-link { padding-top: 3px; padding-bottom: 3px; }
.home-grid .panel, .crm-dash .panel { gap: 8px; }
.dash-tight { gap: 6px; }

/* ---- v34: kiosk mode — customer-facing form takeover ---- */
.kiosk { position: fixed; inset: 0; z-index: 180; background: var(--ink); overflow-y: auto;
  display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px 80px; }
.kiosk-card { background: var(--card); border-radius: 24px; padding: 28px 30px; width: 640px;
  max-width: 96vw; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-pop);
  animation: pop-in .25s cubic-bezier(.2, .9, .3, 1.1); }
.kiosk-card h1 { font-size: 26px; }
.kiosk-card input, .kiosk-card select, .kiosk-card textarea { font-size: 17px; padding: 13px 15px; }
.kiosk-card .btn.big { font-size: 18px; padding: 16px; }
.kiosk-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 14px; font-size: 15px; cursor: pointer; }
.kiosk-check input { width: 22px; height: 22px; flex-shrink: 0; }
.kiosk-addr { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 8px; }
.kiosk-thanks { text-align: center; padding: 40px 0; }
.kiosk-exit { position: fixed; bottom: 14px; right: 14px; z-index: 181; background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; }
.kiosk-exit:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.pref-note { background: var(--blue-soft); color: var(--blue-deep); border-radius: 10px;
  padding: 8px 12px; font-size: 13.5px; font-weight: 600; }

/* ---- v34.1: the customer's preferred channel lights up in the notify popup ---- */
.pref-pick { box-shadow: var(--shadow-accent-lg); outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---- v34.2: attach row — detach ✕ beside the customer button ---- */
.cust-attach { flex-wrap: nowrap; align-items: center; }

/* ---- v34.3: the detach-customer ✕ becomes a REAL button — visible and
   finger-sized, not a whisper in the corner ---- */
.cust-attach .x { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 17px; font-weight: 700;
  color: var(--danger); background: var(--danger-soft); border: 1.5px solid rgba(220, 38, 38, .35);
  border-radius: 12px; }
.cust-attach .x:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ---- v35: batch pickup checkboxes ---- */
.wo-sel { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }

/* ---- v35.2: take-in final step — the one place deposit + sign-off live ---- */
.take-final { border: 1.5px solid var(--accent-2); background: linear-gradient(180deg, #FAFCFA, var(--accent-soft)); }

/* ---- v36: guided tag designer ---- */
.tag-studio { display: flex; gap: 18px; align-items: stretch; }
.tag-stage { flex: 1.4; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 14px; background: linear-gradient(180deg, #FCFDFE, #F5F8F5); }
.tag-stage-tag { min-height: 190px; display: flex; align-items: center; }
.tag-tools { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.tt-group { display: flex; align-items: center; gap: 6px; padding: 8px 14px; position: relative; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.tt-group + .tt-group { border-left: 1px solid var(--line); }
.tt-group .btn.sm { min-width: 34px; }
.tt-lbl { width: 100%; text-align: center; font-size: 11.5px; color: var(--dim); }
.on-chip { background: var(--accent-soft); outline: 1.5px solid var(--accent-2); }
.tag-opts { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.tag-opts > b { margin-bottom: 2px; }
.tagopt { display: flex; flex-direction: column; gap: 6px; }
.tagopt-sub { margin-left: 28px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.tag-gallery { display: flex; gap: 14px; flex-wrap: wrap; }
.tag-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; font: inherit; }
.tag-card.on { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.tag-card span { font-weight: 600; }

/* the dumbbell tag preview */
.tp { display: flex; align-items: center; width: 560px; height: 160px; transition: transform .2s; }
.tp.mini { width: 230px; height: 62px; }
.tp-wing { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; box-shadow: 0 2px 8px rgba(16, 36, 26,.07);
  width: 37%; height: 100%; box-sizing: border-box; padding: 8px 12px; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; overflow: hidden; }
.tp.mini .tp-wing { border-radius: 8px; padding: 3px 6px; border-width: 1px; }
.tp-wing.tp-text { width: 44%; margin-left: auto; }
.tp-neck { flex: 1; height: 30%; background: #fff; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line);
  align-self: center; margin: 0 -8px; z-index: -1; box-sizing: border-box; }
.tp.mini .tp-neck { border-width: 1px; margin: 0 -5px; }
.tp-sm { font-size: .72em; color: #111; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-c { text-align: center; }
.tp-desc { font-size: .95em; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.tp-price { font-size: 1.35em; font-weight: 700; line-height: 1.2; }
.tp-code { width: 100%; height: 44%; }
.tp.mini .tp-code { height: 50%; }
.tp-qr { width: 56%; max-height: 82%; align-self: center; }
.tp.mini .tp-qr { width: 60%; }
@media (max-width: 1100px) { .tag-studio { flex-direction: column; } .tp { width: 100%; max-width: 560px; } }

/* ---- v37: mm-accurate draggable tag surface ---- */
.tg-rot { transition: transform .2s; }
.tg-surface { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  box-shadow: 0 3px 10px rgba(16, 36, 26,.08); overflow: hidden; touch-action: none; }
.tg-guide { position: absolute; top: 0; bottom: 0; border: 1.5px dashed rgba(27, 94, 63,.22); border-radius: 10px;
  pointer-events: none; }
.tg-tail { position: absolute; top: 30%; bottom: 30%; background: repeating-linear-gradient(45deg, rgba(16, 36, 26,.04) 0 6px, transparent 6px 12px);
  border-left: 1.5px dashed rgba(16, 36, 26,.15); pointer-events: none; }
.tg-item { color: #111; }
.tg-item.grab { cursor: grab; border-radius: 4px; }
.tg-item.grab:hover { outline: 1.5px dashed var(--accent-2); outline-offset: 1px; }
.tg-item.pinned { outline: 1.5px solid var(--accent-2); outline-offset: 1px; background: rgba(27, 94, 63,.05); }

/* ---- v37: Print Labels page ---- */
.lbl-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); overflow: hidden; }
.lbl-row { padding: 9px 14px; border-bottom: 1px solid var(--line); margin: 0; cursor: pointer; }
.lbl-row:last-child { border-bottom: 0; }
.lbl-row:hover { background: var(--accent-soft); }

/* ---- v37.1: folded rat-tail — fold line between front & back panels ---- */
.tg-fold { position: absolute; top: -2px; bottom: -2px; width: 0;
  border-left: 2px dashed var(--danger, #DC2626); opacity: .45; pointer-events: none; }

/* ---- v38: per-detail resize handle ---- */
.tg-hdl { position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16, 36, 26,.3);
  cursor: nwse-resize; opacity: 0; transition: opacity .12s; touch-action: none; }
.tg-item { position: relative; }
.tg-item:hover .tg-hdl { opacity: 1; }

/* ---- v38: before/after photo slots on tickets ---- */
.ba-thumb { position: relative; display: inline-flex; flex-direction: column; }
.ba-thumb img { display: block; }
.ba-tags { position: absolute; top: 4px; left: 4px; display: flex; gap: 4px; }
.ba-tags b { font-size: 9.5px; letter-spacing: .5px; padding: 2px 6px; border-radius: 6px; color: #fff; }
.ba-b { background: var(--accent); }
.ba-a { background: var(--ok, #16A34A); }
.ba-btns { position: absolute; bottom: 4px; right: 4px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.ba-thumb:hover .ba-btns { opacity: 1; }
.ba-btns .btn.sm { min-width: 30px; padding: 2px 8px; }

/* ---- v38: receipt builder samples ---- */
.rp { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; color: #111;
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; font-size: 11px;
  box-shadow: 0 3px 10px rgba(16, 36, 26,.08); overflow: hidden; }
.tag-stage .rp { width: 300px; min-height: 220px; }
.tag-stage .rp.rp-therm { width: 190px; }
.tag-card .rp { width: 130px; height: 96px; font-size: 5.5px; padding: 6px 7px; gap: 1.5px; pointer-events: none; }
.tag-card .rp.rp-therm { width: 74px; }
.rp-logo { text-align: center; color: var(--accent); font-size: 1.6em; }
.rp-logo img { max-height: 30px; max-width: 70%; object-fit: contain; }
.tag-card .rp-logo img { max-height: 12px; }
.rp-store { text-align: center; letter-spacing: .08em; font-family: Georgia, serif; }
.rp-dim { text-align: center; color: #888; font-size: .85em; }
.rp-dim2 { color: #888; }
.rp-it { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.rp-it > span:first-child, .rp-it > span:nth-child(2) { text-align: left; }
.rp-im { flex: 0 0 auto; }
.rp-tot { border-top: 1.2px solid #111; font-weight: 800; margin-top: 2px; padding-top: 2px; }
.rp-fine { color: #999; font-size: .78em; line-height: 1.3; }
.rp-cut { border-top: 1.2px dashed #aaa; margin: 4px -14px; }
.tag-card .rp-cut { margin: 2px -7px; }
.rp-sign { border-bottom: 1.2px solid #111; height: 14px; margin-top: 8px; }
.rp-half, .rp-third { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow: hidden; }
.tag-card .rp-half, .tag-card .rp-third { gap: 1.5px; }

/* ---- v38.1: bifold landscape sample ---- */
.rp-land { flex-direction: row !important; gap: 0 !important; }
.tag-stage .rp.rp-land { width: 430px; min-height: 170px; }
.tag-card .rp.rp-land { width: 150px; height: 78px; }
.rp-land .rp-half { padding: 0 8px; }
.tag-card .rp-land .rp-half { padding: 0 4px; }
.rp-cutv { border-left: 1.2px dashed #aaa; margin: -12px 0; }
.rp-tag { letter-spacing: 1.5px; font-size: .8em; }

/* ---- v40: the take-in FINAL STEP is a sticky footer — deposit + sign-off
   can never scroll out of reach (iPad included) ---- */
.take-final { position: sticky; bottom: -16px; z-index: 6; margin: 0 -4px;
  background: linear-gradient(180deg, #FAFCFA, #ECF3ED); box-shadow: 0 -6px 18px rgba(16, 36, 26, .10); }

/* ---- v40.1: multi-select option groups align on a real grid ---- */
.chips.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.chips.opt-grid .chip { width: 100%; }

/* ---- v40.2: service-book buttons — same structured grid as the option
   chips: obvious buttons, aligned columns, price on its own line ---- */
.svc-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.svc-chip { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 10px 12px; }
.svc-chip b { font-weight: 700; line-height: 1.2; }
.svc-price { font-size: 12.5px; color: var(--sub); font-weight: 600; }
.svc-chip:hover .svc-price { color: inherit; }
.svc-chip:active { background: var(--accent); border-color: var(--accent); color: #fff; }
.svc-chip:active .svc-price { color: #fff; }

/* ---- v40.3: take-in head — four matching cells on one row ---- */
.take-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; grid-column: 1 / -1; }
.take-head .chip, .take-head input[type="date"] { height: 54px; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 600;
  border-radius: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; }
.take-head input[type="date"] { border: 1.5px solid var(--line); background: var(--card); text-align: center; }
.take-head .chip:disabled { opacity: .55; }
@media (max-width: 760px) { .take-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* every button in an option grid is the SAME size — multi-line labels included */
.chips.opt-grid { align-items: stretch; grid-auto-rows: 1fr; }
.svc-chip { justify-content: center; }

/* ---- v40.4: rush/estimate/warranty toggle cards + Job Total ---- */
.flag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flag-chip { height: 54px; font-size: 14.5px; display: flex; align-items: center; justify-content: center; }
.svc-chip.on .svc-price { color: rgba(255, 255, 255, .85); }
.job-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px;
  font-weight: 600; color: var(--ink); border-top: 1.5px solid var(--line); padding-top: 8px; }
.job-total b { font-size: 21px; letter-spacing: -.3px; }
@media (max-width: 700px) { .flag-grid { grid-template-columns: 1fr; } }

/* ---- v40.5: Work & pricing footer line + one-line Inventory Items head ---- */
.wp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1.5px solid var(--line); padding-top: 10px; }
.wp-flags { display: flex; gap: 8px; flex-wrap: wrap; }
.wp-foot .flag-chip { height: 44px; padding: 0 14px; }
.wp-foot .job-total { border-top: none; padding-top: 0; margin-left: auto; }
.stone-head.one-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; overflow: hidden; }
.stone-head.one-line b, .stone-head.one-line .dim { white-space: nowrap; }
.stone-head.one-line .dim { overflow: hidden; text-overflow: ellipsis; }

/* ---- v40.6: flag detail rows sit UNDER the toggle row, inside the card ---- */
.flag-detail { margin-top: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--accent-soft); align-items: center; }
.flag-detail .field { flex: 1; }

/* ---- v41: report filter bar + multi-select dropdowns + attribute boards ---- */
.filterbar { padding: 10px 14px; gap: 8px; }
.fb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-label { font-weight: 700; font-size: 13px; color: var(--sub); margin-right: 2px; }
.fb-margin { display: inline-flex; align-items: center; gap: 6px; }
.msel { position: relative; }
.msel-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 260px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop);
  padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.msel-pop input[type="search"] { width: 100%; }
.msel-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.msel-list .perm-row { margin: 0; padding: 5px 4px; border-radius: 8px; }
.msel-list .perm-row:hover { background: var(--accent-soft); }
.attr-sec { gap: 6px; }
.attr-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr minmax(170px, auto); gap: 12px; align-items: center; }
.attr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr-bar { background: var(--accent-soft); border-radius: 6px; height: 16px; overflow: hidden; }
.attr-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 6px; }
.attr-nums { font-size: 12.5px; color: var(--sub); text-align: right; white-space: nowrap; }

/* ---- v41.1: charts/tiles nested between the toolbar and the table ---- */
.explorer > .chartbox, .explorer > .stat-row, .explorer > .panel { box-shadow: none; }
.explorer .rangepick { margin-right: 4px; }
.explorer > h4 { margin: 8px 2px 2px; }

/* ---- v41.2: report toolbar — uniform rounded rectangles, left-aligned,
   background hugs its content ---- */
.exp-bar { width: fit-content; max-width: 100%; }
.exp-bar .rangepick { border: none; box-shadow: none; background: none; padding: 0; margin: 0 4px 0 0; width: auto; }
.exp-bar .rangepick select, .exp-bar input[type="search"], .exp-bar select { border-radius: 12px; }
.exp-bar input, .exp-bar select, .exp-bar .btn.sm { height: 42px; box-sizing: border-box; }
.exp-bar .btn.sm { padding: 0 14px; font-size: 13.5px; border-radius: 12px; display: inline-flex; align-items: center; }

/* ---- v42: analytics makeover — skeleton pieces ---- */
.ana-topbar { margin-bottom: 0; }
.ana-charts { display: flex; gap: 16px; align-items: stretch; }
.ana-primary { flex: 2.4; min-width: 0; }
.ana-share { flex: 1; min-width: 230px; display: flex; flex-direction: column; align-items: center; }
.ana-share svg { max-width: 210px; }
.ana-leg { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; align-self: stretch; }
.delta { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 8px; }
.delta.up { color: #157f4f; background: var(--ok-soft, #e4f6ec); }
.delta.dn { color: #b4232a; background: var(--danger-soft, #fde8e8); }
/* visual notes: tabular numerals + mono uppercase headers, analytics only */
.rep-main table { font-variant-numeric: tabular-nums; }
.rep-main table th { font-family: "JetBrains Mono", monospace; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .06em; color: var(--sub); }
@media (max-width: 1000px) { .ana-charts { flex-direction: column; } }

/* ---- v42.1: analytics page, rebuilt to the approved mockup ---- */
.a2 { display: flex; flex-direction: column; gap: 12px; }
.a2 .msel-pop { font-size: 12px; }
.a2-crumb { font-size: 11.5px; color: #5F7268; cursor: pointer; width: fit-content; }
.a2-crumb:hover { color: var(--accent); }
.a2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.a2-pill { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .12em;
  color: var(--accent); border: 1px solid #C4DCCC; background: #ECF3ED; border-radius: 20px; padding: 2px 9px; margin-bottom: 5px; }
.a2-title { font-family: Calistoga, Georgia, serif; font-size: 24px; line-height: 1.1; }
.a2-actions { display: flex; gap: 6px; }
.a2-btn { border: 1px solid #DFE8E1; background: #fff; border-radius: 8px; padding: 6px 11px; font-size: 12px;
  color: #2E463A; box-shadow: none; }
.a2-btn:hover { border-color: var(--accent-2); color: var(--accent); }
.a2-mlabel { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .1em; color: #5F7268; }
.a2-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #fff;
  border: 1px solid #DFE8E1; border-radius: 10px; padding: 7px 10px; font-size: 12px; }
.a2-filters .chip { padding: 5px 10px; font-size: 12px; border-radius: 8px; border-width: 1px; }
.a2-filters .rangepick { border: none; background: none; box-shadow: none; padding: 0; margin: 0; gap: 6px; }
.a2-filters .rangepick select { border-radius: 8px; padding: 5px 10px; font-size: 12px; width: auto; }
.a2-filters select.a2-sel, .a2-filters > select { border-radius: 8px; padding: 5px 10px; font-size: 12px; width: auto; }
.a2-fchip { display: inline-flex; align-items: center; gap: 4px; }
.a2-toggle { border: 1px solid #DFE8E1; background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12px; color: #2E463A; }
.a2-toggle.on { background: #ECF3ED; border-color: #C4DCCC; color: var(--accent); }
.a2-hint { margin-left: auto; color: #93A79A; font-size: 11px; }
.a2-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.a2-tile { background: #fff; border: 1px solid #DFE8E1; border-radius: 10px; padding: 10px 12px; }
.a2-big { font-size: 22px; font-weight: 550; margin: 3px 0 5px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.a2-tile-foot { display: flex; align-items: center; justify-content: space-between; min-height: 16px; }
.a2-chip { font-size: 10.5px; border-radius: 5px; padding: 1.5px 6px; font-weight: 600; }
.a2-up { background: #DCFCE7; color: #166534; }
.a2-dn { background: #FEE2E2; color: #991B1B; }
.a2-na { color: #93A79A; }
.a2-charts { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px; }
.a2-card { background: #fff; border: 1px solid #DFE8E1; border-radius: 10px; padding: 11px 13px; }
.a2-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 600; }
.a2-leg { font-size: 10.5px; color: #5F7268; font-weight: 400; display: inline-flex; align-items: center; gap: 4px; }
.a2-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
.a2-dash { display: inline-block; width: 12px; height: 0; border-top: 1.5px dashed #93A79A; margin-left: 8px; }
.a2-donut-row { display: flex; align-items: center; gap: 14px; }
.a2-donut-leg { font-size: 11px; color: #2E463A; line-height: 1.85; font-variant-numeric: tabular-nums; }
.a2-donut-leg .a2-swatch { margin-right: 6px; }
.a2-detail { padding: 0; overflow: hidden; }
.a2-detail .a2-card-head { padding: 10px 13px 7px; margin-bottom: 0; }
.a2-groupby { font-size: 11px; color: #5F7268; font-weight: 400; display: inline-flex; align-items: center; gap: 6px; }
.a2-groupby select { padding: 4px 8px; font-size: 11.5px; border-radius: 7px; width: auto; }
.a2-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.a2-table th { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .08em; color: #5F7268;
  font-weight: 500; text-align: right; padding: 6px 10px; border-top: 1px solid #DFE8E1; }
.a2-table td { text-align: right; padding: 7px 10px; border-top: 1px solid #EEF4EF; }
.a2-table .l { text-align: left; padding-left: 13px; }
.a2-table tbody tr { cursor: pointer; }
.a2-table tbody tr:hover { background: #F6F9FF; }
.a2-table .pos { color: #166534; }
.a2-table .neg { color: #991B1B; }
@media (max-width: 1000px) { .a2-charts { grid-template-columns: 1fr; } .a2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- v42.2: one analysis page — collapsible filters, group-by up top ---- */
.a2-title-dim { color: #93A79A; font-size: 16px; }
.a2-filters .a2-groupby { font-size: 12px; color: #2E463A; }
.a2-filters .a2-groupby select { padding: 5px 10px; font-size: 12px; border-radius: 8px; width: auto; }

/* ============ v45: the analytics skeleton IS the system ============
   One language on every page: hairline cards (1px slate-200, 12px radius,
   no shadow) on the off-white ground, ONE 12px gap between cards, mono
   uppercase microlabels, Calistoga page titles, compact 10px-radius
   controls, tabular numerals and mono table headers. Written as overrides
   so every earlier component rule inherits it in one place. */
:root { --gap: 12px; --r-card: 12px; --r-ctl: 10px; --hair: #DFE8E1; }

/* -- cards: one radius, one border, no lift, one gap */
.panel { border-radius: var(--r-card); border-color: var(--hair); box-shadow: none;
  padding: 14px 16px; margin-bottom: var(--gap); gap: 10px; }
.home-grid { gap: var(--gap); }
.grid2 { gap: var(--gap); }
.explorer { background: none; border: none; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; gap: var(--gap); margin-bottom: var(--gap); }
.explorer > * { margin: 0; }
.explorer > .table-wrap { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); }
.explorer > h4, .page > h4, .rep-main > h4, .a2 > h4 { font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sub); font-weight: 500; margin: 4px 0 -6px; }
.exp-bar { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: 8px 10px; margin: 0; gap: 6px; }
.exp-bar + .exp-bar { margin-top: 0; }
.exp-bar input, .exp-bar select, .exp-bar .btn.sm, .exp-bar .rangepick select {
  height: 38px; font-size: 13px; border-radius: var(--r-ctl); border-color: var(--hair); }
.exp-bar input[type="search"] { max-width: 220px; }
.chartbox { border-radius: var(--r-card); border-color: var(--hair); box-shadow: none;
  margin: 0 0 var(--gap); padding: 12px 14px; }
.chartbox .chart-bar select { border-radius: var(--r-ctl); padding: 6px 10px; font-size: 12.5px; }
.rangepick { border-radius: var(--r-card); border-color: var(--hair); box-shadow: none;
  padding: 8px 10px; margin: 0 0 var(--gap); gap: 8px; }
.rangepick select { border-radius: var(--r-ctl); padding: 7px 10px; font-size: 13px; }
.a2-filters { border-radius: var(--r-card); }
.kanban { gap: var(--gap); }
.kb-col { border-radius: var(--r-card); }
.modal { border-radius: 14px; }
.filterbar { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: none; }
.fb-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }

/* -- KPI tiles everywhere = the analytics tile */
.stat-row { gap: var(--gap); margin-bottom: var(--gap); justify-content: flex-start; }
.stat-row .stat, .stat { border-radius: var(--r-card); border-color: var(--hair); padding: 12px 14px;
  min-width: 150px; box-shadow: none; animation: none; }
.stat:hover, .stat.click:hover { box-shadow: none; border-color: #C5D3C9; }
.stat.click.on { box-shadow: none; border-color: var(--accent); }
.stat span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sub); font-weight: 500; margin-bottom: 2px; }
.stat b { font-size: 22px; font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat em { font-size: 11px; color: var(--sub); font-weight: 500; }
.stat em.down, .stat b.down { color: #991B1B; }
.drawer-embed .stat { padding: 10px 12px; min-width: 120px; }

/* -- page chrome: mono section pill over a Calistoga title, on every module */
.page-title { padding: 18px 24px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.page-title h1, .rep-title-row h1, .kiosk-card h1 { font-family: var(--font-display); font-weight: 400;
  font-size: 24px; letter-spacing: 0; line-height: 1.1; }
.rep-title-row { flex-direction: column-reverse; align-items: flex-start; gap: 5px; margin-bottom: var(--gap); }
.rep-title-row .dim { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sub); border: 1px solid var(--hair); border-radius: 6px;
  padding: 2px 7px; background: var(--card); }
/* the action / filter row under a title = the analytics top bar */
.page-head { justify-content: flex-start; background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-card); padding: 8px 10px; gap: 8px; margin-bottom: var(--gap); }
.page-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 18px; margin-right: 4px; }
.page-head .btn, .page-head select, .page-head input { min-height: 38px; }
.page-head .dim { font-size: 12px; }
.mod-sub select, .page-head select, .page-head input[type="date"] { border-radius: var(--r-ctl); }
.sec-label { border-radius: 8px; padding: 5px 12px; }

/* -- controls: one radius, hairline borders, flat hover */
input, select, textarea { border-width: 1px; border-color: var(--hair); border-radius: var(--r-ctl); }
input[type="search"] { border-radius: var(--r-ctl); }
.btn { border-radius: var(--r-ctl); border-color: var(--hair); }
.btn:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--accent-2); }
.btn.primary { border-radius: var(--r-ctl); box-shadow: none; }
.btn.primary:hover:not(:disabled) { box-shadow: none; }
.btn.sm { border-radius: 8px; }
.btn.big { border-radius: var(--r-card); }
.chip { border-width: 1px; border-radius: var(--r-ctl); }
.chip.on, .chip.on:hover { box-shadow: none; }

/* -- tables: mono headers, tabular numerals, hairline rows */
table { font-variant-numeric: tabular-nums; font-size: 13px; }
th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sub); background: #F6F9F7; padding: 9px 10px; }
td { padding: 8px 10px; border-bottom: 1px solid #EEF4EF; }
th:first-child { border-top-left-radius: var(--r-card); } th:last-child { border-top-right-radius: var(--r-card); }
/* card heads inside panels stay sans; standalone section heads went mono above */
.panel h4, .modal h4 { font-size: 12.5px; font-weight: 600; color: var(--ink); margin: 2px 0 2px; }
.rep-main > p.dim, .page > p.dim { font-size: 11.5px; color: #93A79A; margin: -4px 0 var(--gap); }

/* ---- v46: every toolbar is THE top bar — left margin, fit-content, one
   control height. Services / Inventory / B2B / Calendar / CRM / Home. ---- */
.page-head, .mod-sub, .home-ranges, .inv-tools { width: fit-content; max-width: 100%; }
.mod-nav { align-items: flex-start; margin-bottom: 0; gap: var(--gap); }
.mod-sub, .home-ranges { justify-content: flex-start; background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-card); padding: 8px 10px; gap: 8px; margin-bottom: var(--gap); }
.page-bars { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap); margin-bottom: var(--gap); }
.page-bars > .page-head, .page-bars > .inv-tools { margin-bottom: 0; }
.page-bars > .filt-pills { margin: 0; }
/* one height for every control that lives in a bar */
.page-head .btn, .page-head .chip, .page-head select, .page-head input:not([type="checkbox"]),
.mod-sub .btn, .mod-sub .chip, .mod-sub select, .home-ranges .chip,
.exp-bar .btn, .exp-bar .chip, .exp-bar select, .exp-bar input:not([type="checkbox"]),
.a2-filters button, .a2-filters select, .a2-filters input:not([type="checkbox"]), .a2-actions .a2-btn,
.rangepick select, .rangepick input {
  height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13px;
  display: inline-flex; align-items: center; box-sizing: border-box; border-radius: var(--r-ctl); }
.page-head .chip, .mod-sub .chip, .home-ranges .chip { padding-left: 12px; padding-right: 12px; }
.page-head .chips, .mod-sub .chips, .home-ranges .chips { gap: 6px; }
.page-head .row-gap { gap: 8px; }
.page-head .dim { max-width: 420px; }
.a2-filters .msel-pop button { height: auto; min-height: 0; display: block; }
/* landing tiles join the card system */
.sl-tiles { gap: var(--gap); margin-bottom: var(--gap); }
.sl-tile { border-radius: var(--r-card); box-shadow: none; }
.sl-tile:hover { transform: none; box-shadow: none; border-color: var(--accent-2); }
.stat-row .stat.click { cursor: pointer; }

/* ============ v47: Electric evolved × Coinbase controls ============
   The mockup Mike picked: Electric's identity (the login's inverted-slate
   rail, Calistoga titles, mono microlabels, drawn line icons) carrying
   Coinbase Design System control language — pill buttons and badges,
   wash-highlighted nav, segmented range toggles, flatter 16px cards on
   lighter hairlines. Light theme; colors funneled through tokens so a
   dark theme is a clean later round. */
:root { --wash: #F1F6F2; --muted: #EBF0EC; --hair: #EBF0EC; --line: #E2E9E4; --r-card: 16px; }

/* -- the rail goes inverted slate: the brand holds the left edge -- */
.side { background: var(--ink); border: none; color: #B2C1B6; box-shadow: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; }
.logo-txt b { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 16px; letter-spacing: 0; }
.logo-txt i { color: #5F7268; }
.side-ctl button { color: #5F7268; }
.nav-group { color: #5F7268; }
.nav-item { color: #B2C1B6; border-radius: 9999px; }
.nav-item .ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.on { background: var(--accent); color: #fff; }
.nav-chev { color: #5F7268; }
.nav-sub { border-left-color: rgba(255,255,255,.12); }
.nav-child { color: #8AA394; }
.nav-child:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-child.on { color: #fff; }
.nc-dot { border-color: #93A79A; }
.nav-child.on .nc-dot { background: var(--accent-2); border-color: var(--accent-2); }
.side-foot { border-top-color: rgba(255,255,255,.09); }
.user-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.user-card:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.uc-who b { color: #fff; }
.uc-who i { color: #8AA394; }
.uc-chev { color: #5F7268; }

/* -- Coinbase control language: pills -- */
.btn { border-radius: 9999px; background: var(--muted); border: 1px solid transparent; font-weight: 600; color: var(--ink); }
.btn:hover:not(:disabled) { background: #DFE5E0; border-color: transparent; color: var(--ink); box-shadow: none; transform: none; }
.btn.primary, .btn.sm, .btn.big { border-radius: 9999px; }
.btn.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn.danger:hover:not(:disabled) { background: #FBD5D5; border-color: transparent; color: var(--danger); }
.btn.ghost { background: none; }
.btn:disabled { background: var(--muted); }
.chip { border-radius: 9999px; border: 1px solid transparent; background: var(--muted); color: var(--ink-2); font-weight: 500; }
.chip:hover { background: #DFE5E0; border-color: transparent; color: var(--ink); }
.chip.on, .chip.on:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* multi-line option grids stay card-shaped — pills can't hold two lines well */
.chips.opt-grid .chip { border-radius: 14px; border: 1px solid var(--hair); background: var(--card); }
.chips.opt-grid .chip.on { background: var(--accent); border-color: var(--accent); }
input[type="search"] { border-radius: 9999px; background-color: var(--muted); border-color: transparent; }
input[type="search"]:hover { background-color: #DFE5E0; border-color: transparent; }
input[type="search"]:focus { background-color: #fff; border-color: var(--blue); }
.pill { font-weight: 600; }

/* -- segmented range toggle (Home): muted pill track, white active thumb -- */
.home-ranges { background: none; border: none; padding: 0; }
.home-ranges .chips { background: var(--muted); border-radius: 9999px; padding: 3px; gap: 2px; }
.home-ranges .chip { background: none; height: 32px; min-height: 32px; font-weight: 500; }
.home-ranges .chip.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10,11,13,.1); }

/* -- second rail (Analytics / Settings): wash-highlighted active item -- */
.rep-rail { border: 1px solid var(--hair); box-shadow: none; }
.rr-item { border-radius: 9999px; }
.rr-item.on { background: var(--wash); color: var(--accent); }
.rr-item.on .rr-dot { background: var(--accent); border-color: var(--accent); }
.rr-item:hover { background: var(--wash); color: var(--accent); }

/* -- analytics chrome follows the rounding -- */
.a2-card, .a2-tile, .a2-filters, .a2-detail { border-radius: 14px; }
.a2-btn, .a2-toggle, .a2-fchip .chip, .a2-filters .chip { border-radius: 9999px; }
.a2-toggle.on { border-color: transparent; }
.list-card:hover { transform: none; box-shadow: var(--shadow-sm); }

/* ---- v48: skeleton parity + head-to-head ---- */
.a2-tile { padding: 12px 14px; }
.panel h3 { font-size: 12.5px; font-weight: 600; color: var(--ink); margin: 2px 0; }
.h2h-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.h2h-side { display: flex; flex-direction: column; gap: 2px; }
.h2h-name { font-family: Calistoga, Georgia, serif; font-size: 21px; margin-top: 2px; }
.h2h-big { font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 2px 0; }
.h2h-sub { font-size: 11.5px; }
.h2h-tape td, .h2h-tape th { text-align: right; }
.h2h-tape .l { text-align: left; color: #5F7268; }
@media (max-width: 900px) { .h2h-grid { grid-template-columns: 1fr; } }

/* ---- v49: the analysis rail joins the theme — glyphs, wash pills, and
   perforated section dividers ---- */
.rr-group { display: flex; align-items: center; gap: 7px; }
.rr-gic { display: inline-flex; align-items: center; color: var(--sub); }
.rr-gic svg { display: block; }
.rr-home .rr-gic { color: inherit; }
.rr-sec + .rr-sec { border-top: 1px dashed #DFE8E1; margin-top: 12px; padding-top: 6px; }
.rr-home + .rr-sec { border-top: 1px dashed #DFE8E1; margin-top: 10px; padding-top: 6px; }

/* ---- v49.1: one divider voice inside every index card — the dashed rule
   from Promises due, a touch darker, on every row list ---- */
.row { border-bottom: 1px dashed #D8E2DA; }
.row-link { border-bottom: 1px dashed #D8E2DA; }
.panel .row:last-child, .panel .row-link:last-child { border-bottom: none; }

/* ---- v50: accordions · pager · narrow dashboard cards · totals row ---- */
details.acc { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); }
details.acc + details.acc { margin-top: 2px; }
details.acc summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 12px 16px; font-size: 13.5px; user-select: none; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "▾"; margin-left: auto; color: #93A79A; font-size: 12px; transition: transform .15s; }
details.acc[open] summary::after { transform: rotate(180deg); }
details.acc summary .pill, details.acc summary .dim { margin-left: auto; }
details.acc summary .pill + *, details.acc[open] summary .dim { margin-left: 0; }
details.acc summary:hover { color: var(--accent); }
details.acc .acc-body { padding: 2px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.panel > details.acc { border-color: var(--hair); background: #FBFCFE; }
/* pager under every list */
.exp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exp-foot select { width: auto; height: 34px; min-height: 34px; padding: 0 10px; font-size: 12.5px; }
.exp-foot .btn.sm { height: 34px; min-height: 34px; }
td.exp-total { font-weight: 700; border-top: 2px solid var(--line); border-bottom: none;
  font-variant-numeric: tabular-nums; background: #F6F9F7; }
/* dashboards: cards hug their content instead of stretching */
.home-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); }
.home-grid > .panel, .home-grid > .stat { flex: 0 1 auto; width: fit-content; min-width: 270px; max-width: 460px; margin-bottom: 0; }
.home-grid > .panel.chart-card { width: 380px; }
.home-grid .stone-head { gap: 16px; }

/* ---- v50.1: the sidebar pin reads its own state ---- */
.side-ctl .pin { display: inline-flex; align-items: center; }
.side-ctl .pin svg { display: block; }
.side-ctl .pin.on { color: var(--accent-2); }

/* ============ v51: LOUPE DESK (brand since renamed Bench & Counter, v62) ============
   The rebrand lands in the software: Schibsted Grotesk carries every
   voice (the serif retires), the supplied loupe lockup takes the rail
   and the lock screens, the rail returns to light with wash-highlight
   pill nav, and the canvas goes true white. Coinbase control language
   stays exactly as approved. */
:root { --bg: #FFFFFF; --font-ui: "Schibsted Grotesk", -apple-system, system-ui, "Segoe UI", Helvetica, sans-serif;
  --font-display: "Schibsted Grotesk", -apple-system, system-ui, sans-serif; }
.a2-title, .h2h-name, .page-title h1, .rep-title-row h1, .login h1, .kiosk-card h1, .logo-txt b {
  font-family: var(--font-ui); font-weight: 800; letter-spacing: -.03em; }
.a2-title { font-size: 25px; }
.topbar { background: rgba(255, 255, 255, .88); }

/* -- the rail, light again: white card, pill items, wash on the active -- */
.side { background: var(--card); border: 1px solid var(--hair); color: var(--ink-2);
  background-image: none; box-shadow: none; }
.logo-lockup { display: block; padding: 2px 2px 0; }
.logo-lockup img { width: min(196px, 100%); height: auto; display: block; }
.nav-item { color: var(--ink); }
.nav-item .ic { color: #5B616E; }
.nav-item:hover { background: var(--muted); color: var(--ink); }
.nav-item.on { background: var(--wash); color: var(--accent); }
.nav-item.on .ic { color: var(--accent); }
.nav-chev { color: #B1C2B6; }
.nav-group { color: var(--sub); }
.nav-sub { border-left-color: var(--hair); }
.nav-child { color: var(--sub); }
.nav-child:hover { color: var(--ink); background: var(--muted); }
.nav-child.on { color: var(--accent); }
.nc-dot { border-color: #C5D3C9; }
.nav-child.on .nc-dot { background: var(--accent); border-color: var(--accent); }
.side-foot { border-top-color: var(--hair); }
.user-card { background: var(--card); border-color: var(--hair); }
.user-card:hover { background: #FCFCFD; border-color: #C5D3C9; }
.uc-who b { color: var(--ink); }
.uc-who i { color: var(--sub); }
.side-ctl button { color: #B1C2B6; }

/* -- the lock screens: wash brand panel + light pad (per the canvas) -- */
.login { flex-direction: row; background: var(--card); color: var(--ink); gap: 0; overflow: hidden; }
.login::before, .login::after, .login-ring { display: none; }
.login-brand { width: 39%; min-width: 380px; align-self: stretch; background: var(--wash);
  border-right: 1px solid var(--hair); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 26px; padding: 48px; }
.login-brand img { width: min(360px, 76%); height: auto; }
.lb-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lb-micro { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--accent); }
.lb-meta b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.lb-meta span:last-child { font-size: 12.5px; color: var(--sub); }
.login-side { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px; }
.login h1 { font-size: 24px; color: var(--ink); }
.login .dim { color: var(--sub); font-size: 13.5px; }
.login .dot { border-color: #CED2DB; }
.login .dot.on { background: var(--accent); border-color: transparent; box-shadow: none; }
.login .pad { grid-template-columns: repeat(3, 78px); gap: 15px; }
.login .pad button { height: 78px; border-radius: 9999px; border: none; background: var(--muted);
  color: var(--ink); font-size: 24px; font-weight: 500; backdrop-filter: none; -webkit-backdrop-filter: none; }
.login .pad button:hover { background: #DFE5E0; border-color: transparent; }
.login .pad button:active { background: #D9E8DD; transform: scale(.96); }
.login .err { color: var(--danger); }
@media (max-width: 860px) {
  .login { flex-direction: column; }
  .login-brand { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--hair); padding: 26px; gap: 12px; }
  .login-brand img { width: 220px; }
}

/* ---- v51.2: the cart (and its neighbors) join the theme — hairline cards,
   flat hover, wash highlights, aligned modal form pairs ---- */
.ptile { border-radius: var(--r-card); border-color: var(--hair); box-shadow: none; }
.ptile:hover { transform: none; box-shadow: none; border-color: var(--accent-2); }
.ptile:active { transform: scale(.98); box-shadow: none; }
.ptile span { color: var(--accent); }
.pos-tiles { border-radius: var(--r-card); border-color: var(--hair); }
.wo-panel { border-radius: var(--r-card); border-color: var(--hair); background: var(--wash); }
.cart-right { box-shadow: none; border-left: 1px solid var(--hair); }
.saleshub .cart-right { border-color: var(--hair); }
.cart-lines .row.click:hover { background: var(--wash); }
.btn.primary.tb-cart, .btn.primary.tb-cart:hover:not(:disabled) { box-shadow: none; }
.kb-card { border-radius: var(--r-card); border-color: var(--hair); }
.kb-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.kb-card:active { transform: scale(.99); }
.kb-col { background: var(--muted); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kb-foot select { border-radius: var(--r-ctl); }
.fdrop-menu { border-radius: var(--r-card); border-color: var(--hair); }
.fdrop-opt:hover { background: var(--wash); }
.filt-pill { background: var(--wash); color: var(--accent); }
.row-link:hover { background: var(--wash); color: var(--accent); }
.stat.click.on { box-shadow: none; }
.pac-container { border-color: var(--hair); }
/* form pairs in modals: inputs align even when one label wraps to two lines */
.modal .grid2, .modal .grid4 { align-items: end; }

/* ============ v51.3: ONE card skeleton on every dashboard ============
   Mike: fit-content cards went ragged. The rule now: dashboards are a real
   grid of UNIFORM card columns (like the canvas), each card capped near
   400px so a label and its number always sit close together — never a
   word on the left edge and a figure across the monitor. */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 400px));
  gap: var(--gap); align-items: start; }
.home-grid > .panel, .home-grid > .stat { width: auto; min-width: 0; max-width: none;
  flex: none; margin-bottom: 0; }
.home-grid > .panel.chart-card { width: auto; }
/* KPI tiles: uniform columns, capped width, ranked left */
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 265px));
  gap: var(--gap); align-items: stretch; margin-bottom: var(--gap); }
.stat-row .stat, .stat { width: auto; min-width: 0; max-width: none; flex: none; }
/* a2 tiles share the same discipline (they already sit in a 4-col grid; cap
   their stretch on very wide monitors) */
.a2-tiles { max-width: 1240px; }
.a2-charts { max-width: 1240px; }
/* standalone row-list panels (EOD tenders, drawers, leads stages…) never
   span the monitor — rows stay readable */
.rep-main:not(.set-main) > .panel { max-width: 640px; }
.rep-main:not(.set-main) > .panel.wide { max-width: none; }

/* ---- v52.2 — the analytics stack shares one edge: tiles and chart rows
   stretch to meet the table card below them, on every report ---- */
.a2-tiles, .a2-charts { max-width: none; }

/* ============ v53: THE CLIENT BOOK ============
   CRM overhaul: saved-view rail + dense book table, the three-column
   customer record, merge review, the Today queue, and the counter card. */
/* -- views rail -- */
.bk-grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .bk-grid { grid-template-columns: 1fr; } }
.bk-views { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 12px 8px; }
.bk-vlabel { padding: 2px 11px 6px; }
.bk-vsec { border-top: 1px dashed #D8E2DA; margin-top: 10px; padding-top: 10px; }
.bk-vitem { display: flex; flex: 1; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 11px; border: none; background: none; border-radius: 9999px; font: inherit; font-size: 13px;
  color: var(--ink-2); cursor: pointer; text-align: left; }
.bk-vitem:hover { background: var(--muted); }
.bk-vitem.on { background: var(--wash); color: var(--accent); font-weight: 600; }
.bk-vitem .ct { font-family: var(--font-mono); font-size: 10.5px; color: var(--sub); }
.bk-vitem.on .ct { color: var(--accent); }
/* -- bulk bar -- */
.bk-bulk { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 18px; background: var(--ink);
  color: #fff; border-radius: 9999px; font-size: 13px; margin-bottom: var(--gap); }
.bk-bulk .btn.sm { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
.bk-bulk .btn.sm:hover:not(:disabled) { background: rgba(255, 255, 255, .22); border-color: transparent; color: #fff; }
.bk-bulk .btn.sm:disabled { opacity: .45; }
/* -- book table atoms -- */
.bk-cbx { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 5px; border: 1.5px solid #C5D3C9; color: #fff; font-size: 10px; font-weight: 700; }
.bk-cbx.on { background: var(--accent); border-color: var(--accent); }
.bk-av { border-radius: 9999px; background: var(--muted); color: var(--ink-2); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.bk-av.vip { background: var(--accent); color: #fff; }
.bk-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bk-who b { display: block; line-height: 1.25; font-size: 13px; }
.bk-who span { font-size: 11.5px; color: var(--sub); display: block; }
.pill.vip { background: var(--ink); color: #fff; }
/* -- record layout -- */
.bk-rec { display: grid; grid-template-columns: 272px minmax(0, 1fr) 266px; gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .bk-rec { grid-template-columns: 1fr; } }
.bk-id { text-align: center; padding: 16px 15px 13px; }
.bk-id .bk-av { display: flex; margin: 0 auto 9px; }
.bk-id h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.bk-sect { border-top: 1px dashed #D8E2DA; padding: 11px 15px; }
.bk-sect > .a2-mlabel { margin-bottom: 7px; }
.bk-frow { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px; align-items: center; }
.bk-frow .k { color: var(--sub); flex-shrink: 0; }
.bk-frow .v { text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.bk-inline { border: none; border-bottom: 1px dashed transparent; border-radius: 0; background: none; padding: 0;
  text-align: right; font-size: 12.5px; font-weight: 500; width: 130px; min-height: 0; height: auto; color: var(--ink); }
.bk-inline:hover, .bk-inline:focus { border-bottom-color: var(--accent); box-shadow: none; outline: none; }
.bk-hbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--hair);
  border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; }
@media (max-width: 1250px) { .bk-hbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bk-hcell { background: #fff; padding: 10px 13px; min-width: 0; }
.bk-hcell b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 3px; }
.bk-hcell em { font-style: normal; font-size: 10.5px; color: var(--sub); }
.bk-tl { position: relative; padding-left: 24px; }
.bk-tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: var(--hair); }
.bk-tli { position: relative; padding-bottom: 12px; font-size: 12.5px; }
.bk-tli::before { content: ""; position: absolute; left: -20px; top: 4px; width: 9px; height: 9px;
  border-radius: 9999px; background: #fff; border: 2px solid var(--line); }
.bk-tli time { font-family: var(--font-mono); font-size: 10px; color: var(--sub); float: right; margin-left: 10px; }
.bk-cells { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.bk-cell { background: var(--muted); border-radius: 10px; padding: 7px 10px; min-width: 0; }
.bk-cell b { font-size: 14px; font-variant-numeric: tabular-nums; display: block; }
/* -- Today queue -- */
.bk-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start;
  max-width: 1240px; }
@media (max-width: 1000px) { .bk-today { grid-template-columns: 1fr; } }
.bk-tcard { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: 11px 13px; margin-bottom: 9px; }
/* -- merge review -- */
.bk-mrow { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; align-items: center;
  padding: 7px 14px; border-bottom: 1px dashed #D8E2DA; font-size: 12.5px; }
.bk-mrow:last-child { border-bottom: none; }
.bk-pick { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--line);
  background: #fff; border-radius: 9999px; padding: 6px 12px; font: inherit; font-size: 12.5px;
  cursor: pointer; text-align: left; color: var(--ink); }
.bk-pick.blank { color: #93A79A; }
.bk-pick.on { border-color: var(--accent); background: var(--wash); color: var(--accent); font-weight: 600; }
.bk-pick .rd { width: 13px; height: 13px; border-radius: 9999px; border: 1.5px solid #C5D3C9;
  flex-shrink: 0; box-sizing: border-box; }
.bk-pick.on .rd { border: 4.5px solid var(--accent); }
/* -- counter card (register) -- */
.bk-ctx { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.bk-hint { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; background: var(--wash);
  border: 1px solid #E1EAFF; border-radius: 12px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.bk-hint b { color: var(--accent); }

/* ============ v54: CRM round 2 ============
   Follow-ups (dashed suggestions vs committed), the inbox page with a
   context rail, internal notes, bulk-text review. */
.bk-tcard.sug { border-style: dashed; border-color: #C2D1C6; background: #FBFCFE; }
.inbox.ib-full { display: grid; grid-template-columns: 260px minmax(0, 1fr) 250px; gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .inbox.ib-full { grid-template-columns: 220px minmax(0, 1fr); } .inbox.ib-full .ib-ctx { display: none; } }
.ib-ctx { display: flex; flex-direction: column; gap: 10px; }
.ib-note { align-self: stretch; background: #FEF9C3; border: 1px dashed #EAD98B; border-radius: 12px;
  padding: 8px 12px; margin: 4px 24px; font-size: 12.5px; line-height: 1.45; }
.ib-note .a2-mlabel { display: block; color: #A16207; margin-bottom: 2px; }
.ib-note .dim { display: block; font-size: 10.5px; margin-top: 3px; }

/* ============ v55: SETTINGS OVERHAUL + board search ============ */
/* -- Services board search -- */
.wo-search { display: inline-flex; align-items: center; gap: 2px; }
.wo-search input { width: 300px; max-width: 46vw; }
/* -- registry section template: label · help · right-aligned control -- */
.st-sec { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: var(--gap); align-items: start; max-width: 1040px; }
@media (max-width: 1000px) { .st-sec { grid-template-columns: 1fr; } }
.st-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-rail { display: flex; flex-direction: column; gap: 12px; }
.st-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
  padding: 13px 0; border-bottom: 1px dashed #D8E2DA; }
.st-row:last-child { border-bottom: none; }
.st-lab { min-width: 0; max-width: 56%; }
.st-lab b { font-size: 13.5px; }
.st-lab p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; }
.st-ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 220px; justify-content: flex-end; }
.st-ctl input, .st-ctl select { width: auto; min-width: 130px; }
.st-saved { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--ok); }
.st-inherit { display: inline-block; margin-top: 4px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: #93A79A; background: none; border: none; padding: 0; }
.st-inherit.click { color: var(--accent); cursor: pointer; }
.st-sub { padding: 4px 0 12px 0; border-bottom: 1px dashed #D8E2DA; }
.st-savebar { position: sticky; bottom: 12px; display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; border-radius: 9999px; padding: 9px 10px 9px 18px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(10, 11, 13, .18); }
.st-savebar .btn { background: rgba(255, 255, 255, .12); color: #fff; }
.st-savebar .btn.primary { background: var(--accent); }
.st-savebar span { flex: 1; }
.st-danger { border: 1px solid #F4C7C7; background: #FEF7F7; border-radius: var(--r-card); padding: 12px 16px; }
/* v65: Taxes page — rates and groups split into clean, self-contained cards */
.tax-card { gap: 0; }
.tax-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.tax-title { display: flex; align-items: center; gap: 9px; }
.tax-title b { font-size: 15px; }
.tax-step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  flex-shrink: 0; border-radius: 7px; background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.tax-count { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); background: var(--wash); border-radius: 9999px; padding: 3px 9px; }
.tax-lede { font-size: 12px; line-height: 1.55; margin: 4px 0 14px; max-width: 62ch; }
.tax-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.tax-rate { border: 1px solid var(--hair); border-radius: 13px; padding: 12px 14px 6px;
  background: linear-gradient(180deg, #FCFDFE, #F6F9F6); }
.tax-group { border: 1px solid var(--hair); border-radius: 15px; padding: 14px;
  background: linear-gradient(180deg, #FCFDFE, #F5F8F5); }
.tax-group.is-default { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border) inset; }
.tax-picks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 8px;
  padding-top: 10px; border-top: 1px dashed #D8E2DA; }
.tax-applies { font-size: 11.5px; color: var(--muted-ink, #6B7C71); font-family: var(--font-mono);
  letter-spacing: .01em; }
/* -- settings home -- */
.st-hits { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 36, 26, .12);
  overflow: hidden; display: flex; flex-direction: column; }
.st-hit { display: flex; flex-direction: column; gap: 1px; text-align: left; background: none; border: none;
  font: inherit; padding: 9px 14px; cursor: pointer; border-bottom: 1px dashed #EBF2EC; }
.st-hit:last-child { border-bottom: none; }
.st-hit.on { background: var(--wash); }
.st-hit b { font-size: 13px; }
.st-hit span { font-size: 11.5px; }
.st-hit i { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  color: var(--accent); text-transform: uppercase; }
.st-flagcard { display: flex; align-items: center; gap: 14px; cursor: pointer; font: inherit;
  border-color: #F4C7C7; }
.st-meter { width: 120px; height: 8px; border-radius: 9999px; background: var(--muted); overflow: hidden; flex-shrink: 0; }
.st-meter i { display: block; height: 100%; background: var(--accent); border-radius: 9999px; }
/* -- people & permissions -- */
.st-banner { display: flex; align-items: center; gap: 14px; background: #FEF2F2; border: 1px solid #F4C7C7;
  border-radius: var(--r-card); padding: 12px 16px; }
.st-permgrid th, .st-permgrid td { font-size: 12px; }
.st-permgrid td { padding: 6px 10px; }

/* ---- v55.3: one toolbar per list — skeleton parity ---- */
.a2-search { width: 190px; border-radius: 9999px; background-color: var(--muted); border-color: transparent; }
.a2-search:focus { background-color: #fff; border-color: var(--blue); }

/* ============ v57: Home — "Pace & goals" ============ */
.pace-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.pace-hrow { display: flex; align-items: center; gap: 8px; }
.pace-big { font-size: 32px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pace-key { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sub); }
.pace-key i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.pace-delta { border-radius: 9999px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; white-space: nowrap; }
.pace-up { background: var(--ok-soft); color: #15803D; }
.pace-down { background: var(--danger-soft); color: #B91C1C; }
.pace-flat { background: var(--muted); color: var(--sub); }
.pace-warn { background: var(--warn-soft); color: #854D0E; }
.pace-vrow { display: flex; align-items: baseline; gap: 8px; }
.pace-goal { background: var(--wash); }
.pace-bar { height: 10px; background: #fff; border: 1px solid var(--line); border-radius: 5px; position: relative; margin: 10px 0 6px; }
.panel:not(.pace-goal) .pace-bar { background: var(--wash); border-color: transparent; height: 8px; margin: 0; }
.pace-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 5px; }
.pace-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; }
.panel:not(.pace-goal) .pace-mark { top: -3px; bottom: -3px; }
.pace-goalrows .row { font-size: 12.5px; }
.pace-goalrows .row .num { font-family: var(--font-mono); font-size: 11.5px; }
.pace-tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); align-items: stretch; }
.pace-rep { margin-bottom: 10px; }
.pace-mix { display: flex; align-items: center; gap: 14px; }
.pace-mixleg { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pace-mixleg .pace-key { color: var(--ink); }
.pace-lab { border-top: 1px dashed #D8E2DA; margin-top: 10px; padding-top: 8px; }
.pace-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.pace-split > span { background: #0EA5E9; border-radius: 4px; }
.pace-split > .nat { flex: 1; background: #BFCFC3; }
.pace-stage { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pace-stlab { width: 82px; color: var(--sub); font-size: 11.5px; }
.pace-stbar { flex: 1; height: 13px; background: var(--wash); border-radius: 4px; overflow: hidden; }
.pace-stbar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
@media (max-width: 1000px) { .pace-hero { grid-template-columns: 1fr; } }
/* v57: collections landing cards */
.col-card { text-align: left; cursor: pointer; }
.col-card:hover { border-color: var(--accent-2); }

/* ---- v57.1: lock screens — logo-only brand panel, a clean 50/50 split ---- */
@media (min-width: 861px) {
  .login-brand { width: 50%; min-width: 0; flex: 0 0 50%; }
}

/* ============ v58: configuration design language ============
   Config lists are NARROW (capped column), dense, and quiet: drag-handle
   rows on dashed dividers, inline rename, hover-revealed actions, mono
   tabular prices. Data/Explorer lists keep full width — this is for
   configuration surfaces only. */
.cfg-col { width: 100%; max-width: 720px; }
.cfg-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; min-height: 42px;
  border-bottom: 1px dashed #D8E2DA; }
.cfg-row:last-child { border-bottom: none; }
.cfg-row.dragging { opacity: .55; background: var(--wash); border-radius: 8px; }
.cfg-handle { color: #BFCFC3; cursor: grab; flex: 0 0 auto; display: flex; align-items: center; touch-action: none; }
.cfg-handle:active { cursor: grabbing; }
.cfg-name { border: none; background: transparent; font: inherit; font-weight: 600; font-size: 13.5px;
  padding: 5px 8px; border-radius: 8px; flex: 1; min-width: 0; width: auto; color: var(--ink); }
.cfg-name:hover { background: var(--muted); }
.cfg-name:focus { background: #fff; box-shadow: var(--ring); outline: none; }
.cfg-badge { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sub); background: var(--muted); border-radius: 9999px; padding: 3px 9px; white-space: nowrap; flex: 0 0 auto; }
.cfg-badge.on { background: var(--wash); color: var(--accent); }
.cfg-acts { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .12s; flex: 0 0 auto; }
.cfg-row:hover .cfg-acts, .cfg-row:focus-within .cfg-acts { opacity: 1; }
.cfg-acts button { background: none; border: none; color: var(--sub); font-size: 13px; padding: 5px 7px;
  border-radius: 8px; cursor: pointer; line-height: 1; }
.cfg-acts button:hover { background: var(--muted); color: var(--ink); }
.cfg-acts button.danger:hover { background: var(--danger-soft); color: var(--danger); }
.cfg-add { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 12.5px;
  padding: 9px 4px; text-align: left; cursor: pointer; font-family: inherit; }
.cfg-add:hover { text-decoration: underline; }
.cfg-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px;
  margin-left: auto; flex: 0 0 auto; }
/* -- service book catalogue -- */
.svc-search { position: sticky; top: 0; background: var(--card); z-index: 2; padding: 2px 0 10px; }
.svc-search input { border-radius: 9999px; height: 38px; }
.svc-cathead { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
  padding: 11px 4px; cursor: pointer; font: inherit; color: var(--ink); border-bottom: 1px dashed #D8E2DA; }
.svc-cathead b { font-size: 13.5px; letter-spacing: -.01em; }
.svc-cathead .fdrop-caret { margin-left: auto; }
.svc-catbody { padding: 0 0 4px 14px; }
.svc-catof { color: var(--sub); font-size: 11px; flex: 0 0 auto; }
.svc-quick { color: var(--accent); font-size: 11px; flex: 0 0 auto; }
.svc-editrow { background: var(--wash); border-radius: 10px; padding: 10px 12px; margin: 4px 0; }
/* -- shopify-style option rows (matrix + item attributes) -- */
.opt-sum { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none;
  padding: 9px 4px; cursor: pointer; font: inherit; text-align: left; border-bottom: 1px dashed #D8E2DA; }
.opt-sum b { font-size: 13px; flex: 0 0 auto; }
.opt-sum .sum { color: var(--sub); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-body { padding: 8px 4px 12px; border-bottom: 1px dashed #D8E2DA; }
.attr-sum { color: var(--sub); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: left; }
.attr-sum b { color: var(--ink); font-weight: 600; }

/* ---- v58.1: alignment polish ---- */
/* KPI cards: every card carries the same internal rhythm, so the value rows
   and context lines sit on one baseline whether or not a delta pill exists */
.stat .pace-vrow { min-height: 30px; align-items: center; }
.stat em { min-height: 17px; }

/* ============ v59: ONE TYPE SCALE (tokens, not raw px) ============
   The drift Mike flagged (CRM Today + Calendar smaller than the rest) ends
   here: sizes come off this ladder, and drifted classes are re-based on it. */
:root {
  --fs-display: 38px;  /* hero metric numbers */
  --fs-xl: 21px;       /* KPI card values */
  --fs-lg: 17px;       /* section values, strip numbers */
  --fs-title: 15px;    /* page & section titles */
  --fs-body: 13.5px;   /* body content, table cells */
  --fs-sm: 12.5px;     /* controls, chips, secondary rows */
  --fs-label: 11.5px;  /* card labels, captions */
  --fs-micro: 10.5px;  /* mono micro-labels, table headers */
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.5;
}
body { font-size: var(--fs-body); }
.fs-title { font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em; line-height: var(--lh-snug); }
.fs-body { font-size: var(--fs-body); }
.fs-sm { font-size: var(--fs-sm); }
.fs-label { font-size: var(--fs-label); }
.mono-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
/* shared anatomy re-based on the ladder */
.stone-head b, .modal-head h3 { font-size: var(--fs-title); }
.stat b { font-size: var(--fs-xl); }
.stat span { font-size: var(--fs-micro); }
.stat em { font-size: var(--fs-label); }
.pace-big { font-size: var(--fs-display); }
.a2-mlabel, .a2-pill, .rep-main table th, .a2-table th { font-size: var(--fs-micro); }
.chip, .btn.sm { font-size: var(--fs-sm); }
/* the two drifted surfaces, raised to the ladder */
.cal-daynum { font-size: var(--fs-sm); }
.cal-evt { font-size: var(--fs-sm); }
.cal-head { font-size: var(--fs-body); }
.bk-frow, .bk-mrow, .bk-tli, .bk-pick { font-size: var(--fs-body); }
.bk-who b { font-size: var(--fs-body); }
.bk-who span, .bk-hcell em { font-size: var(--fs-label); }
.bk-cell b { font-size: var(--fs-title); }
.bk-id h2 { font-size: var(--fs-lg); }
.bk-tcard { font-size: var(--fs-body); }

/* ---- v59: analytics landing bits ---- */
.ana-deeper { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-colwide { max-width: 980px; }
.ana-landing .stat { display: flex; flex-direction: column; }

/* ---- v59: dashboard view editor (exempt from the narrow-column rule) ---- */
.dbe { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
.dbe-cards { display: flex; flex-direction: column; gap: 6px; }
.dbe-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--hair); border-radius: 10px;
  padding: 8px 12px; font-size: var(--fs-sm); cursor: pointer; background: #fff; }
.dbe-card b { font-size: var(--fs-sm); }
.dbe-card.on { border-color: var(--accent); background: var(--wash); }
.dbe-ghost { border: 1.5px dashed #C2D1C6; border-radius: 10px; padding: 9px 12px; color: #93A79A;
  font-size: var(--fs-sm); text-align: center; }
.dbe-rail { position: sticky; top: 70px; background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-card); padding: 12px; max-height: calc(100vh - 120px); overflow: auto; }
.dbe-lib { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px;
  border-radius: 10px; cursor: pointer; border-bottom: 1px dashed #D8E2DA; }
.dbe-lib:hover, .dbe-lib.on { background: var(--wash); }
@media (max-width: 1000px) { .dbe { grid-template-columns: 1fr; } .dbe-rail { position: static; max-height: none; } }

/* ---- v59.1: Today queue legibility — titles lead, actions go quiet ---- */
.tq-name { font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em; cursor: pointer;
  line-height: var(--lh-snug); min-width: 0; overflow-wrap: anywhere; }
.tq-name:hover { color: var(--accent); }
.tq-why { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-body); }
.tq-acts { display: flex; gap: 4px; margin-top: 9px; align-items: center; }
.tq-follow { border: none; background: var(--wash); color: var(--accent); cursor: pointer;
  font: 600 var(--fs-sm)/1 var(--font-ui); border-radius: 9999px; padding: 8px 15px; }
.tq-follow:hover { background: #E3ECFF; }
.tq-ghost { border: none; background: none; color: var(--sub); cursor: pointer;
  font: 500 var(--fs-sm)/1 var(--font-ui); border-radius: 9999px; padding: 8px 11px; }
.tq-ghost:hover { background: var(--muted); color: var(--ink); }
.bk-tcard { padding: 13px 15px; }
.bk-today { gap: 16px; }

/* ---- v59.2: touch devices have no hover — row actions stay visible ---- */
@media (hover: none) {
  .cfg-acts { opacity: 1; }
}

/* ---- v60.1: three visual fixes ----
   1. avatar initials sit dead-center: pin line-height and kill inherited
      tracking so font metrics can't push the glyphs off the middle
   2. a chosen stone origin is the STANDARD solid accent chip (the old
      white-when-satisfied override retires)
   3. the inbox 3-column grid gives the list its column width — the fixed
      300px flex width was spilling 40px under the thread pane */
.bk-av { line-height: 1; letter-spacing: 0; text-align: center; }
.chip.on.req { background: var(--accent); color: #fff; border-color: transparent; }
.inbox.ib-full .ib-list { width: auto; flex: none; max-height: none; }

/* ============ v62: BENCH & COUNTER ============
   The rebrand lands in the software: forest green (#1B5E3F, deep #02301A)
   replaces Electric Blue as THE accent, amber #C97901 is the warm second
   voice (the ampersand's color), and the neutrals warm from slate to
   green-gray. The lock screens wear the new brand: a deep forest panel
   carrying the LIGHT lockup, warm paper on the pad side. Layout stays the
   approved v57.1 logo-only 50/50. */
.login-brand { background: radial-gradient(120% 95% at 28% 18%, #0B4527 0%, #02301A 60%);
  border-right: none; }
.login-brand img { width: min(400px, 78%); }
.login-side { background: #FCFBF7; align-self: stretch; }
@media (max-width: 860px) { .login-brand { border-bottom: none; } }