/* Capital Shots Agent Portal — components + layout
 * Order matches the cascade: reset → typography → primitives → patterns → app.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Geist+Mono:wght@400..600&family=Onest:wght@400;500;600;700;800&display=swap');
@import url('./tokens.css');

/* ───── Reset (tight, not normalize-all) ─────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  color: var(--ink);
  background: var(--bg);
  font-size: calc(15px * var(--text-scale, 1));
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }
::selection { background: var(--brand); color: #FFFFFF; } /* Dom 2026-08-24: selected text was near-invisible on the 8% tint — full brand red behind white, both themes */

/* ───── Typography utilities ─────────────────────────────── */
.h1 { font-size: clamp(28px, 3.5vw, 40px); line-height: var(--leading-tight); letter-spacing: -.03em; font-weight: 700; margin: 0; }
.h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: var(--leading-snug); letter-spacing: -.025em; font-weight: 700; margin: 0; }
.h3 { font-size: calc(18px * var(--text-scale, 1)); line-height: var(--leading-snug); letter-spacing: -.02em; font-weight: 600; margin: 0; }
.kicker { font-size: calc(12px * var(--text-scale, 1)); letter-spacing: normal; text-transform: none; color: var(--ink-3); font-weight: 500; }
.muted { color: var(--ink-3); }
.eyebrow { font-size: calc(12px * var(--text-scale, 1)); letter-spacing: normal; text-transform: none; color: var(--ink-3); font-weight: 500; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }

/* ───── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 11px 18px;
  font-size: calc(14px * var(--text-scale, 1)); font-weight: 500;
  border-radius: var(--r-2);
  letter-spacing: var(--tracking-normal);
  background: var(--bg-elevated);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  /* SITE STYLE RULING 20b (Dom 2026-08-29): "no two lines in buttons please
   * anywhere". The guard lives on the FAMILY so a new call site cannot
   * reintroduce a wrapping label by accident. When a label no longer fits, the
   * fix is a shorter label / a wider control / an icon — never a second line.
   * See STYLEBOARD.md. */
  white-space: nowrap;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.btn:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
/* 065 B9/B6 — icon+label buttons: proper-size icon aligned with the label
 * (replaces tiny inline glyphs like the old ⟳). */
.btn-icon-text { display: inline-flex; align-items: center; gap: 7px; }
.btn-ico { flex: none; width: 16px; height: 16px; }

/* 065 G32 — no number-input spinners anywhere (cheap-looking; anything that
 * truly wants steppers builds its own control). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* CS-PLAT-09/listings-ux (Dom 2026-08-23): "white elements on the red
 * buttons". --brand-ink is white in light and #16181B in dark, which is right
 * for chips/ticks on brand-tinted grounds but wrong for a SOLID red button —
 * in dark the label went near-black on red. Buttons therefore pin their own
 * ink to white in BOTH themes; the token itself is untouched for every other
 * use (see also .csx-btn-primary / .ad-btn-primary). */
.btn-primary {
  background: var(--brand); color: #FFFFFF;
  border-color: transparent;
}
.btn-primary:hover { background: var(--brand-hover); color: #FFFFFF; }
.btn-primary svg, .btn-primary .btn-ico { color: #FFFFFF; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--ink); }

/* Brand back button — solid orange, unmistakable on the paper surface */
.btn-back {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;   /* ruling 20b */
  background: var(--brand);
  color: var(--brand-ink);
  border: 1px solid var(--brand);
  border-radius: var(--r-pill);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease), color var(--t-base) var(--ease);
}
.btn-back:hover {
  background: var(--brand-hover);
  color: var(--brand-ink);
  border-color: var(--brand-hover);
  transform: translateX(-1px);
}
.btn-back:active { transform: translateX(-3px); }

.btn-danger { background: transparent; border-color: var(--line); color: var(--err); }
.btn-danger:hover { background: color-mix(in srgb, var(--err) 8%, transparent); border-color: color-mix(in srgb, var(--err) 32%, transparent); }

.btn-icon { padding: 9px; width: 36px; height: 36px; }
.btn-sm { padding: 7px 12px; font-size: calc(13px * var(--text-scale, 1)); }
.btn-lg { padding: 14px 22px; font-size: calc(15px * var(--text-scale, 1)); border-radius: var(--r-3); }

/* ───── Inputs ───────────────────────────────────────────── */
.input, .textarea, .select {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: calc(14px * var(--text-scale, 1));
  color: var(--ink);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--line-strong); }
/* Form-control :focus handled once, globally, by the teal --focus-ring-* rule
 * at the end of this file (065 B/Lead). Never re-add a per-control rose focus. */
.input-lg { padding: 14px 18px; font-size: calc(15px * var(--text-scale, 1)); border-radius: var(--r-3); }
.textarea { resize: vertical; min-height: 88px; line-height: var(--leading-body); }

.field { display: block; margin-bottom: var(--sp-4); }
.field-label {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  color: var(--ink-3); letter-spacing: normal; text-transform: none;
  margin-bottom: var(--sp-2);
}
.field-help { margin-top: 6px; font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); line-height: var(--leading-snug); }
.field-error { margin-top: 6px; font-size: calc(12px * var(--text-scale, 1)); color: var(--err); }

/* Switch */
.switch {
  --w: 36px; --h: 20px;
  position: relative; width: var(--w); height: var(--h);
  background: var(--line-strong); border-radius: var(--r-round);
  transition: background var(--t-base) var(--ease);
  cursor: pointer; flex: 0 0 auto;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: calc(var(--h) - 4px); height: calc(var(--h) - 4px);
  background: #fff; border-radius: 50%;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease);
}
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"]::after { transform: translateX(calc(var(--w) - var(--h))); }

/* ───── Card / Panel ─────────────────────────────────────── */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card-pad   { padding: var(--sp-5); }
.card-pad-lg{ padding: var(--sp-8); }

.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-6);
}

/* ───── Badge ────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: .04em;
  background: var(--bg-sunken);
  color: var(--ink-2);
  border-radius: var(--r-pill);
}
.badge-ok    { background: color-mix(in srgb, var(--ok) 12%, transparent);  color: var(--ok); }
.badge-warn  { background: color-mix(in srgb, var(--warn) 10%, transparent);  color: var(--warn); }
.badge-err   { background: color-mix(in srgb, var(--err) 10%, transparent);   color: var(--err); }
.badge-brand { background: var(--brand-soft);    color: var(--brand-deep); }
.badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .6;
}

/* ───── App nav (top tabs + user) ─────────────────────────── */
/* ONE top bar — Claude-app style: solid, hairline, 48px (C2C 053 §Chrome). */
.app-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .app-nav {
  background: var(--bg-elevated);
  border-bottom-color: var(--line);
}

/* Real logo replaces the dot+wordmark on /cs/* */
.cs-brand-logo {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  padding: 4px 0;
}
.cs-brand-logo img {
  height: 26px; width: auto; display: block;
}
.cs-brand-logo .cs-nav-marker {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-deep);
  padding: 2px 6px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
html[data-theme="dark"] .cs-brand-logo .cs-nav-marker {
  color: #92e8ba;
  background: rgba(92,240,168,.14);
}
.app-nav-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 1440px; margin: 0 auto;
  padding: 0 var(--sp-5);
  height: var(--topbar-h);
}
.app-nav-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.app-nav-brand .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}

/* A1 — Capital Shots wordmark lockup. /* 065 Group-B (Dom 07-14): emerald trailing-period device removed portal-wide. */
   The one designed brand mark across portal chrome, theme-aware. */
.cs-mark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); line-height: 0; }

/* LOGO LAW (Dom 2026-08-29): "logo not text — same logo everywhere."
   The shared brand-image utility. One height knob (--cs-logo-h, set inline by
   the slot), one theme switch — the SAME mechanism .ag-rail-logo already uses,
   generalised so every brand slot in the portal reads from one rule instead of
   growing its own. Never a text wordmark. */
.cs-logo {
  display: none;
  height: var(--cs-logo-h, 22px); width: auto; max-width: 100%;
  object-fit: contain; flex: none;
}
html[data-theme="dark"]  .cs-logo--dark  { display: block; }
html[data-theme="light"] .cs-logo--light { display: block; }
html:not([data-theme])   .cs-logo--light { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .cs-logo--light { display: none; }
  html:not([data-theme]) .cs-logo--dark  { display: block; }
}

.cs-mark-glyph { flex: 0 0 auto; display: block; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 18%, transparent)); }
.cs-mark-word {
  font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
  font-weight: 700; font-size: calc(15px * var(--text-scale, 1)); letter-spacing: -.015em; white-space: nowrap;
  text-transform: none; /* survive parents that force uppercase (app-nav-brand) */
}
/* Nav lockup: a touch tighter, sits on the 44–48px bar. */
.app-nav-brand .cs-mark-word { font-size: calc(14.5px * var(--text-scale, 1)); }
.app-nav-spacer { flex: 1; }
.app-nav-sep {
  width: 1px; height: 18px; background: var(--line-strong);
  margin: 0 var(--sp-1);
}
.app-nav-context {
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-2);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 42vw;
}
.app-nav-tabs {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 2px;
  flex: 1;
}
/* 070 P3.17 #4 — visible primary nav links in the bar (reuse .nav-tab pills). */
.app-nav-links {
  list-style: none; padding: 0; margin: 0 0 0 var(--sp-2);
  display: flex; align-items: center; gap: 2px;
}
/* 070 P3.17 #4 — persistent Back affordance (the "visible back path"). */
.app-nav-back {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 6px 11px 6px 9px; border-radius: var(--r-pill);
  font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-2);
  background: transparent; cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.app-nav-back:hover { background: var(--bg-hover); color: var(--ink); }
.app-nav-back-chev { font-size: calc(17px * var(--text-scale, 1)); line-height: 1; margin-top: -1px; }
.nav-tab {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-2);
  letter-spacing: var(--tracking-normal);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.nav-tab:hover { background: var(--bg-hover); color: var(--ink); }
.nav-tab.is-active { background: var(--bg-elevated); color: var(--ink); box-shadow: var(--shadow-1); }
/* is-active dot removed 07-16 — Dom: no decorative dots, ever */

.app-nav-user { position: relative; }
.user-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-pill);
  font-size: calc(14px * var(--text-scale, 1)); color: var(--ink);
  background: transparent;
  transition: background var(--t-base) var(--ease);
}
.user-btn:hover { background: var(--bg-hover); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600;
  letter-spacing: 0;
}
.user-name { font-weight: 500; }
.user-caret { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); }

.user-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  padding: 6px;
  z-index: 60;
  animation: menuIn var(--t-base) var(--ease);
}
.user-menu hr { margin: 6px 4px; border-top: 1px solid var(--line); border-bottom: 0; }
.theme-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.theme-toggle-switch {
  width: 32px; height: 18px; border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  transition: background var(--t-base) var(--ease);
  flex: 0 0 auto;
}
.theme-toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform var(--t-base) var(--ease);
}
.theme-toggle[aria-pressed="true"] .theme-toggle-switch { background: var(--brand); }
.theme-toggle[aria-pressed="true"] .theme-toggle-switch::after { transform: translateX(14px); }
.user-menu-head { padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.user-menu-name { font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; color: var(--ink); }
.user-menu-email { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); margin-top: 2px; }
.user-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-1);
  font-size: calc(14px * var(--text-scale, 1)); color: var(--ink-2); cursor: pointer;
  background: transparent;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.user-menu-item:hover { background: var(--bg-hover); color: var(--ink); }
.user-menu-item.is-danger { color: var(--ink-3); }
.user-menu-item.is-danger:hover { color: var(--err); background: color-mix(in srgb, var(--err) 6%, transparent); }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile drawer toggle */
.nav-mobile-toggle {
  display: none;
  width: 36px; height: 36px;
  background: transparent; border: 0;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 0;
  margin-left: auto;
}
.nav-mobile-toggle .bar {
  width: 18px; height: 1.5px; background: var(--ink); border-radius: 1px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.app-nav[data-mobile-open="true"] .nav-mobile-toggle .bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.app-nav[data-mobile-open="true"] .nav-mobile-toggle .bar:nth-child(2) { opacity: 0; }
.app-nav[data-mobile-open="true"] .nav-mobile-toggle .bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .app-nav-inner { gap: var(--sp-3); padding: 0 var(--sp-4); }
  .nav-mobile-toggle { display: flex; }
  .user-name { display: none; }
  .user-caret { display: none; }
  .app-nav-tabs {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
  }
  .app-nav[data-mobile-open="true"] .app-nav-tabs {
    transform: translateY(0); opacity: 1; pointer-events: auto;
  }
  .nav-tab {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--r-2);
    background: var(--bg);
    font-size: calc(15px * var(--text-scale, 1));
  }
  .nav-tab.is-active { background: var(--brand-soft); color: var(--brand-deep); box-shadow: none; }
  /* dot removed */
  .user-menu { right: var(--sp-4); }
  /* 070 P3.17 #4 — the visible primary links stay inline on mobile; compact the
     Back to a chevron so the bar keeps room for the two link pills + account. */
  .app-nav-links { margin-left: var(--sp-1); }
  .app-nav-back-txt { display: none; }
  .app-nav-back { padding: 6px 8px; }
  .app-nav-links .nav-tab { width: auto; padding: 7px 11px; border-radius: var(--r-pill); background: transparent; font-size: calc(13.5px * var(--text-scale, 1)); }
  .app-nav-links .nav-tab.is-active { background: var(--bg-elevated); color: var(--ink); }
}

/* ───── Top bar — the SAME single bar, rendered inline by tool views ───── */
html[data-theme="dark"] .user-avatar { color: var(--brand-ink); }
html[data-theme="dark"] .auth-wrap {
  background:
    radial-gradient(1400px 800px at 120% -10%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255,255,255,.025), transparent 60%),
    var(--bg);
}
html[data-theme="dark"] .auth-brand {
  background:
    radial-gradient(800px 400px at 20% 90%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
}
html[data-theme="dark"] .preview-frame { background: #fff; } /* SPW always light */
html[data-theme="dark"] .ip { background: #fff; color: #1a1a1a; } /* buyers always see white */
html[data-theme="dark"] .listing-thumb,
html[data-theme="dark"] .live-thumb { background: var(--dim-card-2); }
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select { background: var(--bg-sunken); color: var(--ink); }
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder { color: var(--ink-4); }
html[data-theme="dark"] .btn-back { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
html[data-theme="dark"] .btn-back:hover { background: var(--brand-hover); color: var(--brand-ink); border-color: var(--brand-hover); }
html[data-theme="dark"] .btn-primary { color: #FFFFFF; }   /* white on red in BOTH themes — Dom 08-23 */
/* Dark used to force EVERY badge grey, eating the green Paid / amber Due
   variants (Dom 2026-08-24 "no our green anymore?"). Neutral only. */
html[data-theme="dark"] .badge:not(.badge-ok):not(.badge-warn):not(.badge-err):not(.badge-brand) { background: var(--bg-sunken); color: var(--ink-2); }
html[data-theme="dark"] .swatch-color { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
html[data-theme="dark"] .toast { background: var(--bg-elevated); color: var(--ink-2); }

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 var(--sp-5);
  gap: var(--sp-3);
}
.topbar-brand {
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--ink);
}
/* 065 B7 — removed the generic teal dot before topbar section labels/addresses
 * ("• 407 Sultan Street"); Dom flagged it as generic. Empty .dot spans in the
 * markup now collapse to nothing (no width/margin). Brand-mark dots
 * (.app-nav-brand .dot, .auth-brand-mark .dot — the logo period signature) and
 * the save-indicator dot are unaffected. */
.topbar-brand .dot { display: none; }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* ───── Layout ───────────────────────────────────────────── */
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.app-main {
  max-width: var(--max-w-app);
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-16);
}
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-5);
}
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-tight { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ───── Dashboard ────────────────────────────────────────── */
.dashboard-head { max-width: 640px; }
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
}
.kpi-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-5) var(--sp-5);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.kpi-card:hover { border-color: var(--line-strong); }
.kpi-card[data-tone="brand"] {
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand-deep) 16%, transparent);
}
.kpi-card[data-tone="brand"] .kpi-value { color: var(--brand-deep); }
.kpi-card[data-tone="warn"] { background: color-mix(in srgb, var(--warn) 6%, transparent); border-color: color-mix(in srgb, var(--warn) 18%, transparent); }
.kpi-card[data-tone="warn"] .kpi-value { color: var(--warn); }
/* Money tone — refined terracotta, replaces warn for $ outstanding on CS-admin only */
.kpi-card[data-tone="money"] {
  background: var(--accent-money-soft);
  border-color: var(--accent-money-line);
}
.kpi-card[data-tone="money"] .kpi-value { color: var(--accent-money); }
.kpi-label { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); letter-spacing: normal; text-transform: none; margin-bottom: 6px; font-weight: 500; }
.kpi-value { font-size: clamp(28px, 3vw, 36px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); }

.dash-section { margin-top: var(--sp-10); }
.live-grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.live-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.live-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.live-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunken);
  overflow: hidden;
  display: block;
}
.live-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.live-card:hover .live-thumb img { transform: scale(1.03); }
.live-flag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--warn) 92%, transparent); color: #fff;
  border-radius: var(--r-pill);
}
.live-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.live-title { font-size: calc(16px * var(--text-scale, 1)); font-weight: 500; margin: 0; letter-spacing: var(--tracking-tight); }
.live-meta { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2); }
.live-stats { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); margin-top: 2px; }
.live-actions {
  display: flex; gap: 8px;
  margin-top: auto; padding-top: var(--sp-4);
}
.live-actions .btn-primary { flex: 1; }
.live-actions .btn-ghost { padding: 7px 11px; }

@media (max-width: 640px) {
  .live-grid { grid-template-columns: 1fr; }
  .live-thumb { aspect-ratio: 5 / 3; }
}

.attn-row, .recent-row {
  display: grid; align-items: center; gap: var(--sp-3);
  padding: 12px 8px; border-radius: var(--r-2);
  transition: background var(--t-base) var(--ease);
  cursor: pointer;
}
.attn-row { grid-template-columns: 60px 1fr auto; }
.recent-row { grid-template-columns: 56px 1fr auto; }
.attn-row + .attn-row, .recent-row + .recent-row {
  border-top: 1px solid var(--line);
}
.attn-row:hover, .recent-row:hover { background: var(--bg-hover); }
.attn-body, .recent-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attn-body strong, .recent-body strong { font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; color: var(--ink); }
.attn-body .muted, .recent-body .muted {
  font-size: calc(12px * var(--text-scale, 1)); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.attn-tag {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-pill);
  background: var(--bg-sunken); color: var(--ink-3);
  width: max-content;
}
.attn-tag-draft { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.attn-tag-lead  { background: var(--brand-soft); color: var(--brand-deep); }
.attn-cta { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3); }
.recent-thumb {
  width: 56px; height: 40px; border-radius: var(--r-1);
  background: var(--bg-sunken);
  background-size: cover; background-position: center;
}
.recent-go { font-size: calc(18px * var(--text-scale, 1)); color: var(--ink-3); }

/* ───── Listing card — Signature design language ─────────── */
.lc {
  display: flex; flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.lc:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.lc:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Hero — cover photo with address overlay */
.lc-hero {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--bg-sunken);
  overflow: hidden;
  color: #fff;
  container-type: inline-size;
}
.lc-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.lc:hover .lc-cover { transform: scale(1.04); }
.lc-cover-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-4); font-size: calc(12px * var(--text-scale, 1)); letter-spacing: normal; text-transform: none;
}
.lc-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%);
}
.lc-status {
  position: absolute; top: 12px; left: 12px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  padding: 4px 10px 4px 4px;
  background: rgba(0,0,0,.45);
  border-radius: var(--r-btn);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lc-status-ok { color: color-mix(in srgb, var(--ok) 45%, #fff); }
.lc-status-warn { color: #f3d8a5; }
.lc-action {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(20,20,20,.18);
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.lc:hover .lc-action, .lc:focus-within .lc-action { opacity: 1; transform: translateY(0); }
.lc-action:hover { background: #fff; }
@media (pointer: coarse) { .lc-action { opacity: 1; transform: none; } }
.lc-hero-body {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  z-index: 2;
}
.lc-city {
  font-size: calc(12px * var(--text-scale, 1)); letter-spacing: normal; text-transform: none;
  font-weight: 500; opacity: .9;
  margin-bottom: 4px;
}
.lc-title {
  font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
  font-size: clamp(18px, 6cqi, 28px);
  font-weight: 500; letter-spacing: -.018em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.lc-price {
  font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
  font-size: clamp(15px, 4.4cqi, 20px);
  font-weight: 700; letter-spacing: -.02em;
  color: #fff; margin-top: 6px;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}

/* Black stats bar (SPW signature) */
.lc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #0a0a0a; color: #fff;
  padding: 14px 8px;
  text-align: center;
  container-type: inline-size;
}
.lc-stat { padding: 0 4px; border-right: 1px solid rgba(255,255,255,.06); }
.lc-stat:last-child { border-right: 0; }
.lc-stat-value {
  font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
  font-size: clamp(13px, 3.5cqi, 16px);
  font-weight: 500; letter-spacing: -.012em;
  line-height: 1.1;
}
.lc-stat-label {
  font-size: calc(8px * var(--text-scale, 1)); letter-spacing: normal; text-transform: none;
  color: rgba(255,255,255,.5);
  margin-top: 3px;
}
.lc-dollar { color: var(--brand); margin-right: 1px; }
.lc-stats-3 { grid-template-columns: repeat(3, 1fr); }

/* Foot — copy link + photo count */
.lc-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  gap: var(--sp-3);
}
.lc-copy {
  background: var(--bg);
  border-color: var(--line);
}
.lc-copy:hover { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand-deep) 30%, transparent); color: var(--brand-deep); }
.lc-photos { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); letter-spacing: .04em; }
.lc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; border-top: 1px solid var(--line); }
.lc-act {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 6px; background: transparent; border: 0; cursor: pointer;
  border-right: 1px solid var(--line);
  font-family: var(--font-sans, 'Geist', system-ui, sans-serif); font-size: calc(12px * var(--text-scale, 1)); font-weight: 600;
  letter-spacing: -.005em; color: var(--ink-2);
  transition: background .14s, color .14s;
}
.lc-act:last-child { border-right: 0; }
.lc-act svg { color: var(--ink-3); transition: color .14s; }
.lc-act:hover { background: var(--brand-soft); color: var(--brand-deep); }
.lc-act:hover svg { color: var(--brand-deep); }
html[data-theme="dark"] .lc-act:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }
html[data-theme="dark"] .lc-act:hover svg { color: var(--brand); }

html[data-theme="dark"] .lc-stats { background: #000; }
html[data-theme="dark"] .lc-foot  { background: var(--bg-elevated); }

/* ───── Listing card (legacy class, kept for any stragglers) ─ */
.listing-card { display: flex; flex-direction: column; cursor: pointer; }
.listing-thumb {
  aspect-ratio: 16 / 10; background: var(--bg-sunken);
  overflow: hidden; position: relative;
}
.listing-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.listing-actions {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; gap: 6px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.listing-card:hover .listing-actions,
.listing-card:focus-within .listing-actions { opacity: 1; transform: translateY(0); }
.card-action {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(20,20,20,.18);
  border: 0; cursor: pointer;
  transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.card-action:hover { background: #fff; transform: scale(1.06); }
@media (pointer: coarse) {
  .listing-actions { opacity: 1; transform: none; }
}
.listing-card:hover .listing-thumb img { transform: scale(1.02); }
.listing-body { padding: var(--sp-5); }
.listing-title {
  font-size: calc(16px * var(--text-scale, 1)); font-weight: 500; letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-1);
}
.listing-meta { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3); }
.listing-stats {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin-top: var(--sp-3);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-2);
}
.listing-stats span {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  letter-spacing: .02em;
}
.listing-stats .listing-stats-photos {
  background: transparent; color: var(--ink-3); padding-left: 0;
}
.listing-foot {
  margin-top: var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.listing-copy {
  background: var(--bg);
  border-color: var(--line);
}
.listing-copy:hover { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand-deep) 30%, transparent); color: var(--brand-deep); }
.listing-thumb-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-4); font-size: calc(12px * var(--text-scale, 1)); letter-spacing: normal; text-transform: none;
}
.listing-thumb-status {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex;
}
.listing-thumb-status .badge {
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ───── Auth screen ──────────────────────────────────────── */
.auth-wrap {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background:
    radial-gradient(1400px 800px at 120% -10%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(20,20,20,.025), transparent 60%),
    var(--bg);
}

/* Left: brand panel (desktop only). A quiet, taste-forward statement. */
.auth-brand {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-12) var(--sp-12) var(--sp-10);
  border-right: 1px solid var(--line);
  background:
    radial-gradient(800px 400px at 20% 90%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
  overflow: hidden;
}
.auth-brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--ink-2);
}
.auth-brand-mark .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.auth-brand-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 540px; }
.auth-brand-eyebrow {
  font-size: calc(12px * var(--text-scale, 1)); letter-spacing: var(--tracking-overline);
  color: var(--ink-3); text-transform: uppercase; font-weight: 500;
  margin-bottom: var(--sp-4);
}
.auth-brand-title {
  font-size: clamp(42px, 4.6vw, 62px);
  line-height: 1.02; letter-spacing: -.035em; font-weight: 800;
  margin: 0 0 var(--sp-6); color: var(--ink);
}
.auth-brand-title em {
  font-style: normal;
  background: linear-gradient(105deg, var(--brand-deep) 0%, var(--brand) 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-brand-sub {
  font-size: calc(17px * var(--text-scale, 1)); line-height: 1.55;
  color: var(--ink-2); margin: 0 0 var(--sp-10); max-width: 38ch;
}
.auth-brand-bullets { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.auth-brand-bullets li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: calc(14px * var(--text-scale, 1)); color: var(--ink-2); line-height: 1.5;
}
.auth-brand-bullets li::before {
  content: ''; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  background-image:
    linear-gradient(135deg, transparent 38%, var(--brand) 38%, var(--brand) 62%, transparent 62%);
  margin-top: 2px;
}
.auth-brand-foot {
  margin-top: auto; padding-top: var(--sp-10);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); letter-spacing: var(--tracking-normal);
  display: flex; justify-content: space-between; gap: var(--sp-4);
}

/* Right: sign-in column */
.auth-form-col {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-10) var(--sp-8);
}
.auth-card { width: 100%; max-width: 440px; padding: var(--sp-10); border-radius: var(--r-4); }
.auth-eyebrow { margin-bottom: var(--sp-8); }
.auth-card .h1 { margin-bottom: var(--sp-3); }
.auth-card p { color: var(--ink-2); margin: 0 0 var(--sp-6); }

/* ── Passwordless: OTP boxes, divider, QR ── */
.otp { display: flex; gap: 8px; justify-content: space-between; }
.otp-box {
  width: 100%; max-width: 52px; aspect-ratio: 3 / 4;
  text-align: center; font-size: calc(22px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: 0; padding: 0; border-radius: var(--r-3);
  font-variant-numeric: tabular-nums;
}
.otp-box:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

.auth-divider {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--ink-3); font-size: calc(12px * var(--text-scale, 1)); text-transform: uppercase;
  letter-spacing: var(--tracking-overline); margin: var(--sp-2) 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.qr-frame {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4); border-radius: var(--r-4);
  background: #fff; border: 1px solid var(--line);
  width: fit-content; margin: 0 auto;
}
.qr-frame svg { display: block; border-radius: 8px; }

/* Tablet: tighter split (iPad portrait & landscape) */
@media (max-width: 1100px) and (min-width: 641px) {
  .auth-wrap { grid-template-columns: 1fr 1fr; }
  .auth-brand { padding: var(--sp-10) var(--sp-6); }
  .auth-brand-title { font-size: clamp(30px, 4.2vw, 44px); }
  .auth-brand-sub { font-size: calc(14px * var(--text-scale, 1)); margin-bottom: var(--sp-6); }
  .auth-brand-bullets { gap: var(--sp-2); }
  .auth-brand-bullets li { font-size: calc(13px * var(--text-scale, 1)); }
  .auth-brand-foot { padding-top: var(--sp-6); font-size: calc(12px * var(--text-scale, 1)); }
  .auth-form-col { padding: var(--sp-8) var(--sp-5); }
  .auth-card { padding: var(--sp-8); }
}

/* Phone (≤640): brand panel hides, single card centered */
@media (max-width: 640px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form-col { padding: var(--sp-6) var(--sp-4); min-height: 100dvh; }
}

/* ───── Editor split layout ──────────────────────────────── */
.editor {
  display: grid;
  min-height: calc(100dvh - var(--topbar-h));
  background: var(--bg);
  transition: grid-template-columns var(--t-slow) var(--ease);
}
.editor[data-preview-on="false"] { grid-template-columns: 1fr; }
.editor[data-preview-on="true"]  { grid-template-columns: minmax(380px, 620px) 1fr; }
.editor-panel {
  border-right: 1px solid var(--line);
  padding: var(--sp-8) var(--sp-6) var(--sp-12);
  background: var(--bg);
}
/* When the preview is parked, the form gets a centered max width so reading
   stays comfortable on big screens. */
.editor[data-preview-on="false"] .editor-panel {
  border-right: 0;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
.editor-preview {
  position: sticky; top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  background: var(--bg-sunken);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.editor[data-preview-on="false"] .editor-preview { display: none; }
/* ───── Editor inline buyer-page preview ─────────────────────
 * Scaled-down replica of the SPW. Lives inside the editor's preview
 * pane and updates live as the agent edits the form.
 * Class prefix `ip-` (inline-preview) so it never collides with portal CSS.
 */
.preview-frame {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  /* A8 — no framing outline; the rounded floating card + shadow define it.
     Corners clip flawlessly (radius + hidden x-overflow, no border seam). */
  border: 0; border-radius: var(--r-3);
  background: #fff;
  box-shadow: var(--shadow-2);
  /* A8 — slim rounded gray overlay scrollbar (Claude-sidebar style):
     transparent track, no gutter, thumb floats on top of the preview. */
  scrollbar-width: thin;
  scrollbar-color: rgba(120,124,132,.45) transparent;
}
.preview-frame::-webkit-scrollbar { width: 8px; height: 8px; }
.preview-frame::-webkit-scrollbar-track { background: transparent; }
.preview-frame::-webkit-scrollbar-thumb {
  background: rgba(120,124,132,.45); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
.preview-frame::-webkit-scrollbar-thumb:hover { background: rgba(120,124,132,.7); background-clip: padding-box; }
.ip {
  /* Palette role variables — driven by the agent's brand palette.
     button = primary CTA / dot accent / agent avatar
     accent-text = price, eyebrows, section underline ink
     divider = hairline sections + footer
     highlight = small chips / hovers */
  --ip-button:        #3ee092;
  --ip-button-ink:    #0a1f14;
  --ip-accent-text:   #1a1a1a;
  --ip-divider:       rgba(0,0,0,.06);
  --ip-highlight:     #e3f6ec;
  /* Font variables — swapped by Brand kit picker */
  --ip-font-heading:  var(--font-sans);
  --ip-font-body:     var(--font-sans);
  /* Layout constants — overridden per template */
  --ip-radius: 4px;
  --ip-hero-radius: 0;
  --ip-shadow: none;
  --ip-eyebrow-letter: .18em;
  --ip-h1-letter: -.02em;
  --ip-h1-weight: 500;
  --ip-h2-letter: .14em;
  --ip-cta-radius: 999px;
  --ip-cta-weight: 500;
  --ip-section-pad: 18px 20px;
  font-family: var(--ip-font-body);
  color: #1a1a1a;
  background: #fff;
  font-size: calc(13px * var(--text-scale, 1)); line-height: 1.5;
}

/* ── Signature (current — modern minimal, Onest sans) ── */
.ip[data-template="signature"] {
  --ip-font-heading: 'Onest', system-ui, sans-serif;
  --ip-font-body:    'Onest', system-ui, sans-serif;
  --ip-radius: 6px;
  --ip-hero-radius: 0;
  --ip-cta-radius: 999px;
}

/* ── Elegant (serif, classic luxury) ── */
.ip[data-template="elegant"] {
  --ip-font-heading: 'Playfair Display', 'Lora', serif;
  --ip-font-body:    'Lora', 'Georgia', serif;
  --ip-radius: 0;
  --ip-hero-radius: 0;
  --ip-cta-radius: 0;
  --ip-h1-letter: -.005em;
  --ip-h1-weight: 400;
  --ip-h2-letter: .26em;
  --ip-eyebrow-letter: .32em;
  --ip-cta-weight: 400;
  --ip-section-pad: 24px 24px;
}
.ip[data-template="elegant"] .ip-h1 { font-style: normal; }
.ip[data-template="elegant"] .ip-h2 { font-family: var(--ip-font-body); font-style: italic; font-weight: 400; }

/* ── Simple (Inter, ultra-minimal) ── */
.ip[data-template="simple"] {
  --ip-font-heading: 'Inter', system-ui, sans-serif;
  --ip-font-body:    'Inter', system-ui, sans-serif;
  --ip-radius: 0;
  --ip-hero-radius: 0;
  --ip-cta-radius: 4px;
  --ip-h1-weight: 600;
  --ip-h1-letter: -.025em;
  --ip-h2-letter: .04em;
  --ip-eyebrow-letter: .12em;
}
.ip[data-template="simple"] .ip-h2 { text-transform: none; font-weight: 500; font-size: calc(14px * var(--text-scale, 1)); }
.ip-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-sunken);
  overflow: hidden;
  display: flex; align-items: flex-end;
  color: #fff;
  border-radius: var(--ip-hero-radius);
  font-family: var(--ip-font-heading);
}

/* ── Cinematic Signature hero (matches the real SPW) ──────── */
.ip-hero-spw {
  aspect-ratio: 4 / 5;          /* taller hero like the real page */
  display: block;
  container-type: inline-size;
}
.ip-hero-spw .ip-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ip-hero-spw .ip-hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.45) 100%);
}
/* Top nav */
.ip-nav {
  position: absolute; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 18px;
  gap: 12px;
  color: #fff;
}
.ip-nav-agent { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ip-nav-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ip-button), var(--ip-button) 60%, rgba(255,255,255,.4));
  color: var(--ip-button-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: calc(10px * var(--text-scale, 1)); font-family: var(--ip-font-heading);
  border: 1.5px solid rgba(255,255,255,.4);
}
.ip-nav-agent-text { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.1; min-width: 0; }
.ip-nav-agent-text strong { font-family: var(--ip-font-heading); font-size: calc(11px * var(--text-scale, 1)); font-weight: 500; }
.ip-nav-agent-text span { font-size: calc(9px * var(--text-scale, 1)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 14px; align-items: center;
  font-family: var(--ip-font-heading);
}
.ip-nav-links a {
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 500;
  color: rgba(255,255,255,.9); cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  letter-spacing: .02em;
}
.ip-nav-links a.is-active { border-bottom-color: var(--ip-button); }
.ip-nav-cta {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: #fff; color: #1a1a1a;
  border: 0; border-radius: 999px;
  font-family: var(--ip-font-heading);
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 500;
  cursor: pointer;
}
/* Centered title */
.ip-hero-title-wrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 18px;
  color: #fff;
}
.ip-hero-title {
  font-family: var(--ip-font-heading);
  font-weight: var(--ip-h1-weight);
  letter-spacing: var(--ip-h1-letter);
  margin: 0;
  line-height: .98;
  /* Scales with the preview pane width */
  font-size: clamp(20px, 7.5cqi, 56px);
  max-width: 14ch;
  text-wrap: balance;
}
.ip-hero-scroll {
  font-size: calc(8px * var(--text-scale, 1)); letter-spacing: .32em; opacity: .85;
  margin-top: 12px; padding-top: 12px;
  position: relative;
  font-family: var(--ip-font-heading);
}
.ip-hero-scroll::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 8px; background: rgba(255,255,255,.5);
}
.ip-hero-location {
  /* Flows inside the centered title wrap, directly under the address — the two
     share the same alignment (aligned, not floated to a corner). */
  font-family: var(--ip-font-heading);
  font-size: calc(11px * var(--text-scale, 1)); letter-spacing: .02em;
  opacity: .9;
  margin-top: 10px;
}

/* ── Black stats bar — Signature ──────────────────────────── */
.ip-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #0a0a0a; color: #fff;
  padding: 22px 16px;
  text-align: center;
  border-radius: 0;
}
.ip-stat { padding: 4px 6px; border-right: 1px solid rgba(255,255,255,.08); }
.ip-stat:last-child { border-right: 0; }
.ip-stat-value {
  font-family: var(--ip-font-heading);
  font-size: clamp(16px, 3.8cqi, 26px);
  font-weight: 500; letter-spacing: -.012em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.ip-stat-label {
  font-family: var(--ip-font-heading);
  font-size: calc(8px * var(--text-scale, 1)); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.ip-dollar { color: var(--ip-button); font-weight: 500; margin-right: 1px; }

/* Templates tweak the stats bar */
.ip[data-template="elegant"] .ip-stats { background: #fff; color: #1a1a1a; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); }
.ip[data-template="elegant"] .ip-stat { border-right-color: rgba(0,0,0,.08); }
.ip[data-template="elegant"] .ip-stat-label { color: rgba(0,0,0,.5); }
.ip[data-template="elegant"] .ip-nav-cta { background: #1a1a1a; color: #fff; border-radius: 0; }
.ip[data-template="elegant"] .ip-hero-title { font-style: italic; }

.ip[data-template="simple"] .ip-stats { background: #f5f5f5; color: #1a1a1a; }
.ip[data-template="simple"] .ip-stat { border-right-color: rgba(0,0,0,.08); }
.ip[data-template="simple"] .ip-stat-label { color: rgba(0,0,0,.45); }
.ip[data-template="simple"] .ip-nav-cta { border-radius: 4px; }
.ip-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ip-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.6) 100%); }
.ip-hero-body { position: relative; padding: 18px 20px 16px; }
.ip-eyebrow { font-size: calc(10px * var(--text-scale, 1)); letter-spacing: var(--ip-eyebrow-letter); text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
.ip-eyebrow::before { content: '• '; color: var(--ip-button); }
.ip-h1 { font-family: var(--ip-font-heading); font-size: calc(22px * var(--text-scale, 1)); font-weight: var(--ip-h1-weight); letter-spacing: var(--ip-h1-letter); margin: 0 0 6px; line-height: 1.1; }
.ip-meta { font-size: calc(12px * var(--text-scale, 1)); opacity: .9; display: flex; gap: 10px; align-items: baseline; }
.ip-price { color: var(--ip-accent-text); font-weight: 500; }

.ip-section { padding: var(--ip-section-pad); border-bottom: 1px solid var(--ip-divider); font-family: var(--ip-font-body); }
.ip-section:last-child { border-bottom: 0; }
.ip-h2 { font-family: var(--ip-font-heading); font-size: calc(11px * var(--text-scale, 1)); font-weight: 500; letter-spacing: var(--ip-h2-letter); text-transform: uppercase; color: var(--ip-accent-text); margin: 0 0 10px; }

/* ── Signature body — the demo SPW's design language ───────────── */
.ip-body {
  background: #0a0a0a;
  color: #f1efe9;
  container-type: inline-size;
}
.ip-body .ip-section {
  padding: clamp(28px, 6cqi, 56px) clamp(20px, 4cqi, 40px);
  border-bottom: 0;
}
.ip-eyebrow-row {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ip-font-heading);
  font-size: calc(10px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ip-button);
  margin-bottom: clamp(12px, 2cqi, 22px);
}
.ip-eyebrow-row::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ip-button);
}
.ip-eyebrow-num { color: var(--ip-button); }
.ip-eyebrow-text { color: var(--ip-button); }
.ip-section-title {
  font-family: var(--ip-font-heading);
  font-weight: var(--ip-h1-weight);
  font-size: clamp(28px, 7cqi, 64px);
  letter-spacing: var(--ip-h1-letter);
  line-height: 1.02;
  color: #fff;
  margin: 0 0 clamp(18px, 3cqi, 32px);
}
.ip-section-media { display: flex; flex-direction: column; gap: clamp(10px, 1.6cqi, 18px); }
.ip-bleed { width: 100%; overflow: hidden; border-radius: var(--ip-radius); background: #1a1a1a; }
.ip-bleed img { width: 100%; height: auto; display: block; }
.ip-more-row {
  font-family: var(--ip-font-heading);
  font-size: calc(11px * var(--text-scale, 1)); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ip-video-placeholder {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  aspect-ratio: 16 / 9;
  background: #16181a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ip-radius);
  font-family: var(--ip-font-heading);
  font-size: calc(11px * var(--text-scale, 1)); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.ip-video-placeholder span:first-child {
  font-size: calc(28px * var(--text-scale, 1)); color: var(--ip-button);
}
.ip-fp-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ip-fp-tile {
  position: relative;
  background: #fff;
  border-radius: var(--ip-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ip-fp-tile img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.ip-fp-label {
  position: absolute; bottom: 8px; left: 10px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,.78); color: #fff;
  font-family: var(--ip-font-heading);
  font-size: calc(9px * var(--text-scale, 1)); letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
}
.ip-agent-section {
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ip-agent-section .ip-agent-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
  align-items: center;
  background: #16181a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--ip-radius);
  padding: 16px;
}
.ip-agent-section .ip-agent-name { color: #fff; font-size: calc(16px * var(--text-scale, 1)); }
.ip-agent-section .ip-agent-meta { color: rgba(255,255,255,.6); font-size: calc(12px * var(--text-scale, 1)); }

/* Footer */
.ip-foot {
  padding: clamp(18px, 3cqi, 28px) 20px;
  font-family: var(--ip-font-heading);
  font-size: calc(10px * var(--text-scale, 1)); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  background: #0a0a0a;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ── Elegant template overrides body to light/cream ─────── */
.ip[data-template="elegant"] .ip-body { background: #f7f5f0; color: #1a1a1a; }
.ip[data-template="elegant"] .ip-section-title { color: #1a1a1a; }
.ip[data-template="elegant"] .ip-eyebrow-row,
.ip[data-template="elegant"] .ip-eyebrow-num,
.ip[data-template="elegant"] .ip-eyebrow-text { color: var(--ip-button); }
.ip[data-template="elegant"] .ip-bleed { background: #fff; }
.ip[data-template="elegant"] .ip-video-placeholder { background: #fff; border-color: rgba(0,0,0,.08); color: rgba(0,0,0,.4); }
.ip[data-template="elegant"] .ip-agent-section { background: #f7f5f0; border-top-color: rgba(0,0,0,.06); }
.ip[data-template="elegant"] .ip-agent-section .ip-agent-row { background: #fff; border-color: rgba(0,0,0,.06); }
.ip[data-template="elegant"] .ip-agent-section .ip-agent-name { color: #1a1a1a; }
.ip[data-template="elegant"] .ip-agent-section .ip-agent-meta { color: rgba(0,0,0,.5); }
.ip[data-template="elegant"] .ip-foot { background: #f7f5f0; color: rgba(0,0,0,.4); border-top-color: rgba(0,0,0,.08); }
.ip[data-template="elegant"] .ip-more-row { color: rgba(0,0,0,.4); border-top-color: rgba(0,0,0,.08); }

/* ── Simple template — minimal white ─────────────────────── */
.ip[data-template="simple"] .ip-body { background: #fff; color: #1a1a1a; }
.ip[data-template="simple"] .ip-section-title { color: #1a1a1a; }
.ip[data-template="simple"] .ip-eyebrow-row,
.ip[data-template="simple"] .ip-eyebrow-num,
.ip[data-template="simple"] .ip-eyebrow-text { color: var(--ip-button); }
.ip[data-template="simple"] .ip-bleed { background: #f5f5f5; }
.ip[data-template="simple"] .ip-video-placeholder { background: #f5f5f5; border-color: rgba(0,0,0,.08); color: rgba(0,0,0,.4); }
.ip[data-template="simple"] .ip-agent-section { background: #fff; }
.ip[data-template="simple"] .ip-agent-section .ip-agent-row { background: #f5f5f5; border-color: rgba(0,0,0,.06); }
.ip[data-template="simple"] .ip-agent-section .ip-agent-name { color: #1a1a1a; }
.ip[data-template="simple"] .ip-agent-section .ip-agent-meta { color: rgba(0,0,0,.5); }
.ip[data-template="simple"] .ip-foot { background: #fff; color: rgba(0,0,0,.4); border-top-color: rgba(0,0,0,.08); }
.ip[data-template="simple"] .ip-more-row { color: rgba(0,0,0,.4); border-top-color: rgba(0,0,0,.08); }
.ip-desc { margin: 0; font-size: calc(13px * var(--text-scale, 1)); color: #3a3a38; line-height: 1.55; }

.ip-grid { display: grid; gap: 6px; }
.ip-grid-photos { grid-template-columns: repeat(3, 1fr); }
.ip-grid-fp { grid-template-columns: repeat(2, 1fr); }
.ip-tile {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--ip-radius); background: #f1efe9;
}
.ip-tile img { width: 100%; height: 100%; object-fit: cover; }
.ip-tile-fp img { object-fit: contain; background: #fafafa; padding: 6px; }
.ip-tile-label {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(255,255,255,.85);
  padding: 2px 6px; border-radius: 999px;
  font-size: calc(9px * var(--text-scale, 1)); letter-spacing: .04em; font-weight: 500;
}
.ip-more {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  background: rgba(0,0,0,.05);
  border-radius: 4px; color: #7a7a78;
  font-size: calc(11px * var(--text-scale, 1));
}

.ip-agent-row { display: flex; align-items: center; gap: 10px; }
.ip-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ip-button); color: var(--ip-button-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: calc(14px * var(--text-scale, 1));
  font-family: var(--ip-font-heading);
}
.ip-agent-name { font-family: var(--ip-font-heading); font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; }
.ip-agent-meta { font-size: calc(11px * var(--text-scale, 1)); color: #7a7a78; }
.ip-cta {
  margin-left: auto;
  padding: 7px 12px;
  background: var(--ip-button); color: var(--ip-button-ink);
  border: 0; border-radius: var(--ip-cta-radius);
  font-size: calc(11px * var(--text-scale, 1)); font-weight: var(--ip-cta-weight);
  font-family: var(--ip-font-heading);
  letter-spacing: .04em;
  cursor: pointer;
}
.ip-foot {
  padding: 14px 20px;
  font-size: calc(10px * var(--text-scale, 1)); letter-spacing: .14em;
  text-transform: uppercase;
  color: #a8a8a4;
  text-align: center;
}
.editor-section { margin-bottom: var(--sp-10); }
.editor-section h3 { margin-bottom: var(--sp-2); }
.editor-section .section-sub { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3); margin: 0 0 var(--sp-5); }

@media (max-width: 1024px) {
  .editor { grid-template-columns: 1fr; }
  .editor-preview { position: relative; top: 0; height: 60vh; }
}

/* ───── Custom galleries ─────────────────────────────────── */
.gallery-block {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
}
.gallery-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.gallery-title { flex: 1; font-weight: 500; }

/* ───── Downloads center ─────────────────────────────────── */
.dl-group {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  color: var(--brand-deep);
  letter-spacing: normal; text-transform: none;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand-deep) 18%, transparent);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin: var(--sp-6) 0 var(--sp-3);
}
.dl-group:first-of-type { margin-top: 0; }
.dl-group::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
}
html[data-theme="dark"] .dl-group {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand-deep);
  border-color: rgba(92,240,168,.3);
}
.download-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.dl-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.dl-card:hover { border-color: var(--line-strong); }
.dl-card-head { display: flex; align-items: center; gap: var(--sp-2); }
.dl-size { font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; color: var(--ink); letter-spacing: var(--tracking-tight); }
.dl-desc { margin: 0; font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); line-height: 1.5; }
.dl-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--sp-2); }

/* ───── Brand palette ────────────────────────────────────── */
.palette {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: stretch;
  margin-top: var(--sp-1);
}
.swatch {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 12px 8px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  min-width: 168px;
}
.swatch:hover { border-color: var(--line-strong); }
.swatch-color {
  position: relative;
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--r-1);
  background: var(--c, var(--brand));
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.swatch-color input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0;
  width: 100%; height: 100%;
}
.swatch-meta { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; flex: 1; min-width: 0; }
.swatch-role { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); letter-spacing: normal; text-transform: none; font-weight: 500; }
.swatch-hex  { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-2); }
.swatch-rm {
  margin-left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: transparent; color: var(--ink-3);
  font-size: calc(16px * var(--text-scale, 1)); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.swatch-rm:hover { background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err); }
.palette-add {
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-2);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3);
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.palette-add:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }
@media (max-width: 640px) {
  .swatch { width: 100%; min-width: 0; }
}

/* ───── Template + font pickers ──────────────────────────── */
.tpl-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) { .tpl-grid { grid-template-columns: 1fr; } }
.tpl-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  text-align: left; cursor: pointer;
  transition: border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tpl-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.tpl-card.is-active { border-color: var(--brand); box-shadow: var(--shadow-focus); }
.tpl-thumb {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px;
  background: #fff; border-radius: var(--r-1);
  overflow: hidden;
}
.tpl-thumb-hero {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 8; border-radius: 3px;
}
.tpl-thumb-h1 { font-size: calc(22px * var(--text-scale, 1)); font-weight: 500; }
.tpl-thumb-row { display: flex; gap: 4px; }
.tpl-thumb-row span {
  flex: 1; height: 8px; border-radius: 2px;
  background: rgba(0,0,0,.07);
}
.tpl-thumb-cta {
  padding: 4px 10px; font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  border-radius: 999px; align-self: flex-start;
  letter-spacing: .04em;
}
.tpl-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.tpl-label { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink); }
.tpl-sub   { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); }

/* M24-lite — Branding "Website design" door → the website designer (10 looks).
   Replaces the old 3-card editor template picker. One place to choose a look. */
.tpl-door {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; text-decoration: none;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  transition: border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tpl-door:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line-strong));
  transform: translateY(-1px); box-shadow: var(--shadow-2);
}
.tpl-door-thumb {
  flex: 0 0 auto; width: 58px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-2); overflow: hidden;
  background: color-mix(in srgb, var(--tacc, var(--brand)) 15%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tacc, var(--brand)) 28%, transparent);
}
.tpl-door-aa { font-size: calc(21px * var(--text-scale, 1)); font-weight: 600; line-height: 1; color: var(--tacc, var(--brand)); }
.tpl-door-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpl-door-name { font-size: calc(14px * var(--text-scale, 1)); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.tpl-door-verb { font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; color: var(--brand-deep); }

.font-row {
  display: grid; gap: var(--sp-3);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) { .font-row { grid-template-columns: 1fr; } }
.font-label { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); letter-spacing: normal; text-transform: none; font-weight: 500; margin-bottom: 4px; }
.font-select { margin-bottom: 8px; }
.font-preview {
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: calc(14px * var(--text-scale, 1)); color: var(--ink);
  line-height: 1.3;
}

/* ───── Logo preview + palette suggestions ───────────────── */
.logo-preview {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.logo-thumb {
  width: 56px; height: 56px; border-radius: var(--r-1);
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto;
}
.logo-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-meta { flex: 1; min-width: 0; }

.palette-suggest {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.palette-suggest-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.palette-suggest-row { display: flex; gap: 6px; flex-wrap: wrap; }
.suggest-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.suggest-chip:hover { border-color: var(--brand); transform: translateY(-1px); }
.suggest-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}

/* ───── Drop zone ────────────────────────────────────────── */
.dropzone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--sp-8);
  text-align: center; color: var(--ink-3);
  background: var(--bg-elevated);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease);
  cursor: pointer;
}
.dropzone:hover { border-color: var(--brand); color: var(--ink-2); }
.dropzone[data-over="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.dropzone .dz-title { font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.dropzone .dz-sub { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); }

.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-4);
}
.photo-tile {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r-2);
  overflow: hidden; background: var(--bg-sunken); border: 1px solid var(--line);
  cursor: grab;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.photo-tile:active { cursor: grabbing; }
/* Canonical reorder (components/grid-reorder.js) — the tile left in the grid IS
   the drop gap; the lifted copy follows the pointer. Same states the delivery
   gallery and the SPW designer wear, so the three surfaces read identically. */
.photo-tile { touch-action: manipulation; }
.photo-tile img { -webkit-user-drag: none; }
.photo-tile.is-dragging {
  opacity: .25; cursor: grabbing;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 60%, transparent);
}
.photo-tile.is-dragging .photo-rm,
.photo-tile.is-dragging .photo-check,
.photo-tile.is-dragging .photo-grip { opacity: 0; }
.photo-tile.is-held { box-shadow: inset 0 0 0 2px var(--brand), 0 6px 18px rgba(0,0,0,.28); }
.photo-tile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.photo-tile .photo-check {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  appearance: none; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid rgba(255,255,255,.85); border-radius: 5px;
  background: rgba(20,20,20,.55);
  cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity var(--t-base) var(--ease), background var(--t-fast) var(--ease);
}
.photo-tile .photo-check:checked {
  background: var(--brand); border-color: var(--brand); opacity: 1;
}
.photo-tile .photo-check:checked::after {
  content: ''; width: 9px; height: 5px;
  border: 2px solid #FFFFFF; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}
.photo-tile:hover .photo-check,
.photo-tile:focus-within .photo-check,
.photo-grid.has-sel .photo-check { opacity: 1; }
.photo-tile .photo-grip {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(20,20,20,.55); color: #fff;
  display: grid; place-items: center; cursor: grab;
  touch-action: none; -webkit-user-select: none; user-select: none;
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.photo-tile:hover .photo-grip,
.photo-grid.is-reordering .photo-grip { opacity: 1; }
.photo-grid.is-reordering .photo-grip { cursor: grabbing; }
html.gr-grabbing, html.gr-grabbing * { cursor: grabbing !important; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.photo-cover-pill {
  position: absolute; top: 6px; left: 6px;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(20,20,20,.78); color: #fff;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  pointer-events: none;
}
.photo-tile[data-uploading="true"]::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: skel 1.2s linear infinite;
}
.photo-tile .photo-rm {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20,20,20,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(14px * var(--text-scale, 1)); line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.photo-tile:hover .photo-rm { opacity: 1; }

/* ───── Skeletons ────────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--bg-hover) 50%, var(--bg-sunken) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: var(--r-2);
}
.skel-line { height: 12px; border-radius: 4px; }
.skel-card { height: 220px; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ───── Demo banner ──────────────────────────────────────── */
/* Dom 2026-08-22 (bug): the banner used to sit in normal flow while the rail
 * and the topbar were pushed down 38px to clear it — so the moment the page
 * scrolled, the banner left and the chrome stayed 38px down with a gap above
 * it. The banner is fixed now, which is what those offsets always assumed. */
.demo-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  height: 38px;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-5);
  background: var(--bg-sunken);
  color: var(--ink-2);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: var(--tracking-normal);
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .demo-banner {
  background: var(--dim-over);
  color: var(--ink-3);
  border-bottom-color: rgba(255,255,255,.06);
}
.demo-banner .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3);
}
.demo-banner .link {
  margin-left: auto;
  font: inherit; color: var(--ink-2);
  background: transparent; border: 0;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.demo-banner .link:hover { color: var(--ink); }
.demo-banner + .app-shell .topbar { top: 38px; }
@media (max-width: 640px) {
  .demo-banner { padding: 8px var(--sp-3); font-size: calc(12px * var(--text-scale, 1)); }
  .demo-banner span:nth-of-type(2) { flex: 1; min-width: 0; }
}

/* ───── Toast ────────────────────────────────────────────── */
.toast-host {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 80;
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end;
  pointer-events: none;
}
.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2);
  box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: var(--sp-2);
  pointer-events: auto;
  transform: translateY(8px); opacity: 0;
  animation: toast-in var(--t-base) var(--ease) forwards;
}
.toast[data-leaving="true"] { animation: toast-out var(--t-base) var(--ease) forwards; }
.toast .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
}
.toast.toast-err   .dot { background: var(--err); }
.toast.toast-warn  .dot { background: var(--warn); }
.toast.toast-info  .dot { background: var(--info); }
@keyframes toast-in  { to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateY(8px); opacity: 0; } }

/* ───── Save indicator ───────────────────────────────────── */
.save-indicator {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3);
  letter-spacing: var(--tracking-normal);
}
.save-indicator .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.save-indicator[data-state="saving"] .dot { background: var(--warn); animation: pulse 1s infinite; }
/* 065 E21 — the settled "Saved"/"Up to date" states drop the teal dot prefix
 * entirely (Dom: too generic, same family as the item-7 dots). The dot stays
 * only where it carries live meaning: amber pulse while saving, red on error.
 * Settled state now reads as quiet text alone. */
.save-indicator[data-state="saved"] .dot,
.save-indicator[data-state="idle"]  .dot { display: none; }
.save-indicator[data-state="saved"] .label,
.save-indicator[data-state="idle"]  .label { color: var(--ink-4); }
.save-indicator[data-state="error"]  .dot { background: var(--err); }
@keyframes pulse { 50% { transform: scale(1.4); opacity: .7; } }

/* ───── Filter chips ─────────────────────────────────────── */
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2);
  white-space: nowrap;   /* ruling 20b */
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.filter-chip:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.filter-chip.is-active {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}

/* ───── Lead row ─────────────────────────────────────────── */
.lead-row { padding: var(--sp-4) var(--sp-2); }
.lead-row + .lead-row { border-top: 1px solid var(--line); }
.lead-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.lead-row-meta { display: inline-flex; align-items: center; gap: var(--sp-2); }
.lead-row-msg { margin: 8px 0 12px; font-size: calc(14px * var(--text-scale, 1)); color: var(--ink-2); line-height: 1.55; }
.lead-row-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: calc(13px * var(--text-scale, 1)); }
.lead-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.link-quiet { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.link-quiet:hover { color: var(--ink); text-decoration-color: var(--ink-3); }

/* ───── Account page ─────────────────────────────────────── */
.account-main {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 220px 1fr;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-6) var(--sp-16);
}
.account-side {
  position: sticky; top: calc(var(--topbar-h) + var(--sp-6));
  align-self: start;
}
.account-side-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.account-side-nav a {
  display: block; padding: 9px 12px; border-radius: var(--r-2);
  font-size: calc(14px * var(--text-scale, 1)); color: var(--ink-2);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.account-side-nav a:hover { background: var(--bg-hover); color: var(--ink); }

.account-body { min-width: 0; }
/* De-boxed (053 Add1 + Add9 audit): open canvas — hairline + whitespace. */
.account-section {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--line);
  margin-bottom: 0;
  scroll-margin-top: 80px;
}
.account-section:first-of-type { border-top: 0; padding-top: var(--sp-2); }
.account-section-head { margin-bottom: var(--sp-6); }
.account-section-head .h2 { font-size: calc(22px * var(--text-scale, 1)); }
.account-section-body .field:last-child { margin-bottom: 0; }
.h4-row { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3); letter-spacing: normal; text-transform: none; margin: var(--sp-5) 0 var(--sp-2); }

.notif-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 14px 0; gap: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.notif-row:last-child { border-bottom: 0; }
.notif-label { font-size: calc(14px * var(--text-scale, 1)); color: var(--ink); }
.notif-channels { display: inline-flex; gap: 6px; }
.notif-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--line);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; letter-spacing: .06em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.notif-toggle:hover { background: var(--bg-hover); }
.notif-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.notif-toggle:has(input:checked) {
  /* ON = good news = the success green (Dom 2026-08-24), not the alert red. */
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 34%, transparent);
}
/* Off / CC / BCC is a CHOICE, not an on/off — "Off" selected must not read as
 * green-for-on. The picked segment is the brand fill with brand ink (white),
 * which follows the GV skin's grape override with no work here. Modifier only:
 * a plain .notif-toggle keeps the green above, untouched. */
.notif-toggle.notif-choice:has(input:checked) {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}

@media (max-width: 900px) {
  .account-main { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6) var(--sp-4) var(--sp-12); }
  .account-side { position: relative; top: 0; }
  .account-side-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .account-side-nav a { padding: 8px 12px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--r-pill); }
  .account-section { padding: var(--sp-6); }
}

/* ───── Delivery page ───────────────────────────────────── */
.delivery-head { max-width: 720px; }
.dl-section { margin-bottom: var(--sp-12); }
.dl-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-3); }
.dl-doc {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-elevated);
  border: 1px solid var(--line); border-radius: var(--r-3);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.dl-doc:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.dl-doc-icon {
  width: 44px; height: 44px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .04em;
}
.dl-doc-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dl-doc-meta strong { font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; }
.dl-doc-meta .muted { font-size: calc(12px * var(--text-scale, 1)); }
.dl-doc-go { font-size: calc(13px * var(--text-scale, 1)); color: var(--brand-deep); }

.dl-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.dl-tile {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: var(--r-2);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.dl-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.dl-tile img { width: 100%; height: 100%; object-fit: cover; }
.dl-tile-meta {
  position: absolute; inset: auto 0 0 0;
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, transparent 0%, rgba(20,20,20,.7) 100%);
  color: #fff; font-size: calc(12px * var(--text-scale, 1));
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.dl-tile:hover .dl-tile-meta { opacity: 1; }
.dl-tile-go { font-size: calc(12px * var(--text-scale, 1)); letter-spacing: .04em; }
@media (pointer: coarse) { .dl-tile-meta { opacity: 1; } }

/* ───── CS admin view ────────────────────────────────────── */
.admin-stats {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.admin-stat {
  padding: var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.admin-stat[data-tone="ok"]   { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand-deep) 18%, transparent); }
.admin-stat[data-tone="warn"] { background: color-mix(in srgb, var(--warn) 6%, transparent); border-color: color-mix(in srgb, var(--warn) 18%, transparent); }
.admin-stat-value { font-size: calc(24px * var(--text-scale, 1)); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-tight); color: var(--ink); }
.admin-stat-label { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); letter-spacing: normal; text-transform: none; margin-top: 6px; font-weight: 500; }

.admin-table {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.admin-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1.3fr auto;
  align-items: center; gap: var(--sp-3);
  padding: 14px var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: calc(13px * var(--text-scale, 1));
}
.admin-row:last-child { border-bottom: 0; }
.admin-row-head {
  background: var(--bg-sunken);
  font-size: calc(12px * var(--text-scale, 1)); letter-spacing: normal; text-transform: none;
  color: var(--ink-3); font-weight: 500;
}
.admin-cell { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-cell strong { font-weight: 500; color: var(--ink); }
.admin-cell.text-right { flex-direction: row; justify-content: flex-end; gap: var(--sp-2); }
.pill {
  display: inline-block; padding: 2px 8px;
  border-radius: var(--r-btn);
  background: var(--bg); border: 1px solid var(--line);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-2);
  margin: 1px 4px 1px 0;
}
.pill-brand { background: var(--brand-soft); color: var(--brand-deep); border-color: color-mix(in srgb, var(--brand-deep) 20%, transparent); }
.pill-empty { background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 20%, transparent); }
.chip {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-btn);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; letter-spacing: .04em;
  margin-right: 6px;
}
.chip-ok   { background: var(--brand-soft); color: var(--brand-deep); }
.chip-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }

@media (max-width: 900px) {
  .admin-row { grid-template-columns: 1fr; gap: 6px; }
  .admin-row-head { display: none; }
  .admin-cell.text-right { justify-content: flex-start; }
}

/* ───── Invoices view ─────────────────────────────────────── */
.invoice-totals {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.invoice-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-5);
}
.invoice-card[data-tone="warn"] { background: color-mix(in srgb, var(--warn) 6%, transparent); border-color: color-mix(in srgb, var(--warn) 20%, transparent); }
.invoice-card[data-tone="ok"]   { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand-deep) 18%, transparent); }
.invoice-card-label { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); letter-spacing: normal; text-transform: none; font-weight: 500; margin-bottom: 6px; }
.invoice-card-value { font-size: clamp(24px, 3vw, 32px); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-tight); color: var(--ink); }
.invoice-card[data-tone="warn"] .invoice-card-value { color: var(--warn); }
.invoice-card[data-tone="ok"]   .invoice-card-value { color: var(--brand-deep); }
.invoice-card-sub { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); margin-top: 6px; }
/* ALL DATA LIVE (Dom 2026-08-22): the money-owed card sits on the NORMAL
   surface — no tinted fill. The red is the amount, and nothing else. */
.invoice-card[data-tone="due"] { background: var(--bg-elevated); border-color: var(--line); }
.invoice-card[data-tone="due"] .invoice-card-value { color: var(--err); }

.invoice-table { display: block; }
.invoice-row {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 0.9fr 0.9fr 0.7fr;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: calc(13px * var(--text-scale, 1));
}
.invoice-row:last-child { border-bottom: 0; }
.invoice-row-head {
  background: var(--bg-sunken);
  font-size: calc(12px * var(--text-scale, 1)); letter-spacing: normal; text-transform: none;
  color: var(--ink-3); font-weight: 500;
}
.invoice-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.invoice-cell strong { font-weight: 500; color: var(--ink); }
.invoice-cell.text-right { text-align: right; align-items: flex-end; }
.invoice-actions { flex-direction: row; justify-content: flex-end; gap: 6px; }

@media (max-width: 900px) {
  .invoice-row { grid-template-columns: 1fr; gap: 6px; }
  .invoice-row-head { display: none; }
  .invoice-cell.text-right { text-align: left; }
  .invoice-actions { justify-content: flex-start; }
}

/* ───── Empty state ─────────────────────────────────────── */
.empty {
  text-align: center; padding: var(--sp-16) var(--sp-6); color: var(--ink-3);
}
.empty .empty-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg-sunken); margin: 0 auto var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(22px * var(--text-scale, 1));
}

/* ───── Tiny utils ───────────────────────────────────────── */
.hidden { display: none !important; }
.flex-1 { flex: 1; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-8 { margin-bottom: var(--sp-8); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────────────────────────────────────────────────────
 * Responsive sweep — mobile-first. Agents work on iPad + phone
 * in the field. Three tiers: phone (<640), tablet (640–1024),
 * desktop (>1024).
 * ─────────────────────────────────────────────────────────── */

/* Tablet (≤1024) — single-column editor */
@media (max-width: 1024px) {
  :root { --topbar-h: 56px; }
  .app-main { padding: var(--sp-8) var(--sp-5) var(--sp-12); }
  .editor { grid-template-columns: 1fr; }
  .editor-panel  { padding: var(--sp-6) var(--sp-5) var(--sp-10); border-right: 0; border-bottom: 1px solid var(--line); }
  .editor-preview {
    position: relative; top: 0; height: 72vh;
    padding: var(--sp-4);
  }
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .auth-card { padding: var(--sp-8); }
}

/* Phone (≤640) — tighter spacing, simpler topbar, stacked rows */
@media (max-width: 640px) {
  :root {
    --topbar-h: 56px;
    --sp-8: 24px;
    --sp-10: 32px;
    --sp-12: 40px;
  }
  body { font-size: calc(15px * var(--text-scale, 1)); }
  .h1 { font-size: calc(26px * var(--text-scale, 1)); }
  .h2 { font-size: calc(20px * var(--text-scale, 1)); }
  .h3 { font-size: calc(16px * var(--text-scale, 1)); }
  .app-main { padding: var(--sp-6) var(--sp-4) var(--sp-12); }

  .topbar { padding: 0 var(--sp-4); gap: var(--sp-2); }
  .topbar-brand { font-size: calc(12px * var(--text-scale, 1)); letter-spacing: .14em; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .muted { display: none; }     /* hide "Hi, Dom" on phone */
  .btn-sm { padding: 6px 10px; font-size: calc(12px * var(--text-scale, 1)); }

  .row, .row-between { flex-wrap: wrap; gap: var(--sp-2); }
  .grid-cards { grid-template-columns: 1fr; gap: var(--sp-4); }

  .editor-panel  { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .editor-preview { height: 60vh; padding: var(--sp-3); }
  .editor-section { margin-bottom: var(--sp-8); }

  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .photo-tile .photo-rm { opacity: 1; }          /* always-visible on touch */
  /* On touch the grip IS the drag surface (the tile itself keeps scrolling the
     page), and the tick is how you build a group — both have to be visible. */
  .photo-tile .photo-grip,
  .photo-tile .photo-check { opacity: 1; }

  .auth-wrap { padding: var(--sp-4); }
  .auth-card { padding: var(--sp-6); border-radius: var(--r-3); }
  .auth-card .h1 { font-size: calc(24px * var(--text-scale, 1)); }

  .card-pad    { padding: var(--sp-4); }
  .card-pad-lg { padding: var(--sp-6); }
  .panel       { padding: var(--sp-4); }

  .listing-body { padding: var(--sp-4); }
  .listing-title { font-size: calc(15px * var(--text-scale, 1)); }

  .dropzone { padding: var(--sp-6) var(--sp-4); }

  .toast-host { right: var(--sp-3); bottom: var(--sp-3); left: var(--sp-3); align-items: stretch; }
  .toast { width: 100%; }

  /* Switches stay big & finger-friendly */
  .switch { --w: 42px; --h: 24px; }
}

/* Touch-targets — at least 44px on coarse pointers */
@media (pointer: coarse) {
  .btn, .btn-sm { min-height: 40px; }
  .btn-icon     { min-width: 40px; min-height: 40px; }
  .input, .select { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .switch { --w: 44px; --h: 26px; }
}

/* iOS notch / safe area */
@supports (padding: max(0px)) {
  .topbar { padding-left: max(var(--sp-6), env(safe-area-inset-left)); padding-right: max(var(--sp-6), env(safe-area-inset-right)); }
  .app-main, .editor-panel { padding-left: max(var(--sp-5), env(safe-area-inset-left)); padding-right: max(var(--sp-5), env(safe-area-inset-right)); }
}


/* ═══════════════════════════════════════════════════════════════
   RECOVERED VIEW STYLES — rebuilt 2026-06-07 (compaction-lost .ld-/.bk-/.sd-/.mt2-)
   ═══════════════════════════════════════════════════════════════ */
/* --- listing-dashboard (.ld-) --- */
/* Capital Shots Agent Portal — Listing Dashboard view (ld-)
 * Route: /listings/:slug/dashboard — single-property hub.
 * Warm-white, calm, professional. Tokens only (tokens.css), conventions
 * mirror main.css (.topbar / .app-main / .btn / .kicker / .muted / .card).
 * Only classes emitted by views/listing-dashboard.js are styled here.
 */

/* ── Topbar status pill (Live / Draft) ───────────────────── */
.ld-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.ld-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .7;
}
.ld-pill.is-ok   { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.ld-pill.is-warn { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }

/* ── Page grid — single centered content column ──────────── */
.ld-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

/* ── Hero — big rounded cover + address block ────────────── */
.ld-hero {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.ld-hero-img {
  width: 100%;
  height: clamp(240px, 38vw, 440px);
  object-fit: cover;
  display: block;
  background: var(--bg-sunken);
}
.ld-hero-empty {
  width: 100%;
  height: clamp(200px, 30vw, 340px);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken);
  color: var(--ink-4);
  font-size: calc(14px * var(--text-scale, 1));
  letter-spacing: var(--tracking-normal);
}
.ld-hero-info {
  padding: var(--sp-8);
}
.ld-hero-info .h1 { margin-top: 2px; }

/* ── Meta row — horizontal stat-grid (the fix) ───────────── */
.ld-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.ld-meta-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-4) var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  min-width: 0;
}
.ld-meta-item .v {
  font-size: calc(20px * var(--text-scale, 1)); font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-meta-item .l {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-3);
}

/* ── Action tiles — Editor / Delivery / Templates / Share ── */
.ld-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.ld-action {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  width: 100%;
  text-align: left;
  padding: var(--sp-5);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.ld-action:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.ld-action:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ld-action:active { transform: translateY(0); }
.ld-action-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-2);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: calc(18px * var(--text-scale, 1)); line-height: 1;
}
.ld-action-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ld-action-title {
  font-size: calc(15px * var(--text-scale, 1)); font-weight: 600;
  letter-spacing: var(--tracking-normal);
  color: var(--ink);
}
.ld-action-sub {
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--ink-3);
  line-height: var(--leading-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Deliverables — tidy count grid ──────────────────────── */
.ld-stats {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-6);
}
.ld-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
}
.ld-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-4) var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  text-align: center;
}
.ld-stat-value {
  font-size: calc(24px * var(--text-scale, 1)); font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.ld-stat-label {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-3);
}

/* ── Marketing assets card ───────────────────────────────── */
.ld-mkt-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-6);
}
.ld-mkt-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.ld-mkt-actions {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 0 0 auto;
}
.ld-mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
}
.ld-mkt-tile {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--ink);
  border-radius: var(--r-2);
  transition: transform var(--t-base) var(--ease);
}
.ld-mkt-tile:hover { transform: translateY(-2px); }
.ld-mkt-tile:hover .ld-mkt-thumb { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.ld-mkt-tile:focus-visible { outline: none; }
.ld-mkt-tile:focus-visible .ld-mkt-thumb { box-shadow: var(--shadow-focus); }
.ld-mkt-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.ld-mkt-thumb[data-fmt="igstory"] { aspect-ratio: 9 / 16; }
.ld-mkt-thumb[data-fmt="fb"]      { aspect-ratio: 191 / 100; }
.ld-mkt-thumb[data-fmt="print"]   { aspect-ratio: 17 / 22; }
.ld-mkt-spin {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  animation: ld-spin .7s linear infinite;
}
@keyframes ld-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ld-mkt-spin { animation-duration: 2s; }
}
.ld-mkt-name {
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--tracking-normal);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-mkt-fmt {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-3);
}

/* ── Listing agent card ──────────────────────────────────── */
.ld-agent {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-6);
}
.ld-agent-card {
  display: flex; flex-direction: column; gap: 4px;
}
.ld-agent-name {
  font-size: calc(18px * var(--text-scale, 1)); font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.ld-agent-brokerage {
  font-size: calc(14px * var(--text-scale, 1));
  color: var(--ink-2);
}
.ld-agent-contact {
  font-size: calc(13px * var(--text-scale, 1));
  color: var(--ink-3);
  margin-bottom: var(--sp-2);
}

/* ───────────────────────────────────────────────────────────
 * Responsive — tablet (≤1024) and phone (≤640).
 * Panes stack, grids collapse. Mirrors main.css sweep.
 * ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .ld-grid { gap: var(--sp-5); }
  .ld-hero-info { padding: var(--sp-6); }
  .ld-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ld-actions { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .ld-mkt-head { flex-direction: column; align-items: stretch; }
  .ld-mkt-actions { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .ld-grid { gap: var(--sp-4); }
  .ld-hero-info { padding: var(--sp-5); }

  /* Meta stays a grid — 2 across so values never wrap to vertical text */
  .ld-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .ld-meta-item { padding: var(--sp-3); }
  .ld-meta-item .v { font-size: calc(18px * var(--text-scale, 1)); }

  .ld-actions { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ld-action { padding: var(--sp-4); }

  .ld-stats { padding: var(--sp-5); }
  .ld-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .ld-stat-value { font-size: calc(20px * var(--text-scale, 1)); }

  .ld-mkt-card, .ld-agent { padding: var(--sp-5); }
  .ld-mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .ld-mkt-actions .btn { flex: 1; }
}

/* Touch — keep tiles tappable, no hover-only affordances */
@media (pointer: coarse) {
  .ld-action:hover { transform: none; }
  .ld-mkt-tile:hover { transform: none; }
}
/* --- sign-designer (.sd-) --- */
/* Capital Shots Agent Portal — Sign Designer view (sd-)
 * Route: /listings/:slug/sign-designer
 * A 3-pane print-product designer: left template rail · center preview stage ·
 * right options + live price card. Warm-white, calm, professional.
 * Tokens only — no hardcoded colors/spacing. Mirrors main.css conventions
 * (cards, .field/.select, .btn, .kicker, .muted, soft borders/shadows).
 */

/* ───── Shell — 3 panes side by side, fills the viewport below topbar ───── */
.sd-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 380px;
  height: calc(100vh - var(--topbar-h));
  min-height: 0;
  background: var(--bg);
}

/* ───── Left rail — scrollable column of template tiles ───── */
.sd-rail {
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--bg-elevated);
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.sd-rail::-webkit-scrollbar { width: 10px; }
.sd-rail::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg-elevated);
  border-radius: var(--r-round);
}

/* Template tile — thumbnail card + name; whole tile is a button */
.sd-tile {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease),
              background var(--t-base) var(--ease);
}
.sd-tile:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.sd-tile:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sd-tile:active { transform: translateY(0); }

/* Selected template */
.sd-tile.is-on {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--shadow-1);
}
.sd-tile.is-on:hover { border-color: var(--brand); }

/* Thumbnail — fixed-ratio frame; JS sets background-image */
.sd-tile-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-2);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading spinner inside a thumbnail (removed by JS once rendered) */
.sd-tile-spin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  animation: sd-spin 720ms linear infinite;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sd-tile-spin { animation-duration: 2.4s; }
}

/* Tile caption */
.sd-tile-name {
  margin-top: var(--sp-2);
  padding: 0 var(--sp-1) var(--sp-1);
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--ink-2);
}
.sd-tile.is-on .sd-tile-name { color: var(--brand-deep); }

/* ───── Center — preview stage on a sunken canvas ───── */
.sd-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg-sunken);
}

/* The artwork frame — JS sizes width/height to the scaled format */
.sd-stage {
  position: relative;
  background: #fff;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  flex: 0 0 auto;
}

/* ───── Right side panel — options + price card ───── */
.sd-side {
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-12);
  background: var(--bg-elevated);
  border-left: 1px solid var(--line);
  scrollbar-width: thin;
}
.sd-side::-webkit-scrollbar { width: 10px; }
.sd-side::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg-elevated);
  border-radius: var(--r-round);
}
.sd-side .h3 { margin-top: 2px; }

/* Options group — dropdown stack */
.sd-opts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sd-opts .field:last-child { margin-bottom: 0; }
.sd-opts .row { margin-bottom: var(--sp-4); }
.sd-opts .row .field { margin-bottom: 0; }

/* ───── Live price card ───── */
.sd-price-card {
  padding: var(--sp-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.sd-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.sd-price-row > span { color: var(--ink-2); font-size: calc(14px * var(--text-scale, 1)); }
.sd-price-row strong {
  font-size: calc(22px * var(--text-scale, 1));
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
/* Sub rows — quiet meta lines under the headline price */
.sd-price-sub {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-soft);
}
.sd-price-sub > span {
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--ink-3);
  line-height: var(--leading-snug);
}
.sd-price-sub + .sd-price-sub {
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 0;
}

/* CTA block — primary order button + ghost link, stacked */
.sd-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.sd-cta .btn { width: 100%; }

/* Trust / rules block */
.sd-rules {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.sd-trust-list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.sd-trust-list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: var(--leading-snug);
  color: var(--ink-3);
}
.sd-trust-list li strong { color: var(--ink-2); font-weight: 500; }
.sd-trust-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .8;
}

/* ───── Local fallbacks for utility/link classes this view emits
 * (not present in main.css's util set: .mt-6, generic .link). ───── */
.sd-side .mt-6 { margin-top: var(--sp-6); }
.sd-side .link {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: color var(--t-base) var(--ease), text-decoration-color var(--t-base) var(--ease);
}
.sd-side .link:hover { color: var(--brand); text-decoration-color: currentColor; }

/* ───────────────────────────────────────────────────────────
 * Responsive — panes collapse to one column on tablet/phone.
 * Matches main.css tiers: tablet ≤1024, phone ≤640.
 * ─────────────────────────────────────────────────────────── */

/* Tablet — drop the right options panel below; rail + stage stay side by side */
@media (max-width: 1024px) {
  .sd-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas:
      'rail main'
      'side side';
    height: auto;
    min-height: calc(100vh - var(--topbar-h));
  }
  .sd-rail { grid-area: rail; }
  .sd-main { grid-area: main; min-height: 56vh; }
  .sd-side {
    grid-area: side;
    border-left: 0;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
}

/* Phone — fully stacked: rail (horizontal scroll), stage, options */
@media (max-width: 640px) {
  .sd-shell {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .sd-rail {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
  }
  .sd-tile {
    flex: 0 0 144px;
    width: 144px;
  }
  .sd-main {
    min-height: 48vh;
    padding: var(--sp-5);
  }
  .sd-side {
    padding: var(--sp-6) var(--sp-4) var(--sp-10);
    overflow: visible;
  }
  .sd-opts .row { flex-wrap: wrap; }
  .sd-opts .row .field { min-width: 0; flex: 1 1 100%; }
  .sd-price-row strong { font-size: calc(20px * var(--text-scale, 1)); }
}
/* --- brand-kit (.bk-) --- */
/* Capital Shots Agent Portal — Brand Kit view (/account/brand-kit)
 * Class prefix: bk-
 * Layer for the brand-kit editor only. Base primitives (.field/.input/.select/
 * .btn/.dropzone/.dz-title/.dz-sub/.editor-section/.section-sub/.row/.gap-3/
 * .flex-1/.kicker/.muted + layout) already live in main.css — this file only
 * adds the brand-kit-specific layout, the upload asset grids, the real color
 * swatches, the palette rows, and the contact-defaults form rhythm.
 * Warm-white, calm, professional. All values from tokens.css. Never screaming.
 */

/* ───── Page shell ───────────────────────────────────────── */
.bk-main {
  max-width: 920px;          /* narrower than --max-w-app — a single editing column reads calmer */
  /* 068 item 1 (Dom directive): the ROSE area remap is DELETED. Brand-kit no
   * longer overrides --brand — every active state, selection ring, and check
   * inside the tool now keys to the global emerald --brand. Zero pink anywhere. */
}
/* 064 item 3 REDO: form-control focus inside brand-kit (and every other
 * area) is handled by ONE global rule at the very end of this file — see
 * "GLOBAL FORM-CONTROL FOCUS". Never re-add a per-area focus override. */
.bk-intro {
  max-width: 64ch;
}

/* De-boxed (053 Add1 + Add9 audit): open sections — hairline + whitespace. */
.bk-sect {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.bk-sect:first-of-type { border-top: 0; padding-top: var(--sp-2); }
.bk-sect:last-of-type { padding-bottom: 0; }
.bk-sect .h3 { margin-bottom: var(--sp-2); }
.bk-sect .section-sub { max-width: 64ch; }

/* ───── Upload asset grids (Logos / Badges / Headshots) ──── */
.bk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-4);
}
/* When the grid is empty the JS drops in a single .muted line — keep it from
   stretching the implicit track and give it breathing room. */
.bk-grid:has(> .muted) {
  display: block;
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
  background: var(--bg);
}

/* A single uploaded asset — rounded thumbnail card with name + remove + active */
.bk-asset-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.bk-asset-cell:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.bk-asset-cell img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  /* subtle checker-ish neutral bed so transparent logos/badges stay legible */
  background:
    linear-gradient(45deg, var(--bg-sunken) 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, var(--bg-sunken) 25%, transparent 25%) 0 0 / 16px 16px,
    var(--bg-elevated);
  padding: var(--sp-3);
}

/* Active state — highlighted with brand accent, never a loud fill */
.bk-asset-cell.is-on {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-2);
}
.bk-asset-cell.is-on img {
  background-color: var(--brand-soft);
}

.bk-asset-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line);
  min-height: 38px;
}
.bk-asset-name {
  font-size: calc(13px * var(--text-scale, 1));
  color: var(--ink-2);
  line-height: var(--leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.bk-asset-active {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-deep);
  background: var(--brand-soft);
  border-radius: var(--r-pill);
}
.bk-asset-active::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand);
}
.bk-asset-makeactive {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 500;
  color: var(--ink-3);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.bk-asset-makeactive:hover {
  color: var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand-deep) 28%, transparent);
  background: var(--brand-soft);
}
.bk-asset-makeactive:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Remove control — quiet by default, top-right, reddens on intent */
.bk-asset-x {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--text-scale, 1));
  line-height: 1;
  color: var(--ink-3);
  background: rgba(253,252,249,.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.bk-asset-cell:hover .bk-asset-x,
.bk-asset-x:focus-visible { opacity: 1; }
.bk-asset-x:hover {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 32%, transparent);
  background: color-mix(in srgb, var(--err) 10%, transparent);
}
.bk-asset-x:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (pointer: coarse) {
  .bk-asset-x { opacity: 1; }      /* always reachable on touch */
}

/* Dropzone tile — base .dropzone handles look; bk-uploader just sets rhythm */
.bk-uploader {
  display: block;
  margin-top: 0;
}

/* ───── Colors — curated palette chips (real swatches) ───── */
.bk-palette-row-curated {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* A curated swatch is a real colored square, not colored text.
 * Renamed from the old .mt2-palette-chip (053 audit): that class name was
 * shared with the unrelated 26px circular palette dots in the templates
 * designer (main.css "templates chrome" section) — a selector collision
 * that (a) shrank/rounded these swatches to the other component's size and
 * (b) left a stray pink (--brand, the brand-kit ROSE area accent) ring on
 * whichever swatch was selected, with no relation to that swatch's own
 * colour. Scoped + de-collided. (Selection ring since removed entirely —
 * 064 item 4 below.) */
/* 064 item 4 (Dom): "Please do circles, no outline. It looks cheap."
 * Pure colour circles — no border, no inset highlight, no selection ring.
 * Selected state = the small centred checkmark ONLY. Keyboard focus keeps
 * a ring for a11y (only ever visible via :focus-visible, i.e. keyboard —
 * mouse clicks never show it). */
.bk-palette-chip {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.bk-palette-chip:hover {
  transform: translateY(-2px);
}
.bk-palette-chip:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }
/* Selected curated palette — quiet centred check only, no ring/outline. */
.bk-palette-chip.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* ───── Font combobox (068 item 3) — accessible custom listbox replacing the
 * native <select>, so each font name renders IN its own typeface on EVERY OS
 * (macOS/Safari ignore <option> font-family). WAI-ARIA combobox+listbox. ── */
.bk-font-lb, .flb { position: relative; }
.flb-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--bg-elevated); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  font-family: var(--font-sans); font-size: calc(15px * var(--text-scale, 1)); line-height: 1.2;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.flb-btn:hover { border-color: var(--ink-4); }
.flb-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); border-color: var(--focus-ring-c); }
.flb-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.flb-val.is-placeholder { color: var(--ink-4); font-family: var(--font-sans) !important; }
.flb-caret { flex: none; color: var(--ink-3); display: inline-flex; transition: transform var(--t-fast) var(--ease); }
.flb.is-open .flb-caret { transform: rotate(180deg); }
/* Open listbox outranks positioned content below its host (photo tiles etc.) */
.flb.is-open { z-index: 45; }
.flb-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto; padding: 6px;
  background: var(--bg-elevated); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); box-shadow: var(--shadow-3);
}
.flb-pop[hidden] { display: none; }
.flb-group + .flb-group { margin-top: 4px; }
.flb-group-label {
  padding: 6px 10px 4px; font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; color: var(--ink-3);
  position: sticky; top: -6px; background: var(--bg-elevated);
}
.flb-opt {
  padding: 9px 12px; border-radius: var(--r-1); cursor: pointer;
  font-size: calc(17px * var(--text-scale, 1)); line-height: 1.15; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flb-opt.is-active { background: var(--bg-sunken); }
.flb-opt[aria-selected="true"] { color: var(--brand); font-weight: 500; }
.flb-opt[aria-selected="true"]::after { content: ' ✓'; color: var(--brand); font-size: calc(13px * var(--text-scale, 1)); }

/* ───── Custom-font toggle (064 item 2) — the free-text Google Font field
 * has real function (typing any font beyond the curated list), so it isn't
 * deleted, just collapsed behind a small toggle instead of sitting open
 * and duplicating the dropdown's own selected name at all times. ───── */
.bk-font-custom-toggle {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 0;
  border: none;
  background: none;
  font-size: calc(13px * var(--text-scale, 1));
  color: var(--ink-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bk-font-custom-toggle:hover { color: var(--ink); }
.bk-font-custom-wrap {
  display: none;
}
.bk-font-custom-wrap.is-open {
  display: block;
  margin-top: var(--sp-2);
}

/* ───── Font specimen — real preview, not the font name repeated (053
 * audit item 4). "Aa Bb Cc 0123" set live in the chosen typeface. ───── */
.bk-font-specimen {
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg-elevated);
  font-size: calc(22px * var(--text-scale, 1));
  line-height: 1.3;
  color: var(--ink);
  min-height: 1.3em;
}
.bk-font-specimen.is-empty {
  font-size: calc(13px * var(--text-scale, 1));
  color: var(--ink-3);
  font-style: italic;
}

/* Native color inputs styled to feel like swatches, not OS chrome */
.input-color {
  width: 100%;
  min-width: 56px;
  height: 44px;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.input-color:hover { border-color: var(--line-strong); }
.input-color::-webkit-color-swatch-wrapper { padding: 0; }
.input-color::-webkit-color-swatch { border: 0; border-radius: var(--r-1); }
.input-color::-moz-color-swatch { border: 0; border-radius: var(--r-1); }

/* Full multi-color palette list (primary/secondary/accent/neutral rows) */
.bk-palette-full {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.bk-palette-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  transition: border-color var(--t-base) var(--ease);
}
.bk-palette-row:hover { border-color: var(--line-strong); }
/* The first input in a palette row is the color picker — give it swatch chrome */
.bk-palette-row input[type="color"] {
  width: 48px;
  height: 36px;
  padding: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.bk-palette-row input[type="color"]:hover { border-color: var(--line-strong); }
.bk-palette-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bk-palette-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.bk-palette-row input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
/* The role text field — inherit .input look without the class */
.bk-palette-row input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: calc(15px * var(--text-scale, 1));
  color: var(--ink);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.bk-palette-row input[type="text"]::placeholder { color: var(--ink-4); }
.bk-palette-row input[type="text"]:hover { border-color: var(--line-strong); }
/* Reuse the asset remove control inside palette rows — make it inline, not absolute */
.bk-palette-row .bk-asset-x {
  position: static;
  opacity: 1;
  flex: 0 0 auto;
}

/* Visually-hidden label text inside swatch buttons */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ───── Brokerage picker (Brand Kit) ─────────────────────────
 * Pre-loaded logo library + upload-your-own. Dark-native: logos ride on a
 * near-black bed so the sourced white/reverse lockups read cleanly; marks
 * with no file fall back to a two-tone brand-colour chip. */
.bk-brk-current {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.bk-brk-current-logo {
  flex: 0 0 auto;
  width: 88px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken);
  border-radius: var(--r-1);
  overflow: hidden;
}
.bk-brk-current-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bk-brk-current-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-brk-current-meta strong { font-size: calc(15px * var(--text-scale, 1)); color: var(--ink); }
.bk-brk-current-tag {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-3);
}

.bk-brk-searchrow { margin-bottom: var(--sp-3); }
.bk-brk-searchrow .input { max-width: 320px; }

.bk-brk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* One brokerage cell: logo bed + name. Selectable, quiet until hover/on. */
.bk-brk-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.bk-brk-cell:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.bk-brk-cell:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.bk-brk-cell.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-2); }

/* Logo bed — deliberately dark so white/reverse lockups have contrast */
.bk-brk-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 2;
  padding: var(--sp-4);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
}
.bk-brk-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Broken image → hide it, the chip fallback is layered behind via JS class */
.bk-brk-logo.is-broken img { display: none; }
/* Marks with no white/reverse lockup (dark/coloured on transparent) get a
   light plate so they don't disappear against the dark bed. */
.bk-brk-cell.light-bed .bk-brk-logo { background: #f4f2ec; border-bottom-color: var(--line-strong); }

/* Two-tone brand-colour chip for brokerages with no logo file on disk */
.bk-brk-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c1) 50%, var(--c2) 50%, var(--c2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.bk-brk-cell.no-logo .bk-brk-logo { background: var(--bg); }

.bk-brk-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-2);
  line-height: var(--leading-snug);
}
.bk-brk-tag {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-4);
  padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--r-pill);
}

/* 065 C13 — typographic brokerage nameplates (picker shows names, not logos;
 * consistent size, brokerage primary as a thin accent tick). */
.bk-brk-cell.is-nameplate { min-height: 64px; }
.bk-brk-plate {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 8px);
  min-height: 64px; position: relative;
}
.bk-brk-plate::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 2px; background: var(--brk-acc, var(--line-strong)); opacity: .9;
}
.bk-brk-platename {
  font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); line-height: var(--leading-snug);
}
.bk-brk-cell.is-nameplate .bk-brk-tag { align-self: flex-start; }
.bk-brk-nofile {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: none; color: var(--ink-4);
  padding: 2px 7px; background: rgba(0,0,0,.28); border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bk-brk-check {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand);
}
.bk-brk-check::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 5px;
  border-left: 2px solid var(--brand-ink); border-bottom: 2px solid var(--brand-ink);
  transform: translateY(-1px) rotate(-45deg);
}

.bk-brk-own {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-2);
}

/* ───── Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .bk-sect { padding: var(--sp-6); }
  .bk-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .bk-brk-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 640px) {
  .bk-sect { padding: var(--sp-5); margin-bottom: var(--sp-4); }
  /* Asset grids collapse to two-up on phone */
  .bk-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .bk-brk-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .bk-brk-searchrow .input { max-width: none; }
  .bk-brk-own { flex-wrap: wrap; }
  /* Curated swatches stay tappable */
  .mt2-palette-chip { width: 44px; height: 44px; }
  /* Palette rows: keep the color picker + remove on a line, role field below */
  .bk-palette-row {
    grid-template-columns: 48px 1fr auto;
    gap: var(--sp-2);
  }
  /* The .row groups in the contact form already wrap (main.css), so the
     2-col field pairs stack to one column on phone automatically. */
}
/* --- templates chrome (.mt2-) --- */
/* ============================================================================
 * Capital Shots Agent Portal — Marketing Templates Designer (templates-chrome)
 * Route: /listings/:slug/templates   ·   class prefix: mt2-
 *
 * App CHROME only — the canvas artwork (.mt-root and its template internals)
 * is styled in marketing-templates.js / its own sheet. Here we lay out the
 * 3-pane designer: sticky topbar · left template rail · center preview canvas ·
 * right inspector · bottom photo strip + kit bar, plus the assets drawer and
 * the order-prints modal.
 *
 * Warm-white, calm, professional. Tokens only — no hardcoded colors/spacing.
 * Conventions copied from main.css (.btn / .field-label / .kicker / cards).
 * ==========================================================================*/

/* ── Tiny scoped helpers the markup uses but main.css doesn't define ──────── */
.mt2-shell .sr,
#mt2-order-modal .sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt2-modal-head .mb-1,
#mt2-order-modal .mb-1 { margin-bottom: var(--sp-1); }

/* ── 3-pane shell ────────────────────────────────────────────────────────── */
/* Fills the viewport below the sticky topbar; each pane scrolls on its own. */
.mt2-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) var(--drawer-w);
  height: calc(100dvh - var(--topbar-h));
  background: var(--bg);
  overflow: hidden;
}

/* ── LEFT: template rail ─────────────────────────────────────────────────── */
.mt2-rail-wrap {
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--line);
}
.mt2-rail-head {
  flex: 0 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
}

/* Category tabs (#mt2-cats) */
.mt2-cats {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.mt2-cat {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: var(--tracking-normal);
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.mt2-cat:hover { background: var(--bg-hover); color: var(--ink); }
.mt2-cat.is-on {
  background: var(--brand-soft);
  color: var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand-deep) 18%, transparent);
}
.mt2-cat:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Thumbnail tile grid (#mt2-rail) */
.mt2-rail {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  align-content: start;
}

.mt2-tile {
  display: flex; flex-direction: column;
  text-align: left;
  padding: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.mt2-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.mt2-tile:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.mt2-tile.is-on {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-2);
}
/* Format not supported by this template — dimmed, still selectable */
.mt2-tile.is-degraded { opacity: .55; }
.mt2-tile.is-degraded:hover { opacity: .82; }
/* Currently part of the marketing kit — green tint accent */
.mt2-tile.is-in-kit {
  border-color: color-mix(in srgb, var(--brand-deep) 40%, transparent);
  background: var(--brand-soft);
}
.mt2-tile.is-in-kit.is-on { box-shadow: 0 0 0 1px var(--brand), var(--shadow-2); }

.mt2-tile-img {
  position: relative;
  width: 100%;
  flex: none;             /* 068 B — never flex-shrink the preview: shrinking
                           * collapsed it to a sliver and the render floated
                           * small inside the frame (Dom's "white edges"). */
  aspect-ratio: 4 / 5;    /* overridden inline per-format by mountLivePreview */
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.mt2-tile-spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  animation: mt2-spin .7s linear infinite;
}
@keyframes mt2-spin { to { transform: rotate(360deg); } }
.mt2-tile-img-err {
  font-size: calc(12px * var(--text-scale, 1)); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-4);
}

.mt2-tile-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
  min-height: 34px;
}
.mt2-tile-label {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  color: var(--ink);
  line-height: var(--leading-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt2-tile-kit-mark {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; line-height: 1;
  background: var(--bg-sunken); color: var(--ink-2);
}
.mt2-tile.is-in-kit .mt2-tile-kit-mark { background: var(--brand); color: var(--brand-ink); }
.mt2-tile-warn {
  flex: 0 0 auto;
  font-size: calc(12px * var(--text-scale, 1)); color: var(--warn);
}

/* ── CENTER: main column (format bar · preview · drawer · strip · kit bar) ── */
.mt2-main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--bg);
  position: relative;
}

/* Empty-state banner prepended above the format bar */
.mt2-empty-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex: 0 0 auto;
  padding: 10px var(--sp-5);
  background: var(--accent-money-soft);
  border-bottom: 1px solid var(--accent-money-line);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2);
}
.mt2-empty-banner strong { color: var(--ink); font-weight: 600; }

/* Format strip (#mt2-fmts) */
.mt2-fmts {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
}
.mt2-fmt {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 12px;
  border-radius: var(--r-2);
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.mt2-fmt:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.mt2-fmt:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.mt2-fmt.is-on {
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand-deep) 22%, transparent);
}
.mt2-fmt.is-disabled,
.mt2-fmt:disabled { opacity: .4; cursor: not-allowed; }
.mt2-fmt-short {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; color: var(--ink);
  letter-spacing: var(--tracking-normal);
}
.mt2-fmt.is-on .mt2-fmt-short { color: var(--brand-deep); }
.mt2-fmt-dim {
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-4);
  font-family: var(--font-mono); font-feature-settings: 'tnum';
}

/* Preview canvas (#mt2-preview) — sunken surface, artwork centered */
.mt2-preview {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8);
  overflow: auto;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,.015), transparent 60%),
    var(--bg-sunken);
}
/* Drag-and-drop highlight when a photo cell is dragged over the canvas */
.mt2-preview.is-drop-target {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.mt2-preview.is-drag-over {
  box-shadow: inset 0 0 0 2px var(--brand);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--brand-soft), transparent 70%),
    var(--bg-sunken);
}

/* The scaled stage wrapper that holds .mt-root (artwork). JS sets its size. */
.mt2-stage {
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
}
.mt2-stage .mt-root { will-change: transform; }

/* Hero crop target affordance (added to the artwork's hero element by JS) */
.mt2-hero-target { cursor: grab; }
.mt2-hero-target.is-cropping { cursor: grabbing; }

/* Click-to-edit text affordance inside the artwork */
.mt2-editable { cursor: text; outline: 1px dashed transparent; outline-offset: 2px; transition: outline-color var(--t-fast) var(--ease); }
.mt2-editable:hover { outline-color: var(--brand); }
.mt2-editable.is-editing { outline: 1px solid var(--brand); outline-offset: 2px; }

/* ── Assets drawer (#mt2-assets-drawer) — overlays the preview area ───────── */
.mt2-assets-drawer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.mt2-assets-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.mt2-assets-head .h3 { margin-top: 4px; }
.mt2-assets-head .muted { margin-top: 6px; line-height: var(--leading-snug); }
.mt2-assets-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-8);
}
.mt2-assets-sect {
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.mt2-assets-sect:last-child { border-bottom: 0; padding-bottom: 0; }

.mt2-assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.mt2-asset-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.mt2-asset-cell:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.mt2-asset-cell.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.mt2-asset-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mt2-asset-x {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: calc(13px * var(--text-scale, 1)); line-height: 1;
  background: var(--bg-elevated); color: var(--ink-3);
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease), color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.mt2-asset-cell:hover .mt2-asset-x { opacity: 1; }
.mt2-asset-x:hover { background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err); }

.mt2-assets-uploader {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 14px;
  border-radius: var(--r-2);
  border: 1px dashed var(--line-strong);
  background: var(--bg);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.mt2-assets-uploader:hover { background: var(--bg-hover); border-color: var(--brand); color: var(--ink); }

.mt2-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.mt2-contact-grid label {
  display: flex; flex-direction: column; gap: 5px;
}
.mt2-contact-grid label > span {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-3);
}
.mt2-contact-grid input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

/* 068 Dom item C — "white strip along the slider": the hero-photo slider row
 * (and every other scrollable rail) was drawing the BROWSER-DEFAULT light
 * scrollbar on the dark portal — a glowing white/grey strip pinned along the
 * slider. Dark, slim, quiet scrollbars portal-wide. */
* { scrollbar-width: thin; scrollbar-color: rgba(120,124,132,.45) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(120,124,132,.45);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(120,124,132,.7); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ── Photo strip (#mt2-photo-strip + row) ────────────────────────────────── */
.mt2-photo-strip {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
}
.mt2-photo-strip-label {
  flex: 0 0 auto;
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-3);
}
.mt2-photo-strip-row {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; gap: var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
}
.mt2-photo-cell {
  position: relative;
  flex: 0 0 auto;
  width: 76px; aspect-ratio: 4 / 3;
  border-radius: var(--r-1);
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.mt2-photo-cell:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.mt2-photo-cell:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.mt2-photo-cell img { width: 100%; height: 100%; object-fit: cover; }
.mt2-photo-cell.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.mt2-photo-cell.is-dragging { opacity: .5; }
.mt2-photo-cell-mark {
  position: absolute; top: 3px; right: 3px;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: calc(12px * var(--text-scale, 1)); line-height: 1;
  background: var(--brand); color: var(--brand-ink);
  opacity: 0; transform: scale(.6);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.mt2-photo-cell.is-on .mt2-photo-cell-mark { opacity: 1; transform: scale(1); }
.mt2-photo-empty {
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3);
  padding: var(--sp-2) 0;
}
.mt2-photo-empty .link { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.mt2-photo-empty .link:hover { color: var(--brand); }

/* ── Keyboard-shortcuts hint ─────────────────────────────────────────────── */
.mt2-shortcuts-hint {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  padding: 6px var(--sp-5);
  background: var(--bg-elevated);
  border-top: 1px solid var(--line-soft);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-4);
}
.mt2-shortcuts-hint span { display: inline-flex; align-items: center; gap: 6px; }
.mt2-shortcuts-hint kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; padding: 1px 5px;
  font-family: var(--font-mono); font-size: calc(12px * var(--text-scale, 1));
  color: var(--ink-2);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

/* ── Kit bar (bottom) ────────────────────────────────────────────────────── */
.mt2-kit-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
  /* Hidden until "Build kit" mode is on */
  display: none;
}
.mt2-shell[data-kit-mode="true"] .mt2-kit-bar { display: flex; }

.mt2-kit-summary {
  flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.mt2-kit-label {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-3);
}
#mt2-kit-count { font-size: calc(16px * var(--text-scale, 1)); font-weight: 600; color: var(--ink); }
.mt2-kit-sub { font-size: calc(12px * var(--text-scale, 1)); }

.mt2-kit-tray {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; gap: var(--sp-2);
  overflow-x: auto;
  align-items: center;
}
.mt2-kit-empty {
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3);
  white-space: nowrap;
}
.mt2-kit-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand-deep) 18%, transparent);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink);
}
.mt2-kit-chip-fmt {
  font-size: calc(10px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--brand-deep);
  padding: 1px 6px;
  background: var(--bg-elevated);
  border-radius: var(--r-pill);
}
.mt2-kit-chip-x {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: calc(13px * var(--text-scale, 1)); line-height: 1;
  color: var(--ink-3);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mt2-kit-chip-x:hover { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }

/* ── RIGHT: inspector (#mt2-opts + hero slot) ────────────────────────────── */
.mt2-inspector {
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--bg-elevated);
  border-left: 1px solid var(--line);
}
.mt2-inspector-head {
  flex: 0 0 auto;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.mt2-inspector-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
}
.mt2-inspector-sect {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.mt2-inspector-section-label { margin-bottom: var(--sp-3); display: block; }

/* Options stack (#mt2-opts) — each control on its own row */
.mt2-opts {
  display: flex; flex-direction: column;
  gap: var(--sp-4);
}
.mt2-opt {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
}
.mt2-opt > label,
.mt2-opt > .field-label {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-3);
}
.mt2-opt input[type="text"],
.mt2-opt input[type="tel"],
.mt2-opt input[type="email"],
.mt2-opt input[type="number"],
.mt2-opt select {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.mt2-opt input::placeholder { color: var(--ink-4); }
.mt2-opt input:hover,
.mt2-opt select:hover { border-color: var(--line-strong); }

/* Accent colour picker row */
.mt2-color-row {
  display: flex; align-items: center; gap: var(--sp-2);
}
.mt2-color-row input[type="color"] {
  width: 44px; height: 36px; padding: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
}
.mt2-color-row input[type="color"]:hover { border-color: var(--line-strong); }
#opt-accent-reset {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-2);
  font-size: calc(15px * var(--text-scale, 1)); color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
#opt-accent-reset:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--line-strong); }

/* Print-safety warning */
.mt2-print-warn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent);
  border-radius: var(--r-2);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-2);
  line-height: var(--leading-snug);
}
.mt2-print-warn-icon { color: var(--warn); flex: 0 0 auto; }
.mt2-print-warn-text { flex: 1 1 140px; min-width: 0; }
.mt2-print-warn-snap {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 500;
  color: var(--brand-ink);
  background: var(--brand);
  transition: background var(--t-base) var(--ease);
}
.mt2-print-warn-snap:hover { background: var(--brand-deep); color: #fff; }

/* Palette chips */
.mt2-palette-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
/* 068 item 4 (Dom): ONE chip component everywhere — matches brand-kit's
 * .bk-palette-chip. Outline-free colour circles; selected = centred check. */
.mt2-palette-chip {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.mt2-palette-chip:hover { transform: translateY(-2px); }
.mt2-palette-chip.is-on::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.mt2-palette-chip:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }

/* Font pickers — select + custom free-text + browse link */
.mt2-font-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  align-items: center;
}
.mt2-font-select { grid-column: 1 / -1; }
.mt2-font-input {
  width: 100%;
  padding: 8px 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink);
}
.mt2-font-browse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-2);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3);
  border: 1px solid var(--line);
  background: var(--bg);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.mt2-font-browse:hover { background: var(--bg-hover); color: var(--ink); }

.mt2-opt-assets,
.mt2-opt-color,
.mt2-opt-palette,
.mt2-opt-font { /* layout slots — inherit .mt2-opt; here for explicit naming */ }

/* ── Hero photo tools (#mt2-hero-slot → .mt2-hero-tools) ──────────────────── */
.mt2-hero-tools {
  display: flex; flex-direction: column;
  gap: var(--sp-4);
}
.mt2-hero-row {
  display: flex; align-items: center; gap: var(--sp-2);
}
.mt2-hero-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.mt2-hero-val {
  flex: 0 0 auto;
  min-width: 42px; text-align: right;
  font-family: var(--font-mono); font-feature-settings: 'tnum';
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-2);
}
.mt2-hero-tick {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  border-radius: var(--r-2);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.mt2-hero-tick:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--line-strong); }
.mt2-hero-tick.is-on {
  background: var(--brand-soft); color: var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand-deep) 22%, transparent);
}
.mt2-hero-filter { width: 100%; }

/* ── Topbar overrides scoped to this view ────────────────────────────────── */
/* The shared .topbar / .btn / .btn-back come from main.css; we only add the
 * undo/redo group + the ▾ dropdown menus that are unique to this view. Allow
 * the dense action row to wrap gracefully on small screens. */
.topbar-actions { flex-wrap: wrap; }

.mt2-undo-group {
  display: inline-flex; align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.mt2-undo-btn {
  border-radius: 0;
  border: 0;
  padding: 6px 10px;
  font-size: calc(15px * var(--text-scale, 1)); line-height: 1;
  color: var(--ink-2);
}
.mt2-undo-btn + .mt2-undo-btn { border-left: 1px solid var(--line); }
.mt2-undo-btn:hover { background: var(--bg-hover); color: var(--ink); }
.mt2-undo-btn:disabled { opacity: .4; pointer-events: none; }

/* Reset / My-style dropdown wrappers + menus */
.mt2-reset-wrap,
.mt2-preset-wrap { position: relative; }
.mt2-reset-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 60;
  min-width: 200px;
  padding: var(--sp-2);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; gap: 2px;
}
.mt2-reset-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px;
  border-radius: var(--r-1);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.mt2-reset-menu button:hover { background: var(--bg-hover); color: var(--ink); }
.mt2-reset-menu hr { margin: var(--sp-1) 0; }

/* ── Order-prints modal (#mt2-order-modal / .mt2-modal-wrap) ──────────────── */
.mt2-modal-wrap {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
  background: rgba(20,20,20,.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: mt2-fade var(--t-base) var(--ease);
}
@keyframes mt2-fade { from { opacity: 0; } to { opacity: 1; } }
.mt2-modal {
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px;
  max-height: calc(100dvh - var(--sp-12));
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.mt2-modal-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.mt2-modal-x {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: calc(18px * var(--text-scale, 1)); line-height: 1; color: var(--ink-3);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.mt2-modal-x:hover { background: var(--bg-hover); color: var(--ink); }
.mt2-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.mt2-modal-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* Product picker */
.mt2-prod-list {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.mt2-prod-cell {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.mt2-prod-cell:hover { border-color: var(--line-strong); }
.mt2-prod-cell.is-on { border-color: var(--brand); background: var(--brand-soft); }
.mt2-prod-cell input[type="radio"] { accent-color: var(--brand-deep); flex: 0 0 auto; }
.mt2-prod-name { font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; color: var(--ink); }
.mt2-prod-meta { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); margin-top: 1px; }

/* Quantity chips + number entry */
.mt2-qty-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
.mt2-qty-chip {
  min-width: 40px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 500;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.mt2-qty-chip:hover { background: var(--bg-hover); color: var(--ink); }
.mt2-qty-chip.is-on {
  background: var(--brand-soft); color: var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand-deep) 22%, transparent);
}
.mt2-qty-num {
  width: 72px;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink);
  font-family: var(--font-mono); font-feature-settings: 'tnum';
}

/* Ship-to form grid */
.mt2-ship-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.mt2-ship-grid label {
  display: flex; flex-direction: column; gap: 5px;
}
.mt2-ship-grid label.full { grid-column: 1 / -1; }
.mt2-ship-grid label > span {
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-3);
}
.mt2-ship-grid input,
.mt2-ship-grid select {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

/* Live shipping rates */
.mt2-ship-rates { margin-top: var(--sp-2); }
.mt2-ship-rates-body { display: flex; flex-direction: column; gap: 6px; }
.mt2-ship-note {
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3);
  padding: 10px 12px;
  background: var(--bg-sunken);
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
  line-height: 1.45;
}
.mt2-ship-rate {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.mt2-ship-rate:hover { border-color: var(--line-strong); }
.mt2-ship-rate.is-on { border-color: var(--brand); background: var(--brand-soft); }
.mt2-ship-rate input[type="radio"] { accent-color: var(--brand-deep); flex: 0 0 auto; }
.mt2-ship-rate-name { flex: 1 1 auto; font-size: calc(13px * var(--text-scale, 1)); color: var(--ink); }
.mt2-ship-rate-cost { flex: 0 0 auto; font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--ink); }

/* Order summary */
.mt2-order-summary {
  padding: var(--sp-4);
  background: var(--bg-sunken);
  border-radius: var(--r-2);
}
.mt2-sum-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2);
  padding: 4px 0;
}
.mt2-sum-total {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; color: var(--ink);
}

/* ============================================================================
 * RESPONSIVE — agents work on iPad + phone in the field.
 * Panes collapse to a single scrolling column; rail/inspector go full-width.
 * ==========================================================================*/

/* Tablet (≤1024) — stack panes, page scrolls instead of inner panes */
@media (max-width: 1024px) {
  .mt2-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100dvh - var(--topbar-h));
    overflow: visible;
  }
  .mt2-rail-wrap {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    order: 1;
  }
  .mt2-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 360px;
  }
  .mt2-main { order: 2; }
  .mt2-preview { min-height: 56vh; }
  .mt2-inspector {
    order: 3;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .mt2-inspector-body { overflow-y: visible; }
  .mt2-assets-drawer { position: fixed; inset: 0; z-index: 200; border-left: 0; }
}

/* Phone (≤640) — tightest spacing, two-up rail, single-column forms */
@media (max-width: 640px) {
  .mt2-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--sp-3); gap: var(--sp-2); }
  .mt2-fmts { padding: var(--sp-2) var(--sp-4); }
  .mt2-preview { padding: var(--sp-4); min-height: 48vh; }
  .mt2-photo-strip { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
  .mt2-photo-strip-label { width: 100%; }

  .mt2-contact-grid,
  .mt2-ship-grid { grid-template-columns: 1fr; }
  .mt2-ship-grid label.full { grid-column: auto; }

  .mt2-kit-bar { flex-wrap: wrap; }
  .mt2-shortcuts-hint { display: none; }

  .mt2-modal-wrap { padding: 0; align-items: flex-end; }
  .mt2-modal {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-4) var(--r-4) 0 0;
  }
  .mt2-modal-head,
  .mt2-modal-body { padding: var(--sp-5); }
  .mt2-modal-foot { padding: var(--sp-4) var(--sp-5); }
  .mt2-modal-foot .btn { flex: 1; }
}

/* Coarse pointers — always-visible affordances + bigger touch targets */
@media (pointer: coarse) {
  .mt2-asset-x { opacity: 1; }
  .mt2-photo-cell { width: 88px; }
}

/* ═══════════════════════════════════════════════════════════════
   SPW Style Designer v2 — /account/spw-designer
   Full-bleed live preview center stage, floating control rail,
   three numbered steps. Motion: soft fades + fluid FLIP drags only.
   ═══════════════════════════════════════════════════════════════ */

.spwd2 {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--sp-4);
  height: calc(100dvh - var(--topbar-h));
  padding: var(--sp-4);
  box-sizing: border-box;
}
/* App screen: desktop page scroll is pinned to 0 by the view (pinScroll in
   spw-designer.js). Don't overflow:hidden the root here — a hidden root
   swallows scroll EVENTS while still allowing programmatic offset changes,
   which blinds the pin and strands the shell over a void. */
@media (min-width: 1000px) {
  body:has(.spwd2) { overscroll-behavior: none; }
}

/* ── Borderless rail — controls sit on the open surface; only the preview
      keeps a frame (C2C 053 Addendum 1). The scroll-containment stays. ── */
.spwd2-rail {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* The scaled template iframes leak phantom scrollable overflow to the
     DOCUMENT through the rail's scroller (Chrome compositing quirk) —
     the page gained ~390px of void below the shell. Containment stops it.
     LOAD-BEARING — do not remove (C2C 050 scroll-lock). */
  contain: layout paint;
}
.spwd2-rail-scroll {
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-5) var(--sp-8) var(--sp-1);
  min-height: 0;
  overscroll-behavior: contain;
  /* A8 / P17 — slim rounded gray overlay scrollbar, transparent track, no gutter. */
  scrollbar-width: thin;
  scrollbar-color: rgba(140,144,152,.4) transparent;
}
.spwd2-rail-scroll::-webkit-scrollbar { width: 8px; }
.spwd2-rail-scroll::-webkit-scrollbar-track { background: transparent; }
.spwd2-rail-scroll::-webkit-scrollbar-thumb {
  background: rgba(140,144,152,.4); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
.spwd2-rail-scroll::-webkit-scrollbar-thumb:hover { background: rgba(140,144,152,.65); background-clip: padding-box; }
.spwd2-sheet-btn { display: none; }

.spwd2-railintro { margin-bottom: var(--sp-7); }
.spwd2-eyebrow {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: none; color: var(--ink-3); margin-bottom: 10px;
}
.spwd2-h1 {
  font-family: var(--font-sans);
  font-size: calc(27px * var(--text-scale, 1)); font-weight: 800; color: var(--ink);
  letter-spacing: -.03em; line-height: 1.05;
  margin: 0;
}
.spwd2-sub { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3); margin: 10px 0 0; line-height: var(--leading-snug); max-width: 34ch; }

/* Steps */
.spwd2-step { margin-top: var(--sp-8); }
.spwd2-step:first-of-type { margin-top: 0; }
.spwd2-stephead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.spwd2-stepnum {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.spwd2-steptitle { font-size: calc(17px * var(--text-scale, 1)); font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.02em; }
.spwd2-stepsub { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-3); margin: 0 0 var(--sp-4); line-height: var(--leading-snug); }

.spwd2-ctl { margin-top: var(--sp-5); }
.spwd2-ctl-label {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: none; color: var(--ink-3); margin-bottom: 8px;
}
.spwd2-help { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-4); margin-top: 8px; line-height: var(--leading-snug); }

/* Lock (Signature) */
.spwd2-lock-note {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-sunken);
  border-radius: var(--r-2);
  font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-2); line-height: var(--leading-snug);
  margin-bottom: var(--sp-3);
}
#spwd2-controls.is-locked .spwd2-ctl,
#spwd2-controls.is-locked .spwd2-brandnote,
#spwd2-sections.is-locked .spwd2-seclist,
#spwd2-sections.is-locked .spwd2-addrow,
#spwd2-sections.is-locked .spwd2-ctl-label,
#spwd2-photos.is-locked .spwd2-photogrid {
  opacity: .35; pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}

/* ── Template cards: live scaled SPWs. De-boxed — only the thumbnail is
      framed (a mini device); label sits on the open surface. ── */
.spwd2-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) 12px; }
.spwd2-tpl {
  appearance: none; padding: 0; text-align: left; cursor: pointer;
  border: 0; background: transparent;
  font-family: var(--font-sans);
  display: flex; flex-direction: column; gap: 8px;
}
.spwd2-tpl-view {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #121214;
  pointer-events: none; /* card handles the click */
  isolation: isolate;   /* forces iframe content to clip to the radius */
  border-radius: var(--r-3);
  box-shadow: 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.spwd2-tpl:hover .spwd2-tpl-view { box-shadow: 0 0 0 1px var(--ink-4), var(--shadow-2); }
.spwd2-tpl.is-on .spwd2-tpl-view { box-shadow: 0 0 0 2px var(--brand); }
.spwd2-tpl-frame {
  width: 1200px; height: 760px; border: 0;
  transform: scale(var(--s, 0.14)); /* JS sets --s = cardWidth / 1200 */
  transform-origin: top left;
  position: absolute; top: 0; left: 0;
  pointer-events: none;
  transition: transform 1.4s var(--ease-out); /* slow soft zoom */
}
.spwd2-tpl:hover .spwd2-tpl-frame { transform: scale(calc(var(--s, 0.14) * 1.06)); }
.spwd2-tpl-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-ink); background: var(--brand);
  padding: 4px 9px; border-radius: var(--r-pill);
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
.spwd2-tpl.is-on .spwd2-tpl-badge { opacity: 1; }
.spwd2-tpl-body {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 2px;
}
.spwd2-tpl-name { font-size: calc(13px * var(--text-scale, 1)); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.spwd2-tpl.is-on .spwd2-tpl-name { color: var(--brand-deep); }
html[data-theme="dark"] .spwd2-tpl.is-on .spwd2-tpl-name { color: var(--brand); }
.spwd2-tpl-tag { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); line-height: 1.3; }

/* ── Swatches / fonts / modes (compact) ── */
.spwd2-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* 068 item 4 (Dom): ONE chip component portal-wide. These match brand-kit's
 * outline-free circle chip (.bk-palette-chip) EXACTLY — no border, no outline,
 * selected = a quiet centred check only. Kill the old "ringed circle" look. */
.spwd2-swatch {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  transition: transform var(--t-fast) var(--ease);
}
.spwd2-swatch:hover { transform: translateY(-2px); }
.spwd2-swatch:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }
.spwd2-swatch.is-on::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 11px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.spwd2-swatch-custom {
  display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(#ea1d2d, #e8a13a, #3ee092, #4d7ec0, #8b5cf6, #ea1d2d);
  position: relative; overflow: hidden;
}
.spwd2-swatch-custom input { position: absolute; inset: -8px; width: 56px; height: 56px; opacity: 0; cursor: pointer; }
.spwd2-swatch-custom::after {
  content: '+'; color: #fff; font-size: calc(17px * var(--text-scale, 1)); font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,.4); pointer-events: none;
}
.spwd2-fonts { display: flex; flex-wrap: wrap; gap: 7px; }
.spwd2-font {
  appearance: none; cursor: pointer;
  padding: 9px 15px; font-size: calc(14px * var(--text-scale, 1));
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--bg-elevated); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.spwd2-font:hover { border-color: var(--ink-4); }
.spwd2-font.is-on { border-color: var(--brand-deep); background: var(--brand-soft); }
.spwd2-modes { display: flex; gap: 7px; }
.spwd2-mode {
  appearance: none; cursor: pointer; flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-sans); font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--bg-elevated);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.spwd2-mode:hover { border-color: var(--ink-4); }
.spwd2-mode.is-on { border-color: var(--brand-deep); background: var(--brand-soft); }
.spwd2-mode-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); }
.spwd2-brandnote {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-2);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-2); line-height: var(--leading-snug);
}

/* ── Section composer ── */
.spwd2-seclist { display: grid; gap: 7px; }
.spwd2-secrow {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center; gap: 10px;
  padding: 11px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  user-select: none;
  position: relative;
}
.spwd2-secrow.is-off .spwd2-seclabel { color: var(--ink-4); }
.spwd2-secrow.is-pinned { background: var(--bg-sunken); border-style: dashed; }
.spwd2-secrow.is-drag {
  z-index: 30;
  box-shadow: var(--shadow-3);
  background: var(--bg-elevated);
  border-color: var(--brand);
}
/* Drag handle — exactly 4 dots (2×2), emerald, a touch larger (C2C 053 Add2 #6) */
.spwd2-sechandle {
  cursor: grab; width: 18px; height: 18px;
  background:
    radial-gradient(circle 2.3px at 4px 4px,  var(--brand) 96%, transparent),
    radial-gradient(circle 2.3px at 13px 4px, var(--brand) 96%, transparent),
    radial-gradient(circle 2.3px at 4px 13px, var(--brand) 96%, transparent),
    radial-gradient(circle 2.3px at 13px 13px,var(--brand) 96%, transparent);
  opacity: .85;
}
.spwd2-sechandle:hover { opacity: 1; }
.spwd2-secrow.is-pinned .spwd2-sechandle {
  cursor: default; background: none; opacity: 1;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-5);
}
.spwd2-secrow.is-pinned .spwd2-sechandle::before { content: '◈'; font-size: calc(12px * var(--text-scale, 1)); }
.spwd2-secrow.is-drag .spwd2-sechandle { cursor: grabbing; }
.spwd2-seclabel { font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 500; color: var(--ink); }
.spwd2-secpin { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-4); letter-spacing: .04em; }
.spwd2-sectoggle {
  appearance: none; cursor: pointer;
  width: 40px; height: 24px; border-radius: var(--r-round);
  border: 1px solid var(--line-strong);
  background: var(--bg-sunken);
  position: relative; padding: 0;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.spwd2-sectoggle .spwd2-secknob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fdfcf9; box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease);
}
.spwd2-sectoggle.is-on { background: var(--brand); border-color: var(--brand); }
.spwd2-sectoggle.is-on .spwd2-secknob { transform: translateX(16px); }
.spwd2-secx {
  appearance: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg-elevated);
  color: var(--ink-3); font-size: calc(14px * var(--text-scale, 1)); line-height: 1;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.spwd2-secx:hover { color: var(--err); border-color: var(--err); }
.spwd2-blkfields {
  grid-column: 1 / -1;
  display: grid; gap: 8px; margin-top: 8px;
}
.spwd2-blkfield { display: grid; gap: 4px; }
.spwd2-blkfield span { font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink-3); }
.spwd2-blkfield .input { font-size: calc(13px * var(--text-scale, 1)); padding: 8px 10px; }
/* Property description — heading + a real textarea for the marketing paragraph. */
.spwd2-descfields { margin-top: 10px; user-select: text; }
.spwd2-desctext { font-size: calc(13px * var(--text-scale, 1)); padding: 9px 11px; line-height: 1.55; min-height: 104px; resize: vertical; width: 100%; }
.spwd2-addrow { display: flex; flex-wrap: wrap; gap: 7px; }
.spwd2-addchip {
  appearance: none; cursor: pointer;
  padding: 8px 13px; font-size: calc(12.5px * var(--text-scale, 1)); font-weight: 500;
  font-family: var(--font-sans); color: var(--ink-2);
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-pill);
  background: transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.spwd2-addchip:hover { border-color: var(--brand-deep); color: var(--brand-deep); background: var(--brand-soft); }

/* ── Photo grid ── */
.spwd2-photogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.spwd2-photo {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-1);
  background: var(--bg-sunken) center / cover no-repeat;
  position: relative;
  cursor: grab;
  user-select: none;
  outline: 1px solid var(--line);
}
/* Canonical reorder (components/grid-reorder.js) — the tile left in the grid IS
   the drop gap; the lifted copy follows the pointer. Same states as the delivery
   gallery and the editor photo grid. */
.spwd2-photo { touch-action: manipulation; }
.spwd2-photo.is-dragging {
  opacity: .25; cursor: grabbing;
  outline: 2px solid color-mix(in srgb, var(--brand-deep) 60%, transparent);
}
.spwd2-photo.is-dragging .spwd2-coverbtn,
.spwd2-photo.is-dragging .spwd2-photocheck,
.spwd2-photo.is-dragging .spwd2-photogrip { opacity: 0; }
.spwd2-photo.is-held { outline: 2px solid var(--brand-deep); box-shadow: var(--shadow-3); }
.spwd2-photo:focus-visible { outline: 2px solid var(--brand); }
.spwd2-photocheck {
  position: absolute; left: 4px; top: 4px; z-index: 2;
  appearance: none; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid rgba(255,255,255,.85); border-radius: 5px;
  background: rgba(20,20,20,.55);
  cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity var(--t-base) var(--ease), background var(--t-fast) var(--ease);
}
.spwd2-photocheck:checked { background: var(--brand); border-color: var(--brand); opacity: 1; }
.spwd2-photocheck:checked::after {
  content: ''; width: 9px; height: 5px;
  border: 2px solid #FFFFFF; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}
.spwd2-photo:hover .spwd2-photocheck,
.spwd2-photo:focus-within .spwd2-photocheck,
.spwd2-photogrid.has-sel .spwd2-photocheck { opacity: 1; }
.spwd2-photogrip {
  position: absolute; right: 4px; bottom: 4px; z-index: 2;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(20,20,20,.55); color: #fff;
  display: grid; place-items: center; cursor: grab;
  touch-action: none; -webkit-user-select: none; user-select: none;
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.spwd2-photo:hover .spwd2-photogrip,
.spwd2-photogrid.is-reordering .spwd2-photogrip { opacity: 1; }
.spwd2-photogrid.is-reordering .spwd2-photogrip { cursor: grabbing; }
/* No hover on a phone — the grip IS the touch drag surface, so it has to be
   visible there (the tile itself keeps scrolling the panel). */
@media (hover: none) {
  .spwd2-photogrip, .spwd2-photocheck { opacity: 1; }
}
.spwd2-photo.is-cover { outline: 2px solid var(--brand-deep); }
.spwd2-coverbtn {
  position: absolute; left: 4px; bottom: 4px;
  appearance: none; cursor: pointer;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .04em;
  font-family: var(--font-sans);
  padding: 3px 7px; border-radius: var(--r-pill);
  border: 0; color: #fff; background: rgba(20,20,20,.55);
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.spwd2-photo:hover .spwd2-coverbtn { opacity: 1; }
.spwd2-photo.is-cover .spwd2-coverbtn {
  opacity: 1; background: var(--brand); color: var(--brand-ink);
}

/* ── Save card ── */
.spwd2-savecard {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-6);
}
.spwd2-save { width: 100%; min-height: 46px; }
.spwd2-save-note {
  margin-top: var(--sp-3); font-size: calc(12.5px * var(--text-scale, 1)); color: var(--brand-deep);
  animation: spwd2-fade var(--t-slow) var(--ease-out);
}
@keyframes spwd2-fade { from { opacity: 0; } to { opacity: 1; } }
.spwd2-apply-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
/* Copy button + link text = emerald (C2C 053 Add3 #3) */
.spwd2-apply-url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: calc(12px * var(--text-scale, 1)); color: var(--brand-deep); }
html[data-theme="dark"] .spwd2-apply-url { color: var(--brand); }
#spwd2-copy { color: var(--brand-deep); font-weight: 600; }
html[data-theme="dark"] #spwd2-copy { color: var(--brand); }
#spwd2-apply-slug { margin-top: 0; }

/* ── Stage: the star of the screen ── */
.spwd2-stage {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.spwd2-stage-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-2) var(--sp-3);
}
.spwd2-stage-kicker {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: none; color: var(--ink-3);
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spwd2-devices { display: flex; gap: 6px; }
.spwd2-device {
  appearance: none; cursor: pointer;
  padding: 7px 14px;
  font-family: var(--font-sans); font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-2);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--bg-elevated);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.spwd2-device.is-on { border-color: var(--brand-deep); background: var(--brand-soft); color: var(--ink); }
.spwd2-open { font-size: calc(12px * var(--text-scale, 1)); white-space: nowrap; }
.spwd2-frame-wrap {
  flex: 1; min-height: 0;
  /* A8 — no framing outline/border. The rounded floating card + shadow define
     the surface; the harness template clips flawlessly to the radius. */
  border: 0;
  border-radius: var(--r-4);
  overflow: hidden;
  isolation: isolate; /* forces iframe content to clip to the radius */
  background: var(--bg-sunken);
  box-shadow: var(--shadow-2);
  transition: width var(--t-slow) var(--ease);
}
.spwd2-frame-wrap.is-phone {
  width: min(390px, 100%);
  margin-inline: auto;
}
.spwd2-frame {
  width: 100%; height: 100%; border: 0; display: block;
  background: #faf7f2;
  border-radius: var(--r-4); /* matches the wrap — clean corner clip, no seam */
  transition: opacity var(--t-slow) var(--ease);
}

/* ── Mobile: preview on top, rail becomes a bottom sheet ── */
@media (max-width: 999px) {
  .spwd2 {
    display: block;
    height: auto;
    padding: var(--sp-3);
    padding-bottom: 96px; /* room for the collapsed sheet bar */
  }
  .spwd2-stage { height: calc(100dvh - var(--topbar-h) - 120px); }
  .spwd2-stage-head { flex-wrap: wrap; gap: var(--sp-2); }
  .spwd2-rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    border-radius: var(--r-4) var(--r-4) 0 0;
    border-bottom: 0;
    max-height: 78dvh;
    transform: translateY(calc(100% - 58px));
    transition: transform var(--t-slow) var(--ease-out);
    box-shadow: 0 -12px 48px rgba(20,20,20,.14);
  }
  .spwd2-rail.is-open { transform: translateY(0); }
  .spwd2-sheet-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    width: 100%; padding: 10px 0 12px;
    appearance: none; border: 0; background: transparent; cursor: pointer;
  }
  .spwd2-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-5); }
  .spwd2-sheet-label {
    font-family: var(--font-sans); font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--ink);
  }
  .spwd2-rail-scroll { max-height: calc(78dvh - 58px); padding: 0 var(--sp-5) var(--sp-8); }
  .spwd2-photogrid { grid-template-columns: repeat(3, 1fr); }
  .spwd2-swatch { width: 44px; height: 44px; }
}

/* Sortable placeholder — the calm gap that holds the dragged item's spot.
   Fades in softly (slow-fade rule) so the gap opens gently, not with a snap. */
.spwd2-ph {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-2);
  background: var(--bg-sunken);
  box-sizing: border-box;
  /* 053 Add5: placeholder GROWS to thumb size — soft make-room, no jump */
  animation: spwd2-ph-in 180ms var(--ease-out);
}
@keyframes spwd2-ph-in {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.spwd2-photogrid .spwd2-ph { border-radius: var(--r-1); }

/* ── Section row buttons + block settings popover ── */
.spwd2-secbtns { display: inline-flex; gap: 6px; align-items: center; }
.spwd2-secstyle {
  appearance: none; cursor: pointer;
  height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--bg-elevated);
  color: var(--ink-2); font-family: var(--font-sans); font-size: calc(12px * var(--text-scale, 1)); font-style: italic; font-weight: 600;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.spwd2-secstyle:hover { border-color: var(--brand-deep); color: var(--brand-deep); }
.spwd2-pop {
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  padding: var(--sp-4);
  display: grid; gap: var(--sp-4);
  animation: spwd2-fade var(--t-slow) var(--ease-out);
}
.spwd2-pop-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.spwd2-popfont {
  appearance: none; cursor: pointer;
  padding: 7px 12px; font-size: calc(13px * var(--text-scale, 1));
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--bg-elevated); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.spwd2-popfont:hover { border-color: var(--ink-4); }
.spwd2-popfont.is-on { border-color: var(--brand-deep); background: var(--brand-soft); }
.spwd2-popswatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; outline: 1px solid var(--line-strong);
  cursor: pointer; padding: 0; position: relative;
  transition: transform var(--t-fast) var(--ease);
}
.spwd2-popswatch:hover { transform: scale(1.08); }
.spwd2-popswatch.is-on { outline: 2px solid var(--ink); outline-offset: 2px; }
.spwd2-popswatch-accent::after {
  content: 'A'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: calc(12px * var(--text-scale, 1)); font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.spwd2-popswatch-custom {
  display: inline-flex; overflow: hidden;
  background: conic-gradient(#ea1d2d, #e8a13a, #3ee092, #4d7ec0, #8b5cf6, #ea1d2d);
}
.spwd2-popswatch-custom input { position: absolute; inset: -8px; width: 44px; height: 44px; opacity: 0; cursor: pointer; }
.spwd2-popsize {
  appearance: none; cursor: pointer; flex: 1;
  padding: 8px 0; font-family: var(--font-sans); font-size: calc(12.5px * var(--text-scale, 1)); font-weight: 500;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--bg-elevated); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.spwd2-popsize.is-on { border-color: var(--brand-deep); background: var(--brand-soft); }
.spwd2-pop-done { justify-self: end; }

/* ═══════════════════════════════════════════════════════════════
   Everything-page (/account) + Brokerage board (/brokerage)
   Warm account home. Mobile-first, cream, soft fades only.
   ═══════════════════════════════════════════════════════════════ */

.evp { padding-top: var(--sp-8); padding-bottom: var(--sp-16); }
.evp-head { margin-bottom: var(--sp-6); }

/* Quick links */
.evp-quick {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: var(--sp-8);
}
@media (min-width: 800px) { .evp-quick { grid-template-columns: repeat(4, 1fr); } }
.evp-quicklink {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-elevated);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-3);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.evp-quicklink:hover { border-color: var(--ink-4); box-shadow: var(--shadow-2); }
.evp-quicklink.is-primary { background: var(--brand-soft); border-color: var(--brand-deep); }
.evp-quicklink-title { font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; color: var(--ink); }
.evp-quicklink-sub { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); line-height: 1.35; }

/* Cards + grid */
.evp-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-bottom: var(--sp-8); }
@media (min-width: 900px) { .evp-grid { grid-template-columns: 340px 1fr; align-items: start; } }
.evp-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.evp-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.evp-dl { margin: 0; display: grid; gap: 2px; }
.evp-dl-row {
  display: grid; grid-template-columns: 92px 1fr; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.evp-dl-row dt { font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink-3); margin: 0; }
.evp-dl-row dd { font-size: calc(13.5px * var(--text-scale, 1)); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.evp-billing { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.evp-billing-label { font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink-3); margin-bottom: 6px; }
.evp-billing-line { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2); }
.evp-billing-sub { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-4); margin-top: 6px; line-height: var(--leading-snug); }

/* Orders */
.evp-sect { margin-bottom: var(--sp-8); }
.evp-sect-head { display: flex; align-items: baseline; gap: var(--sp-3); justify-content: space-between; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.evp-orders { display: grid; gap: 8px; }
.evp-order {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: var(--sp-3); align-items: center;
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.evp-order:hover { border-color: var(--ink-4); box-shadow: var(--shadow-1); }
.evp-order-thumb {
  width: 64px; height: 44px; border-radius: var(--r-1);
  background: var(--bg-sunken) center / cover no-repeat;
}
.evp-order-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evp-order-addr { font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evp-order-meta { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); }
.evp-chip {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
}
/* Dom 2026-08-22: green means success/paid and red is the primary action.
   "Delivered" / "Photos in" is a success state, so it wears the green — it
   used to wear the brand, which read as a call to action on a fact. */
.evp-chip.is-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.evp-chip.is-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }

/* Deliveries — full-bleed photo cards */
.evp-deliveries { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .evp-deliveries { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .evp-deliveries { grid-template-columns: repeat(3, 1fr); } }
.evp-delivery {
  position: relative; display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-3);
  background: var(--bg-sunken) center / cover no-repeat;
  overflow: hidden; text-decoration: none;
  isolation: isolate;
}
.evp-delivery-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.62) 100%);
  transition: opacity var(--t-slow) var(--ease);
}
.evp-delivery:hover .evp-delivery-scrim { opacity: .85; }
.evp-delivery-body {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.evp-delivery-addr { color: #fff; font-size: calc(14.5px * var(--text-scale, 1)); font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.evp-delivery-sub { color: rgba(255,255,255,.82); font-size: calc(12px * var(--text-scale, 1)); }

/* ── Brokerage board ── */
.bb { padding-top: var(--sp-8); padding-bottom: var(--sp-16); }
.bb-banner {
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  border-radius: var(--r-2);
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2);
  margin-bottom: var(--sp-6);
}
.bb-board { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .bb-board { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bb-board { grid-template-columns: repeat(3, 1fr); } }
.bb-card {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-3);
  background: var(--bg-sunken) center / cover no-repeat;
  overflow: hidden; isolation: isolate;
}
.bb-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.66) 100%);
}
.bb-chip {
  position: absolute; top: 10px; left: 10px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(253,252,249,.92); color: var(--ink);
}
.bb-card-body { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.bb-card-addr { color: #fff; font-size: calc(14.5px * var(--text-scale, 1)); font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.bb-card-links { display: flex; gap: 14px; margin-top: 4px; }
.bb-card-links a { color: rgba(255,255,255,.88); font-size: calc(12px * var(--text-scale, 1)); text-decoration: none; }
.bb-card-links a:hover { color: #fff; text-decoration: underline; }
.bb-split { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 900px) { .bb-split { grid-template-columns: 1fr 1fr; align-items: start; } }
.bb-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--text-scale, 1)); }
.bb-table th {
  text-align: left; font-size: calc(12px * var(--text-scale, 1)); font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--ink-3);
  padding: 6px 8px 8px; border-bottom: 1px solid var(--line-strong);
}
.bb-table td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.bb-table-sub { display: block; font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-4); }
.bb-amt { font-weight: 600; white-space: nowrap; }

/* Stat-icons toggle row (SPW designer) */
.spwd2-iconrow { display: flex; align-items: center; gap: 10px; }
.spwd2-icon-demo { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.spwd2-iconrow-label { flex: 1; font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2); }

/* Named styles manager (SPW designer) */
.spwd2-namerow { display: flex; gap: 8px; }
.spwd2-namerow .input { flex: 1; min-width: 0; }
.spwd2-styles { display: grid; gap: 6px; }
.spwd2-stylerow { display: flex; align-items: center; gap: 6px; }
.spwd2-stylerow-load {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  appearance: none; cursor: pointer; text-align: left;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  transition: border-color var(--t-fast) var(--ease);
}
.spwd2-stylerow-load:hover { border-color: var(--brand-deep); }
.spwd2-stylerow-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; outline: 1px solid var(--line-strong); }
.spwd2-stylerow-name { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spwd2-stylerow-tpl { font-family: var(--font-sans); font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); text-transform: none; letter-spacing: normal; }
.spwd2-stylerow-edit { font-size: calc(13px * var(--text-scale, 1)); padding: 6px 8px; flex: 1; }

/* Sign designer — upload-your-own print design */
.sd-own-drop { padding: var(--sp-4); }
.sd-own-report { margin-top: var(--sp-3); }
.sd-own-ok, .sd-own-warn {
  font-size: calc(12.5px * var(--text-scale, 1)); line-height: var(--leading-snug);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2);
}
.sd-own-ok { background: var(--brand-soft); color: var(--ink); }
.sd-own-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--ink); }
.sd-own-qrow { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--line-soft); }

/* ── Help desk — single corner launcher + chat panel (Brief 073) ──
   ONE help entry point: this absorbs the old "?" toggle. The label overlay
   below is still driven from inside the panel via "Show what everything does".

   RESTYLED 2026-08-29 (Dom: "this is not our design") onto the style board.
   Every value below cites a row of STYLEBOARD.md or a live house component;
   nothing here is invented, and no logic was touched.

     launcher  → the gv-line DOCK family (gv-line.js:68 / :103) — bg-elevated
                 chip, hairline, --shadow-3, ink glyph. OPEN is a STATE, so it
                 fills with the INK, not the brand (gv-line.js:114: "brand ink
                 is spent on the one primary action a screen has, and this is
                 not it"). It used to go solid --brand, which is the red square
                 Dom flagged.
     panel     → §8.1 card: --bg-elevated, 1px --line, --r-3, --shadow-3.
     regions   → ruling 19a, NO DIVIDER LINES. The head/log/input rule-lines are
                 gone; padding separates them (same answer gv-line.js gives).
     bubbles   → --r-2 off the ladder, both corners (§4.1). Assistant sits on
                 --bg-sunken as a quiet card; the agent's own turn is the only
                 brand fill in the panel, with a LITERAL #FFFFFF ink (§1.1:
                 --brand-ink is right for tinted chips, wrong for a solid fill).
     close     → the quiet 26px icon chip family (.cs-cal-pop-x main.css:7362,
                 .cs-tl-drawer-close :6615) — transparent ground, --ink-3 glyph.
     input     → §6.1 portal input: 1px --line, --r-2, and the ONE global focus
                 answer (--focus-ring-c + --focus-ring-shadow), never a
                 per-control ring.
     send      → §1.1 .btn-primary geometry at .btn-icon size (36px, --r-2), one
                 element, white glyph.
     nowrap    → ruling 20b on both foot buttons; they were wrapping.

   ACCENT (Dom 2026-08-29, "switch to this purple pls"): the help desk does NOT
   wear --brand. Its accent is the platform purple #642eba — the same value the
   flags carry and the same one html.is-gv puts on --brand, so the widget reads
   identically on the CS skin and the Grapevine skin. It is declared LOCALLY on
   the two roots below, so nothing else in the portal moves and no global token
   is redefined. The hover twin is the grape's own darker step from
   tokens.css:548, not a new mix. White on #642eba measures 7.95:1.
   Everything that is NOT the accent still comes from the house tokens, so
   light, dark and html.is-gv all resolve. */
.cs-hd-launch, .cs-hd-panel {
  --hd-accent:       #642eba;
  --hd-accent-hover: #4e2394;   /* = tokens.css:548 --brand-hover on html.is-gv */
  --hd-accent-ink:   #FFFFFF;   /* literal, per §1.1 — a solid fill pins white */
  --hd-focus-ring:   0 0 0 3px color-mix(in srgb, var(--hd-accent) 32%, transparent);
}
html[data-theme="dark"] .cs-hd-launch,
html[data-theme="dark"] .cs-hd-panel {
  --hd-focus-ring: 0 0 0 3px color-mix(in srgb, var(--hd-accent) 38%, transparent);
}

.cs-hd-launch {
  position: fixed; right: 18px; bottom: 18px; z-index: 210;
  width: 48px; height: 48px; border-radius: var(--r-round);
  display: flex; align-items: center; justify-content: center;
  appearance: none; cursor: pointer; padding: 0;
  background: var(--bg-elevated); color: var(--ink-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-3);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.cs-hd-launch:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
.cs-hd-launch:focus-visible { outline: none; box-shadow: var(--shadow-3), var(--hd-focus-ring); }
/* Open is a STATE, not an action — the ink, filled (gv-line.js:114). */
.cs-hd-launch.is-open,
.cs-hd-launch.is-open:hover { background: var(--ink); color: var(--bg-elevated); border-color: var(--ink); transform: none; }
.cs-hd-launch .cs-hd-ico-close { display: none; }
.cs-hd-launch.is-open .cs-hd-ico-open { display: none; }
.cs-hd-launch.is-open .cs-hd-ico-close { display: block; }

.cs-hd-panel {
  position: fixed; right: 18px; bottom: 78px; z-index: 209;
  width: 360px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 110px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(8px) scale(.99);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.cs-hd-panel.is-in { opacity: 1; transform: translateY(0) scale(1); }

/* No rule under the head (ruling 19a) — the gap below it is the separation. */
.cs-hd-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-4);
}
.cs-hd-title { display: flex; align-items: flex-start; gap: 10px; }
/* A true circle (--r-round, per ruling 21), quiet: no halo ring. */
.cs-hd-dot { width: 7px; height: 7px; border-radius: var(--r-round); background: var(--hd-accent); flex: none; margin-top: 4px; }
.cs-hd-h { font: var(--ts-h3-w) var(--ts-h3)/1.15 var(--font-sans); color: var(--ink); letter-spacing: var(--ts-h3-tr); }
.cs-hd-sub { font: 400 calc(12.5px * var(--text-scale, 1))/1.35 var(--font-sans); color: var(--ink-3); margin-top: 2px; }
.cs-hd-x {
  appearance: none; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-1);
  background: transparent; border: 1px solid transparent; color: var(--ink-3);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cs-hd-x:hover { background: var(--bg-hover); color: var(--ink); }
.cs-hd-x:focus-visible { outline: none; box-shadow: var(--hd-focus-ring); }

.cs-hd-log {
  flex: 1; overflow-y: auto; padding: var(--sp-1) var(--sp-4) var(--sp-2);
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
}
.cs-hd-msg {
  max-width: 84%; padding: 9px 12px; border-radius: var(--r-2);
  font: 400 calc(13px * var(--text-scale, 1))/1.5 var(--font-sans); white-space: pre-wrap; word-wrap: break-word;
}
.cs-hd-assistant { align-self: flex-start; background: var(--bg-sunken); color: var(--ink); }
.cs-hd-user { align-self: flex-end; background: var(--hd-accent); color: var(--hd-accent-ink); font-weight: 500; }
.cs-hd-typing { display: flex; gap: 4px; align-items: center; }
.cs-hd-typing span { width: 6px; height: 6px; border-radius: var(--r-round); background: var(--ink-4); animation: cs-hd-bounce 1.2s infinite ease-in-out; }
.cs-hd-typing span:nth-child(2) { animation-delay: .16s; }
.cs-hd-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes cs-hd-bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.cs-hd-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--sp-1) var(--sp-4) var(--sp-2); }
.cs-hd-foot[hidden] { display: none; }
.cs-hd-dom, .cs-hd-labels {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-btn);
  white-space: nowrap;   /* ruling 20b — one line, always */
  font: 600 calc(12px * var(--text-scale, 1))/1 var(--font-sans); letter-spacing: var(--tracking-normal);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cs-hd-dom:focus-visible, .cs-hd-labels:focus-visible { outline: none; box-shadow: var(--hd-focus-ring); }
.cs-hd-dom { background: var(--hd-accent); color: var(--hd-accent-ink); border: 1px solid transparent; }
.cs-hd-dom:hover { background: var(--hd-accent-hover); }
.cs-hd-labels { background: transparent; color: var(--ink-2); border: 1px solid var(--line-strong); }
.cs-hd-labels:hover { background: var(--bg-hover); color: var(--ink); }
.cs-hd-labels.is-on { color: var(--hd-accent); border-color: var(--hd-accent); }

/* No rule over the composer either (ruling 19a). */
.cs-hd-form {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
/* TWO LINES AT REST. `rows="1"` gave a 39px box whose own 51-character
   placeholder needs two lines at 360px, so the second line was cut in half —
   visible in Dom's screenshot as a sliced "not working". Nothing in copy fixes
   it at --text-scale 1.25 (the string measures 383px in a 253px box), so the
   box carries the floor instead, in em so it tracks the scale lever. The JS
   auto-grow (help-desk.js, `Math.min(scrollHeight, 120)`) still owns the
   growth above this and is untouched. */
.cs-hd-input {
  flex: 1; resize: none; overflow-y: auto; max-height: 120px;
  min-height: calc(2.9em + 22px);
  padding: 10px 12px; border-radius: var(--r-2);
  background: var(--bg-elevated); color: var(--ink);
  border: 1px solid var(--line);
  font: 400 calc(13px * var(--text-scale, 1))/1.45 var(--font-sans);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cs-hd-input::placeholder { color: var(--ink-4); }
.cs-hd-input:hover { border-color: var(--line-strong); }
/* The house focus SHAPE (§6.1) — 1px border + a 3px ring at the same 32/38%
   weight, never a thick outline — tinted with the widget's own accent instead
   of --focus-ring-c.
   THE FOUR-CLASS SELECTOR IS DELIBERATE. The global form-focus law at
   main.css:5865 is `:is(input…, textarea, select):focus`, which :is() lifts to
   (0,3,1) and which sits LATER in the file, so it beats any two-class rule and
   was repainting this composer's ring CS-red inside a purple widget. Scoping
   through the panel + form takes this to (0,4,0) — four class-level components
   outrank three — which is the smallest honest way to carry Dom's accent
   directive without weakening the global law for every other field. */
.cs-hd-panel .cs-hd-form .cs-hd-input:focus {
  outline: none; border-color: var(--hd-accent); box-shadow: var(--hd-focus-ring);
}
.cs-hd-send {
  appearance: none; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-2);
  background: var(--hd-accent); color: var(--hd-accent-ink); border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.cs-hd-send:hover { background: var(--hd-accent-hover); }
.cs-hd-send:focus-visible { outline: none; box-shadow: var(--hd-focus-ring); }
.cs-hd-send:disabled { opacity: .5; cursor: default; }

/* Reduced motion: the tokens already collapse to 1ms, but the open/close
   transform and the typing dots are stated here so the intent is explicit. */
@media (prefers-reduced-motion: reduce) {
  .cs-hd-panel, .cs-hd-launch { transition: none; }
  .cs-hd-panel { transform: none; }
  .cs-hd-launch:hover { transform: none; }
  .cs-hd-typing span { animation: none; opacity: .55; }
}

@media (max-width: 520px) {
  .cs-hd-panel { right: 12px; left: 12px; width: auto; bottom: 74px; height: calc(100vh - 100px); }
  .cs-hd-launch { right: 14px; bottom: 14px; }
}

#cs-help-overlay {
  position: fixed; inset: 0; z-index: 190;
  pointer-events: none;
}
.cs-help-tip {
  position: fixed;
  max-width: 250px;
  padding: 8px 11px;
  background: var(--bg-elevated);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-2);
  font: 500 calc(12px * var(--text-scale, 1))/1.45 var(--font-sans);
  box-shadow: var(--shadow-3);
  animation: spwd2-fade var(--t-slow) var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════════════
   CS SERVICE EDITOR POPOVER — /cs booking service + schedule editor
   (#091 reschedule/reassign). Floating dark panel; recipe mirrors the
   help-desk panel (bg-elevated / line-strong / r-3 / shadow-3) and the
   help-desk input for its form controls. Width/top/left set inline by
   positionPopover() in document coords → position: absolute.
   ═══════════════════════════════════════════════════════════════════ */
.cs-svc-pop {
  position: absolute; z-index: 220;
  display: flex; flex-direction: column; overflow: hidden;
  max-height: min(560px, calc(100vh - 40px));
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
}
.cs-svc-pop-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); padding: 13px 12px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.cs-svc-pop-eyebrow { font: 600 calc(10.5px * var(--text-scale, 1))/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cs-svc-pop-title { font: 600 calc(14px * var(--text-scale, 1))/1.25 var(--font-sans); letter-spacing: var(--tracking-normal); color: var(--ink); margin-top: 4px; }
.cs-svc-pop-x {
  appearance: none; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-1);
  background: transparent; border: 1px solid transparent; color: var(--ink-3);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cs-svc-pop-x:hover { background: var(--bg-hover); color: var(--ink); }

.cs-svc-pop-body { flex: 1; overflow-y: auto; padding: 14px 16px 6px; display: flex; flex-direction: column; gap: var(--sp-4); scrollbar-width: thin; }
.cs-svc-pop-row { display: flex; flex-direction: column; gap: 7px; }
.cs-svc-pop-rowlabel { font: 600 calc(11.5px * var(--text-scale, 1))/1.2 var(--font-sans); letter-spacing: .02em; color: var(--ink-3); }
.cs-svc-lines { display: flex; flex-direction: column; gap: 8px; }
.cs-svc-line { display: flex; align-items: center; gap: 8px; }

.cs-svc-pop-select {
  flex: 1; min-width: 0; appearance: none;
  padding: 8px 11px; border-radius: var(--r-2);
  background: var(--bg-sunken); color: var(--ink);
  border: 1px solid var(--line-strong);
  font: 500 calc(12.5px * var(--text-scale, 1))/1.3 var(--font-sans);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cs-svc-pop-select:focus { outline: none; border-color: var(--focus-ring-c); box-shadow: var(--focus-ring-shadow); }
.cs-svc-line-dur { flex: none; font: 600 calc(11.5px * var(--text-scale, 1))/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.cs-svc-line-empty { font: 400 calc(12.5px * var(--text-scale, 1))/1.4 var(--font-sans); padding: 2px 0; }
.cs-svc-line-rm {
  appearance: none; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-1);
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-3);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cs-svc-line-rm:hover { color: var(--err); border-color: color-mix(in srgb, var(--err) 32%, transparent); background: color-mix(in srgb, var(--err) 8%, transparent); }

.cs-svc-add-btn {
  appearance: none; cursor: pointer; flex: none;
  padding: 8px 12px; border-radius: var(--r-2);
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-strong);
  white-space: nowrap;   /* ruling 20b */
  font: 600 calc(12px * var(--text-scale, 1))/1 var(--font-sans);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cs-svc-add-btn:hover { color: var(--brand); border-color: var(--brand); }

.cs-svc-pop-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); padding: 10px 12px; border-radius: var(--r-2);
  background: var(--bg-sunken); border: 1px solid var(--line);
  font: 500 calc(12.5px * var(--text-scale, 1))/1 var(--font-sans); color: var(--ink-3);
}
.cs-svc-pop-total strong { font: 700 calc(14px * var(--text-scale, 1))/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.cs-svc-pop-hint { font: 400 calc(11.5px * var(--text-scale, 1))/1.45 var(--font-sans); }

.cs-svc-pop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.cs-svc-pop-danger {
  appearance: none; cursor: pointer; flex: none;
  padding: 8px 13px; border-radius: var(--r-2);
  background: transparent; color: var(--err); border: 1px solid var(--line-strong);
  font: 600 calc(12px * var(--text-scale, 1))/1 var(--font-sans);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cs-svc-pop-danger:hover { background: color-mix(in srgb, var(--err) 8%, transparent); border-color: color-mix(in srgb, var(--err) 32%, transparent); }

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD — the one home (C2C 053 + Addendum)
   Open canvas: hairline dividers, whitespace, type hierarchy. No boxed
   windows. Every functional area owns one accent, used identically on the
   tile and inside the tool (Website=Emerald, Print=Amber, Marketing=Iris,
   Downloads=Pine). Outline icons tinted with the area accent.
   ═══════════════════════════════════════════════════════════════════ */
.dash { max-width: 1180px; }
.dash-greeting { margin-bottom: var(--sp-6); }
.dash-greeting .kicker { margin-bottom: 10px; }
.dash-greeting .h1 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.03em; }

.dash-row { margin-top: var(--sp-10); }
.dash-rowhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.dash-rowhead .kicker { color: var(--ink-3); }
.dash-rowlink { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.dash-rowlink:hover { color: var(--ink); }

/* Slim inline notice — open hairline row, never a boxed panel */
.dash-notice {
  display: flex; flex-wrap: wrap; gap: 10px var(--sp-6);
  margin: calc(var(--sp-4) * -1) 0 var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.dash-notice-item { display: inline-flex; align-items: center; gap: 9px; font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-2); }
.dash-notice-item:hover { color: var(--ink); }
.dash-notice-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); }
.dash-notice-go { color: var(--ink-4); font-size: calc(15px * var(--text-scale, 1)); }

/* Row 1 — listing cards. The photo IS the frame; chrome stays minimal. */
.dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--sp-6) var(--sp-5); }
.dcard { display: flex; flex-direction: column; }
.dcard-photo {
  position: relative; display: block; aspect-ratio: 3 / 2;
  border-radius: var(--r-3); overflow: hidden; isolation: isolate;
  background: var(--bg-sunken);
}
.dcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease); }
.dcard-photo:hover img { transform: scale(1.03); }
.dcard-photo-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-4); font-size: calc(12px * var(--text-scale, 1)); }
.dcard-flag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 4px 10px; border-radius: var(--r-pill);
  /* --accent-money is --brand-deep in the agent zone (grape #5527a0 under GV):
     a dark fill, so the label is white. */
  background: var(--accent-money); color: #FFFFFF;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .03em;
}
.dcard-body { padding-top: var(--sp-3); }
.dcard-title { font-size: calc(15.5px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.dcard-meta { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dcard-verbs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-3); border-top: 1px solid var(--line);
}
.dverb {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 6px; border-right: 1px solid var(--line);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .005em; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dverb:last-child { border-right: 0; }
.dverb-ico { display: inline-flex; color: var(--acc); }
.dverb-ico svg { width: 16px; height: 16px; }
.dverb:hover { background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--ink); }
.dverb:focus-visible { outline: none; background: color-mix(in srgb, var(--acc) 13%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent); }

/* Row 2 — the six studio doors. Borderless; accent lives in the icon chip. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--sp-2); }
.tile {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-3);
  transition: background var(--t-base) var(--ease);
}
.tile:hover { background: var(--bg-hover); }
.tile:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 60%, transparent); }
.tile-ico {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-2);
  display: grid; place-items: center; color: var(--acc);
  background: color-mix(in srgb, var(--acc) 13%, transparent);
}
.tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tile-title { font-size: calc(14.5px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.tile-sub { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-go { color: var(--ink-4); font-size: calc(18px * var(--text-scale, 1)); transition: color var(--t-base) var(--ease); }
.tile:hover .tile-go { color: var(--acc); }

.dash-empty { padding: var(--sp-10) 0; }
.dash-empty .h3 { margin-bottom: 8px; }
.dash-empty .muted { max-width: 46ch; margin-bottom: var(--sp-5); line-height: var(--leading-body); }

@media (max-width: 560px) {
  .dcards { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); }
  .dcard-verbs { grid-template-columns: repeat(3, 1fr); }
  .dverb span:not(.dverb-ico) { display: none; }  /* icons only on tight cards */
  .tiles { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   CS MONOGRAM WALLPAPER — REMOVED 2026-07-14 (065 I45/I31).
   Dom: "wrong font, not our style." The giant faint stroke-drawn CS sat
   behind the dashboard tiles (visible behind the Print shop / Signs row).
   The ::after wallpaper rules are deleted; the position:relative anchors
   stay (harmless, other rules may rely on them).
   ═══════════════════════════════════════════════════════════════════ */
.dash { position: relative; }
.empty { position: relative; }

/* ═══════════════════════════════════════════════════════════════════
   DELIVERY — folder tree (053 Add5 §downloads + Dom's acceptance test:
   warm elevated surfaces, Pine area accent purposeful, Onest weight
   contrast, per-level download. Expand → file rows, checkbox select.)
   ═══════════════════════════════════════════════════════════════════ */
.dlt { display: grid; gap: var(--sp-3); }
.dlt-folder {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease);
}
.dlt-folder[data-open="1"] { border-color: color-mix(in srgb, var(--area-downloads) 34%, transparent); }
/* CS-PLAT-09/listings-ux 08-23 — the folder header is a HEADER, not a toggle:
   every folder is expanded (Dom: "Download Centre all expanded"), so there is
   no chevron column and no pointer/hover affordance on the row itself. */
.dlt-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
}
.dlt-ico {
  width: 42px; height: 42px; border-radius: var(--r-2);
  display: grid; place-items: center;
  color: var(--area-downloads);
  background: color-mix(in srgb, var(--area-downloads) 13%, transparent);
}
.dlt-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dlt-title { font-size: calc(15.5px * var(--text-scale, 1)); font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.dlt-count {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.dlt-zip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; color: var(--ink-2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.dlt-zip:hover {
  color: var(--area-downloads);
  border-color: color-mix(in srgb, var(--area-downloads) 55%, transparent);
  background: color-mix(in srgb, var(--area-downloads) 10%, transparent);
}
.dlt-zip svg { width: 14px; height: 14px; }
.dlt-files { display: block; border-top: 1px solid var(--line); }
.dlt-row {
  display: grid;
  grid-template-columns: 30px 52px 1fr auto;
  align-items: center; gap: var(--sp-3);
  padding: 8px var(--sp-4);
  border-top: 1px solid var(--line-soft);
}
.dlt-row:first-child { border-top: 0; }
.dlt-row:hover { background: var(--bg-hover); }
.dlt-check {
  appearance: none; width: 17px; height: 17px; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: 5px;
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dlt-check:checked { background: var(--area-downloads); border-color: var(--area-downloads); }
/* White tick on the filled box — the fill is --area-downloads (= --brand in the
   agent zone, grape under the GV skin), so the mark has to be white. */
.dlt-check:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid #FFFFFF; border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-1px); }
.dlt-check:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--area-downloads) 32%, transparent); }
.dlt-thumb {
  width: 52px; height: 36px; border-radius: 6px; overflow: hidden;
  background: var(--bg-sunken); border: 0; padding: 0; cursor: zoom-in;
}
.dlt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlt-thumb-doc { display: grid; place-items: center; font-size: calc(12px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .08em; color: var(--ink-3); cursor: default; }
.dlt-file { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: left; padding: 0; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlt-file:hover { color: var(--ink); }
.dlt-dl {
  width: 32px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--ink-3);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.dlt-dl:hover { color: var(--area-downloads); background: color-mix(in srgb, var(--area-downloads) 12%, transparent); }
.dlt-dl svg { width: 15px; height: 15px; }

/* Floating "Download selected (n)" pill — appears with a selection */
.dlt-pill {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--r-pill);
  /* Dom 2026-08-29 — "Always white texts on darker backgrounds." In the agent
     zone --area-downloads resolves to --brand, which the GV skin swaps to grape
     #642eba; the label and the ZIP glyph were still painting near-black on it. */
  background: var(--area-downloads); color: #FFFFFF;
  font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 700; letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* ruling 20b — "Download selected · 12" is one line */
  box-shadow: var(--shadow-3);
  border: 0; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  z-index: 80;
}
.dlt-pill.is-on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dlt-pill svg { width: 15px; height: 15px; }
/* Explicit, not inherited: zipAt() replaces the pill's children with progress
   text mid-download, and #dlt-pill-label carries no rule of its own. */
.dlt-pill, .dlt-pill * { color: #FFFFFF; }

@media (max-width: 640px) {
  .dlt-head { grid-template-columns: 38px 1fr auto; }
  .dlt-zip span { display: none; }   /* icon-only zip button on phones */
  .dlt-ico { width: 36px; height: 36px; }
  .dlt-row { grid-template-columns: 26px 44px 1fr auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   LISTING DASHBOARD v2 (053 Add9 + Add10) — front-site finish.
   Hero is the door to the photos; ONE primary action; every fact row
   opens exactly what it names; honest verbs; open canvas on neutral
   black/grey ground.
   ═══════════════════════════════════════════════════════════════════ */
.ldx { max-width: 1020px; }

/* Status chip in the bar — a door, never dead text */
.ld-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ld-pill.is-ok   { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent);  border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.ld-pill.is-ok:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.ld-pill.is-warn { color: var(--accent-money); background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.ld-pill.is-warn:hover { background: color-mix(in srgb, var(--warn) 18%, transparent); }

/* Hero — the cover IS the door to the photos */
.ldx-hero {
  position: relative; display: block;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-4); overflow: hidden; isolation: isolate;
  background: var(--bg-elevated);
}
.ldx-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.ldx-hero:hover .ldx-hero-img { transform: scale(1.02); }
.ldx-hero-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-4); font-size: calc(13px * var(--text-scale, 1)); }
.ldx-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,0) 38%, rgba(6,6,7,.62) 100%);
}
.ldx-hero-body {
  position: absolute; left: clamp(18px, 3.4vw, 36px); right: 18px; bottom: clamp(16px, 3vw, 30px);
  display: flex; flex-direction: column; gap: 6px;
}
.ldx-hero-addr {
  font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.04; color: #fff;
  text-shadow: 0 2px 22px rgba(0,0,0,.45);
}
.ldx-hero-verb {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(10,10,11,.55); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600;
  opacity: .85; transition: opacity var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.ldx-hero:hover .ldx-hero-verb { opacity: 1; background: rgba(10,10,11,.75); }
.ldx-hero-verb svg { color: var(--brand); }

/* The three verbs + Copy link — ONE primary, quiet companions */
.ldx-verbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-5); }
.ldx-verbs .btn { display: inline-flex; align-items: center; gap: 8px; }
.ldx-verbs .btn svg { color: var(--acc, var(--ink-3)); }
.ldx-verbs .btn:not(.btn-primary):hover {
  border-color: color-mix(in srgb, var(--acc, var(--ink-3)) 50%, transparent);
  background: color-mix(in srgb, var(--acc, var(--ink-3)) 9%, transparent);
  color: var(--ink);
}

/* Sections */
.ldx-sect { margin-top: var(--sp-10); }
.ldx-secthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.ldx-sectlink { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.ldx-sectlink:hover { color: var(--ink); }

/* Clickable facts — every stat is a door */
.ldx-doors { display: flex; flex-direction: column; }
.ld-door {
  display: grid; grid-template-columns: 40px minmax(110px, 170px) 1fr auto;
  align-items: center; gap: var(--sp-4);
  padding: 13px 6px;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t-fast) var(--ease);
}
.ld-door:hover { background: var(--bg-hover); }
.ld-door:focus-visible { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent); border-radius: var(--r-1); }
.ld-door-ico {
  width: 34px; height: 34px; border-radius: var(--r-2);
  display: grid; place-items: center;
  color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent);
}
.ld-door-label { font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ld-door-value {
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ld-door-verb { font-size: calc(12.5px * var(--text-scale, 1)); font-weight: 600; color: var(--ink-4); white-space: nowrap; transition: color var(--t-fast) var(--ease); }
.ld-door:hover .ld-door-verb { color: var(--acc); }

/* Marketing — live previews, doors to the studio (de-boxed) */
.ldx-mkt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.ldx-mkt-tile { display: flex; flex-direction: column; gap: 6px; color: var(--ink); transition: transform var(--t-base) var(--ease); }
.ldx-mkt-tile:hover { transform: translateY(-2px); }
/* B6 — designed specimens (Marketing = Iris ground), NOT empty/black wells.
   One fixed aspect for every card so the row shares a clean baseline. */
.ldx-mkt-thumb {
  position: relative; aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--area-marketing) 14%, var(--bg-elevated));
  border-radius: var(--r-2); overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--area-marketing) 26%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 14px; text-align: center;
  transition: box-shadow var(--t-base) var(--ease);
}
.ldx-mkt-tile:hover .ldx-mkt-thumb { box-shadow: 0 0 0 1px color-mix(in srgb, var(--area-marketing) 55%, transparent), var(--shadow-2); }
.ldx-mkt-specimen-name { font-size: calc(16px * var(--text-scale, 1)); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--area-marketing); }
.ldx-mkt-specimen-fmt { font-size: calc(12px * var(--text-scale, 1)); font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--ink-3); }
.ldx-mkt-name { font-size: calc(12.5px * var(--text-scale, 1)); font-weight: 600; color: var(--ink); }
.ldx-mkt-fmt { font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink-3); }
.ldx-mkt-tile:hover .ldx-mkt-fmt { color: var(--area-marketing); }

@media (max-width: 720px) {
  .ldx-hero { aspect-ratio: 4 / 3; }
  .ld-door { grid-template-columns: 34px 1fr auto; }
  .ld-door-value { display: none; }   /* label + verb stay; value folds into the door target */
}

/* ── Admin de-box (053 Add9 audit) — open sections, quiet stat row ── */
.admin-sect { padding: var(--sp-8) 0; border-top: 1px solid var(--line); }
.admin-sect:first-of-type { border-top: 0; padding-top: var(--sp-4); }
.admin-stat { background: transparent !important; border: 0 !important; padding: 0 var(--sp-4) 0 0; }

/* ═════ GLOBAL FORM-CONTROL FOCUS (064 item 3 REDO — Dom) ═════
 * Focus is an interaction state, not an area identity: it is ALWAYS the CS
 * teal, in every view, no matter what an area wrapper remaps --brand /
 * --shadow-focus to (brand-kit's rose being the case Dom screenshotted —
 * twice). One rule, last in the file, on dedicated --focus-ring-c /
 * --focus-ring-shadow tokens (tokens.css) that area accents must never
 * touch. The `:not(...)` guards keep checkboxes/radios on their own
 * accent treatments (e.g. downloads' pine checkboxes) — this rule is for
 * text-like fields, selects, textareas, and colour pickers only. Same
 * subtle 3px/32% weight the portal has always used — not louder.
 * Icons, buttons, and selection-card accents keep their area colour. */
/* :is() lifts every branch to the specificity of its most specific argument
 * — (0,3,1) — so this single rule outweighs every earlier `.input:focus` /
 * `.select:focus` / `.mt2-* input:focus` variant, including the ones that
 * read the (remappable) --brand var.
 * ONE documented exception, granted by Dom 2026-08-29: the help desk composer
 * (`.cs-hd-panel .cs-hd-form .cs-hd-input:focus`, above) carries the widget's
 * own purple at the same 3px/32% weight. It out-specifies this rule on purpose;
 * nothing else may. */
:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus,
:is(input[type="color"], input:not([type="checkbox"]):not([type="radio"])):focus-visible {
  outline: none;
  border-color: var(--focus-ring-c);
  box-shadow: var(--focus-ring-shadow);
}

/* ── 070 P3.9 #16 — photo strips: no rail under the slider, handle = accent ── */
.mt2-photo-strip-row,
.mt2-kit-tray,
.sd-rail {
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}
.mt2-photo-strip-row::-webkit-scrollbar,
.mt2-kit-tray::-webkit-scrollbar,
.sd-rail::-webkit-scrollbar { height: 6px; background: transparent; }
.mt2-photo-strip-row::-webkit-scrollbar-track,
.mt2-kit-tray::-webkit-scrollbar-track,
.sd-rail::-webkit-scrollbar-track { background: transparent; }
.mt2-photo-strip-row::-webkit-scrollbar-thumb,
.mt2-kit-tray::-webkit-scrollbar-thumb,
.sd-rail::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 999px; }

/* 07-16 Dom law: no dots — final override */
.nav-tab.is-active::before, .app-nav-links .nav-tab.is-active::before { content: none !important; }

/* ───── 094 · B8 media skeletons — shimmer host + blur-up reveal ──────────
 * Applied on: listing card heroes (.lb-photo), delivery grid cells + row
 * thumbs (.dlt-cell / .dlt-thumb), editor photo grid (.photo-tile), designer
 * gallery (.dz-ph). Additive only: hosts opt in via .skel-host, images via
 * .skel-img. No layout change; reuses the existing `skel` keyframes/tokens.
 * JS reveal engine: components/skel.js. CSS failsafe below guarantees the
 * image is never permanently hidden even if that module fails.            */
/* The hide/blur rules only apply once components/skel.js has announced itself
 * by stamping `has-skel-js` on <html>. If that module ever fails to load or
 * run, no image is ever hidden — the portal degrades to exactly today's
 * behaviour. So the reveal can never be left stuck, and the shimmer persists
 * for as long as a slow pipe actually needs it (the B8 case). */
.skel-host { position: relative; }
.has-skel-js .skel-host:has(img.skel-img:not(.is-loaded))::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--bg-hover) 50%, var(--bg-sunken) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
}
img.skel-img { transition: opacity .3s var(--ease, ease), filter .5s var(--ease, ease); }
.has-skel-js img.skel-img:not(.is-loaded) { opacity: 0; filter: blur(8px); }
img.skel-img.is-loaded { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .has-skel-js .skel-host:has(img.skel-img:not(.is-loaded))::before { animation: none; }
  img.skel-img { transition: none; }
  .has-skel-js img.skel-img:not(.is-loaded) { filter: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * CS COMMAND-CENTER  (07-18-101)  — dark-only work surface for /cs + shared
 * page-head icon fix + status chip primitive. Design law (binding):
 *   ground var(--dim-base) · card var(--dim-card) · hover var(--dim-hover)
 *   · cream #fffdf4   [2026-08-19: was the literal #030303/#0a0a0b/#0d0d0f;
 *   remapped to the shared dim ladder in tokens.css — soft graphite, no pure
 *   black. Roles and order are identical, only the scale moved up.]
 *   info 90% · muted 60% · hairline 7% · radius 11px · 8px grid · Onest
 * Scoped under .cs-main so it never touches the agent-facing tokened views.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── (2) Giant-icon kill: pageHead() SVGs had no size → ballooned to viewBox.
 *    Applies to EVERY /cs page-head, not just the dashboard. ── */
.cs-page-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cs-page-icon svg { width: 22px; height: 22px; display: block; }
.cs-page-head .h1 { display: inline-flex; align-items: center; gap: 10px; }
.cs-page-head .h1 svg { width: 22px; height: 22px; flex: none; }

/* ── Status chip primitive (filled, dark ink — "colour is earned") ── */
.cs-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 5px; border-radius: var(--r-btn);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; line-height: 1;
  color: var(--brand-ink); white-space: nowrap; flex: none;
  text-transform: none; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.cs-status-pending     { background: var(--cso-butter); }
.cs-status-confirmed   { background: var(--accent-people); }
.cs-status-in_progress { background: var(--brand-deep); }
.cs-status-delivered   { background: var(--ok); }
.cs-status-invoiced    { background: var(--brand-deep); }
.cs-status-paid        { background: var(--ok); }
.cs-status-cancelled {
  background: transparent; color: hsla(47,100%,97.78%,.6);
  border: 1px solid hsla(47,100%,97.78%,.15);
}

/* ── Dashboard shell — dark ground + cream ink base ── */
body:has(.cs-main) { background: var(--dim-base); }
.cs-main {
  --ink90:  hsla(47,100%,97.78%,.9);
  --ink60:  hsla(47,100%,97.78%,.6);
  /* +2 notches on the hairlines: the ground rose ~18 RGB points, so a 5%
   * cream alpha no longer draws an edge you can see. */
  --hair:   hsla(47,100%,97.78%,.07);
  --hair15: hsla(47,100%,97.78%,.17);
  --card:   var(--dim-card);
  --card-h: var(--dim-hover);
  color: var(--ink90);
  padding-left: var(--sp-8); padding-right: var(--sp-8);
}
.cs-main .h1, .cs-main .h2, .cs-main .h3 { color: var(--ink90); }
.cs-main .kicker, .cs-main .muted { color: var(--ink60); }

/* pastel → soft low-sat LEFT-BORDER accent only (never a fill).
 * 'rose' is law-mapped to iris #7b68d9. */
.cs-main [data-pastel="mint"]       { --pastel: var(--ok); }
.cs-main [data-pastel="lavender"]   { --pastel: var(--accent-people); }
.cs-main [data-pastel="olive"]      { --pastel: var(--cat-lime); }
.cs-main [data-pastel="terracotta"] { --pastel: #e94b6b; }   /* law-mapped to Raspberry — no orange */
.cs-main [data-pastel="peach"]      { --pastel: var(--cso-butter); }
.cs-main [data-pastel="rose"]       { --pastel: var(--accent-people); }
.cs-main [data-pastel="powder"]     { --pastel: var(--cat-purple); }

/* Hero — stacked date left, meta right */
.cs-main .cs-hero {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-12);
}
.cs-hero-date { display: flex; flex-direction: column; gap: 2px; }
.cs-hero-dow  { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink60); }
.cs-hero-dnum {
  font-size: clamp(40px, 6vw, 64px); font-weight: 600; line-height: 1;
  letter-spacing: -.02em; color: var(--ink90); font-variant-numeric: tabular-nums;
}
.cs-hero-dmonth { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink60); }
.cs-hero-meta { display: flex; gap: var(--sp-8); }
.cs-hero-meta-row { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cs-hero-meta-time {
  font-size: calc(24px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.cs-hero-meta-label { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }

/* KPI row — 4-up, label above value, 2px pastel left border */
.cs-main .cs-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4); margin-bottom: var(--sp-12);
}
.cs-main .cs-kpi {
  display: flex; flex-direction: column-reverse; gap: var(--sp-2);
  background: var(--card); border: 1px solid var(--hair);
  border-left: 2px solid var(--pastel, var(--hair15));
  border-radius: 11px; padding: var(--sp-5);
}
.cs-kpi-value {
  font-size: calc(24px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.cs-kpi-label { font-size: calc(12px * var(--text-scale, 1)); font-weight: 400; color: var(--ink60); }

/* Weather / sunset chip (JS injects it inline; keep cream, not white) */
.cs-main .cs-wx-chip { color: var(--ink90); }

/* Today's work — stacked cards, 3px pastel left border */
.cs-today-blocks { display: flex; flex-direction: column; gap: var(--sp-3); }
.cs-today-block {
  display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "time title" "time meta";
  column-gap: var(--sp-4); row-gap: var(--sp-1); align-items: start;
  background: var(--card); border: 1px solid var(--hair);
  border-left: 3px solid var(--pastel, var(--hair15));
  border-radius: 11px; padding: var(--sp-4);
  text-decoration: none; color: var(--ink90);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.cs-today-block:hover { background: var(--card-h); }
.cs-today-block-head {
  grid-area: time; display: flex; flex-direction: column; gap: 2px;
  min-width: 62px;
}
.cs-today-block-time-start {
  font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90);
  font-variant-numeric: tabular-nums;
}
.cs-today-block-dur { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-today-block-time-end { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); font-variant-numeric: tabular-nums; }
.cs-today-block-title {
  grid-area: title; margin: 0; font-size: calc(16px * var(--text-scale, 1)); font-weight: 600;
  color: var(--ink90); line-height: 1.3;
}
.cs-today-block-meta {
  grid-area: meta; display: flex; gap: var(--sp-2); align-items: baseline;
  flex-wrap: wrap; margin-top: 2px;
}
.cs-today-block-meta > span:first-child { font-size: calc(14px * var(--text-scale, 1)); color: var(--ink90); }
.cs-today-block-pkg { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink60); }

/* Empty states — centered, 48px vertical, muted */
.cs-today-empty, .cs-empty {
  text-align: center; padding: var(--sp-12) var(--sp-6);
  color: var(--ink60); font-size: calc(14px * var(--text-scale, 1)); line-height: 1.5;
}
.cs-today-empty strong { color: var(--ink90); font-weight: 600; }

/* This week + attention — 2fr / 1fr, panels overridden to card law */
.cs-main .cs-grid-2 {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: var(--sp-6); margin-bottom: var(--sp-12);
}
.cs-main .panel {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 11px; padding: var(--sp-5);
}

/* Week-strip rows — transparent, 5% bottom hairline */
.cs-row-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-1); text-decoration: none;
  border-bottom: 1px solid var(--hair);
  transition: background var(--t-base) var(--ease);
}
.cs-row-card:last-child { border-bottom: none; }
.cs-row-card:hover { background: var(--card-h); }
.cs-row-time { display: flex; flex-direction: column; gap: 2px; min-width: 58px; flex: none; }
.cs-row-time strong { font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); }
.cs-row-time .muted { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-row-body strong { font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); }
.cs-row-body .muted { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }

/* Attention rows — override the older tokened .attn-* inside the CS surface */
.cs-main .attn-row {
  display: flex; align-items: center; gap: var(--sp-3);
  grid-template-columns: none;
  padding: var(--sp-3) var(--sp-1); border-radius: 0;
  background: transparent; text-decoration: none;
  border-top: none; border-bottom: 1px solid var(--hair);
}
.cs-main .attn-row + .attn-row { border-top: none; }
.cs-main .attn-row:last-child { border-bottom: none; }
.cs-main .attn-row:hover { background: var(--card-h); }
.cs-main .attn-tag {
  flex: none; text-transform: none; letter-spacing: 0;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; line-height: 1;
  padding: 4px 10px 5px; border-radius: var(--r-btn); color: var(--brand-ink); width: max-content;
}
.cs-main .attn-tag-pending { background: var(--cso-butter); }
.cs-main .attn-tag-lead    { background: var(--accent-people); }
.cs-main .attn-body { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 0; }
.cs-main .attn-body strong { font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); }
.cs-main .attn-body .muted {
  font-size: calc(12px * var(--text-scale, 1)); line-height: 1.4; color: var(--ink60);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cs-main .attn-cta { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink60); white-space: nowrap; }
.cs-main .attn-row:hover .attn-cta { color: var(--ink90); }

/* Sync bar */
.cs-main .cs-sync-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--card);
  border: 1px solid var(--hair); border-radius: 11px; margin-top: var(--sp-6);
}
.cs-sync-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.cs-sync-text { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink60); flex: 1; min-width: 0; }
.cs-sync-text strong { color: var(--ink90); font-weight: 600; }
.cs-sync-text .muted { color: var(--ink60); }
.cs-main .cs-sync-bar .btn { margin-left: auto; flex: none; }
.cs-main .cs-sync-bar .btn-ghost { color: var(--ink60); }
.cs-main .cs-sync-bar .btn-ghost:hover { color: var(--ink90); background: hsla(47,100%,97.78%,.05); }

/* Section header ghost links inside the CS surface */
.cs-main .btn-ghost { color: var(--ink60); }
.cs-main .btn-ghost:hover { color: var(--ink90); background: hsla(47,100%,97.78%,.05); }
.cs-main .link-quiet { color: var(--ink90); text-decoration-color: var(--hair15); }
.cs-main .link-quiet:hover { color: #fffdf4; }

@media (max-width: 900px) {
  .cs-main .cs-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .cs-main .cs-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cs-main .cs-kpi-row { grid-template-columns: 1fr; }
  .cs-main .cs-hero-meta { gap: var(--sp-5); }
}

/* ══════════════════════════════════════════════════════════════════════════
 * CS BACKEND VIEWS  (07-18-101b) · calendar · bookings · pipeline · clients ·
 * invoices · inbox · new-order · settings. Extends the CS command-center
 * pattern library above. Dark-only, scoped under .cs-main (settings body lives
 * in .account-main, reached via body:has(.cs-main)). Reuses --ink90/60, --hair,
 * --hair15, --card, --card-h, --sp-*, .cs-status, .panel, .btn-ghost.
 * Additive only · no earlier rule is edited.
 * ════════════════════════════════════════════════════════════════════════ */

/* Native form controls + scrollbars render dark across the whole CS surface.
 * The CS palette vars are defined on .cs-main above, but /cs/settings renders
 * its body in a sibling .account-main (outside .cs-main), so promote the same
 * tokens to body:has(.cs-main) — now every var(--card|--hair15|--ink90…) call
 * resolves anywhere on the surface (fixes settings' form-field backgrounds). */
body:has(.cs-main) {
  color-scheme: dark;
  --ink90: hsla(47,100%,97.78%,.9);
  --ink60: hsla(47,100%,97.78%,.6);
  --hair:  hsla(47,100%,97.78%,.07);
  --hair15: hsla(47,100%,97.78%,.17);
  --card:  var(--dim-card);
  --card-h: var(--dim-hover);
  --line:  hsla(47,100%,97.78%,.17);
}
.cs-main { --line: var(--hair15); }

/* Wider work surfaces (calendar week grid, kanban) breathe to the viewport. */
.cs-main-wide, .cs-main-bookings { max-width: 1360px; }

/* ── Extra status chips used by the ledger (extend the primitive above) ── */
.cs-status-overdue      { background: var(--brand); color: #fffdf4; }
.cs-status-completed-np { background: var(--ok); }
.cs-status-notsent {
  background: transparent; color: var(--ink60);
  border: 1px solid var(--hair15);
}
.cs-status-prepaid      { background: var(--ok); }
.cs-status-unpaid, .cs-status-partial {
  background: transparent; color: var(--ink60);
  border: 1px solid var(--hair15);
}

/* ── Dark form controls (inputs, selects, textareas) across the surface ── */
body:has(.cs-main) .input,
body:has(.cs-main) .select,
body:has(.cs-main) .textarea,
.cs-main input[type="search"],
.cs-main input[type="text"],
.cs-main input[type="email"],
.cs-main input[type="tel"],
.cs-main input[type="number"],
.cs-main input[type="datetime-local"],
.cs-main select,
.cs-main textarea {
  background: var(--card);
  border: 1px solid var(--hair15);
  color: var(--ink90);
  border-radius: 11px;
}
body:has(.cs-main) .input::placeholder,
body:has(.cs-main) .textarea::placeholder,
.cs-main input::placeholder,
.cs-main textarea::placeholder { color: var(--ink60); }
body:has(.cs-main) .input:hover,
body:has(.cs-main) .select:hover,
body:has(.cs-main) .textarea:hover,
.cs-main select:hover,
.cs-main input:hover { border-color: hsla(47,100%,97.78%,.28); }

/* Dark buttons/pills reused from the agent portal, re-skinned on the surface */
.cs-main .badge {
  background: transparent; color: var(--ink60);
  border: 1px solid var(--hair15); letter-spacing: 0; font-weight: 600;
}
.cs-main .badge-ok   { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.cs-main .badge-warn { background: var(--cso-butter); color: var(--brand-ink); border-color: transparent; }
.cs-main .pill {
  background: transparent; color: var(--ink60);
  border: 1px solid var(--hair15); letter-spacing: 0;
  text-transform: none; font-size: calc(11px * var(--text-scale, 1)); font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-btn);
}
.cs-main .btn-primary {
  background: var(--brand); color: var(--brand-ink); border-color: transparent; font-weight: 600;
}
.cs-main .btn-primary:hover { background: var(--brand-hover); }
.cs-main .btn-danger {
  background: transparent; color: var(--brand-deep);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
}
.cs-main .btn-danger:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: color-mix(in srgb, var(--brand) 70%, transparent); }
.cs-main .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) {
  background: transparent; color: var(--ink90); border: 1px solid var(--hair15);
}
.cs-main .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):hover {
  background: var(--card-h); border-color: hsla(47,100%,97.78%,.28);
}

/* CS status pill (invoice QBO badge, email status) */
.cs-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-btn);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; line-height: 1;
  background: transparent; color: var(--ink60);
  border: 1px solid var(--hair15); white-space: nowrap;
}
.cs-pill-ok   { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.cs-pill-warn { background: var(--cso-butter); color: var(--brand-ink); border-color: transparent; }
.cs-pill-err  { background: var(--brand); color: #fffdf4; border-color: transparent; }

/* Muted-data warn accent (outstanding AR figures) · colour on the number only */
.cs-main .cs-warn { color: var(--cat-orange); }

/* Row focus flash after a deep-link jump */
@keyframes cs-row-flash {
  0%   { box-shadow: 0 0 0 2px var(--brand), 0 0 0 6px color-mix(in srgb, var(--brand) 25%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.cs-row-flash { animation: cs-row-flash 1.6s var(--ease); border-radius: 11px; }

/* ══════════════ Filter chips + search (bookings) ══════════════ */
.cs-search {
  width: 260px; max-width: 46vw;
  padding: 9px 14px; font-size: calc(13px * var(--text-scale, 1));
}
.cs-filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cs-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-btn);
  background: var(--card); border: 1px solid var(--hair15);
  color: var(--ink60); font-size: calc(13px * var(--text-scale, 1)); font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.cs-chip:hover { background: var(--card-h); color: var(--ink90); }
.cs-chip.is-active { background: #fffdf4; color: var(--brand-ink); border-color: transparent; }
.cs-chip-count {
  font-size: calc(11px * var(--text-scale, 1)); font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: var(--r-btn);
  background: hsla(47,100%,97.78%,.08); color: inherit; opacity: .8;
}
.cs-chip.is-active .cs-chip-count { background: rgba(28,23,8,.14); opacity: 1; }

/* ══════════════ Stat row (clients + inbox) ══════════════
 * Override the light agent-portal .admin-stat inside the CS surface. */
.cs-clients-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
.cs-main .admin-stat {
  background: var(--card) !important; border: 1px solid var(--hair) !important;
  border-radius: 11px; padding: var(--sp-5) !important;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.cs-main .admin-stat[data-tone="warn"] { border-left: 2px solid var(--cat-orange); }
.cs-main .admin-stat[data-tone="ok"]   { border-left: 2px solid var(--ok); }
.cs-main .admin-stat-value {
  font-size: calc(24px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.05;
}
.cs-main .admin-stat-label { color: var(--ink60); font-size: calc(12px * var(--text-scale, 1)); margin-top: 0; }

/* ══════════════ Table primitive (invoices · clients · inbox) ══════════════ */
.cs-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: 11px;
  background: var(--card); overflow: hidden;
}
.cs-table-head, .cs-row {
  display: grid; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
}
.cs-table-head {
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 600; letter-spacing: 0;
  color: var(--ink60); text-transform: none;
  border-bottom: 1px solid var(--hair); background: hsla(47,100%,97.78%,.02);
}
.cs-row {
  border-bottom: 1px solid var(--hair);
  color: var(--ink90); text-decoration: none;
  transition: background var(--t-base) var(--ease);
  width: 100%; text-align: left; background: transparent;
  border-left: 0; border-right: 0; border-top: 0; font: inherit;
}
.cs-row:last-child { border-bottom: none; }
a.cs-row:hover, button.cs-row:hover { background: var(--card-h); cursor: pointer; }
.cs-cell {
  min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: calc(13px * var(--text-scale, 1)); color: var(--ink90);
}
.cs-cell.text-right, .cs-cell.text-right * { text-align: right; }
.cs-cell.text-right { align-items: flex-end; }
.cs-cell strong { font-weight: 600; }
.cs-cell .muted { color: var(--ink60); }
.cs-cell .mono, .cs-main .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cs-cell.text-right, .cs-main .cs-cell strong { font-variant-numeric: tabular-nums; }
.cs-row-actions { flex-direction: row; gap: var(--sp-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* Dark, legible pairing dropdown in the inbox reconciliation table */
.cs-status-select {
  width: 100%; max-width: 220px;
  padding: 7px 10px; font-size: calc(12px * var(--text-scale, 1));
  background: var(--card-h); color: var(--ink90);
  border: 1px solid var(--hair15); border-radius: 9px;
}
.cs-inbox-etrow { grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; }

/* ══════════════ Day-card system (shared: calendar + bookings) ══════════════ */
.cs-cal-card {
  background: var(--card); border: 1px solid var(--hair);
  border-left: 3px solid var(--pastel, var(--hair15));
  border-radius: 0; overflow: visible;   /* Dom 2026-08-19: no round corners anywhere on the calendar */
}
.cs-cal-card.is-today { border-color: hsla(47,100%,97.78%,.22); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.cs-cal-date {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
}
/* CS-PLAT-04 (Dom 2026-08-19): "Mon 17 Tue 18, a bit larger". One line, so the
   header cannot outgrow its box and clip the way it did the moment a day also
   carried a drive total. Weekday quiet, number loud, Apple's proportions. */
.cs-cal-daylabel { display: flex; align-items: baseline; gap: 8px; }
.cs-cal-dow  { font-size: calc(15px * var(--text-scale, 1)); font-weight: 500; color: var(--ink60); }
.cs-cal-dnum { font-size: calc(30px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cs-cal-month { font-size: calc(11px * var(--text-scale, 1)); font-weight: 500; color: var(--ink60); }
.cs-cal-card.is-today .cs-cal-dnum,
.cs-cal-card.is-today .cs-cal-dow { color: var(--csx-accent-text, var(--brand)); }
.cs-cal-drive-total {
  margin-top: var(--sp-1); font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60);
  font-variant-numeric: tabular-nums;
}

/* Bookings: vertical stack of horizontal cards (date left, chips right) */
.cs-cal-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.cs-cal-stack .cs-cal-card,
.cs-bookings-unscheduled {
  display: grid; grid-template-columns: 96px 1fr;
}
.cs-cal-stack .cs-cal-date,
.cs-bookings-unscheduled .cs-cal-date {
  border-right: 1px solid var(--hair);
}
.cs-cal-stack .cs-cal-card.is-past { opacity: .72; }
.cs-cal-stack .cs-cal-card.is-past:hover { opacity: 1; }
.cs-cal-events {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
}

/* ══════════════ Booking chips (bookings view) ══════════════ */
.cs-bk-chip-wrap { position: relative; }
.cs-bk-chip {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card-h); border: 1px solid var(--hair);
  border-left: 3px solid var(--hair15);
  border-radius: 10px; text-decoration: none; color: var(--ink90);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.cs-bk-chip:hover { background: var(--dim-hover); border-color: hsla(47,100%,97.78%,.18); }
.cs-bk-chip.is-paid        { border-left-color: var(--ok); }
.cs-bk-chip.is-overdue     { border-left-color: var(--brand); }
.cs-bk-chip.is-completed-np { border-left-color: var(--ok); }
.cs-bk-chip.is-notsent     { border-left-color: var(--cso-butter); }
.cs-bk-chip.is-awaiting    { border-left-color: var(--cat-orange); }
.cs-bk-chip-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cs-bk-chip-time { font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); font-variant-numeric: tabular-nums; min-width: 52px; }
.cs-bk-chip-title { font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); line-height: 1.3; }
.cs-bk-chip-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60);
}
.cs-bk-chip-meta strong { color: var(--ink90); font-size: calc(13px * var(--text-scale, 1)); font-variant-numeric: tabular-nums; }
.cs-bk-chip-travel { color: var(--cat-orange); }
.cs-bk-chip-overdue { font-size: calc(11px * var(--text-scale, 1)); color: var(--brand-deep); font-weight: 600; }

/* ⚙ edit affordance · ghost, top-right, appears on hover (guard icon size) */
.cs-bk-chip-edit, .cs-cal-chip-edit {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--ink60); cursor: pointer;
  font-size: calc(14px * var(--text-scale, 1)); line-height: 1; opacity: 0;
  transition: opacity var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.cs-bk-chip-wrap:hover .cs-bk-chip-edit,
.cs-cal-chip-wrap:hover .cs-cal-chip-edit { opacity: 1; }
.cs-bk-chip-edit:hover, .cs-cal-chip-edit:hover { background: hsla(47,100%,97.78%,.08); color: var(--ink90); }
.cs-bk-chip-edit svg, .cs-cal-chip-edit svg { width: 15px; height: 15px; }

/* Payment method dropdown on invoiced chips */
.cs-bk-pay { position: relative; align-self: flex-start; }
.cs-bk-chip-advance, .cs-bk-pay-btn {
  padding: 5px 11px; border-radius: 8px;
  background: var(--brand); color: var(--brand-ink); border: 0;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; cursor: pointer;
}
.cs-bk-pay-btn:hover { background: var(--brand-hover); }
.cs-bk-pay-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  display: none; flex-direction: column; min-width: 150px;
  background: var(--dim-over); border: 1px solid var(--hair15); border-radius: 10px;
  padding: var(--sp-1); box-shadow: 0 12px 30px rgba(0,0,0,.36);
}
.cs-bk-pay-menu.is-open { display: flex; }
.cs-bk-pay-menu button {
  text-align: left; padding: 8px 10px; border-radius: 7px;
  background: transparent; border: 0; color: var(--ink90);
  font-size: calc(13px * var(--text-scale, 1)); cursor: pointer;
}
.cs-bk-pay-menu button:hover { background: hsla(47,100%,97.78%,.08); }

/* ══════════════ Inline service strip (shared: calendar drawer + bookings) ══════════════ */
.cs-bk-svc-strip {
  margin-top: var(--sp-2); padding: var(--sp-3);
  border: 1px dashed var(--hair15); border-radius: 10px;
  background: hsla(47,100%,97.78%,.02);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.cs-bk-svc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cs-bk-svc-sel {
  padding: 6px 9px; border-radius: 8px;
  background: var(--card-h); color: var(--ink90);
  border: 1px solid var(--hair15); font-size: calc(12px * var(--text-scale, 1)); width: auto;
}
.cs-bk-svc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px; border-radius: 8px; border: 1px solid var(--hair15);
  background: var(--card);
}
.cs-bk-svc-rm {
  width: 20px; height: 20px; border-radius: 6px; border: 0;
  background: transparent; color: var(--ink60); cursor: pointer; font-size: calc(11px * var(--text-scale, 1));
}
.cs-bk-svc-rm:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-deep); }
.cs-bk-svc-total {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90);
  font-variant-numeric: tabular-nums; cursor: pointer;
  padding: 5px 9px; border-radius: 8px; border: 1px solid var(--hair15);
}
.cs-bk-svc-total.is-manual { border-color: var(--cat-orange); color: var(--cat-orange); }
.cs-bk-svc-total-flag {
  font-size: calc(10px * var(--text-scale, 1)); font-weight: 600; text-transform: none;
  color: var(--brand-ink); background: var(--cat-orange); padding: 1px 6px; border-radius: var(--r-btn);
}
.cs-bk-svc-total-reset {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; border: 0;
  background: transparent; color: var(--ink60); cursor: pointer;
}
.cs-bk-svc-total-reset:hover { background: hsla(47,100%,97.78%,.08); color: var(--ink90); }
.cs-bk-svc-total-reset svg { width: 13px; height: 13px; }
.cs-bk-svc-addrow { display: flex; justify-content: center; }
.cs-bk-svc-add {
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent; border: 1px dashed var(--hair15);
  color: var(--ink60); cursor: pointer; font-size: calc(16px * var(--text-scale, 1)); line-height: 1;
}
.cs-bk-svc-add:hover { border-color: hsla(47,100%,97.78%,.3); color: var(--ink90); }

/* ══════════════ Drive-time pill (shared) ══════════════ */
.cs-drive-pill {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 6px var(--sp-3); margin: 2px 0;
  border-radius: var(--r-btn); border: 1px solid var(--hair15);
  background: hsla(47,100%,97.78%,.03);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60);
}
.cs-drive-pill[data-tone="tight"] { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.cs-drive-pill[data-tone="long"]  { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.cs-drive-arrow { color: var(--ink60); font-size: calc(13px * var(--text-scale, 1)); }
.cs-drive-time { font-weight: 600; color: var(--ink90); font-variant-numeric: tabular-nums; }
.cs-drive-sub { color: var(--ink60); }
.cs-drive-pill[data-tone="tight"] .cs-drive-sub { color: var(--brand-deep); }
.cs-drive-traffic-sel {
  padding: 3px 6px; border-radius: 7px; font-size: calc(11px * var(--text-scale, 1));
  background: var(--card-h); color: var(--ink90); border: 1px solid var(--hair15); width: auto;
}
.cs-drive-fee-text { font-weight: 600; color: var(--cat-lime); font-variant-numeric: tabular-nums; }
.cs-drive-fee-suggest { color: var(--ink60); font-weight: 500; }
.cs-drive-fee-btn, .cs-drive-bump-input {
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 7px;
  background: transparent; border: 1px solid var(--hair15);
  color: var(--ink90); cursor: pointer; font-size: calc(12px * var(--text-scale, 1)); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cs-drive-fee-btn:hover { border-color: hsla(47,100%,97.78%,.3); }
.cs-drive-bump-input { width: 48px; text-align: center; }

/* ══════════════ CALENDAR · Apple-style week timeline ══════════════ */
.cs-cal-week-grid {
  display: grid;
  grid-template-columns: 54px repeat(7, minmax(140px, 1fr));
  gap: var(--sp-2);
  overflow-x: auto; padding-bottom: var(--sp-3);
}
.cs-cal-week-grid .cs-cal-card { display: flex; flex-direction: column; }
.cs-cal-week-grid .cs-cal-date {
  /* min-height, not height: a day carrying a drive total used to overflow a
     fixed 66px box and get cut off at the top (Dom's screenshot). */
  min-height: 74px; box-sizing: border-box; justify-content: center;
  border-bottom: 1px solid var(--hair);
  background: var(--day-tint, transparent);
}
.cs-cal-week-grid .cs-cal-dnum { font-size: calc(26px * var(--text-scale, 1)); }

/* Time gutter (left rail) */
.cs-cal-time-gutter { display: flex; flex-direction: column; }
.cs-cal-gutter-spacer { min-height: 74px; box-sizing: border-box; }
.cs-cal-gutter-stack { position: relative; height: var(--tl-h); }
.cs-tl-gutter-row {
  position: absolute; right: 8px; transform: translateY(-50%);
  display: flex; align-items: baseline; gap: 3px;
  color: var(--ink60); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cs-tl-gutter-row b   { font-size: calc(15px * var(--text-scale, 1)); font-weight: 500; color: var(--ink90); letter-spacing: -.01em; }
.cs-tl-gutter-row span{ font-size: calc(10px * var(--text-scale, 1)); font-weight: 500; letter-spacing: .02em; }

/* Per-day timeline canvas */
.cs-cal-timeline {
  position: relative; height: var(--tl-h);
  background: var(--day-tint, transparent);
}
.cs-tl-hour { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--hair); pointer-events: none; }
.cs-tl-half { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed hsla(47,100%,97.78%,.03); pointer-events: none; }
.cs-tl-now {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid var(--brand); z-index: 6; pointer-events: none;
}
.cs-tl-now::before {
  content: ''; position: absolute; left: 0; top: -4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.cs-tl-empty {
  position: absolute; top: 10px; left: 0; right: 0; text-align: center;
  font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); pointer-events: none;
}

/* Timeline block (absolutely positioned chip) */
.cs-tl-block {
  /* Edge to edge (Dom 2026-08-19): the 4px inset left a gutter down both sides
     of every column, so chips in neighbouring days never lined up. */
  position: absolute; left: 0; right: 0;
  height: var(--tl-block-h); min-height: 26px; z-index: 4;
  /* Square corners (Dom 2026-08-19). A day is a column of hard time blocks,
     the way a paper calendar rules it; rounded chips read as loose cards and
     the 3px client accent stripe on the left reads cleaner against a square. */
  border-radius: 0; overflow: hidden;
  background: var(--client-bg, var(--card-h));
  border: 1px solid var(--hair15);
  border-left: 3px solid var(--client-accent, var(--hair15));
  transition: box-shadow var(--t-base) var(--ease);
}
.cs-tl-block:hover { box-shadow: 0 0 0 1px var(--client-accent, var(--hair15)); z-index: 8; }
.cs-tl-block.is-dragging, .cs-tl-block.is-vdragging { opacity: .85; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.cs-tl-grip {
  position: absolute; left: 0; right: 0; height: 8px; z-index: 3;
  cursor: ns-resize; opacity: 0;
}
.cs-tl-grip::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 2px; background: hsla(47,100%,97.78%,.5);
}
.cs-tl-grip-top { top: 0; } .cs-tl-grip-top::after { top: 2px; }
.cs-tl-grip-bot { bottom: 0; } .cs-tl-grip-bot::after { bottom: 2px; }
.cs-tl-block:hover .cs-tl-grip { opacity: 1; }
/* Global event colour strength (Dom: "colour saturation too for events").
   The per-client colour and its own opacity still decide the hue; this is the
   master dial on top of them, so one slider can calm or lift the whole week
   without touching a single client's identity. */
.cscal .cs-tl-block { filter: saturate(var(--cal-event-sat, 1.3)); }
/* Laser, not mud: the accent rail is the full hue, the title is near-cream, and
   the meta line stays readable instead of dissolving into the fill. */
.cscal .cs-tl-block { --tl-accent-w: 4px; border-left-width: var(--tl-accent-w); }
.cscal .cs-cal-chip-title { color: hsla(47,100%,97.78%,.96); font-weight: 650; }
.cscal .cs-cal-chip-time  { color: hsla(47,100%,97.78%,.88); }
.cscal .cs-cal-chip-meta  { color: hsla(47,100%,97.78%,.72); }
.cs-cal-chip.cs-tl-chip {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 8px; height: 100%; box-sizing: border-box;
  text-decoration: none; color: var(--ink90); overflow: hidden;
}
.cs-tl-chip-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cs-cal-chip-time { font-size: calc(11px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); font-variant-numeric: tabular-nums; }
.cs-cal-chip-title { font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-cal-chip-meta { font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Weather micro-chips inside a timeline block */
.cs-wx { display: inline-flex; align-items: center; gap: 5px; flex: none; }
/* CS-PLAT-04 (Dom 2026-08-19): the glyph gets its own size, the reading gets
   the sky's colour. At 10px muted grey neither could be read at a glance. */
.cs-wx-ico {
  font-size: calc(15px * var(--text-scale, 1)); line-height: 1; flex: none;
  filter: saturate(1.15);
}
.cs-wx-text {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; color: var(--ink60);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Sky colours. Warm when the light is good, cool when it is not, red when the
   shoot is at risk, so the day reads before any number does. */
.cs-wx-text[data-wx-bucket="sunny"]  { color: #f5c451; }
.cs-wx-text[data-wx-bucket="partly"] { color: #e6c27a; }
.cs-wx-text[data-wx-bucket="cloudy"] { color: #9fb3c8; }
.cs-wx-text[data-wx-bucket="fog"]    { color: #8e9aa6; }
.cs-wx-text[data-wx-bucket="rain"]   { color: #6fb1e8; }
.cs-wx-text[data-wx-bucket="snow"]   { color: #b9d9ef; }
.cs-wx-text[data-wx-bucket="storm"]  { color: #f0a89f; }
.cs-wx-ico[data-wx-bucket="cloudy"],
.cs-wx-ico[data-wx-bucket="fog"] { opacity: .92; }
.cs-wx-drone-no { font-size: calc(10px * var(--text-scale, 1)); color: var(--cat-orange); }
.cs-wx-rain { font-size: calc(10px * var(--text-scale, 1)); }


/* Expanded inspector drawer floating from a block */
.cs-tl-drawer { display: none; }
.cs-tl-block.is-expanded { overflow: visible; z-index: 30; }
.cs-tl-block.is-expanded .cs-tl-drawer {
  display: block; position: absolute; top: calc(100% + 6px); left: 0;
  width: min(320px, 84vw); z-index: 31;
  background: var(--dim-over); border: 1px solid var(--hair15); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.44); padding: var(--sp-3);
}
.cs-tl-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.cs-tl-drawer-title { display: block; font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); }
.cs-tl-drawer-sub { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-tl-drawer-close {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: transparent; border: 1px solid var(--hair15); color: var(--ink60);
  cursor: pointer; font-size: calc(12px * var(--text-scale, 1));
}
.cs-tl-drawer-close:hover { background: hsla(47,100%,97.78%,.08); color: var(--ink90); }
.cs-tl-drawer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.cs-tl-drawer-link { font-size: calc(13px * var(--text-scale, 1)); color: var(--brand); text-decoration: none; }
.cs-tl-drawer-link:hover { text-decoration: underline; }
.cs-tl-drawer-danger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 8px; font-size: calc(12px * var(--text-scale, 1)); font-weight: 600;
  background: transparent; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand-deep); cursor: pointer;
}
.cs-tl-drawer-danger:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: color-mix(in srgb, var(--brand) 70%, transparent); }

/* Old-style event chip (legacy path) + drag handle.
   `:not(.cs-tl-block)` is load-bearing, not tidiness. A timeline block carries
   BOTH classes, and this rule sits after `.cs-tl-block { position: absolute }`
   at equal specificity — so it silently won, every chip fell back into normal
   flow, and `top:` became an offset from where the chip happened to land rather
   than from 7 AM. The error was the summed height of the chips above it: the
   third shoot of a day, behind two 60-minute blocks, drew exactly two hours
   late. That is Dom's "4:30 = 2:30". */
.cs-cal-chip-wrap:not(.cs-tl-block) { position: relative; }
.cs-cal-drag-handle { color: var(--ink60); cursor: grab; font-size: calc(11px * var(--text-scale, 1)); }

/* ── Calendar colour customiser — candy-swatch picker (SPW-designer language,
 *    --csx- tokens, both themes). Restyled 2026-07-20 (Dom: "i hate this panel"). */
.cs-color-panel-host { position: relative; }
.cs-color-panel-host:not(.is-open) .cs-color-panel { display: none; }
.cs-color-panel {
  position: absolute; right: 0; top: 8px; z-index: 50;
  width: min(360px, 92vw);
  background: var(--csx-surface); border: 1px solid var(--csx-line);
  border-radius: var(--csx-r-lg); box-shadow: var(--csx-shadow-pop);
  padding: 18px; max-height: 74vh; overflow-y: auto;
}
.cs-color-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.cs-color-title { margin: 0; font-size: calc(16px * var(--text-scale, 1)); font-weight: 700; letter-spacing: -.01em; color: var(--csx-ink); }
.cs-color-sub { margin: 5px 0 0; font-size: calc(12px * var(--text-scale, 1)); line-height: 1.5; color: var(--csx-ink-2); max-width: 42ch; }
.cs-color-x {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--csx-line); border-radius: var(--csx-r-btn);
  background: var(--csx-surface); color: var(--csx-ink-2); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cs-color-x:hover { background: var(--csx-surface-hover); color: var(--csx-ink); }
.cs-color-group + .cs-color-group { margin-top: 22px; }
.cs-color-glabel {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--csx-ink-2);
}
.cs-color-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--csx-r-pill); background: var(--csx-ground); color: var(--csx-ink-2);
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 600;
}
.cs-color-items { display: flex; flex-direction: column; gap: 16px; }
.cs-color-item { display: flex; flex-direction: column; gap: 8px; }
/* Strength dials (CS-PLAT-04). Same track styling in both themes, thumb takes
   the accent so it reads as a live control rather than a form input. */
.cs-color-range {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 4px; border-radius: 0; background: var(--hair15); outline: none;
}
.cs-color-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--csx-accent-text, var(--brand)); border: 0; cursor: pointer;
}
.cs-color-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--csx-accent-text, var(--brand)); border: 0; cursor: pointer;
}
.cs-color-idn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-color-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.cs-color-dot.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--csx-line-2); }
.cs-color-name {
  font-size: calc(13px * var(--text-scale, 1)); color: var(--csx-ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-color-sws { display: flex; flex-wrap: wrap; gap: 7px; padding-left: 19px; }
.cs-color-sw {
  position: relative; width: 24px; height: 24px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer; flex: none;
  transition: transform var(--t-fast) var(--ease);
}
.cs-color-sw:hover { transform: translateY(-2px); }
.cs-color-sw:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }
.cs-color-sw.is-on::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 4.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
/* Pale day-wash chips get a dark check so the tick stays visible */
.cs-color-sw--tint.is-on::after { border-color: #1a1a1a; filter: none; }
/* Off chip recesses OFF the panel surface (--csx-ground) so it reads as a
 * chip in both themes; slash at --csx-ink-2 stays legible on white. */
.cs-color-sw--off { background: var(--csx-ground); border: 1px dashed var(--csx-line-2); }
.cs-color-sw--off::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 1.5px; background: var(--csx-ink-2); transform: rotate(-45deg);
}
.cs-color-sw--off.is-on { border-style: solid; border-color: var(--csx-accent); background: var(--csx-accent-soft); }
.cs-color-sw--off.is-on::before { background: var(--csx-accent); }
.cs-color-sw--off.is-on::after { display: none; }   /* off = ring+slash only, no check */
.cs-color-sw--custom {
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: conic-gradient(#ea1d2d, #ee8b2c, #3ee092, #4d7ec0, #8b5cf6, #ea1d2d);
}
.cs-color-sw--custom input { position: absolute; inset: -8px; width: 40px; height: 40px; opacity: 0; cursor: pointer; }
.cs-color-sw--custom::after {
  content: '+'; color: #fff; font-size: calc(15px * var(--text-scale, 1)); font-weight: 500; line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.4); pointer-events: none;
}
.cs-color-empty {
  font-size: calc(12px * var(--text-scale, 1)); line-height: 1.5; color: var(--csx-ink-2);
  padding: 11px 13px; border: 1px dashed var(--csx-line-2); border-radius: var(--csx-r-md);
}
.cs-color-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--csx-line);
}
.cs-color-reset {
  background: transparent; border: none; padding: 6px 4px; cursor: pointer;
  font-size: calc(13px * var(--text-scale, 1)); color: var(--csx-ink-2);
  transition: color var(--t-fast) var(--ease);
}
.cs-color-reset:hover { color: var(--csx-st-red); }

/* ══════════════ PIPELINE · kanban ══════════════ */
.cs-kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-3);
  align-items: start;
}
.cs-col {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 11px; padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 160px;
}
.cs-col-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.cs-col-title { font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); }
.cs-col-blurb { font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); margin-top: 2px; }
.cs-col-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.cs-col-count { font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); font-variant-numeric: tabular-nums; }
.cs-col-value { font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); font-variant-numeric: tabular-nums; }
.cs-col-body { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 60px; border-radius: 9px; transition: background var(--t-base) var(--ease); }
.cs-col-body.is-drop-target { background: color-mix(in srgb, var(--brand) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); }
.cs-col-empty {
  text-align: center; font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60);
  padding: var(--sp-5); border: 1px dashed var(--hair15); border-radius: 9px;
}
.cs-card {
  background: var(--card-h); border: 1px solid var(--hair);
  border-radius: 9px; padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2); cursor: grab;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.cs-card:hover { border-color: hsla(47,100%,97.78%,.18); }
.cs-card.is-dragging { opacity: .6; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.cs-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.cs-card-order { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); font-variant-numeric: tabular-nums; }
.cs-card-value { font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); font-variant-numeric: tabular-nums; }
.cs-card-address { font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); line-height: 1.3; }
.cs-card-meta { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: 2px; }
.cs-card-time { font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); font-variant-numeric: tabular-nums; }
.cs-card-advance {
  padding: 4px 9px; border-radius: 7px; font-size: calc(11px * var(--text-scale, 1)); font-weight: 600;
  background: transparent; border: 1px solid var(--hair15); color: var(--ink90); cursor: pointer;
}
.cs-card-advance:hover { background: hsla(47,100%,97.78%,.08); border-color: hsla(47,100%,97.78%,.3); }
.cs-card-done { font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); }

/* ══════════════ INVOICES ══════════════ */
.invoice-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.cs-main .invoice-card {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 11px; padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.cs-main .invoice-card[data-tone="warn"] { border-left: 2px solid var(--cat-orange); }
.cs-main .invoice-card[data-tone="ok"]   { border-left: 2px solid var(--ok); }
.cs-main .invoice-card-label { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-main .invoice-card-value { font-size: calc(24px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cs-main .invoice-card-sub { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-aging { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.cs-aging-card {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4); border-radius: 11px; text-decoration: none;
  background: var(--card); border: 1px solid var(--hair);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.cs-aging-card:hover { background: var(--card-h); border-color: hsla(47,100%,97.78%,.18); }
.cs-aging-card.is-active { border-color: hsla(47,100%,97.78%,.32); box-shadow: inset 0 0 0 1px hsla(47,100%,97.78%,.12); }
.cs-aging-card[data-tone="warn"] { border-left: 2px solid var(--cat-orange); }
.cs-aging-card[data-tone="ok"]   { border-left: 2px solid var(--ok); }
.cs-aging-label { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-aging-value { font-size: calc(20px * var(--text-scale, 1)); font-weight: 600; color: var(--ink90); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cs-aging-meta { font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); }
.cs-table-invoices .cs-table-head,
.cs-table-invoices .cs-row { grid-template-columns: 1.1fr 1.3fr 1.5fr .9fr .9fr .8fr .7fr .7fr 1.3fr; }

/* ══════════════ CLIENTS ══════════════ */
.cs-client-groups { display: flex; flex-direction: column; gap: var(--sp-8); }
.cs-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.cs-table-clients .cs-table-head,
.cs-table-clients .cs-client-head { grid-template-columns: 2fr 1.4fr .8fr 1fr 1.1fr 1.1fr .9fr; }
.cs-client-head { cursor: pointer; }
.cs-client-body { display: none; padding: var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--hair); background: hsla(47,100%,97.78%,.02); }
.cs-client-row.is-open .cs-client-body { display: block; }
.cs-client-row:last-child .cs-client-body { border-bottom: none; }
.cs-client-profile { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-5); }
.cs-profile-line { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink90); margin-top: var(--sp-1); }
.cs-profile-line.muted, .cs-profile-line .muted { color: var(--ink60); }
.cs-profile-line.cs-warn { color: var(--cat-orange); }
.cs-client-recent .kicker { display: block; }
.cs-table-clients-recent { border: 1px solid var(--hair); border-radius: 10px; margin-top: var(--sp-2); }
.cs-mini-row { grid-template-columns: .8fr 1.8fr 1fr .8fr .9fr; }

/* ══════════════ NEW ORDER · form + summary ══════════════ */
.cs-new-order-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-6); align-items: start; }
.cs-no-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.cs-no-section {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 11px; padding: var(--sp-5);
}
.cs-no-section > .h3 { margin-bottom: var(--sp-3); }
.cs-no-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cs-no-row > label { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.cs-no-row > label > span,
.cs-no-section label > span:first-child { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-no-check { display: flex; align-items: center; gap: var(--sp-2); font-size: calc(13px * var(--text-scale, 1)); color: var(--ink90); margin-top: var(--sp-2); }
.cs-no-check input { width: auto; }

/* Pick-grids (agent, package, add-on) */
.cs-agent-grid, .cs-pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); }
.cs-addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-2); }
.cs-agent-pick, .cs-pkg-pick, .cs-addon-pick {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: var(--sp-3); border-radius: 10px; cursor: pointer;
  background: var(--card-h); border: 1px solid var(--hair15); color: var(--ink90);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.cs-addon-pick { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.cs-agent-pick:hover, .cs-pkg-pick:hover, .cs-addon-pick:hover { border-color: hsla(47,100%,97.78%,.3); }
.cs-agent-pick strong, .cs-pkg-pick strong { font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; }
.cs-agent-pick .muted, .cs-pkg-pick .muted, .cs-addon-pick .muted { font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); }
.cs-agent-pick.is-active, .cs-pkg-pick.is-active, .cs-addon-pick.is-active {
  border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent);
}

/* Calendar strip (21-day) */
.cs-cal-strip { border: 1px solid var(--hair); border-radius: 11px; padding: var(--sp-3); }
.cs-cal-strip-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cs-cal-strip-head span { flex: 1; text-align: center; font-size: calc(13px * var(--text-scale, 1)); color: var(--ink90); font-variant-numeric: tabular-nums; }
.cs-cal-strip-head button {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: transparent; border: 1px solid var(--hair15); color: var(--ink90); cursor: pointer;
}
.cs-cal-strip-head button[data-cal-today] { width: auto; padding: 0 12px; font-size: calc(12px * var(--text-scale, 1)); }
.cs-cal-strip-head button:hover { background: hsla(47,100%,97.78%,.08); }
.cs-cal-strip-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); }
.cs-day {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: var(--sp-2) 0; border-radius: 9px; cursor: pointer;
  background: var(--card-h); border: 1px solid var(--hair15); color: var(--ink90);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.cs-day:hover { border-color: hsla(47,100%,97.78%,.3); }
.cs-day-dow { font-size: calc(10px * var(--text-scale, 1)); color: var(--ink60); }
.cs-day-dom { font-size: calc(16px * var(--text-scale, 1)); font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-day-mo { font-size: calc(9px * var(--text-scale, 1)); color: var(--ink60); }
.cs-day.is-today { border-color: hsla(47,100%,97.78%,.4); }
.cs-day.is-selected { background: var(--brand); border-color: transparent; color: var(--brand-ink); }
.cs-day.is-selected .cs-day-dow, .cs-day.is-selected .cs-day-mo { color: rgba(28,23,8,.7); }
.cs-day.is-past { opacity: .5; }
.cs-day-dot {
  position: absolute; top: 4px; right: 5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-people);
}
.cs-slot-row { margin-top: var(--sp-4); }
.cs-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-2); }
.cs-slot {
  padding: 8px 0; border-radius: 8px; text-align: center; cursor: pointer;
  background: var(--card-h); border: 1px solid var(--hair15); color: var(--ink90);
  font-size: calc(13px * var(--text-scale, 1)); font-variant-numeric: tabular-nums;
}
.cs-slot:hover { border-color: hsla(47,100%,97.78%,.3); }
.cs-slot.is-active { background: var(--brand); border-color: transparent; color: var(--brand-ink); font-weight: 600; }
.cs-slot.is-taken { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.cs-slug-preview code, .cs-main code { color: var(--ink90); background: hsla(47,100%,97.78%,.06); padding: 1px 6px; border-radius: 5px; font-size: calc(11px * var(--text-scale, 1)); }

/* Summary card (right rail) */
.cs-no-summary { position: sticky; top: var(--sp-4); }
.cs-no-summary-card {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 11px; padding: var(--sp-5);
}
.cs-no-totals { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.cs-no-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: calc(13px * var(--text-scale, 1)); color: var(--ink60); }
.cs-no-line strong { color: var(--ink90); font-variant-numeric: tabular-nums; }
.cs-no-line-total { padding-top: var(--sp-2); border-top: 1px solid var(--hair); font-size: calc(15px * var(--text-scale, 1)); color: var(--ink90); }
.cs-no-line-total strong { font-size: calc(18px * var(--text-scale, 1)); }

/* ══════════════ SETTINGS (body lives in .account-main, outside .cs-main) ══════════════ */
body:has(.cs-main) .account-main {
  background: transparent; color: var(--ink90, #fffdf4);
  padding-left: var(--sp-8); padding-right: var(--sp-8);
}
body:has(.cs-main) .account-side-nav a {
  color: hsla(47,100%,97.78%,.6); border-radius: 9px;
  border: 1px solid transparent;
}
body:has(.cs-main) .account-side-nav a:hover { color: #fffdf4; background: hsla(47,100%,97.78%,.05); }
body:has(.cs-main) .account-side-nav a.is-active {
  color: #fffdf4; background: var(--dim-card); border-color: hsla(47,100%,97.78%,.14);
}
body:has(.cs-main) .card-pad-lg {
  background: var(--dim-card); border: 1px solid hsla(47,100%,97.78%,.07); border-radius: 11px;
}
body:has(.cs-main) .card-pad-lg .h2 { color: #fffdf4; }
body:has(.cs-main) .card-pad-lg .muted,
body:has(.cs-main) .card-pad-lg .kicker { color: hsla(47,100%,97.78%,.6); }
.cs-settings-grid { display: flex; flex-direction: column; }
.cs-settings-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid hsla(47,100%,97.78%,.05);
  font-size: calc(14px * var(--text-scale, 1)); color: #fffdf4;
}
.cs-settings-row:last-child { border-bottom: none; }
.cs-settings-row > span:first-child { color: hsla(47,100%,97.78%,.9); }
.cs-input-wrap { display: inline-flex; align-items: center; gap: 6px; }
.cs-input-prefix, .cs-input-suffix { color: hsla(47,100%,97.78%,.6); font-size: calc(13px * var(--text-scale, 1)); font-variant-numeric: tabular-nums; }
.cs-settings-input { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.cs-color-swatch { width: 34px; height: 30px; padding: 0; border: 1px solid hsla(47,100%,97.78%,.15); border-radius: 7px; background: transparent; cursor: pointer; }
.cs-integrations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.cs-integration { background: var(--dim-card-2); border: 1px solid hsla(47,100%,97.78%,.07); border-radius: 10px; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.cs-integration-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cs-integration-meta { font-size: calc(12px * var(--text-scale, 1)); }
.cs-raw { margin-top: var(--sp-4); }
.cs-raw summary { cursor: pointer; font-size: calc(13px * var(--text-scale, 1)); }
.cs-raw-pre {
  margin-top: var(--sp-2); padding: var(--sp-3); border-radius: 9px;
  background: var(--dim-sunk); border: 1px solid hsla(47,100%,97.78%,.07);
  color: hsla(47,100%,97.78%,.75); font-size: calc(12px * var(--text-scale, 1)); overflow-x: auto;
}
.cs-secrets-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cs-secrets-list li { font-size: calc(13px * var(--text-scale, 1)); color: hsla(47,100%,97.78%,.9); line-height: 1.5; padding-left: var(--sp-4); position: relative; }
.cs-secrets-list li::before { content: '·'; position: absolute; left: 4px; color: hsla(47,100%,97.78%,.6); }
body:has(.cs-main) .card-pad-lg code { color: var(--cat-lime); background: hsla(47,100%,97.78%,.06); padding: 1px 6px; border-radius: 5px; font-size: calc(12px * var(--text-scale, 1)); }
.cs-danger-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ══════════════ Responsive folds ══════════════ */
@media (max-width: 1040px) {
  .cs-new-order-grid { grid-template-columns: 1fr; }
  .cs-no-summary { position: static; }
}
@media (max-width: 900px) {
  .cs-clients-stats, .invoice-totals, .cs-aging { grid-template-columns: repeat(2, 1fr); }
  .cs-client-profile { grid-template-columns: 1fr; gap: var(--sp-4); }
  body:has(.cs-main) .account-main { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
@media (max-width: 720px) {
  .cs-table-head { display: none; }
  .cs-table-invoices .cs-row,
  .cs-table-clients .cs-client-head,
  .cs-mini-row, .cs-inbox-etrow { grid-template-columns: 1fr 1fr; }
  .cs-cell.text-right { align-items: flex-start; }
  .cs-cell.text-right, .cs-cell.text-right * { text-align: left; }
  .cs-cal-stack .cs-cal-card, .cs-bookings-unscheduled { grid-template-columns: 72px 1fr; }
}
@media (max-width: 560px) {
  .cs-clients-stats, .invoice-totals, .cs-aging { grid-template-columns: 1fr; }
  .cs-search { width: 100%; max-width: none; }
}
/* ── end CS backend views (07-18-101b) ── */


/* CS-PLAT-04 (Dom 2026-08-19): "remove all round corners from the calendar".
   Scoped to the calendar surface, listed explicitly rather than a blanket
   `* { border-radius: 0 }` so round things that SHOULD stay round (the slider
   thumbs, the avatar, the now-dot) are not flattened with them. */
.cscal .cs-cal-card,
.cscal .cs-tl-block,
.cscal .cs-tl-travel,
.cscal .cs-tl-chip,
.cscal .cs-tl-empty,
.cscal .cs-cal-chip-edit,
.cscal .cs-tl-drawer,
.cscal .cs-tl-drawer-close,
.cscal .cs-tl-drawer-link,
.cscal .cs-cal-date,
.cscal .cs-cal-timeline { border-radius: 0; }

/* ── Calendar, Apple sizes exactly (Dom 2026-08-19) ──────────────────────────
   His words: "use Apple sizes exactly, I'm used to them". Weekday 15px in the
   secondary ink, day number 28px semibold, both on one baseline. The header no
   longer carries a drive total, so every column's top is the same height and
   the row reads level across the week. */
.cs-cal-week-grid .cs-cal-date { min-height: 68px; }
.cs-cal-gutter-spacer { min-height: 68px; position: relative; }
.cs-cal-week { position: absolute; left: 8px; bottom: 12px;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; color: var(--ink60); letter-spacing: .01em; }
.cs-cal-dow  { font-size: calc(15px * var(--text-scale, 1)); font-weight: 500; }
.cs-cal-week-grid .cs-cal-dnum { font-size: calc(28px * var(--text-scale, 1)); font-weight: 600; }
.cscal-month b { font-weight: 700; }
.cscal-month { font-weight: 300; }

/* Day strips and every calendar surface: square, no exceptions. */
.cs-cal-week-grid, .cs-cal-week-grid .cs-cal-card, .cs-cal-week-grid .cs-cal-date,
.cs-cal-time-gutter, .cs-cal-gutter-spacer, .cs-cal-timeline { border-radius: 0 !important; }

/* Mid-drag: the chip is a time readout. */
.cs-tl-block.is-vdragging .cs-tl-chip { opacity: 0; }
.cs-tl-dragtime {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; padding: 0 10px; pointer-events: none;
}
.cs-tl-dragtime b {
  font-size: calc(19px * var(--text-scale, 1)); font-weight: 600; line-height: 1.05; color: var(--ink90);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.cs-tl-dragtime span { font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); font-variant-numeric: tabular-nums; }

/* Flat weather icons: the SVG carries its own colours, so no filters on it. */
.cs-wx-ico { display: inline-flex; align-items: center; line-height: 0; filter: none; }
.cs-wx-svg { display: block; }
.cs-tl-peek-row .cs-wx-svg { display: inline-block; vertical-align: -3px; margin-right: 3px; }

/* Draggable colours panel + visible slider tracks (CS-PLAT-04).
   The tracks were inheriting an undefined variable, so all Dom could see was a
   floating green thumb with no rail under it. */
.cs-color-panel { position: fixed; }
.cs-color-head { cursor: grab; user-select: none; }
.cs-color-panel.is-dragging { cursor: grabbing; }
.cs-color-panel.is-dragging .cs-color-head { cursor: grabbing; }
.cs-color-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: hsla(47,100%,97.78%,.16); border-radius: 999px; outline: 0;
}
.cs-color-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: transparent; }
.cs-color-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand); border: 0; cursor: pointer; margin-top: -5px;
}
.cs-color-range::-moz-range-track { height: 4px; border-radius: 999px; background: hsla(47,100%,97.78%,.16); }
.cs-color-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 0; cursor: pointer; }


/* ── Travel band, 1:1 with Apple (CS-PLAT-04, Dom 2026-08-19) ────────────────
   The event's own colour a tone darker, flat. Dotted rail far left. Thin solid
   divider to the event. No hatch, no red: "too tight" lives in the tooltip. */
.cs-tl-block.has-travel { overflow: visible; }
.cs-tl-travel {
  /* An absolutely positioned child is laid out against the PADDING box, which
     starts after the block's 4px accent border. Pulling left by that border
     width puts the band over the block's true left edge, so its dotted rail
     lands exactly on the chip's solid one instead of 4px to the right. */
  position: absolute; left: calc(-1 * var(--tl-accent-w, 4px)); right: 0; z-index: 3;
  display: flex; align-items: center; gap: 7px;
  padding: 0 8px 0 calc(var(--tl-accent-w, 4px) + 8px); overflow: hidden; border-radius: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--client-bg, hsla(47,100%,97.78%,.10)),
                        #000 calc(var(--cal-travel-fill, .18) * 90%));
  border-bottom: 2px solid hsla(0,0%,0%,.5);
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 500; color: hsla(47,100%,97.78%,.88);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .cs-tl-travel { background: hsla(0,0%,0%,.35); }
}
.cs-tl-travel-rail {
  /* A dotted BORDER at 4px draws fat beads that overhang the chip's rail. A
     gradient gives the exact width and a fine, even dash that stacks straight
     onto the solid rail below it. */
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--tl-accent-w, 4px);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--client-accent, hsla(47,100%,97.78%,.5)) 0 3px,
    transparent 3px 7px);
}
.cs-tl-travel-icon { display: flex; width: 14px; height: 14px; flex: none; opacity: .92; }
.cs-tl-travel-icon svg { width: 14px; height: 14px; }
.cs-tl-travel-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   /cs/zones — service zones map + editor (CS-ZONES-01, 2026-08-19)
   Cockpit register: greyscale, butter accent, soft small radii, generous air.
   The only colour on this screen is the zones' own, because the colour IS the
   data. Appended, never woven into the rules above.
   ═════════════════════════════════════════════════════════════════════════ */
.cs-zones-two { grid-template-columns: 1fr 380px; align-items: start; }
@media (max-width: 1180px) { .cs-zones-two { grid-template-columns: 1fr; } }

.cs-zones-mapwrap { overflow: hidden; }
.cs-zones-mapwrap > h3 { flex-wrap: wrap; }
.cs-zones-tog {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(12.5px * var(--text-scale, 1)); font-weight: 500; color: var(--csx-ink-2); cursor: pointer;
}
.cs-zones-tog input { accent-color: var(--csx-ink); margin: 0; }

.cs-zones-test {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--csx-line);
  background: var(--csx-surface-2);
}
.cs-zones-testin { position: relative; flex: 0 0 300px; max-width: 100%; }
.cs-zones-answer {
  flex: 1; min-width: 220px; font-size: calc(13.5px * var(--text-scale, 1)); color: var(--csx-ink);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 20px;
}
.cs-zones-adot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cs-zones-km { color: var(--csx-ink-3); }
.cs-zones-adds {
  flex-basis: 100%; color: var(--csx-ink-3); font-size: calc(12px * var(--text-scale, 1));
}

.cs-zones-map { position: relative; height: 620px; background: var(--csx-surface-2); }
@media (max-width: 1180px) { .cs-zones-map { height: 460px; } }
.cs-zones-map canvas { outline: none; }
.cs-zones-mapload {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; color: var(--csx-ink-3); font-size: calc(13px * var(--text-scale, 1)); z-index: 2;
}
.cs-zones-mapload span {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--csx-line-2); border-top-color: var(--csx-ink-3);
  animation: cs-zones-spin .8s linear infinite;
}
@keyframes cs-zones-spin { to { transform: rotate(360deg); } }
.cs-zones-credit {
  margin: 0; padding: 7px 16px; font-size: calc(10.5px * var(--text-scale, 1)); color: var(--csx-ink-3);
  border-top: 1px solid var(--csx-line); background: var(--csx-surface-2);
}

/* map furniture ---------------------------------------------------------- */
/* Chips sit ON the light basemap, so they keep dark ink in both app themes —
   inheriting --csx-ink turns them white-on-white the moment the cockpit is
   dark, which is exactly how the first pass shipped an invisible label. */
.cs-zones-label {
  display: flex; align-items: baseline; gap: 6px; cursor: pointer;
  padding: 3px 9px 4px; border-radius: var(--csx-r-chip);
  background: rgba(255,255,255,.94); border: 1px solid var(--zc, #8a8a8a);
  box-shadow: 0 1px 3px rgba(16,24,40,.16); white-space: nowrap;
  font-family: var(--font-sans);
}
.cs-zones-label b { font-size: calc(12px * var(--text-scale, 1)); font-weight: 640; color: #1a1a1a; letter-spacing: -.01em; }
.cs-zones-label span { font-size: calc(11px * var(--text-scale, 1)); color: var(--zc, #6b7280); font-weight: 700; }
.cs-zones-label.is-lit { box-shadow: 0 0 0 3px color-mix(in srgb, var(--zc) 28%, transparent); }

.cs-zones-base {
  display: flex; align-items: center; gap: 7px; pointer-events: none;
  font-family: var(--font-sans);
}
.cs-zones-base i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: #1a1a1a; box-shadow: 0 0 0 3px #fff, 0 1px 3px rgba(0,0,0,.3);
}
.cs-zones-base b {
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 600; color: #1a1a1a;
  background: rgba(255,255,255,.92); padding: 2px 7px; border-radius: var(--csx-r-chip);
  box-shadow: 0 1px 3px rgba(16,24,40,.14);
}
.cs-zones-pin {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cso-butter, #fff083); border: 2px solid #1a1a1a;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
}
.cs-zones-pop .maplibregl-popup-content {
  padding: 5px 9px; font-size: calc(12px * var(--text-scale, 1)); border-radius: var(--csx-r-sm);
  font-family: var(--font-sans); color: #1a1a1a; background: #fff;
  box-shadow: var(--csx-shadow-pop);
}
.cs-zones-pop .maplibregl-popup-tip { display: none; }

/* the list --------------------------------------------------------------- */
.cs-zones-row {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 13px 4px; border-bottom: 1px solid var(--csx-line);
}
.cs-zones-row:last-of-type { border-bottom: none; }
.cs-zones-row:hover { background: var(--csx-surface-hover); }
.cs-zones-row.is-lit { background: var(--csx-accent-soft); }
.cs-zones-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; margin-top: 3px; }
.cs-zones-rowbody { flex: 1; min-width: 0; }
.cs-zones-rowtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-zones-rowtop b { font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 620; letter-spacing: -.01em; }
.cs-zones-towns {
  font-size: calc(12px * var(--text-scale, 1)); color: var(--csx-ink-2); margin-top: 3px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cs-zones-opts { font-size: calc(11.5px * var(--text-scale, 1)); color: var(--csx-ink-3); margin-top: 4px; }
.cs-zones-rowacts { display: flex; align-items: center; gap: 4px; flex: none; }
.cs-zones-mini {
  width: 22px; height: 22px; line-height: 1; font-size: calc(9px * var(--text-scale, 1)); cursor: pointer;
  border: 1px solid var(--csx-line-2); border-radius: var(--csx-r-xs);
  background: var(--csx-surface); color: var(--csx-ink-2);
}
.cs-zones-mini:hover:not([disabled]) { background: var(--csx-surface-hover); color: var(--csx-ink); }
.cs-zones-mini[disabled] { opacity: .3; cursor: default; }
.cs-zones-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--csx-line); }

.cs-zones-skel { display: grid; gap: 12px; padding: 4px 0; }
.cs-zones-skel i {
  display: block; height: 44px; border-radius: var(--csx-r-sm);
  background: linear-gradient(90deg, var(--csx-surface-2) 25%, var(--csx-surface-hover) 50%, var(--csx-surface-2) 75%);
  background-size: 300% 100%; animation: cs-zones-shim 1.3s ease-in-out infinite;
}
@keyframes cs-zones-shim { to { background-position: -300% 0; } }

/* the editor ------------------------------------------------------------- */
.cs-zones-editor .cso-in { padding: 18px 16px 16px; }
.cs-zones-x {
  border: none; background: none; cursor: pointer; font-size: calc(19px * var(--text-scale, 1)); line-height: 1;
  color: var(--csx-ink-3); padding: 0 2px;
}
.cs-zones-x:hover { color: var(--csx-ink); }
.cs-zones-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-zones-sw {
  width: 24px; height: 24px; border-radius: var(--csx-r-xs); cursor: pointer;
  border: 1px solid rgba(0,0,0,.14);
}
.cs-zones-sw.is-on { box-shadow: 0 0 0 2px var(--csx-surface), 0 0 0 4px var(--csx-ink); }
.cs-zones-fee { display: flex; align-items: center; gap: 7px; }
.cs-zones-fee > span { color: var(--csx-ink-3); font-size: calc(13.5px * var(--text-scale, 1)); }
.cs-zones-check {
  display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--text-scale, 1));
  color: var(--csx-ink-2); margin-top: 7px; cursor: pointer;
}
.cs-zones-check input { accent-color: var(--csx-ink); margin: 0; }
.cs-zones-parts { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cs-zones-part {
  padding: 4px 10px 5px; font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; cursor: pointer;
  border: 1px solid var(--csx-line-2); border-radius: var(--csx-r-chip);
  background: var(--csx-surface); color: var(--csx-ink-2);
}
.cs-zones-part.is-on { background: var(--csx-ink); border-color: var(--csx-ink); color: #fff; }
.cs-zones-help { line-height: 1.5; }
.cs-zones-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--csx-line);
}
.cs-zones-del { color: var(--csx-st-red-tx); border-color: var(--csx-st-red-bg); }
.cs-zones-del:hover { background: var(--csx-st-red-bg); }

/* ══════════════════════════════════════════════════════════════════════════
   CALENDAR · CS-PLAT-05 (2026-08-19) — flush days, the all-day weather row,
   sunrise/sunset markers, and the double-click cards.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── J2 · one sheet, one hairline ──────────────────────────────────────────
   Apple rules the week as a single grid. Columns touch, one 1px separator
   between them, and the hour lines therefore run unbroken from Sunday to
   Saturday and meet the gutter labels exactly. */
.cscal .cs-cal-week-grid { gap: 0; }
.cscal .cs-cal-time-gutter { padding-right: 0; }
.cscal .cs-cal-week-grid .cs-cal-date { padding-left: 10px; padding-right: 10px; }

/* ── J4 · the day wash is the whole COLUMN, not just the header ─────────────
   `.cscal .cs-cal-timeline { background-color: var(--cal-bg) }` in cs-shell.css
   outranks the tint's own rule, which is why Dom could recolour Saturday's
   header and watch the column below it stay grey. Painting the tint as a
   background IMAGE layers it over that colour instead of fighting it. */
.cscal .cs-cal-timeline,
.cscal .cs-cal-week-grid .cs-cal-allday {
  background-image: linear-gradient(var(--day-tint, transparent), var(--day-tint, transparent));
}
/* Today keeps its own mark: an accent underline on the header and the faintest
   lift down the column, so it reads without becoming a second client colour. */
.cscal .cs-cal-card.is-today .cs-cal-timeline {
  background-image:
    linear-gradient(hsla(152,72%,56%,.045), hsla(152,72%,56%,.045)),
    linear-gradient(var(--day-tint, transparent), var(--day-tint, transparent));
}

/* ── J5a · all-day weather row ─────────────────────────────────────────────
   Apple's all-day band, carrying the one thing that decides a shoot day. */
.cs-cal-allday {
  min-height: 30px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--hair);
  padding: 0 8px;
}
.cscal.no-wx .cs-cal-allday { display: none; }
.cscal.no-sun .cs-tl-sun { display: none; }
.cs-cal-wxday {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); font-variant-numeric: tabular-nums;
}
.cs-cal-wxday b { font-weight: 600; color: var(--ink90); }
.cs-cal-gutter-allday { justify-content: flex-end; }

/* ── J5b · sunrise / sunset, the subscribed-calendar line ──────────────────
   Apple's own sunrise calendar draws a hairline across the column with a small
   pill on it, in the purple it reserves for subscriptions. Ours is the same
   idea at CS scale: 1px, a pill on the left, never in the way of a chip. */
.cs-tl-sun {
  position: absolute; left: 0; right: 0; height: 0; z-index: 2;
  border-top: 1px solid var(--cal-sun, var(--cat-purple));
  opacity: .8; pointer-events: none;
}
.cs-tl-sun.is-set { border-top-style: dashed; }
.cs-tl-sun-pill {
  position: absolute; left: 3px; top: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px 1px 4px;
  background: color-mix(in srgb, var(--cal-sun, var(--cat-purple)) 22%, #000 78%);
  color: color-mix(in srgb, var(--cal-sun, var(--cat-purple)) 55%, #fff 45%);
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cs-tl-sun-pill svg { width: 11px; height: 11px; flex: none; }
@supports not (background: color-mix(in srgb, red 50%, #000)) {
  .cs-tl-sun-pill { background: #2a1636; color: #cf9be8; }
}

/* ── J6/J7 · the double-click card ─────────────────────────────────────────
   Forced dark, square, Apple's type sizes, spacious. Fixed position because it
   has to be able to hang over the grid and over the week's own scroll. */
.cs-cal-pop {
  position: fixed; z-index: 90; width: 420px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px); overflow: auto;
  display: none; flex-direction: column;
  background: var(--dim-over); border: 1px solid var(--hair15); border-radius: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.46);
  color: var(--ink90); padding: 16px;
  font-variant-numeric: tabular-nums;
}
/* The client's own colour down the spine, the way the chip carries it. */
.cs-cal-pop.has-accent { border-left: 4px solid var(--pop-accent, var(--hair15)); }
.cs-cal-pop.is-on { display: flex; }
.cs-cal-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.cs-cal-pop-title { margin: 0; font-size: calc(17px * var(--text-scale, 1)); font-weight: 650; letter-spacing: -.01em; color: var(--ink90); }
.cs-cal-pop-sub { margin: 2px 0 0; font-size: calc(13px * var(--text-scale, 1)); color: var(--ink60); }
.cs-cal-pop-x {
  flex: none; width: 26px; height: 26px; padding: 5px;
  background: transparent; border: 1px solid var(--hair15); color: var(--ink60); cursor: pointer;
}
.cs-cal-pop-x:hover { background: hsla(47,100%,97.78%,.08); color: var(--ink90); }
.cs-cal-pop-x svg { width: 14px; height: 14px; display: block; }

.cs-cal-pop-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0; }
.cs-cal-pop-tag {
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 600; padding: 3px 7px;
  background: hsla(47,100%,97.78%,.07); color: var(--ink60);
}
.cs-cal-pop-tag.is-type { color: var(--ink90); background: hsla(47,100%,97.78%,.12); }

.cs-cal-pop-rows { margin: 14px 0 0; display: grid; gap: 10px; }
.cs-cal-pop-rows > div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: start; }
.cs-cal-pop-rows dt { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-cal-pop-rows dd { margin: 0; font-size: calc(13px * var(--text-scale, 1)); color: var(--ink90); line-height: 1.4; }
.cs-cal-pop-muted { color: var(--ink60); }

.cs-cal-pop-sun {
  margin: 14px 0 0; padding: 10px 12px;
  background: hsla(47,100%,97.78%,.04); border: 1px solid var(--hair);
  display: grid; gap: 6px;
}
.cs-cal-pop-sunrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: calc(12px * var(--text-scale, 1)); }
.cs-cal-pop-sunrow span { color: var(--ink60); }
.cs-cal-pop-sunrow b { font-weight: 600; color: var(--ink90); display: inline-flex; align-items: center; gap: 4px; }
.cs-cal-pop-sunrow.is-warn b { color: #f0b37f; }

/* Square, per the brief: the shadow reads as a plan, and a plan is not a strip. */
.cs-cal-pop-map {
  margin: 14px 0 0; width: 100%; aspect-ratio: 1 / 1;
  border: 1px solid var(--hair); position: relative; overflow: hidden;
}
.cs-cal-pop-map.is-dead { display: none; }
.cs-cal-pop-map .cs-map-pad,
.cs-cal-pop-map .cs-map-phase,
.cs-cal-pop-map .cs-map-dock { display: none; }
.cs-cal-pop-map .maplibregl-ctrl-attrib { font-size: calc(9px * var(--text-scale, 1)); opacity: .5; }
.cs-cal-pop-nomap { margin: 14px 0 0; font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); line-height: 1.5; }
.cs-cal-pop-link { color: var(--brand); text-decoration: none; }
.cs-cal-pop-link:hover { text-decoration: underline; }

.cs-cal-pop-sliders { margin: 10px 0 0; display: grid; gap: 10px; }
.cs-cal-pop-slab { display: grid; gap: 5px; font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-cal-pop-slab span { display: flex; justify-content: space-between; }
.cs-cal-pop-slab b { color: var(--ink90); font-weight: 600; }

.cs-cal-pop-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.cs-cal-pop-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 12px; font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; cursor: pointer;
  background: transparent; border: 1px solid var(--hair15); color: var(--ink90);
  text-decoration: none; border-radius: 0; white-space: nowrap;   /* ruling 20b */
}
.cs-cal-pop-btn:hover { background: hsla(47,100%,97.78%,.08); }
.cs-cal-pop-btn.is-on { background: hsla(47,100%,97.78%,.1); border-color: hsla(47,100%,97.78%,.3); }
.cs-cal-pop-btn.is-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cs-cal-pop-btn.is-primary:hover { background: var(--brand-hover); }
.cs-cal-pop-btn[disabled] { opacity: .5; cursor: default; }

.cs-cal-pop-panel { margin: 12px 0 0; padding: 12px; border: 1px solid var(--hair); background: hsla(47,100%,97.78%,.03); }
.cs-cal-pop-form { display: grid; gap: 10px; }
.cs-cal-pop-form.is-row { grid-template-columns: 1fr 1fr; }
.cs-cal-pop-form.is-stack { margin: 14px 0 0; }
.cs-cal-pop-form label { display: grid; gap: 4px; font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-cal-pop-form label.is-hidden { display: none; }
.cs-cal-pop-form input, .cs-cal-pop-form select, .cs-cal-pop-form textarea {
  width: 100%; box-sizing: border-box; padding: 7px 9px; font: inherit; font-size: calc(13px * var(--text-scale, 1));
  background: var(--dim-base); border: 1px solid var(--hair15); color: var(--ink90); border-radius: 0;
}
.cs-cal-pop-form input:focus, .cs-cal-pop-form select:focus, .cs-cal-pop-form textarea:focus {
  outline: none; border-color: hsla(152,72%,56%,.55);
}
.cs-cal-pop-form textarea { resize: vertical; }
.cs-cal-pop-check { display: flex; align-items: center; gap: 7px; font-size: calc(12px * var(--text-scale, 1)); color: var(--ink90); margin-bottom: 10px; }
/* CS-PLAT-07 — the express card's add-on checks live inside a .cs-cal-pop-form
   grid, and that grid's `label { display: grid }` outranks .cs-cal-pop-check,
   so every box stacked ABOVE its own words. This restores the component's own
   row; the grid keeps owning the spacing. No new look, no new token. */
.cs-cal-pop-form .cs-cal-pop-check { display: flex; margin-bottom: 0; align-items: flex-start; }

/* ── Express add-on tiles (CS-PLAT-09, Dom 2026-08-22) ────────────────────
   The add-on list used to be `.cs-cal-pop-check` inside the two-column
   `.cs-cal-pop-form.is-row` grid: labels wrapped mid-sentence, the price landed
   under the name on some rows and beside it on others, and nothing lined up.
   Same content and the same `data-nb-addon` inputs — one tile per add-on, three
   aligned columns, the brand accent for the selected state. `.cs-cal-pop-check` is
   untouched: the shoot-alert checkboxes still use it. */
.cs-nb-lbl { margin: 2px 0 6px; font-size: calc(12px * var(--text-scale, 1)); color: var(--ink60); }
.cs-nb-addons { display: grid; gap: 6px; }
.cs-nb-tile {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  padding: 9px 11px; margin: 0;
  border: 1px solid var(--hair); border-radius: var(--csx-r-chip, 8px);
  background: hsla(47,100%,97.78%,.02);
  font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink90); cursor: pointer;
  transition: background 170ms ease, border-color 170ms ease;
}
.cs-nb-tile:hover { background: hsla(47,100%,97.78%,.06); }
.cs-nb-tile input[type=checkbox] {
  width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer;
  accent-color: var(--csx-accent, #FF0016);
}
.cs-nb-tile-n { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-nb-tile-p { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-nb-tile-m {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--ink60); min-width: 9ch; text-align: right;
}
.cs-nb-tile:has(input[type=checkbox]:checked) {
  border-color: var(--csx-accent, #FF0016);
  background: color-mix(in srgb, var(--csx-accent, #FF0016) 12%, transparent);
}
.cs-nb-tile:focus-within { outline: 2px solid var(--csx-accent, #FF0016); outline-offset: 1px; }
.cs-cal-pop-note { margin: 10px 0 0; font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); line-height: 1.5; }
.cs-cal-pop-note.is-ok { color: color-mix(in srgb, var(--ok) 50%, #fff); }
.cs-cal-pop-err { margin: 10px 0 0; font-size: calc(12px * var(--text-scale, 1)); color: var(--brand-deep); }

/* The address suggester inside the card — same component, popover scale. */
.cs-cal-pop .csaddr { position: relative; display: block; }
.cs-cal-pop .csaddr-list {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 5;
  max-height: 210px; overflow: auto; background: var(--dim-base); border: 1px solid var(--hair15);
}
.cs-cal-pop .csaddr-list.is-open { display: block; }
.cs-cal-pop .csaddr-list button {
  display: block; width: 100%; text-align: left; padding: 7px 9px;
  background: transparent; border: 0; color: var(--ink90); font: inherit; font-size: calc(12px * var(--text-scale, 1)); cursor: pointer;
}
.cs-cal-pop .csaddr-list button.is-on, .cs-cal-pop .csaddr-list button:hover { background: hsla(47,100%,97.78%,.09); }
.cs-cal-pop .csaddr-sec { display: block; font-size: calc(11px * var(--text-scale, 1)); color: var(--ink60); }

/* A double-click on empty grid means "book something here", so the empty grid
   has to look clickable. */
.cscal .cs-cal-timeline { cursor: cell; }
.cscal .cs-tl-block { cursor: grab; }

/* Layer toggles in the colours panel. */
.cs-color-check {
  display: flex; align-items: center; gap: 8px;
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink90); padding: 4px 0; cursor: pointer;
}
.cs-color-check input { accent-color: var(--brand); }
/* ═══ AGENT ZONE CHROME · SYSTEM-FIX 2026-08-19 ═════════════════════════════
   The approved 238px rail + 54px topbar from C2C/215-agent-zone.html:91,
   :441-447. Audit 224 B3/B4: neither existed — the portal shipped a 44px top
   bar with two links. Append-only; the old .app-nav rules are left in place for
   any surface that still renders one. */

body:has(#app-nav.ag-chrome) .app-shell { padding-left: 238px; padding-top: 54px; }
/* The fixed banner is out of flow, so the shell has to make its own room. */
body:has(.demo-banner) { padding-top: 38px; }
body:has(#app-nav.ag-chrome .ag-rail) { overflow-x: hidden; }
body:has(.demo-banner) #app-nav.ag-chrome .ag-rail,
body:has(.demo-banner) #app-nav.ag-chrome .ag-topbar { top: 38px; }

.ag-rail {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 238px; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  background: var(--bg-elevated);
  border-right: 1px solid var(--line);
}
.ag-rail-brand {
  /* Dom 2026-08-24 rev2: logo larger and alone above the line; "Agent portal"
     sits BELOW the divider with its own air.
     Dom 2026-08-29: logo must NOT scroll with the panel — sticky at the rail top. */
  flex: none;
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-elevated);
  display: flex; align-items: center; padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.ag-rail-mark {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-1);
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line);
}
.ag-rail-dot { width: 13px; height: 13px; border-radius: var(--r-round); background: var(--brand); }
.ag-rail-wm { display: flex; flex-direction: column; gap: 4px; line-height: 1.05; min-width: 0; }
.ag-rail-logo { height: 30px !important; width: auto !important; max-width: 100%; object-fit: contain; flex: none; }
.ag-rail-portal {
  padding: 10px 16px 12px;
  font: 500 calc(13px * var(--text-scale, 1))/1.2 var(--font-sans);
  letter-spacing: .04em; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.ag-rail-wm b { font-size: calc(15px * var(--text-scale, 1)); font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.ag-rail-wm span { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3); }
/* CS-PLAT-09 (Dom 2026-08-22): the rail is the SAME rail as the cockpit's —
 * 12px rounded rows on a 16px gutter, 14px label, the 3px primary marker on the
 * left edge of the active row (cs-shell.css .csx-nav-item.is-active::before),
 * spacing on the 4/8/12/16 scale. Only the tokens differ, and they differ
 * because the agent shell paints from the global ladder, not from --csx-*. */
.ag-rail-nav { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.ag-rail-item {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px 12px; border-radius: var(--r-btn);
  color: var(--ink-2); text-decoration: none;
  font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ag-rail-item:hover { background: var(--bg-hover); color: var(--ink); }
.ag-rail-item.is-active { background: var(--bg-hover); color: var(--ink); font-weight: 600; }
.ag-rail-item.is-active::before {
  content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.ag-rail-item:focus-visible { outline: 2px solid var(--focus-ring-c); outline-offset: -2px; }
.ag-rail-item svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.ag-rail-item:hover svg, .ag-rail-item.is-active svg { color: var(--ink); }

/* Theme + display, the one shared control (views/cs-shell.js themeToggleHtml). */
/* Dom 2026-08-22 — the theme control is a quiet icon button now (cs-shell.css
 * "Quiet theme control"), not a full-width boxed chip that read as an error.
 * Left-aligned on one row with the display-settings trigger. */
.ag-rail-display { margin-top: auto; padding: var(--sp-3) var(--sp-4) 0; }
.ag-rail-display .csx-themewrap { width: auto; display: inline-flex; align-items: center; gap: 2px; }
.ag-rail-display .csx-themebtn { flex: none; width: auto; }

/* Identity block — headshot when the account has one, initials otherwise. */
.ag-rail-foot {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-3) var(--sp-4) var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--bg);
  font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3);
  overflow: hidden;
}
.ag-rail-face {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-round);
  display: grid; place-items: center; overflow: hidden;
  background: var(--bg-sunken); color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .02em;
}
.ag-rail-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-rail-id { min-width: 0; display: block; }
.ag-rail-foot b { display: block; color: var(--ink); font-weight: 600; font-size: calc(12.8px * var(--text-scale, 1));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-rail-foot span.ag-rail-id > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* CS-PLAT-09/perf+identity (2026-08-23): the identity block is now the link to
   /account it always looked like. Same rail hover as .ag-rail-item — no new
   colour, no new radius, no underline. */
.ag-rail-foot { text-decoration: none; transition: background .12s ease, border-color .12s ease; }
.ag-rail-foot:hover { background: var(--bg-hover); border-color: var(--line-strong, var(--line)); }
.ag-rail-foot:hover b { color: var(--ink); }

/* ── IMPERSONATION · in the rail, never a stripe (Dom 2026-08-22) ──────────
 * The old treatment was a full-width orange bar pinned over every page. It is
 * now a compact block at the head of the rail in the primary red, on the same
 * 4/8/12 spacing as everything else around it. Behaviour is untouched: the
 * session is still the tab-scoped `cs.imp.jwt`, Exit still returns to the
 * client list. */
.ag-imp {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-3) var(--sp-4) 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-btn);
  background: var(--brand); color: var(--brand-ink);
}
.ag-imp-t { min-width: 0; font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; }
.ag-imp-t b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-imp-x {
  margin-left: auto; flex: none;
  padding: 3px 10px; border-radius: var(--r-1);
  border: 1px solid color-mix(in srgb, var(--brand-ink) 40%, transparent);
  background: transparent; color: var(--brand-ink);
  font: inherit; font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 600; cursor: pointer;
}
.ag-imp-x:hover { background: color-mix(in srgb, var(--brand-ink) 16%, transparent); }
.ag-imp-x:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 1px; }

.ag-topbar {
  position: fixed; top: 0; left: 238px; right: 0; z-index: 55;
  height: 54px; display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
}
.ag-crumb { font-size: calc(13.5px * var(--text-scale, 1)); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-topbar-who { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ag-usermenu { position: relative; }
.ag-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid transparent; cursor: pointer;
  padding: 5px 8px; border-radius: var(--r-2);
  color: var(--ink-2); font: inherit; font-size: calc(13px * var(--text-scale, 1));
}
.ag-user-btn:hover { background: var(--bg-hover); color: var(--ink); }
.ag-user-btn:focus-visible { outline: 2px solid var(--focus-ring-c); outline-offset: 1px; }
.ag-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--bg-sunken); color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 700;
}
.ag-caret { font-size: calc(10px * var(--text-scale, 1)); opacity: .7; }
.ag-menu { top: 46px; right: 0; }
.ag-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-2);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 550; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ag-btn:hover { background: var(--bg-hover); }
.ag-btn-butter { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.ag-btn-butter:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink); }

@media (max-width: 900px) {
  body:has(#app-nav.ag-chrome) .app-shell { padding-left: 58px; }
  .ag-rail { width: 58px; }
  .ag-rail-brand { padding: 0 10px; justify-content: center; }
  .ag-rail-wm { display: none; }
  .ag-rail-item span, .ag-rail-foot, .ag-rail-display, .ag-imp-t { display: none; }
  .ag-rail-nav { padding: var(--sp-3) 6px; }
  .ag-rail-item { padding: 11px 0; justify-content: center; }
  .ag-rail-item.is-active::before { left: -6px; }
  .ag-imp { margin: var(--sp-2) 6px 0; padding: var(--sp-2) 4px; justify-content: center; }
  .ag-imp-x { margin-left: 0; }
  .ag-topbar { left: 58px; }
  .ag-user-name { display: none; }
}

/* ═══ LISTING HUB · six tabs (C2C 215:550) · SYSTEM-FIX 2026-08-19 ══════════ */
.ld-herobar {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: 14px 0 4px; border-bottom: 1px solid var(--line);
}
.ld-herobar-facts { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2); }
.ld-herobar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.ld-tabs { display: flex; gap: 2px; margin: 0 0 var(--sp-6); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ld-tab {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  padding: 11px 14px; font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s ease, border-color .14s ease;
}
.ld-tab:hover { color: var(--ink); }
.ld-tab.is-on { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.ld-tab:focus-visible { outline: 2px solid var(--focus-ring-c); outline-offset: -2px; }

.ld-pane-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }
.ld-empty {
  border: 1px solid var(--line); border-radius: var(--r-3);
  padding: var(--sp-8) var(--sp-6); text-align: center; background: var(--bg-elevated);
}
.ld-empty b { display: block; font-size: calc(15px * var(--text-scale, 1)); color: var(--ink); margin-bottom: 6px; }
.ld-empty p { margin: 0 auto; max-width: 48ch; color: var(--ink-3); font-size: calc(13px * var(--text-scale, 1)); }

.ld-dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.ld-dlcard {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-2); padding: 14px 16px;
  background: var(--bg-elevated); color: var(--ink);
  transition: border-color .14s ease, background .14s ease;
}
.ld-dlcard:hover { border-color: var(--line-strong); background: var(--bg-hover); }
.ld-dlcard-ico { color: var(--area-downloads); display: inline-flex; }
.ld-dlcard-bd { display: flex; flex-direction: column; min-width: 0; }
.ld-dlcard-bd b { font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 600; }
.ld-dlcard-bd span { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); }
.ld-dlcard-verb { margin-left: auto; font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-3); }

.ld-rows { display: flex; flex-direction: column; }
.ld-row {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.ld-row:last-child { border-bottom: 0; }
.ld-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ld-row-main b { font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 600; }
.ld-row-main span { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2); }
.ld-row-side { display: flex; align-items: center; gap: 10px; flex: none; }
.ld-row-when { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); white-space: nowrap; }

.ld-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 650; padding: 3px 9px; border-radius: var(--r-1);
  white-space: nowrap;
}
.ld-chip.is-ok   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 14%, transparent); }
.ld-chip.is-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.ld-chip.is-mute { color: var(--ink-3); background: var(--bg-hover); }

.ld-order { border: 1px solid var(--line); border-radius: var(--r-3); padding: 20px 22px; background: var(--bg-elevated); }
.ld-order + .ld-order { margin-top: var(--sp-3); }
.ld-order-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ld-order-head b { font-size: calc(15px * var(--text-scale, 1)); font-weight: 650; }
.ld-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; }
.ld-dl > div { display: flex; flex-direction: column; gap: 2px; }
.ld-dl dt { font-size: calc(11px * var(--text-scale, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ld-dl dd { margin: 0; font-size: calc(13.5px * var(--text-scale, 1)); color: var(--ink); }

/* ═══ TEAM + SOCIAL LINKS · SYSTEM-FIX 2026-08-19 ══════════════════════════ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--sp-4); padding: var(--sp-5); }
.team-card {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-3);
  padding: 18px; background: var(--bg-elevated);
}
.team-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: calc(15px * var(--text-scale, 1)); font-weight: 700;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.team-bd b { font-size: calc(14.5px * var(--text-scale, 1)); font-weight: 650; }
.team-brokerage { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-2); }
.team-role { font-size: calc(11px * var(--text-scale, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.team-line { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-3); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.team-line:hover { color: var(--ink); text-decoration: underline; }
.team-edit { flex: none; }

.social-links { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.social-link {
  width: 28px; height: 28px; border-radius: var(--r-1);
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-3); background: transparent;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.social-link:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg-hover); }
.social-link:focus-visible { outline: 2px solid var(--focus-ring-c); outline-offset: 1px; }
.social-link svg { width: 15px; height: 15px; display: block; }

/* Empty-state mark: a rule, not an emoji (audit B32) */
.inv-empty-mark { width: 34px; height: 2px; margin: 0 auto 16px; background: var(--line-strong); border-radius: 2px; }
.inv-empty-action { margin-top: 18px; }

/* ── Settings → Passkeys (components/passkeys.js, 2026-08-19) ──────────────
   Same row rhythm as the rest of account settings: hairline separators, no
   card-per-row, actions right-aligned and quiet until hovered. Nothing here
   introduces a colour — the danger action borrows --err, which already exists. */
.pk-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pk-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
}
.pk-row-icon { display: flex; color: var(--ink-2); flex: 0 0 auto; }
/* ui.js `icon()` tags its SVGs .ui-ico, but those rules live in the ensureUI()
   stylesheet the account page never injects — unstyled they fall back to a
   solid black fill and read as dark blocks. Style them here instead of pulling
   the whole ui.js CSS system onto this page. */
.pk-row-icon svg, #pk-add svg {
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
#pk-add { display: inline-flex; align-items: center; gap: 8px; }
.pk-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pk-row-name { font-size: calc(14.5px * var(--text-scale, 1)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row-meta { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-2); }
.pk-row-actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.pk-confirm-q { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2); }
.pk-danger { color: var(--err); }
.pk-foot { margin-top: var(--sp-5); }
.pk-add-card {
  margin-top: var(--sp-5); padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.pk-add-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.pk-status { min-height: 18px; font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-2); margin-top: var(--sp-2); }

@media (max-width: 640px) {
  .pk-row { flex-wrap: wrap; }
  .pk-row-actions { width: 100%; justify-content: flex-end; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ZONES · route-day waiver · CS-ZONE-PRICING 2026-08-19            APPEND-ONLY
   The band chip now carries the waiver — "+$50 (waived on route days)" — which
   is three times the width "+$50" was. `white-space: nowrap` on .cs-zones-label
   would push the Zone C and D chips off the map edge, so the fee half is
   allowed to wrap while the band name stays on one line. Nothing else about the
   chip changes: same background, same border, same lit state.
   ───────────────────────────────────────────────────────────────────────── */
.cs-zones-label { white-space: normal; max-width: 190px; }
.cs-zones-label b { white-space: nowrap; }
.cs-zones-label span { line-height: 1.25; }

/* ═══════════════════════════════════════════════════════════════════════════
   CS-PLAT-05 · CALENDAR CROSS-DAY DRAG + MINI MONTH + SAVED COLOURS
   (lane/xdrag, 2026-08-19). Every value here is an existing token or an
   existing component's geometry — no new visual language.
   ═════════════════════════════════════════════════════════════════════════ */

/* The day column you are about to drop on. Same emerald-on-glass the pipeline
   board already uses for a drop target, so this needed no new colour. */
.cs-cal-card.is-drop-target { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.cs-cal-card.is-drop-target .cs-cal-timeline { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent); }

/* The chip while it is over ANOTHER day. It has left its column, so it needs
   to read as lifted rather than as a chip that has simply moved. */
.cs-tl-block.is-xday {
  z-index: 40;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px var(--client-accent, var(--hair15));
}
/* The transform that carries it across is the drag itself: never animate it,
   or the ghost lags a frame behind the cursor on every column change. */
.cs-tl-block.is-vdragging { transition: none; }

/* ── Mini month ─────────────────────────────────────────────────────────── */
.cscal-mini-wrap { position: relative; }
/* THE PANEL ONLY. The grid inside it is components/cs-minical.js — Dom picked
   this popover as the product's one calendar on 2026-08-23 ("this mini cal use
   everywhere please"), so its look moved to assets/css/cs-minical.css and the
   ~50 lines of private `.cscal-mini-head/-dow/-wk/-day/-n/-dots/-foot` rules
   that used to sit here were DELETED rather than left to fight the shared skin.
   What remains is where the panel hangs and what it is made of. */
.cscal-mini {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  padding: 10px 12px 8px;
  background: var(--csx-overlay, var(--cat-ink));
  border: 1px solid var(--csx-line-2, var(--hair));
  box-shadow: var(--csx-shadow-pop, 0 12px 34px rgba(0,0,0,.5));
}
/* Sun lines and weekend washes are the WEEK grid's language. Inside a month
   map they would be noise on a 24px disc, so they explicitly do not apply. */
.cscal-mini .cs-tl-sun, .cscal-mini [style*="--day-tint"] { display: none; }

/* ── "My colours" row in the colours panel ──────────────────────────────── */
.cs-color-mine { margin-top: 8px; }
.cs-color-mine-t {
  display: block; margin-bottom: 5px;
  font-size: calc(10px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink60);
}
/* The swatch itself is `.cs-color-sw`, unchanged — this only parents the ✕. */
.cs-color-minew { position: relative; display: inline-flex; flex: none; }
.cs-color-swx {
  position: absolute; top: -4px; right: -4px;
  width: 14px; height: 14px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  font-size: calc(10px * var(--text-scale, 1)); line-height: 1;
  background: var(--csx-overlay, var(--cat-ink));
  color: var(--ink90);
  border: 1px solid var(--csx-line-2, var(--hair));
  cursor: pointer; opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.cs-color-minew:hover .cs-color-swx,
.cs-color-swx:focus-visible { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   THE DAY COLUMN, QUIET  (CS-PLAT-09 · Dom 2026-08-22: "this looks bad")

   Dom on the cockpit dashboard in LIGHT mode: a flat grey slab of a column, a
   heavier brown-grey slab over the working hours, a PURPLE sunrise hairline
   with a dark chip on it, "Nothing on the calendar" struck through by that
   line, an ORANGE day numeral, a contrasting weather band, and a thick red
   now-line. Seven complaints, one cause.

   THE CAUSE. This column is the CALENDAR's component, and the calendar is
   forced dark — so every surface in it was written against `--card` / `--hair`
   / `--ink90` / `--ink60`, which are cream-on-black literals with no light
   twin. On a light card they composite to grey. The fix is not a second
   column: it is to read the theme-aware ladder (`--csx-surface` / `--csx-line`
   / `--csx-ink*`), whose DARK values are the same numbers those four already
   hold. So the calendar looks identical and the dashboard stops looking bad.

   APPEND-ONLY, and deliberately unscoped: the fix belongs to the shared
   column, so /cs/calendar and /cs/day get it too. Colours here: the neutral
   ladder and `--brand`. Nothing else.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── surfaces ─────────────────────────────────────────────────────────────
   The column ground IS the card it sits on; hour rules are hairlines. */
.cs-cal-card              { background: var(--csx-surface); border-color: var(--csx-line); }
.cs-cal-week-grid .cs-cal-date,
.cs-cal-allday            { border-bottom-color: var(--csx-line); }
.cs-tl-hour               { border-top-color: var(--csx-line); }
.cs-tl-gutter-row         { color: var(--csx-ink-3); }
.cs-tl-gutter-row b       { color: var(--csx-ink-2); font-weight: 500; }

/* The weekend wash is a 60% near-white overlay, sized for the calendar's own
   grid. Dropped onto a warm-paper card it is the grey slab. In light it caps
   at a 3% ink tint; `!important` because the dial writes the variable inline.
   Dark is untouched — the calendar never leaves it. */
:root:not([data-theme="dark"]) .cs-cal-card {
  --day-tint: color-mix(in srgb, var(--csx-ink) 3%, transparent) !important;
}

/* ── the working track ────────────────────────────────────────────────────
   Lives in cs-shell.css, which loads AFTER this file — `.csday-free`,
   `.csday-free-tag`, `.csday-add` and `.csday-free.is-busy` were repointed at
   the neutral ladder there, at the rules themselves, rather than shadowed from
   here where the cascade would have lost. Nothing to add in this file. */

/* ── sunrise / sunset ─────────────────────────────────────────────────────
   Apple draws its subscribed sunrise calendar in purple. We are not Apple and
   purple is not in this palette: one neutral hairline, the outline glyph the
   component already carries, and the time in muted ink. No chip, no fill. */
.cs-tl-sun      { border-top-color: var(--csx-line-2); opacity: 1; }
.cs-tl-sun-pill {
  left: 6px; padding: 0; gap: 5px;
  background: none; color: var(--csx-ink-3);
  font-weight: 500;
}
.cs-tl-sun-pill b { font-weight: 600; color: var(--csx-ink-3); }
.cs-tl-sun-pill svg { width: 12px; height: 12px; }

/* ── the now-line ─────────────────────────────────────────────────────────
   1px of brand with a 6px dot, not 2px of a red that belongs to no token. */
.cs-tl-now          { border-top: 1px solid var(--brand); }
.cs-tl-now::before  { width: 6px; height: 6px; top: -3px; background: var(--brand); }

/* ── the empty day ────────────────────────────────────────────────────────
   It used to sit at the top of the canvas, which on most days is exactly where
   the sunrise hairline lands — so the one sentence on an empty column was
   drawn with a line through it. Centred in the column's own free space, above
   the hairlines, and quiet. */
.cs-tl-empty {
  top: 50%; transform: translateY(-50%);
  z-index: 3; font-size: calc(13px * var(--text-scale, 1)); color: var(--csx-ink-3);
}

/* ── the day header ───────────────────────────────────────────────────────
   Today's numeral was `--csx-accent-text`, which on paper was a burnt orange.
   Today is the brand, or it is ink. There is no third option. */
.cs-cal-dnum { color: var(--csx-ink); }
.cs-cal-dow  { color: var(--csx-ink-2); }
.cs-cal-card.is-today .cs-cal-dnum,
.cs-cal-card.is-today .cs-cal-dow { color: var(--brand); }
.cs-cal-card.is-today { border-color: var(--csx-line-2); }
.cs-cal-drive-total { color: var(--csx-ink-3); }

/* ── the weather row ──────────────────────────────────────────────────────
   One quiet line under the date, not a band in a different tone. */
.cs-cal-allday { background: none; min-height: 26px; }
.cs-cal-wxday   { color: var(--csx-ink-3); }
.cs-cal-wxday b { color: var(--csx-ink-2); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   CS-PLAT-09 · dash-light — THE DAY COLUMN, SECOND PASS (Dom 2026-08-22)

   Two things survived the first pass, and together they are the whole "grey
   slab" on the light dashboard.

   (1) THE WASH. The day tint was capped at 3% ink rather than removed, so a
   film still lay over the header, the hour canvas and nothing else — the
   weather row carries no tint, so the one row that should be quietest was the
   only lighter stripe on the column. In light the column IS the paper it sits
   on: the card's own surface, no film, and the working track is the only tint
   on it.

   (2) THE GRID WAS UNDERNEATH. `.csday-free` (cs-shell.css) is z-index 1 and
   every ruling — `.cs-tl-hour`, `.cs-tl-half` — is z-index auto, so the
   working-hours tint PAINTED OVER the hour rules. A tinted band with no rules
   through it is not a band, it is a slab. That is the shape Dom saw. The
   rules go above the tint, and in light they take the firmer hairline
   (`--csx-line-2`) because a cream-alpha rule is invisible on paper.

   LIGHT ONLY, by `:root:not([data-theme="dark"])`. Dark is byte-identical to
   what shipped in v=397 — the calendar lives there and it is approved.
   Unscoped otherwise, so /cs/calendar and /cs/day inherit it the moment they
   are ever shown in light (both are pre-paint forced dark today).
   ══════════════════════════════════════════════════════════════════════════ */
:root:not([data-theme="dark"]) .cs-cal-card { --day-tint: transparent !important; }

/* (3) THE HOUR GRID WAS NEVER DRAWN — the real root cause, found by measuring
   `border-top-width: 0px` on a `.cs-tl-hour` that plainly says `1px solid`.

   The calendar's sheet is written against `--hair` / `--hair15` / `--ink90` /
   `--ink60` / `--card` / `--card-h`, and those six are declared ONLY on
   `.cs-main` and `body:has(.cs-main)` — the OLD cockpit shell. The rebuilt
   dashboard renders in `.csx-wrap.cst`; there is no `.cs-main` anywhere on it,
   so every one of those vars is UNRESOLVED. A shorthand carrying an unresolved
   var is invalid at computed-value time and falls back to its INITIAL value —
   so `border-top: 1px solid var(--hair)` computed to `medium none`, i.e. no
   line at all. Every hour rule, the date/weather separators and the chip
   borders were being thrown away in silence, which is why the tinted working
   track had nothing crossing it and read as one slab.

   Aliasing the six onto the theme-aware ladder is the whole fix. LIGHT ONLY:
   in dark the dashboard is approved exactly as it is, and leaving the vars
   unresolved there keeps it byte-identical. */
/* BOTH THEMES (2026-08-22, second call): the six were first aliased in light
   only, on the reasoning that dark was approved as it stood. But dark was
   missing the same hour grid for the same reason — the vars are unresolved
   there too, so `border-top: 1px solid var(--hair)` computed to `medium none`
   on the dark dashboard as well. `.cs-main` is not rendered by any view any
   more (the old cockpit shell is gone), so nothing else declares these six on
   a live surface and the alias cannot collide. In dark they land on the same
   cream ladder `.cs-main` used to hold — `--csx-line` is .075 cream where
   `--hair` was .07 — so the grid appears and no other surface moves. */
.csx-wrap {
  --ink90:  var(--csx-ink);
  --ink60:  var(--csx-ink-2);
  --hair:   var(--csx-line);
  --hair15: var(--csx-line-2);
  --card:   var(--csx-surface);
  --card-h: var(--csx-surface-hover);
}
/* The 3px client rail belongs to a week of columns telling each other apart.
   A single day on the dashboard has nobody to differ from, so it keeps the
   plain hairline the rest of the card carries. Both themes, for the same
   reason the alias is in both: the rail only exists once --hair15 resolves. */
.cst-daybox .cs-cal-card { border-left-width: 1px; }

/* The lift is both themes — a tint that hides the grid is wrong on either
   ground. The COLOUR stays light-only: dark already reads `--csx-line` from
   the first pass, and its dashed half-hour cream is correct as it is. */
.cs-tl-hour, .cs-tl-half { z-index: 2; }
:root:not([data-theme="dark"]) .cs-tl-hour { border-top-color: var(--csx-line-2); }
:root:not([data-theme="dark"]) .cs-tl-half { border-top-color: var(--csx-line); }
/* The sunrise/sunset hairline and the now-line already sit above the track
   (z-index 2 / 6); the empty-day sentence was lifted to 3 in the first pass.
   Only the rules were below it. */

/* Today's column lift is an emerald wash written for the dark calendar, where
   a 4.5% cream film is the only thing separating today from Thursday. On paper
   it is a green film over the whole column — and on /cs/day, where every
   column IS today, it tints the entire screen. Today is already the red
   numeral, the red weekday and the accent border; in light that is the mark,
   and the column stays paper. */
:root:not([data-theme="dark"]) .cscal .cs-cal-card.is-today .cs-cal-timeline {
  background-image: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 * CS-PLAT-09 · AGENT ZONE — TWO REDS AND THE WARM OFF-WHITE LADDER
 * (Dom 2026-08-22, on the Account page: "colours are random — please keep the
 *  2 reds and warm white off white")
 *
 * THE LAW ON THIS SIDE
 *   · exactly two reds — #FF0016 (--brand) and #C5121A (--brand-hover)
 *   · everything else is the neutral / warm off-white ladder from tokens.css
 *   · a SELECTED or ACTIVE card is a 1px --brand border on the NORMAL surface.
 *     No tinted fill, no lighter pink, no brown wash.
 *   · --brand-soft (8%) survives only on small chips, which is the ceiling Dom
 *     set; it is never a card ground.
 *
 * WHY THE TOKEN IS RE-POINTED HERE RATHER THAN IN tokens.css: --brand-deep is
 * the "red as TEXT" twin, and in DARK its shared value is #FF4D5E — a salmon,
 * and one of the exact hexes Dom named as a ladder pink to remove. tokens.css
 * is the cockpit's sheet too and the cockpit is approved as it stands, so the
 * pink is retired for the agent zone only, by [data-zone="agent"] (set on
 * <html> by the pre-paint script in index.html and kept in sync by app.js).
 *
 * MEASURED, stated plainly: the dark replacement (#FF0016 on --dim-card) is
 * 4.12:1, under the 4.5:1 AA text bar. It carries only 600-weight chip labels
 * and small accents, never body copy — body copy on this side is the ink
 * ladder — and 4.12:1 clears the 3:1 bar for UI components and large text.
 * The light value #B0000F is unchanged from tokens.css (5.44:1 on the card).
 * ══════════════════════════════════════════════════════════════════════════ */
html[data-zone="agent"] {
  /* GV-SKIN FIX (2026-08-29): this block used to restate `--brand-deep:#B0000F`
   * here in LIGHT. That was a no-op for CS — tokens.css :root already carries
   * exactly #B0000F — but it sits AFTER `html.is-gv` in the cascade at the SAME
   * specificity (0,1,1), so it silently overrode the tenant skin's grape
   * (#5527a0) back to CS red on EVERY agent page in light mode. --brand-deep
   * feeds --warn / --err / --accent-money and ~85 rules in this sheet (brand
   * badges, KPI values, active nav tabs, copy-link hovers, pills, chips,
   * invoice cards, marketing-template accents), which is why the GV backend
   * still read half-red beside the grape GvLine dock. The declaration is gone:
   * light now inherits #B0000F from tokens.css :root for CS and #5527a0 from
   * html.is-gv for Grapevine. Byte-identical for CS. Only the DARK re-point
   * below is real work — it retires the #FF4D5E salmon Dom named. */

  /* NO OTHER HUES. The three "functional-area accents" and two of the status
   * colours were the last places a stray hue could get on screen:
   *   --accent-money  amber in name, #A8000E in light but #FF8090 in dark — a
   *                   ladder pink, named by Dom as one to remove.
   *   --area-downloads pine green. Green on this side means success/paid and
   *                   nothing else, so a downloads accent does not get it.
   *   --warn          #FF4D5E, the same salmon.
   *   --err           #c64b3a terracotta · --info #4d7ec0 blue.
   * Money/print/downloads/website all fold into the primary; warn and err are
   * reds already, so they become THE red; info goes quiet in the ink ladder.
   * KEPT: --ok (the success green) and --accent-people / --area-marketing
   * (the iris the Marketing Centre already carries as meaning). */
  --accent-money:      var(--brand-deep);
  --accent-money-soft: var(--brand-soft);
  --accent-money-line: color-mix(in srgb, var(--brand) 24%, transparent);
  --area-website:      var(--brand);
  --area-print:        var(--brand);
  --area-downloads:    var(--brand);
  --warn: var(--brand-deep);
  --err:  var(--brand-deep);
  --info: var(--ink-2);
}
/* :not(.is-gv) — GV-SKIN FIX (2026-08-29). On CS this is unchanged: the dark
 * text twin is the raw red (4.12:1 on --dim-card, ≥3:1 for the 600-weight chip
 * labels it carries), which retires the #FF4D5E salmon. But this selector also
 * out-specified tokens.css `html.is-gv[data-theme="dark"]`, so under the GV
 * skin it forced --brand-deep to the RAW grape #642eba — a ~1.6:1 smear on the
 * dim card. The skin's own dark twin (#a37fe8) is the legible one and now wins
 * again. No purple is written here; the exclusion just lets the skin through. */
html[data-zone="agent"][data-theme="dark"]:not(.is-gv) { --brand-deep: var(--brand); }

/* Selected / primary CARDS: 1px brand border on the normal surface. */
html[data-zone="agent"] .evp-quicklink.is-primary,
html[data-zone="agent"] .kpi-card[data-tone="brand"],
html[data-zone="agent"] .invoice-card[data-tone="ok"],
html[data-zone="agent"] .admin-stat[data-tone="ok"] {
  background: var(--bg-elevated);
  border-color: var(--brand);
}
html[data-zone="agent"] .kpi-card[data-tone="brand"] .kpi-value,
html[data-zone="agent"] .invoice-card[data-tone="ok"] .invoice-card-value {
  color: var(--ink);
}

/* Hover states that used to wash a control in red: keep the red on the EDGE. */
html[data-zone="agent"] .lc-copy:hover,
html[data-zone="agent"] .listing-copy:hover,
html[data-zone="agent"] .lc-act:hover,
html[data-zone="agent"] .palette-add:hover {
  background: var(--bg-hover);
  border-color: var(--brand);
  color: var(--ink);
}
html[data-zone="agent"] .lc-act:hover svg { color: var(--ink); }

/* The two help-desk buttons hovered onto the salmon. They now carry the
 * widget's OWN accent (Dom 2026-08-29, the platform purple), so this zone
 * override follows it instead of dragging --brand back in. */
html[data-zone="agent"] .cs-hd-dom:hover,
html[data-zone="agent"] .cs-hd-send:hover {
  background: var(--hd-accent-hover); border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
 * BRAND KIT — CS-PLAT-09 rebuild (Dom, 2026-08-22)
 * One centred 880px column · hairline dividers only · assets as a LIST,
 * not tiles · two reds + neutrals, no tinted fills · quiet dropzones.
 * Everything below is scoped to .bk-main / .bk-topbar, so no other view
 * inherits it. Appended last so it wins over the retired tile styles.
 * ═══════════════════════════════════════════════════════════════════ */

.bk-main {
  /* The 20/16/14 steps moved to html[data-zone="agent"] as --ag-ts-* at the
   * end of this file (CS-PLAT-09/agent-type) so every agent view shares one
   * scale. Only the dark bed is genuinely local to this page. */
  --bk-dark-bed: var(--cat-ink);   /* dark ladder surface for white/reverse marks  */
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-16);
}

/* ── Top bar — the back control is a quiet link, never a primary ── */
.bk-topbar .bk-backlink,
.bk-main .bk-act,
.bk-topbar .bk-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: var(--ts-meta);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.bk-topbar .bk-backlink:hover,
.bk-main .bk-act:hover,
.bk-topbar .bk-act:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bk-main .bk-act:disabled { color: var(--ink-4); cursor: default; text-decoration: none; }
.bk-main .bk-act-danger:hover,
.bk-topbar .bk-act-danger:hover { color: var(--brand); }
.bk-main .bk-act.is-armed { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.bk-topbar .bk-backlink:focus-visible,
.bk-main .bk-act:focus-visible,
.bk-topbar .bk-act:focus-visible { outline: 1px solid var(--brand); outline-offset: 3px; box-shadow: none; }

/* ── Page head + section rhythm (8-pt, 48px between sections) ───── */
/* SHELLS UNIFICATION (Dom 2026-08-29): the wide --sp-5 gap was spacing two bare
   text links apart. The bar's actions are the shared .btn.btn-ghost.btn-sm now,
   which carry their own padding, so the gap goes back to the one every other
   .topbar-actions uses. .bk-backlink / .bk-act rules above are left in place —
   .bk-act is still worn by controls inside .bk-main. */
.bk-topbar .topbar-actions { display: inline-flex; align-items: center; gap: var(--sp-2); }

.bk-intro { padding-bottom: var(--sp-8); }
.bk-intro .kicker { margin-bottom: var(--sp-2); }
.bk-h1 {
  font-size: var(--ts-display);
  line-height: var(--ts-display-lh);
  letter-spacing: var(--ts-display-tr);
  font-weight: var(--ts-display-w);
  color: var(--ink);
  margin: 0;
}
.bk-lede {
  margin: var(--sp-3) 0 0;
  font-size: var(--ts-body);
  line-height: var(--ts-body-lh);
  color: var(--ink-2);
  max-width: 62ch;
}
.bk-main .bk-sect {
  padding: var(--sp-12) 0;
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
  background: none;
}
.bk-main .bk-sect:first-of-type { border-top: 1px solid var(--line); }
.bk-main .bk-sect:last-of-type { padding-bottom: 0; }
.bk-sect-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.bk-sect-title {
  font-size: var(--ag-ts-title);
  line-height: 1.3;
  letter-spacing: var(--ts-h3-tr);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.bk-sect-intro {
  margin: 0 0 var(--sp-6);
  font-size: var(--ts-body);
  line-height: var(--ts-body-lh);
  color: var(--ink-2);
  max-width: 62ch;
}
.bk-main .bk-help {
  display: block;
  font-size: var(--ts-meta);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: var(--sp-2);
}

/* ── Fields — darker labels, larger input text ─────────────────── */
.bk-main .field { margin-bottom: var(--sp-4); }
.bk-main .field-label {
  display: block;
  font-size: var(--ag-ts-label);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin-bottom: var(--sp-2);
}
.bk-main .input,
.bk-main .select {
  font-size: var(--ag-ts-lead);
  color: var(--ink);
}
.bk-main .input::placeholder { color: var(--ink-4); }
.bk-field-narrow { max-width: 420px; }
.bk-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-4);
}

/* ── Asset LIST (logos / badges / headshots) ───────────────────── */
.bk-list { margin-bottom: var(--sp-4); }
.bk-empty {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: var(--ts-body);
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bk-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 72px;
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.bk-row:first-child { border-top: 1px solid var(--line); }
/* Active = a 1px red border. No fill, no tint, no chip. */
.bk-row.is-on {
  border: 1px solid var(--brand);
  border-radius: var(--r-2);
  margin: -1px 0;
}
.bk-row.is-on + .bk-row { border-top: 0; }
.bk-row-prev {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-1, 8px);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease);
}
.bk-row-prev:hover { border-color: var(--line-strong); }
.bk-row-prev:focus-visible { outline: 1px solid var(--brand); outline-offset: 2px; }
.bk-row-prev-wide { width: 96px; height: 56px; }
.bk-row-prev-square { width: 56px; height: 56px; border-radius: 8px; }
.bk-row-prev.on-dark { background: var(--bk-dark-bed); border-color: rgba(255,255,255,.14); }
/* The preview ground is paper, not the app surface — in the dark theme the
   elevated bed swallowed dark/colour marks (audit 08-24). White bed unless the
   mark itself needs the dark ground. */
html[data-theme="dark"] .bk-row-prev:not(.on-dark) { background: #ffffff; border-color: rgba(255,255,255,.18); }
.bk-row-prev img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bk-row-prev.is-broken img { visibility: hidden; }
.bk-ground {
  position: absolute;
  left: 78px;
  top: 12px;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.bk-row:hover .bk-ground,
.bk-ground:focus-visible { opacity: 1; }
.bk-ground:hover { color: var(--ink); }
.bk-ground:focus-visible { outline: 1px solid var(--brand); outline-offset: 2px; }
@media (pointer: coarse) { .bk-ground { opacity: 1; } }
.bk-row-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-row-name {
  font-size: calc(15px * var(--text-scale, 1));
  line-height: 1.35;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-row-meta {
  font-size: var(--ts-meta);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
  line-height: 1.35;
}
.bk-row-role { flex: 0 0 168px; }
.bk-row-acts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-3); }
.bk-inuse { font-size: var(--ts-meta); font-weight: 500; color: var(--ink); }

/* ── Dropzone — quiet by default, red only on intent ───────────── */
.bk-dz {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: none;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.bk-dz:hover { border-color: var(--ink-4); }
.bk-dz:focus-within,
.bk-dz[data-over="true"] { border-color: var(--brand); border-style: dashed; }
.bk-dz-title { font-size: var(--ts-body); color: var(--ink); }
.bk-dz-sub { font-size: var(--ts-meta); color: var(--ink-3); }

/* ── "or paste a URL" — always open, one row ───────────────────── */
.bk-urlrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.bk-url-label { font-size: var(--ts-meta); color: var(--ink-3); flex: 0 0 auto; }
.bk-main .bk-url-input { flex: 1 1 240px; min-width: 0; }

/* ── Removed drawer ────────────────────────────────────────────── */
.bk-removed { margin-top: var(--sp-4); }
.bk-removed-sum {
  font-size: var(--ts-meta);
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
  padding: var(--sp-2) 0;
}
.bk-removed-sum::-webkit-details-marker { display: none; }
.bk-removed-sum::before { content: '▸ '; }
.bk-removed[open] .bk-removed-sum::before { content: '▾ '; }
.bk-removed-sum:hover { color: var(--ink-2); }
.bk-removed-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line);
}
.bk-removed-name {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--ts-meta);
  color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-removed-when { flex: 0 0 auto; font-size: var(--ts-meta); color: var(--ink-4); }

/* ── Colours — 24px circles, hairline ring, red ring when picked ─ */
.bk-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-5); }
.bk-swatch {
  position: relative;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.bk-swatch:hover { transform: translateY(-1px); }
.bk-swatch.is-on { box-shadow: 0 0 0 2px var(--brand); }
.bk-swatch:focus-visible { outline: 1px solid var(--brand); outline-offset: 3px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.bk-swatch.is-static { cursor: default; }
.bk-accent-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.bk-custom-colour { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--ts-meta); color: var(--ink-2); cursor: pointer; }
.bk-custom-colour input[type="color"] {
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.bk-custom-colour input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bk-custom-colour input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.bk-custom-colour input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.bk-accent-current { display: inline-flex; align-items: center; gap: var(--sp-2); }
.bk-hex { font-size: var(--ts-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bk-main .bk-palette-full { margin-top: var(--sp-4); }
.bk-main .bk-palette-full[hidden] { display: none; }
.bk-main .bk-palette-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border: 0; border-top: 1px solid var(--line); background: none;
}

/* ── Fonts — our listbox, 1px red ring on focus, no glow ───────── */
.bk-main .flb-btn:focus-visible,
.bk-main .flb.is-open .flb-btn {
  outline: none;
  box-shadow: none;
  border-color: var(--brand);
}
.bk-main .flb-btn { font-size: var(--ag-ts-lead); }
.bk-main .slb .flb-opt { display: flex; align-items: baseline; gap: var(--sp-2); }
.bk-main .slb-opt-sub { font-size: var(--ts-meta); color: var(--ink-3); }
.bk-main .bk-font-custom-toggle {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 0;
  font-size: var(--ts-meta);
  color: var(--ink-3);
  background: none; border: 0; cursor: pointer;
}
.bk-main .bk-font-custom-toggle:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.bk-main .bk-font-custom-wrap { display: none; margin-top: var(--sp-2); }
.bk-main .bk-font-custom-wrap.is-open { display: block; }
.bk-main .bk-font-specimen {
  margin-top: var(--sp-4);
  padding: var(--sp-4) 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: calc(32px * var(--text-scale, 1));
  line-height: 1.3;
  color: var(--ink);
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.bk-main .bk-font-specimen.is-empty { font-size: var(--ts-body); color: var(--ink-4); }

@media (max-width: 720px) {
  .bk-main { padding: var(--sp-6) var(--sp-4) var(--sp-12); }
  .bk-two { grid-template-columns: minmax(0, 1fr); }
  .bk-row { flex-wrap: wrap; }
  .bk-row-role { flex: 1 1 100%; }
  .bk-ground { left: 78px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * AGENT TYPE SCALE — CS-PLAT-09/agent-type (Dom, 2026-08-22:
 * "fonts are weak — make them a bit darker or larger, keep styling consistent
 *  across the site, high-quality typography, modern layouts")
 *
 * WHY TOKENS AND NOT MORE LITERALS. The global --ts-* ladder is
 * 40 / 24 / 18 / 15 / 13 and carries no 20 / 16 / 14 step, so every agent view
 * had been inventing its own: 14.5 / 13.5 / 12.5 / 11.5 / 11 px, almost always
 * in --ink-3 or --ink-4. That is the "weak fonts" Dom is looking at. The four
 * missing steps are declared ONCE, here, on the agent zone; every agent view
 * reads them. The Brand Kit rebuild declared them locally as --bk-ts-* an hour
 * earlier — those locals are deleted and .bk-main reads these now, so there is
 * exactly one place the scale lives.
 *
 * THE SCALE (Dom's law, matching the shipped Brand Kit + Invoices):
 *   page title    --ts-display  (40/700 desk, 30 floor)   --ink
 *   section title 20 / 600                                --ink
 *   lead / input  16                                      --ink
 *   body / rows   15                                      --ink
 *   labels        14 / 500                                --ink-2   never 11-12 grey
 *   helper        13                                      --ink-3
 *   eyebrow       12 / 600 / +.04em uppercase             --ink-2   one per block
 *
 * PAGE TITLE — UNKNOWN/JUDGMENT: the lane brief specifies 28/600, but every
 * shipped agent page (.h1 clamp→40/700, .bk-h1 and .lb-h1 via --ts-display
 * →40/700) already renders 40 at desktop, and Dom's own words are "darker or
 * LARGER". Dropping every page title 40→28 is a shrink, so the display step is
 * left alone and only unified onto one ladder (.h1 had its own clamp and
 * -.03em tracking). Flagged for Dom rather than guessed at.
 *
 * COLOUR: --ink-2 is #3a3a3e on paper (10.28:1) / #c8c8cc on dark. The brief
 * quotes #525252 / #A3A3A3 — those are lighter than what tokens.css already
 * ships and the Brand Kit reads the token, so the token wins. No new hexes.
 * ═══════════════════════════════════════════════════════════════════════════ */
html[data-zone="agent"] {
  --ag-ts-title:   calc(20px * var(--text-scale, 1));
  --ag-ts-lead:    calc(16px * var(--text-scale, 1));
  --ag-ts-body:    calc(15px * var(--text-scale, 1));
  --ag-ts-label:   calc(14px * var(--text-scale, 1));
  --ag-ts-help:    calc(13px * var(--text-scale, 1));
  --ag-ts-eyebrow: calc(12px * var(--text-scale, 1));
  --ag-tr-eyebrow: .04em;
}

/* ── Page + section headings — one ladder, not three ─────────────────────── */
html[data-zone="agent"] .h1 {
  font-size: var(--ts-display);
  line-height: var(--ts-display-lh);
  letter-spacing: var(--ts-display-tr);
  font-weight: var(--ts-display-w);
  color: var(--ink);
}
html[data-zone="agent"] .h2 {
  font-size: var(--ts-h2);
  line-height: var(--ts-h2-lh);
  letter-spacing: var(--ts-h2-tr);
  font-weight: var(--ts-h2-w);
  color: var(--ink);
}
/* .h3 is the section / panel / empty-state title everywhere on this side. */
html[data-zone="agent"] .h3 {
  font-size: var(--ag-ts-title);
  line-height: 1.3;
  letter-spacing: var(--ts-h3-tr);
  font-weight: 600;
  color: var(--ink);
}

/* ── Eyebrow — 12px, 600, +.04em, uppercase, --ink-2. One per block. ─────── */
html[data-zone="agent"] .kicker,
html[data-zone="agent"] .eyebrow {
  font-size: var(--ag-ts-eyebrow);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: var(--ag-tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ── Secondary body. .muted carried --ink-3 (4.73:1) at whatever size it
 *    inherited; on this side it is secondary BODY, so it takes the darker
 *    step. Genuine helper text asks for .field-help / --ag-ts-help. ─────── */
html[data-zone="agent"] .muted { color: var(--ink-2); }
html[data-zone="agent"] .empty { color: var(--ink-2); }
html[data-zone="agent"] .empty p,
html[data-zone="agent"] .panel > p.muted { font-size: var(--ag-ts-body); line-height: 1.55; }

/* ── Fields — 14px/500 --ink-2 labels, 16px input text ───────────────────── */
html[data-zone="agent"] .field-label {
  font-size: var(--ag-ts-label);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
html[data-zone="agent"] .field-help,
html[data-zone="agent"] .field-error { font-size: var(--ag-ts-help); line-height: 1.5; }
html[data-zone="agent"] .input,
html[data-zone="agent"] .textarea,
html[data-zone="agent"] .select { font-size: var(--ag-ts-lead); }
html[data-zone="agent"] .input-lg { font-size: var(--ag-ts-lead); }

/* ── Controls — one weight, so a row of buttons reads as one family ─────── */
html[data-zone="agent"] .btn { font-weight: 600; }
html[data-zone="agent"] .btn-sm { font-size: var(--ag-ts-label); }
html[data-zone="agent"] .filter-chip {
  font-size: var(--ag-ts-label);
  font-weight: 500;
  color: var(--ink-2);
}
html[data-zone="agent"] .filter-chip.is-active { font-weight: 600; color: var(--bg); }
html[data-zone="agent"] .badge { font-weight: 600; letter-spacing: var(--ag-tr-eyebrow); }

/* ── Money / order table (orders + listing hub) ──────────────────────────── */
html[data-zone="agent"] .invoice-card-label {
  font-size: var(--ag-ts-label);
  font-weight: 500;
  color: var(--ink-2);
}
html[data-zone="agent"] .invoice-card-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html[data-zone="agent"] .invoice-card-sub { font-size: var(--ag-ts-help); color: var(--ink-3); }
html[data-zone="agent"] .invoice-row { font-size: var(--ag-ts-body); padding: var(--sp-4) var(--sp-3); }
html[data-zone="agent"] .invoice-row-head {
  font-size: var(--ag-ts-label);
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  text-transform: none;
  padding-top: 12px; padding-bottom: 12px;
}
html[data-zone="agent"] .invoice-cell strong { font-weight: 600; }
html[data-zone="agent"] .invoice-cell .muted { font-size: var(--ag-ts-help); }
html[data-zone="agent"] .invoice-cell.text-right strong { font-variant-numeric: tabular-nums; }

/* ── Team cards ──────────────────────────────────────────────────────────── */
html[data-zone="agent"] .team-bd { gap: 3px; }
html[data-zone="agent"] .team-bd b { font-size: var(--ag-ts-lead); font-weight: 600; color: var(--ink); }
html[data-zone="agent"] .team-brokerage { font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .team-role {
  font-size: var(--ag-ts-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ag-tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
html[data-zone="agent"] .team-line { font-size: var(--ag-ts-label); color: var(--ink-2); }

/* ── Content column. 1280 is a media-grid width, not a reading width; the
 *    text-led agent pages sit at 1100. /listings and /delivery keep their own
 *    wider grid widths, declared in their own sheets after this one. ─────── */
html[data-zone="agent"] .app-main { max-width: 1100px; }

/* ── Brand Kit reads the shared scale (its --bk-ts-* locals are deleted) ─── */
html[data-zone="agent"] .bk-main .field-label { font-size: var(--ag-ts-label); }

/* ── Leftover hard-coded hues on the agent side. --warn / --err already fold
 *    into the house red above, but three tinted BACKGROUNDS were literal
 *    rgba() amber and terracotta, so a red chip sat on an amber bed. ─────── */
html[data-zone="agent"] .invoice-card[data-tone="warn"] {
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
}
/* …and the /orders Due card takes no fill at all — see [data-tone="due"]. */
html[data-zone="agent"] .invoice-card[data-tone="due"] {
  background: var(--bg-elevated);
  border-color: var(--line);
}
html[data-zone="agent"] .invoice-card[data-tone="due"] .invoice-card-value { color: var(--brand-deep); }
html[data-zone="agent"] .badge-warn { background: var(--brand-soft); color: var(--brand-deep); }
html[data-zone="agent"] .badge-err  { background: var(--brand-soft); color: var(--brand-deep); }
html[data-zone="agent"] .btn-danger:hover {
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
}

/* ── /account home (the "everything page") ───────────────────────────────── */
html[data-zone="agent"] .evp-quicklink-title { font-size: var(--ag-ts-lead); font-weight: 600; }
html[data-zone="agent"] .evp-quicklink-sub   { font-size: var(--ag-ts-label); color: var(--ink-2); line-height: 1.4; }
html[data-zone="agent"] .evp-quicklink       { border-width: 1px; padding: var(--sp-4); }
html[data-zone="agent"] .evp-dl-row          { grid-template-columns: 104px 1fr; padding: 9px 0; }
html[data-zone="agent"] .evp-dl-row dt       { font-size: var(--ag-ts-label); font-weight: 500; color: var(--ink-2); }
html[data-zone="agent"] .evp-dl-row dd       { font-size: var(--ag-ts-body); color: var(--ink); }
html[data-zone="agent"] .evp-billing-label {
  font-size: var(--ag-ts-eyebrow); font-weight: 600;
  letter-spacing: var(--ag-tr-eyebrow); text-transform: uppercase; color: var(--ink-2);
}
html[data-zone="agent"] .evp-billing-line { font-size: var(--ag-ts-body); color: var(--ink); }
html[data-zone="agent"] .evp-billing-sub  { font-size: var(--ag-ts-help); color: var(--ink-3); line-height: 1.5; }
html[data-zone="agent"] .evp-order        { padding: var(--sp-3); }
html[data-zone="agent"] .evp-order-addr   { font-size: var(--ag-ts-lead); font-weight: 600; }
html[data-zone="agent"] .evp-order-meta   { font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .evp-chip         { letter-spacing: var(--ag-tr-eyebrow); }
/* amber → the house red; "Booked"/"In progress" is not a success state */
html[data-zone="agent"] .evp-chip.is-warn { background: var(--brand-soft); color: var(--brand-deep); }
html[data-zone="agent"] .evp-delivery-addr { font-size: var(--ag-ts-lead); }
html[data-zone="agent"] .evp-delivery-sub  { font-size: var(--ag-ts-help); }

/* ── /listings/:slug/dashboard — the listing hub ─────────────────────────── */
html[data-zone="agent"] .ld-herobar-facts { font-size: var(--ag-ts-body); color: var(--ink-2); }
html[data-zone="agent"] .ld-tab           { font-size: var(--ag-ts-body); color: var(--ink-2); padding: 12px 14px; }
html[data-zone="agent"] .ld-tab.is-on     { color: var(--ink); }
html[data-zone="agent"] .ld-empty b       { font-size: var(--ag-ts-title); font-weight: 600; margin-bottom: 8px; }
html[data-zone="agent"] .ld-empty p       { font-size: var(--ag-ts-body); color: var(--ink-2); max-width: 62ch; line-height: 1.55; }
html[data-zone="agent"] .ld-dlcard        { padding: var(--sp-4); border-radius: var(--r-2); }
html[data-zone="agent"] .ld-dlcard-bd b   { font-size: var(--ag-ts-lead); font-weight: 600; }
html[data-zone="agent"] .ld-dlcard-bd span{ font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .ld-dlcard-verb   { font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .ld-row-main b    { font-size: var(--ag-ts-lead); font-weight: 600; }
html[data-zone="agent"] .ld-row-main span { font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .ld-row-when      { font-size: var(--ag-ts-label); color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-zone="agent"] .ld-chip {
  font-size: var(--ag-ts-eyebrow); font-weight: 600; letter-spacing: var(--ag-tr-eyebrow); padding: 4px 10px;
}
html[data-zone="agent"] .ld-chip.is-warn  { color: var(--brand-deep); background: var(--brand-soft); }
html[data-zone="agent"] .ld-order         { padding: var(--sp-5); }
html[data-zone="agent"] .ld-order-head b  { font-size: var(--ag-ts-lead); font-weight: 600; }
html[data-zone="agent"] .ld-dl dt {
  font-size: var(--ag-ts-label); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
html[data-zone="agent"] .ld-dl dd         { font-size: var(--ag-ts-body); color: var(--ink); }
html[data-zone="agent"] .ld-pill          { font-size: var(--ag-ts-eyebrow); font-weight: 600; letter-spacing: var(--ag-tr-eyebrow); }
html[data-zone="agent"] .ld-pill.is-warn,
html[data-zone="agent"] .ld-pill.is-warn:hover {
  color: var(--brand-deep); background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
}
html[data-zone="agent"] .ld-stat-value    { font-variant-numeric: tabular-nums; }
html[data-zone="agent"] .ld-stat-label    { font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .ldx-sectlink     { font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .ld-door-label    { font-size: var(--ag-ts-lead); font-weight: 600; letter-spacing: 0; }
html[data-zone="agent"] .ld-door-value    { font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .ld-door-verb     { font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .ldx-hero-empty   { font-size: var(--ag-ts-body); color: var(--ink-3); }
html[data-zone="agent"] .ldx-hero-verb    { font-size: var(--ag-ts-label); }
html[data-zone="agent"] .ldx-mkt-name     { font-size: var(--ag-ts-label); font-weight: 600; }
html[data-zone="agent"] .ldx-mkt-fmt      { font-size: var(--ag-ts-help); color: var(--ink-2); }
html[data-zone="agent"] .ldx-mkt-specimen-fmt { font-size: var(--ag-ts-help); font-weight: 600; color: var(--ink-2); }
html[data-zone="agent"] .team-card        { padding: var(--sp-4); }

/* ── /delivery/:slug — the download page ─────────────────────────────────── */
html[data-zone="agent"] .delivery-head { max-width: 62ch; }
html[data-zone="agent"] .dlt-title { font-size: var(--ag-ts-lead); font-weight: 600; letter-spacing: -.01em; }
html[data-zone="agent"] .dlt-count {
  font-size: var(--ag-ts-eyebrow); font-weight: 600;
  letter-spacing: var(--ag-tr-eyebrow); color: var(--ink-2);
}
html[data-zone="agent"] .dlt-zip  { font-size: var(--ag-ts-label); }
html[data-zone="agent"] .dlt-file { font-size: var(--ag-ts-body); color: var(--ink-2); }
html[data-zone="agent"] .dlt-thumb-doc { font-size: var(--ag-ts-eyebrow); font-weight: 600; letter-spacing: var(--ag-tr-eyebrow); color: var(--ink-2); }
html[data-zone="agent"] .dlt-pill { font-size: var(--ag-ts-body); font-weight: 600; letter-spacing: 0; }

/* ── /account/settings ───────────────────────────────────────────────────── */
html[data-zone="agent"] .account-section-head .h2 {
  font-size: var(--ag-ts-title); line-height: 1.3; letter-spacing: var(--ts-h3-tr); font-weight: 600;
}
/* Sub-heading inside a section — it was 13px --ink-3, i.e. quieter than the
 * body it introduced. It is a heading, so it reads as one. */
html[data-zone="agent"] .h4-row {
  font-size: var(--ag-ts-lead); font-weight: 600; color: var(--ink);
  letter-spacing: -.005em; margin: var(--sp-6) 0 var(--sp-2);
}
html[data-zone="agent"] .notif-label { font-size: var(--ag-ts-body); }
html[data-zone="agent"] .notif-toggle {
  font-size: var(--ag-ts-eyebrow); font-weight: 600;
  letter-spacing: var(--ag-tr-eyebrow); color: var(--ink-2);
}
html[data-zone="agent"] .account-side-nav a { font-size: var(--ag-ts-label); }

/* ── /book-shoot ─────────────────────────────────────────────────────────────
 * Scoped to `.ad-main.bk` (the booking screen's own root) and NOT to `.ad-*`
 * in general: the home dashboard shares that sheet and is being rebuilt in a
 * parallel lane, so nothing here can reach it. agent-dash.css itself is left
 * untouched for the same reason — these win on specificity, not on order. */
html[data-zone="agent"] .ad-main.bk .ad-sec-h h2 {
  font-size: var(--ag-ts-title); line-height: 1.3;
  letter-spacing: var(--ts-h3-tr); text-transform: none;
  font-weight: 600; color: var(--ink);
}
/* Field labels: they were 13px UPPERCASE +.06em, i.e. an eyebrow doing a
 * label's job, once per field — the law allows one eyebrow per block. */
html[data-zone="agent"] .ad-main.bk .bk-f > span,
html[data-zone="agent"] .ad-main.bk .bk-notes > span,
html[data-zone="agent"] .ad-main.bk .bk-unit > span {
  font-size: var(--ag-ts-label); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
  margin-bottom: 6px;
}
html[data-zone="agent"] .ad-main.bk .bk-in { font: 400 var(--ag-ts-lead)/1.4 var(--font-sans); min-height: 46px; }
html[data-zone="agent"] .ad-main.bk .bk-slot .f      { font-size: var(--ag-ts-label); color: var(--ink-2); }
html[data-zone="agent"] .ad-main.bk .bk-pkg .p small { font-size: var(--ag-ts-help); color: var(--ink-2); }
html[data-zone="agent"] .ad-main.bk .bk-pkg .save    { font-size: var(--ag-ts-help); }
html[data-zone="agent"] .ad-main.bk .bk-listnote {
  font-size: var(--ag-ts-eyebrow); letter-spacing: var(--ag-tr-eyebrow); color: var(--ink-2);
}
html[data-zone="agent"] .ad-main.bk .bk-note    { font-size: var(--ag-ts-help); color: var(--ink-3); max-width: 62ch; }
html[data-zone="agent"] .ad-main.bk .bk-who-h {
  font-size: var(--ag-ts-eyebrow); letter-spacing: var(--ag-tr-eyebrow); font-weight: 600; color: var(--ink-2);
}
html[data-zone="agent"] .ad-main.bk .bk-who-dl dt   { font-size: var(--ag-ts-label); color: var(--ink-2); flex-basis: 104px; }
html[data-zone="agent"] .ad-main.bk .bk-who-dl dd   { font-size: var(--ag-ts-body); color: var(--ink); }
html[data-zone="agent"] .ad-main.bk .bk-who-dl > div{ align-items: baseline; padding: 3px 0; }
html[data-zone="agent"] .ad-main.bk .bk-who-edit    { font-size: var(--ag-ts-label); }
html[data-zone="agent"] .ad-main.bk .bk-done p      { font-size: var(--ag-ts-body); max-width: 62ch; }
html[data-zone="agent"] .ad-main.bk .bk-lines li    { font-size: var(--ag-ts-body); }
html[data-zone="agent"] .ad-main.bk .bk-total       { font-size: var(--ag-ts-label); color: var(--ink-2); }
/* Two-up field rows sat 8px out of register: `.field:last-child{margin-bottom:0}`
 * stripped the margin from the RIGHT field only (it is the row's last child),
 * and `align-items:center` then split the difference. Rows align at the top and
 * every field in a row keeps the same margin. */
html[data-zone="agent"] .account-section-body .row { align-items: flex-start; }
html[data-zone="agent"] .account-section-body .row > .field { margin-bottom: var(--sp-4); }

/* Hover states re-asserted: the zone-scoped colour rules above out-specify the
 * plain `.x:hover` rules they sit beside, so each one is restated here. */
html[data-zone="agent"] .team-line:hover   { color: var(--ink); }
html[data-zone="agent"] .ldx-sectlink:hover{ color: var(--ink); }
html[data-zone="agent"] .dlt-file:hover    { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   BUTTON SPINNER (CS-PLAT-09/listings-ux · Dom 2026-08-23)
   "Save invoice — a rotating wheel as progress, red."
   A 16 px ring in the brand red, dropped INSIDE the button that is
   working, so the progress is where the click was. Same anatomy as
   the ld-/sd-/mt2- rings already in this sheet, but named for reuse:
   any button that awaits a fetch gets it (invoice-bits.js · btnBusy).
   ═══════════════════════════════════════════════════════════════════ */
.btn-spin {
  display: inline-block; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-top-color: var(--brand);
  animation: btn-spin .62s linear infinite;
  vertical-align: -3px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Reduced motion: a ring that does not spin still has to read as "busy",
   so it pulses its opacity instead of freezing into a static circle. */
@media (prefers-reduced-motion: reduce) {
  .btn-spin { animation: btn-spin-pulse 1.1s ease-in-out infinite; }
  @keyframes btn-spin-pulse { 50% { opacity: .35; } }
}


/* ═══════════════════════════════════════════════════════════════════
   A PASSKEY THAT BELONGS TO ANOTHER SITE
   (CS-PLAT-09/login-hardening, 2026-08-23)
   A credential registered under a different rpId cannot sign in here.
   It is still listed — hiding it would leave the agent wondering where
   their passkey went — but it reads as inert, not as a working device.
   ═══════════════════════════════════════════════════════════════════ */
.pk-row.pk-row-stale .pk-row-icon,
.pk-row.pk-row-stale .pk-row-name { opacity: .55; }
.pk-row.pk-row-stale .pk-row-meta { color: var(--ink-2); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════
   TAP TARGETS — 44 px on touch, agent side
   (CS-PLAT-09/login-hardening, 2026-08-23)

   The pre-launch sweep measured 90 controls under 44 px on /dashboard,
   157 on /delivery and 61 on /book-shoot at 390 px — nearly all of them
   26–32 px icon buttons. Apple's and Google's floors are 44 pt / 48 dp;
   below that a thumb misses, and on a delivery screen a miss means the
   wrong photo.

   Three deliberate limits:
   • `pointer: coarse` only, so nothing on a mouse-driven desktop moves.
     This is a media query, not a width breakpoint — a 390 px browser
     window on a laptop keeps its compact controls.
   • Height only. Widening icon buttons to 44 px would overflow the
     tight action rows they sit in; a 44 px-tall, 30 px-wide target is
     already the fix for a thumb travelling vertically down a list.
   • Cockpit excluded. `body:has(#app-nav.cs-sidebar)` is the /cs shell,
     whose dense register is a deliberate, approved design. If :has()
     is unsupported the whole block is dropped, which is the safe way
     to fail.
   ═══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  body:not(:has(#app-nav.cs-sidebar)) :is(
    button,
    [role="button"],
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    select,
    summary
  ):not(.tap-exempt) {
    min-height: 44px;
  }

  /* Buttons whose content is a bare icon top-align inside the taller box
     unless they are told to centre it. */
  body:not(:has(#app-nav.cs-sidebar)) :is(button, [role="button"], .btn, a.btn):not(.tap-exempt):not([class*="lb-"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* …except the ones the layout already lays out as blocks/flex rows. */
  body:not(:has(#app-nav.cs-sidebar)) :is(button, .btn):is(.btn-block, .btn-full, [style*="width:100%"]) {
    display: flex;
  }

  /* Most agent-side controls are ANCHORS carrying a button class — the rail
     items, `ag-btn` / `ad-btn`, chips and pills — so the `button, .btn` list
     above misses them (the agent shell does not use a bare `.btn`). These are
     matched by the shape of the class name rather than enumerated, because a
     new `xx-btn` family should inherit the floor without another patch.
     A bare <a> in prose is deliberately NOT matched. */
  body:not(:has(#app-nav.cs-sidebar)) :is(
    a[class*="-btn"],
    a[class*="-chip"],
    a[class*="-pill"],
    a[class*="rail-item"],
    a[class*="-edit"],
    a[class*="dlt-"],
    a[class*="dlv-"],
    .ad-back-det
  ):not(.tap-exempt) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Links that act as controls inside a row (table cell, list row, action
     group) get the same floor. Inline links inside running prose are left
     alone: min-height does not apply to a non-replaced inline box, and
     forcing inline-flex there would break the line. */
  body:not(:has(#app-nav.cs-sidebar)) :is(td, th, .row, .list-row, .pk-row-actions, .card-actions, .actions) > a[href]:not(.tap-exempt) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Weather icons carry their own hue (Dom 2026-08-23: "yellow sun, blue rain —
   easier to spot"). Sun/rain sub-shapes only; clouds stay in the type's ink. */
.cs-wx-ol .wx-sun { color: var(--wx-sun, #E8B800); }
.cs-wx-ol .wx-rain { color: var(--wx-rain, var(--info, #4d7ec0)); }

/* The rail wears the REAL wordmark (Dom 2026-08-24: "we need our logo here").
   Theme decides which file shows; the default (system) falls to the media query. */
.ag-rail-logo { display: none; height: 22px; width: auto; }
/* GV skin wears the GV mark on the rail — one logo, both themes (the asset is
   white-on-transparent; the rail ground is dark under is-gv's grape skin). */
html.is-gv .ag-rail-logo--gv { display: block; height: 26px; }
html.is-gv .ag-rail-logo--dark,
html.is-gv .ag-rail-logo--light { display: none !important; }
/* The asset is white: on the light theme it inks to black, same as the CS
   pair swaps files. Mirrors the data-theme ladder below. */
html.is-gv[data-theme="light"] .ag-rail-logo--gv,
html.is-gv:not([data-theme]) .ag-rail-logo--gv { filter: brightness(0); }
html.is-gv[data-theme="dark"] .ag-rail-logo--gv { filter: none; }
@media (prefers-color-scheme: dark) {
  html.is-gv:not([data-theme]) .ag-rail-logo--gv { filter: none; }
}
html[data-theme="dark"] .ag-rail-logo--dark { display: block; }
html[data-theme="light"] .ag-rail-logo--light { display: block; }
html:not([data-theme]) .ag-rail-logo--light { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ag-rail-logo--light { display: none; }
  html:not([data-theme]) .ag-rail-logo--dark { display: block; }
}

/* Back — top-left on every visited screen (Dom 2026-08-24). Quiet ghost,
   sits before the crumb; hidden on the Dash itself (not rendered there). */
.ag-back {
  min-height: 32px; padding: 0 10px; margin-right: 2px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-1);
  color: var(--ink-2); cursor: pointer;
  font: 600 calc(13px * var(--text-scale, 1))/1 var(--font-sans);
}
.ag-back:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--line-strong, var(--line)); }
.ag-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Delivery size — MULTI-SELECT toggle chips, never a dropdown (Dom 2026-08-24,
   "just like Aryeo"): any combination, at least one always on. ON = red fill
   with a small leading check; OFF = ghost. The invisible ::after pad keeps the
   touch target at 44px without changing the shipped 34px chip. */
.dlv-size { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dlv-size-opt {
  /* Dom 2026-08-29 "2 sizes, two cannibals / they're competing buttons":
     chips match the Download button's height, and the SELECTED state is the
     neutral ink fill — red belongs to the ONE primary action only. */
  position: relative; min-height: 40px; padding: 0 14px;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--r-btn);
  color: var(--ink-2); cursor: pointer;
  font: 600 calc(12.5px * var(--text-scale, 1))/1 var(--font-sans); letter-spacing: .02em;
}
.dlv-size-opt::after { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.dlv-size-opt:hover { color: var(--ink); border-color: var(--line-strong, var(--line)); }
.dlv-size-opt.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg-elevated); }
.dlv-size-opt.is-on::before { content: '✓'; margin-right: 6px; font-weight: 700; }
.dlv-size-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Refusing to empty the set: a tiny headshake on the last active chip. */
.dlv-size-opt.is-deny { animation: dlv-size-deny .3s var(--ease, ease); }
@keyframes dlv-size-deny {
  20% { transform: translateX(-3px); } 40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); } 80% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .dlv-size-opt.is-deny { animation: none; } }

/* Rail-foot sign out (Dom 2026-08-24) — the identity card's one job now. */
.ag-rail-foot { position: relative; }
.ag-rail-signout {
  margin-left: auto; min-height: 32px; padding: 0 10px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-1);
  color: var(--ink-3); cursor: pointer;
  font: 600 calc(12px * var(--text-scale, 1))/1 var(--font-sans);
}
.ag-rail-signout:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.ag-rail-signout:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Day-map appearance control (Dom 2026-08-24) ─────────────────────────── */
.cs-mapset { position: absolute; top: 10px; right: 10px; z-index: 5; font-family: var(--font-sans); }
.cs-mapset-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-elevated); color: var(--ink); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-mapset-btn:hover { border-color: var(--line-strong); }
.cs-mapset-panel {
  position: absolute; top: 40px; right: 0; min-width: 220px;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.cs-mapset-panel label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: calc(12px * var(--text-scale,1)); color: var(--ink-dim); }
.cs-mapset-panel .cso-sel { width: 130px; }
.cs-mapset-bright { width: 96px; accent-color: var(--brand); }
.cs-mapset-brightval { min-width: 38px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Landscape phones (Dom 2026-08-29): the fixed topbar covered half the short
   viewport. It becomes in-flow and scrolls away; content loses the offset. */
@media (max-height: 500px) {
  #app-nav.ag-chrome .ag-topbar { position: static; left: 0; }
  html:has(#app-nav.ag-chrome) body { padding-top: 0 !important; }
  #app-nav.ag-chrome ~ main, .app-shell > main { padding-top: 0; }
}