/* ============================================================
   Wiggle BOS / Admin Portal Styles
   Matched to floofdigital.com (2026-09-11): white paper, ink text, one dark
   tone for the action, Inter variable, pill buttons, sentence case, tight
   negative tracking. No accent hue: the site has none.

   Site tokens (copied from floofdigital.com):
     --paper #FFFFFF   --ink #191D26   --dark #0C1225   hover #1A2440

   NOTE ON TOKEN NAMES: the legacy names below (--navy, --cream, --accent,
   --bg, --border-dk, --text-light ...) are what every page references, so
   they are kept and REMAPPED to the site palette. New work should use the
   site tokens. The override layer at the bottom restyles the shared
   component classes the pages define inline (nav, buttons, tabs, pills,
   fields, panels, hub cards, login card) so each page did not have to be
   rewritten by hand.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-var.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Site tokens */
  --paper:        #FFFFFF;
  --ink:          #191D26;
  --dark:         #0C1225;
  --dark-hover:   #1A2440;
  --surface-2:    #F5F6F8;
  --surface-3:    #EDF0F4;
  --line:         #E3E6EC;
  --line-strong:  #C9CED8;
  --muted-ink:    #5F6573;
  --dim-ink:      #8A90A0;

  /* Legacy names, remapped */
  --navy:        #0C1225;
  --navy-mid:    #1A2440;
  --navy-light:  #2A3350;
  --cream:       #F5F6F8;
  --cream-dark:  #E3E6EC;
  --warm-white:  #FFFFFF;
  --white:       #FFFFFF;
  --text:        #191D26;
  --muted:       #5F6573;
  --accent:      #0C1225;
  --accent-lt:   #1A2440;
  --accent-dk:   #0C1225;
  --border:      #E3E6EC;
  --radius:      10px;
  --shadow:      0 6px 24px rgba(12,18,37,0.08);
  --shadow-lg:   0 16px 48px rgba(12,18,37,0.14);
  --trans:       0.15s ease;

  --bg:          #FFFFFF;
  --bg-2:        #FFFFFF;
  --bg-3:        #F5F6F8;
  --bg-4:        #EDF0F4;
  --surface:     #FFFFFF;
  --border-dk:   #E3E6EC;
  --border-dk-hi:#C9CED8;
  --text-light:  #191D26;
  --text-dim:    #6B7180;

  --dc-dark:   #0C1225;
  --dc-light:  #FFFFFF;
  --dc-accent: #0C1225;
  --dc-warm:   #F5F6F8;

  --font-display: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
}

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
a { color: inherit; text-decoration: none; }

/* ---- Wordmark: black art on transparency, used as-is on white, exactly as
   the site does. .wordmark-light is painted through a mask so the same file
   serves both; on this white chrome it takes the ink tone. ---- */
.wordmark { display: block; height: 30px; width: auto; }
.wordmark-light {
  display: block;
  height: 30px;
  aspect-ratio: 1024 / 307;
  background-color: var(--ink);
  -webkit-mask: url('/brand/wiggle-bos-primary-dark.png') left center / contain no-repeat;
          mask: url('/brand/wiggle-bos-primary-dark.png') left center / contain no-repeat;
}
.wordmark-accent { background-color: var(--dark); }

.display { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
.display .accent { color: var(--dark); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }

.label { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0; color: var(--muted-ink); }
.label-navy { color: var(--muted-ink); }
.label-gold { color: var(--dark); }

/* ---- Buttons: the site's one action, a dark pill ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; border: 1px solid transparent; transition: background var(--trans), color var(--trans), border-color var(--trans);
  white-space: nowrap;
}
.btn-primary { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn-primary:hover { background: var(--dark-hover); border-color: var(--dark-hover); }
.btn-outline-dark { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline-dark:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn-outline-light { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline-light:hover { border-color: var(--ink); }
.btn-gold { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn-gold:hover { background: var(--dark-hover); border-color: var(--dark-hover); }
.btn-white { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-white:hover { border-color: var(--ink); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---- Modal ---- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(12,18,37,0.45); z-index: 1000; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 14px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 40px; position: relative; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--muted-ink); cursor: pointer; }
.modal-close:hover { color: var(--ink); }

/* ============================================================
   OVERRIDE LAYER
   Pages carry their own <style> blocks written for the old dark chrome.
   Every rule here is prefixed with `body` so it outranks a page's
   single-class rule of the same name without needing !important, except
   where the page itself used !important.
   ============================================================ */

/* Nav: white bar, hairline, pill links, dark pill for the active page */
body .admin-nav, body .hub-nav {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
body .admin-nav::after, body .hub-nav::after { display: none; }
body .admin-nav-label, body .hub-nav-label { color: var(--dim-ink); border-left: 1px solid var(--line); text-transform: none; letter-spacing: -0.01em; font-size: 0.8rem; font-weight: 500; }
body .admin-nav-link {
  color: var(--muted-ink); text-transform: none; letter-spacing: -0.01em; font-size: 0.84rem; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; border: 1px solid transparent;
}
body .admin-nav-link:hover { color: var(--ink); background: var(--surface-2); }
body .admin-nav-link.active { color: #fff !important; background: var(--dark); border-color: var(--dark) !important; }
body .admin-user-name, body .hub-user-name { color: var(--muted-ink); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.8rem; }
body .admin-logout-btn, body .hub-logout-btn {
  border: 1px solid var(--line-strong); color: var(--muted-ink); background: #fff; border-radius: 999px;
  text-transform: none; letter-spacing: -0.01em; font-size: 0.78rem; font-weight: 600; padding: 6px 12px;
}
body .admin-logout-btn:hover, body .hub-logout-btn:hover { border-color: var(--ink); color: var(--ink); }
body .hub-role-badge { background: var(--surface-2); color: var(--muted-ink); border: 1px solid var(--line); border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Page heads */
body .page-title, body .blog-title, body .hub-title { text-transform: none; letter-spacing: -0.025em; font-weight: 800; color: var(--ink); }
body .page-sub, body .blog-sub, body .hub-sub { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.92rem; color: var(--muted-ink); }
body .hub-eyebrow, body .pm-eyebrow { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted-ink); }
body .panel-h { text-transform: none; letter-spacing: -0.01em; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
body .credits { text-transform: none; letter-spacing: 0; font-weight: 500; }
body .credits b { color: var(--ink); }

/* Buttons */
body .btn-a {
  background: var(--dark); border: 1px solid var(--dark); color: #fff; border-radius: 999px;
  text-transform: none; letter-spacing: -0.01em; font-size: 0.9rem; font-weight: 600; padding: 10px 20px;
}
body .btn-a:hover { background: var(--dark-hover); border-color: var(--dark-hover); color: #fff; }
body .btn-b {
  background: #fff; border: 1px solid var(--line-strong); color: var(--ink); border-radius: 999px;
  text-transform: none; letter-spacing: -0.01em; font-size: 0.86rem; font-weight: 600; padding: 9px 18px;
}
body .btn-b:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
body .btn-b.on { background: var(--dark); border-color: var(--dark); color: #fff; }
body .btn-sm { padding: 6px 12px; font-size: 0.78rem; }
body .btn-danger { color: #B3261E; border-color: rgba(179,38,30,0.35); }
body .btn-danger:hover { background: rgba(179,38,30,0.06); border-color: #B3261E; color: #B3261E; }
body .btn-a:disabled, body .btn-b:disabled { opacity: 0.4; }
body .df-jump-link, body .df-cancel-btn, body .btn-action { border-radius: 999px; text-transform: none; letter-spacing: -0.01em; font-weight: 600; }

/* Tabs and pills */
body .tab { border: 1px solid var(--line); background: #fff; color: var(--muted-ink); border-radius: 999px; text-transform: none; letter-spacing: -0.01em; font-size: 0.84rem; font-weight: 600; padding: 7px 14px; }
body .tab:hover { color: var(--ink); border-color: var(--line-strong); }
body .tab.on { background: var(--dark); border-color: var(--dark); color: #fff; }
body .tab span { opacity: 0.6; }
body .pill { border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: 0.74rem; font-weight: 600; padding: 3px 10px; }

/* Fields */
body label { text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 600; color: var(--muted-ink); }
body input[type=text], body input[type=url], body input[type=date], body input[type=number], body input[type=email], body input[type=password], body input[type=datetime-local], body textarea, body select {
  background: #fff; border: 1px solid var(--line-strong); color: var(--ink); border-radius: 8px; color-scheme: light;
}
body input:focus, body textarea:focus, body select:focus { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(12,18,37,0.08); }
body input::placeholder, body textarea::placeholder { color: var(--dim-ink); }
body .hint { color: var(--muted-ink); }
body .hint.err { color: #B3261E; }
body .hint.ok { color: #1B7F4C; }

/* Surfaces */
body .panel, body .post-row, body .p-row, body .site-bar, body .block, body .chat, body .stat, body .callout, body .preview-bar, body .toolbar {
  background: #fff; border-color: var(--line); border-radius: 10px;
}
body .toolbar { border-radius: 10px 10px 0 0; border-bottom: none; }
body #body { border-radius: 0 0 10px 10px; }
body .block-body { border-top-color: var(--line); }
body .block-h button { border-radius: 999px; border-color: var(--line); color: var(--muted-ink); }
body .block-h button:hover { color: var(--ink); border-color: var(--ink); }
body .preview-frame { border-color: var(--line); border-radius: 10px; }
body .ai-panel, body .chat { border-color: var(--line-strong); }
body .toast { background: var(--dark); color: #fff; border: none; border-radius: 999px; padding: 12px 22px; box-shadow: var(--shadow); }
body .toast.err { background: #B3261E; color: #fff; }
body .thumb, body .cover-prev { border-color: var(--line); border-radius: 6px; }
body .post-row h3, body .p-row h3 { color: var(--ink); }
body .stat .k { text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 600; color: var(--muted-ink); }
body .stat .v { color: var(--ink); }
body .stat.hot .v { color: var(--dark); }
body .bar { background: var(--surface-3); }
body .bar i { background: var(--dark); }
body th { color: var(--muted-ink); border-bottom-color: var(--line); background: var(--surface-2); }
body td { border-bottom-color: var(--line); }

/* Hub */
body .hub-grid { gap: 14px; }
body .hub-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 34px 30px 30px; }
body .hub-card:hover { background: #fff; border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
body .hub-card::before { display: none; }
body .hub-card-icon { opacity: 1; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); margin-bottom: 22px; }
body .hub-card-icon svg { stroke: var(--dark); width: 24px; height: 24px; }
body .hub-card-label { color: var(--dim-ink); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 0.78rem; }
body .hub-card-title { color: var(--ink); text-transform: none; letter-spacing: -0.02em; font-weight: 800; font-size: 1.35rem; }
body .hub-card-desc { color: var(--muted-ink); font-size: 0.92rem; letter-spacing: -0.005em; font-weight: 400; }
body .hub-card-arrow { color: var(--muted-ink); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 0.84rem; }
body .hub-card:hover .hub-card-arrow { color: var(--dark); }
body .hub-card-badge { background: var(--surface-2); color: var(--muted-ink); border: 1px solid var(--line); border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; }
body #access-denied { color: var(--muted-ink); text-transform: none; letter-spacing: 0; }

/* Login and activate */
body .pm-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
body .pm-heading { color: var(--ink); text-transform: none; letter-spacing: -0.025em; }
body .pm-field label { color: var(--muted-ink); text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 600; }
body .pm-field input { background: #fff; border: 1px solid var(--line-strong); color: var(--ink); border-radius: 8px; }
body .pm-field input::placeholder { color: var(--dim-ink); }
body .pm-field input:focus { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(12,18,37,0.08); }
body .pm-btn, body .pm-submit, body button.btn-gold { border-radius: 999px; text-transform: none; letter-spacing: -0.01em; font-weight: 600; }
body .pm-btn { background: var(--dark); color: #fff; }
body .pm-btn:hover { background: var(--dark-hover); }

/* ============================================================
   SURFACES v2 (2026-09-12, Derek: "something more unique and appealing,
   looks like default boxes"). The grid of equal bordered white boxes is
   gone. Numbers read as a ledger: one dark slab for the number that matters,
   the rest as bare typographic figures on a hairline. Panels are soft slabs
   on the paper, not outlined cards. Hub cards are soft slabs that invert to
   the dark tone on hover. Later in the file than the override layer, so these
   win at equal specificity.
   ============================================================ */

/* Stat ledger (usage page: .stats > .stat, first one .hot) */
body .stats {
  display: grid;
  grid-template-columns: minmax(250px, 1.35fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 0 34px; align-items: end;
  padding: 6px 0 26px; margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
body .stat {
  background: transparent; border: 0; border-radius: 0;
  padding: 10px 0 8px 18px;
  border-left: 2px solid var(--ink);
}
body .stat .k {
  font-size: 0.74rem; font-weight: 600; color: var(--muted-ink);
  letter-spacing: 0; text-transform: none; margin: 0 0 10px;
}
body .stat .v {
  font-size: 2.35rem; font-weight: 800; letter-spacing: -0.03em; line-height: 0.95;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
body .stat .v small { display: inline-block; font-size: 0.82rem; font-weight: 500; color: var(--muted-ink); margin-left: 8px; letter-spacing: 0; }
body .stat.hot {
  background: var(--dark); color: #fff; border: 0; border-radius: 22px;
  padding: 26px 28px 24px; align-self: stretch;
  box-shadow: 0 18px 40px -24px rgba(12,18,37,0.55);
}
body .stat.hot .k { color: rgba(255,255,255,0.62); }
body .stat.hot .v { color: #fff; font-size: 3.1rem; }
body .stat.hot .v small { color: rgba(255,255,255,0.55); }
body .stat.hot .bar { background: rgba(255,255,255,0.14); height: 5px; border-radius: 999px; margin-top: 18px; overflow: hidden; }
body .stat.hot .bar i { background: #fff; border-radius: 999px; }
body .stat.hot .bar i.warn { background: #F2B76B; }
body .stat.hot .bar i.over { background: #FF7B6B; }
@media (max-width: 720px) {
  body .stats { grid-template-columns: 1fr 1fr; gap: 18px 22px; }
  body .stats .stat.hot { grid-column: 1 / -1; }
}

/* Clients page figures (.admin-stats > .admin-stat) */
body .admin-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 34px; margin: 0 0 34px; padding: 4px 0 24px;
  border-bottom: 1px solid var(--line);
}
body .admin-stat { background: transparent; border: 0; border-left: 2px solid var(--ink); padding: 8px 0 6px 18px; }
body .admin-stat-num { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 0.95; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
body .admin-stat-label { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; color: var(--muted-ink); }
@media (max-width: 720px) { body .admin-stats { grid-template-columns: 1fr 1fr; gap: 18px 22px; } }

/* Panels: soft slabs on the paper, no outline */
body .panel {
  background: var(--surface-2); border: 0; border-radius: 22px;
  padding: 26px 28px 24px; margin-bottom: 16px;
}
body .panel-h { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px; }
body .panel th { background: transparent; border-bottom: 1px solid var(--line-strong); padding: 10px 12px 10px 0; }
body .panel td { padding: 12px 12px 12px 0; border-bottom-color: rgba(25,29,38,0.08); }
body .panel tr:last-child td { border-bottom: 0; }
body .panel input[type=text], body .panel input[type=number], body .panel select { background: #fff; }

/* Clients / users lists: the filter row sits on the paper, the table is a
   white slab lifted by a soft shadow instead of a border */
body .admin-filters { background: transparent; border: 0; padding: 0 4px 16px; }
body .admin-filters h2 { text-transform: none; letter-spacing: -0.02em; font-size: 1.15rem; font-weight: 800; color: var(--ink); }
body .admin-table-wrap {
  background: #fff; border: 0; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(25,29,38,0.05), 0 22px 44px -32px rgba(25,29,38,0.35);
  padding: 6px 10px;
}
body .admin-table th { background: transparent; border-bottom: 1px solid var(--line-strong); }
body .admin-table tbody tr:last-child td { border-bottom: 0; }

/* Hub: soft slabs that invert to the dark tone on hover */
body .hub-grid { gap: 18px; }
body .hub-card {
  background: var(--surface-2); border: 0; border-radius: 24px; padding: 34px 32px 30px;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body .hub-card:hover {
  background: var(--dark); border: 0; transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(12,18,37,0.6);
}
body .hub-card-icon { background: var(--dark); border-radius: 999px; width: 46px; height: 46px; transition: background .18s ease; }
body .hub-card-icon svg { stroke: #fff; }
body .hub-card:hover .hub-card-icon { background: rgba(255,255,255,0.12); }
body .hub-card:hover .hub-card-label, body .hub-card:hover .hub-card-desc, body .hub-card:hover .hub-card-arrow { color: rgba(255,255,255,0.7); }
body .hub-card:hover .hub-card-title { color: #fff; }
body .hub-card:hover .hub-card-badge { background: rgba(255,255,255,0.12); color: #fff; border-color: transparent; }

/* Form text is always ink, whatever a page's inline style says (the hub's
   inline sign-in still carried the old cream text colour). */
body input, body select, body textarea { color: var(--ink); caret-color: var(--ink); }
body input::placeholder, body textarea::placeholder { color: var(--dim-ink); }

/* Page heads on the cloned admin pages (clients, users, email builder):
   sentence case, tight tracking, no eyebrow dash, quiet role badge. */
body .admin-page-title { text-transform: none; letter-spacing: -0.025em; font-weight: 800; color: var(--ink); }
body .admin-page-sub { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.92rem; color: var(--muted-ink); margin-top: 6px; }
body .label.label-navy { text-transform: none; letter-spacing: 0 !important; font-weight: 600; font-size: 0.8rem; color: var(--muted-ink) !important; }
body .label.label-navy::before { display: none !important; }
body .role-badge { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 0.72rem; border-radius: 999px; background: var(--surface-2); color: var(--muted-ink); border: 1px solid var(--line); }
body .admin-table th { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; color: var(--muted-ink); }
body .status-pill { border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ============================================================
   EDITORIAL PAGES (2026-09-12): Usage and Clients get the hub treatment.
   Sticky title on the left, content down the right on hairlines, no slabs.
   ============================================================ */
body .container.editorial {
  display: grid; grid-template-columns: minmax(240px, 5fr) minmax(0, 8fr);
  column-gap: 72px; row-gap: 28px; align-items: start; max-width: 1200px;
}
body .editorial > .page-head, body .editorial > .admin-page-header {
  grid-column: 1; position: sticky; top: 100px; display: block; margin: 0; padding: 0;
}
body .editorial > #body, body .editorial > .editorial-main { grid-column: 2; min-width: 0; }
body .editorial .page-title, body .editorial .admin-page-title { font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 0.95; letter-spacing: -0.045em; margin: 10px 0 14px; }
body .editorial .page-sub, body .editorial .admin-page-sub { font-size: 0.98rem; margin: 0; }
body .editorial > .page-head > div:last-child { margin-top: 34px; min-width: 0 !important; max-width: 320px; }
body .editorial > .page-head label { margin-bottom: 8px; }

/* Usage: the credits figure is the big number, the bar runs under the whole row */
body .editorial .stats {
  grid-template-columns: minmax(200px, 1.6fr) repeat(auto-fit, minmax(120px, 1fr));
  gap: 0 30px; padding: 0 0 26px; margin: 0 0 8px; border-top: 1px solid var(--ink); border-bottom: 0;
}
body .editorial .stat { padding: 30px 0 0 0; border-left: 0; }
body .editorial .stat + .stat { border-left: 1px solid var(--line); padding-left: 24px; }
body .editorial .stat.hot {
  background: transparent; color: var(--ink); border: 0; border-radius: 0; box-shadow: none;
  padding: 30px 0 0 0; align-self: end;
}
body .editorial .stat.hot .k { color: var(--muted-ink); }
body .editorial .stat.hot .v { color: var(--ink); font-size: 4.2rem; letter-spacing: -0.05em; }
body .editorial .stat.hot .v small { color: var(--muted-ink); }
body .editorial .stat.hot .bar { background: var(--surface-3); margin-top: 20px; height: 4px; }
body .editorial .stat.hot .bar i { background: var(--dark); }
body .editorial .stat.hot .bar i.warn { background: #B8641A; }
body .editorial .stat.hot .bar i.over { background: #B3261E; }

/* Panels become sections on a hairline */
body .editorial .panel { background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; padding: 28px 0 30px; margin: 0; }
body .editorial .panel-h { font-size: 1.3rem; letter-spacing: -0.03em; margin: 0 0 18px; }
body .editorial .panel .grant { align-items: end; }
body .editorial .panel input[type=text], body .editorial .panel input[type=number], body .editorial .panel select { background: #fff; }
body .editorial .panel th { padding-top: 6px; }

/* Clients: figures, then the list on hairlines with no slab */
body .editorial .admin-stats { border-top: 1px solid var(--ink); border-bottom: 0; padding: 30px 0 26px; margin: 0; gap: 0 30px; }
body .editorial .admin-stat { border-left: 0; padding: 0; }
body .editorial .admin-stat + .admin-stat { border-left: 1px solid var(--line); padding-left: 24px; }
body .editorial .admin-filters { border-top: 1px solid var(--line-strong); padding: 26px 0 14px; margin: 0; }
body .editorial .admin-filters h2 { font-size: 1.3rem; letter-spacing: -0.03em; }
body .editorial .admin-filters button { background: var(--dark) !important; color: #fff !important; border-radius: 999px; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.84rem !important; font-weight: 600 !important; padding: 10px 18px !important; }
body .editorial .admin-table-wrap { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
body .editorial .admin-table th { padding-left: 0; }
body .editorial .admin-table td { padding-left: 0; }
body .editorial .admin-count-label { text-transform: none; letter-spacing: 0; font-weight: 500; }

@media (max-width: 900px) {
  body .container.editorial { grid-template-columns: 1fr; row-gap: 22px; }
  body .editorial > .page-head, body .editorial > .admin-page-header { position: static; }
  body .editorial .stats { grid-template-columns: 1fr 1fr; gap: 18px 22px; }
  body .editorial .stats .stat.hot { grid-column: 1 / -1; }
  body .editorial .stat + .stat { border-left: 0; padding-left: 0; }
  body .editorial .stat.hot .v { font-size: 3.2rem; }
}

/* ============================================================
   HUB v3 (2026-09-12): a typographic menu. Two uneven columns, Creative and
   Studio, each a run of large titles with a quiet line of description. No
   boxes, no rules, no numbering. Hover draws a short underline and darkens
   the title.
   ============================================================ */
body #hub-body { display: block; max-width: 1200px; margin: 0 auto; padding: 108px 32px 120px; }
body .hub-hero { text-align: left; padding: 0; margin: 0 0 64px; max-width: none; position: static; }
body .hub-eyebrow { text-align: left; font-size: 0.82rem; margin: 0 0 14px; }
body .hub-title { text-align: left; font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: 0.95; letter-spacing: -0.045em; margin: 0 0 16px; }
body .hub-sub { text-align: left; max-width: 34ch; margin: 0; font-size: 0.98rem; line-height: 1.5; }
body .hub-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 96px; row-gap: 40px; padding: 0; margin: 0; max-width: none; border: 0; align-items: start; }
body .hub-group h2 { font-size: 0.8rem; font-weight: 600; color: var(--dim-ink); letter-spacing: 0.02em; text-transform: none; margin: 0 0 26px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
body .hub-card {
  display: block; position: relative; padding: 0 0 34px; margin: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; overflow: visible;
}
body .hub-card::before { display: none; }
body .hub-card-icon, body .hub-card-arrow { display: none; }
body .hub-card-badge { position: static; display: inline-block; margin: 0 0 8px; }
body .hub-card-label { display: none; }
body .hub-card-title {
  display: inline-block; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 8px;
  background-image: linear-gradient(var(--dark), var(--dark)); background-repeat: no-repeat; background-size: 0 3px; background-position: 0 100%;
  padding-bottom: 4px; transition: background-size .22s ease, color .18s ease;
}
body .hub-card-desc { max-width: 46ch; font-size: 0.95rem; line-height: 1.5; color: var(--muted-ink); margin: 0; }
body .hub-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body .hub-card:hover .hub-card-title { color: var(--dark); background-size: 100% 3px; }
body .hub-card:hover .hub-card-desc { color: var(--muted-ink); }
@media (max-width: 900px) {
  body #hub-body { padding: 92px 20px 80px; }
  body .hub-hero { margin-bottom: 40px; }
  body .hub-grid { grid-template-columns: 1fr; row-gap: 32px; }
  body .hub-card { padding-bottom: 26px; }
  body .hub-nav, body .admin-nav { padding: 0 16px; }
  body .hub-nav .hub-user-name, body .hub-nav .hub-role-badge, body #navRoleBadge { display: none !important; }
}

/* Fit and finish on the editorial pages */
body .hub-card { display: flex; flex-direction: column; align-items: flex-start; }
body .hub-card-badge { order: 3; margin: 10px 0 0; }
body .hub-card-title { order: 1; }
body .hub-card-desc { order: 2; }
body .editorial .stats { grid-template-columns: minmax(220px, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; row-gap: 0; }
body .editorial .stat.hot { grid-row: 1 / span 2; grid-column: 1; }
body .editorial .stat + .stat { padding-top: 30px; }
body .editorial .stat:nth-child(4), body .editorial .stat:nth-child(5) { padding-top: 22px; }
body .editorial .admin-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; }
body .editorial .admin-stat + .admin-stat { padding-left: 18px; }
body .editorial .admin-stat-num { font-size: 2rem; }
body .editorial .admin-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body .editorial .admin-filters h2 { flex: 1 0 100%; margin: 0 0 4px; }
body .editorial .admin-filters .admin-search { flex: 1 1 220px; }
body .editorial .admin-filters .admin-count-label { margin-left: auto; }
@media (max-width: 900px) {
  body .editorial .stats { grid-template-columns: 1fr 1fr; }
  body .editorial .stat.hot { grid-row: auto; grid-column: 1 / -1; }
  body .editorial .admin-stats { grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
  body .editorial .admin-stat + .admin-stat { border-left: 0; padding-left: 0; }
}

/* ============================================================
   SIDE RAIL (2026-09-12): gate.js builds <aside class="side-nav"> on every
   page and sets body.has-sidenav. The page's own top header is hidden and
   the content shifts right. Below 900px the rail becomes a top bar with a
   menu button that drops the links down.
   ============================================================ */
:root { --rail: 232px; }
body.has-sidenav { padding-left: var(--rail); }
body.has-sidenav .admin-nav, body.has-sidenav .hub-nav { display: none !important; }
body.has-sidenav .admin-wrap { padding-top: 44px; }
body.has-sidenav #hub-body { padding-top: 56px; }
body.has-sidenav .editorial > .page-head, body.has-sidenav .editorial > .admin-page-header { top: 40px; }
body.has-sidenav .hub-hero { position: static; }

.side-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail); z-index: 120;
  display: flex; flex-direction: column;
  background: var(--surface-2); border-right: 1px solid var(--line);
  padding: 22px 14px 18px; font-family: var(--font-display);
}
.side-nav-top { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 22px; }
.side-nav-brand { display: inline-flex; text-decoration: none; }
.side-nav-brand .wordmark-light { height: 22px; display: inline-block; }
.side-nav-toggle { display: none; }
.side-nav-links { display: flex; flex-direction: column; gap: 2px; }
.side-nav-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  color: var(--muted-ink); text-decoration: none; font-size: 0.92rem; font-weight: 500; letter-spacing: -0.005em;
  transition: background .15s ease, color .15s ease;
}
.side-nav-link .side-nav-av { width: 22px; height: 22px; margin: -2px; flex: 0 0 auto; display: block; }
.side-nav-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.side-nav-link:hover { background: var(--surface-3); color: var(--ink); }
.side-nav-link.active { background: var(--dark); color: #fff; font-weight: 600; }
.side-nav-foot { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.side-nav-name { font-size: 0.84rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.side-nav-role { font-size: 0.74rem; color: var(--dim-ink); }
.side-nav-out { background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted-ink); font-family: inherit; font-size: 0.78rem; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.side-nav-out:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 900px) {
  body.has-sidenav { padding-left: 0; padding-top: 58px; }
  .side-nav { bottom: auto; width: 100%; height: auto; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-nav-top { padding: 0 4px; }
  .side-nav-toggle { display: inline-flex; flex-direction: column; gap: 4px; background: transparent; border: 0; padding: 8px; cursor: pointer; }
  .side-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); }
  .side-nav-links, .side-nav-foot { display: none; }
  .side-nav.open .side-nav-links { display: flex; padding-top: 8px; }
  .side-nav.open .side-nav-foot { display: flex; margin-top: 12px; }
  body.has-sidenav .admin-wrap { padding-top: 24px; }
  body.has-sidenav #hub-body { padding-top: 28px; }
}

/* ============================================================
   EDITORIAL LISTS (2026-09-12): Blog, Proposals, Users, Emails get the same
   page treatment as Usage and Clients. Rows sit on hairlines, the site bar
   is a section, nothing is boxed.
   ============================================================ */
body .editorial > .blog-head { grid-column: 1; position: sticky; top: 40px; display: block; margin: 0; padding: 0; }
body .editorial .blog-title { font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 0.95; letter-spacing: -0.045em; margin: 10px 0 14px; }
body .editorial .blog-sub { font-size: 0.98rem; margin: 0; }
body .editorial > .page-head > div:last-child, body .editorial > .blog-head > div:last-child { margin-top: 34px; }
body .editorial > .page-head > div:last-child select { width: 100%; margin-bottom: 10px; }
body .editorial > .page-head > div:last-child .btn-a { width: 100%; }
body .editorial .site-bar { background: transparent; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 24px 0 18px; margin: 0 0 6px; }
body .editorial .site-bar .field { min-width: 0; }
body .editorial .site-bar select { background: #fff; }
body .editorial .tabs { padding: 4px 0 10px; }
body .editorial .post-row, body .editorial .p-row {
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding-left: 0; padding-right: 0; margin: 0;
}
body .editorial .post-row:hover, body .editorial .p-row:hover { background: transparent; }
body .editorial .hint { max-width: 62ch; }

body .editorial .staff-table-wrap, body .editorial .admin-table-wrap {
  background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; padding: 26px 0 30px; margin: 0;
}
body .editorial .staff-table-header, body .editorial .admin-filters { background: transparent; border: 0; padding: 0 0 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body .editorial .staff-table-header h2, body .editorial .admin-filters h2 { text-transform: none; letter-spacing: -0.03em; font-size: 1.3rem; font-weight: 800; color: var(--ink); flex: 1; }
body .editorial .staff-table th, body .editorial .admin-table th { background: transparent; border-bottom: 1px solid var(--line-strong); text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; color: var(--muted-ink); padding-left: 0; }
body .editorial .staff-table td, body .editorial .admin-table td { padding-left: 0; }
body .editorial > .admin-page-header .btn { margin-top: 30px !important; width: 100%; border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Emails list */
body .eb-list-wrap { display: grid; grid-template-columns: minmax(240px, 5fr) minmax(0, 8fr); column-gap: 72px; align-items: start; max-width: 1200px; padding: 44px 32px 90px; }
body .eb-list-top { display: block; position: sticky; top: 40px; margin: 0; }
body .eb-list-top .admin-page-title { font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 0.95; letter-spacing: -0.045em; margin: 10px 0 14px; }
body .eb-list-top .btn { margin-top: 30px; width: 100%; border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; }
body .eb-table-wrap { background: transparent; border: 0; border-top: 1px solid var(--ink); padding-top: 8px; }
body .eb-table th { background: transparent; text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; color: var(--muted-ink); border-bottom: 1px solid var(--line-strong); padding-left: 0; }
body .eb-table td { padding-left: 0; border-bottom-color: var(--line); }
body.has-sidenav .eb-page { padding-top: 0; }
@media (max-width: 900px) {
  body .eb-list-wrap { grid-template-columns: 1fr; padding: 24px 20px 60px; }
  body .eb-list-top { position: static; }
  body .editorial > .blog-head { position: static; }
}

/* Lists get a little more room: narrower title column on the editorial pages */
body .container.editorial, body .eb-list-wrap { grid-template-columns: minmax(220px, 4fr) minmax(0, 9fr); column-gap: 64px; }

/* Settings group at the bottom of the rail: a gear that opens AI usage and Users */
.side-nav-settings { margin-top: auto; padding-top: 10px; }
.side-nav-gear { width: 100%; background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.side-nav-caret { margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; opacity: .7; }
.side-nav-settings.open .side-nav-caret { transform: rotate(45deg); }
.side-nav-sub { display: none; flex-direction: column; gap: 2px; padding: 2px 0 4px 12px; }
.side-nav-settings.open .side-nav-sub { display: flex; }
.side-nav-sub .side-nav-link { font-size: 0.88rem; padding: 7px 12px; }
.side-nav-foot { margin-top: 0; }
body.rail-collapsed .side-nav-caret, body.rail-collapsed .side-nav-sub { display: none !important; }
body.rail-collapsed .side-nav-gear { justify-content: center; padding: 11px 0; }
@media (max-width: 900px) {
  .side-nav-settings { display: none; margin-top: 0; }
  .side-nav.open .side-nav-settings { display: block; }
}

/* Collapsed rail: icons only (button at the top of the rail, remembered per browser) */
.side-nav-collapse { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--muted-ink); cursor: pointer; padding: 0; transition: transform .2s ease, color .15s ease; }
.side-nav-collapse svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-nav-collapse:hover { color: var(--ink); border-color: var(--ink); }
body.rail-collapsed { --rail: 68px; }
body.rail-collapsed .side-nav { padding-left: 10px; padding-right: 10px; }
body.rail-collapsed .side-nav-top { flex-direction: column; gap: 14px; padding: 0 0 18px; }
body.rail-collapsed .side-nav-brand { display: none; }
body.rail-collapsed .side-nav-collapse svg { transform: rotate(180deg); }
body.rail-collapsed .side-nav-link { justify-content: center; padding: 11px 0; }
body.rail-collapsed .side-nav-link span { display: none; }
body.rail-collapsed .side-nav-foot { flex-direction: column; align-items: center; gap: 8px; padding-left: 0; padding-right: 0; }
body.rail-collapsed .side-nav-who { display: none; }
body.rail-collapsed .side-nav-out { font-size: 0; width: 34px; height: 34px; padding: 0; position: relative; }
body.rail-collapsed .side-nav-out::before { content: '\21E5'; font-size: 15px; line-height: 34px; }
.side-nav, body.has-sidenav { transition: width .2s ease, padding-left .2s ease; }
@media (max-width: 900px) {
  .side-nav-collapse { display: none; }
  body.rail-collapsed { --rail: 0px; }
  body.rail-collapsed .side-nav-brand { display: inline-flex; }
  body.rail-collapsed .side-nav-link span { display: inline; }
  body.rail-collapsed .side-nav-who { display: block; }
  body.rail-collapsed .side-nav-out { font-size: 0.78rem; width: auto; height: auto; padding: 6px 12px; }
  body.rail-collapsed .side-nav-out::before { content: none; }
}

/* Left column controls never spill into the list */
body .editorial > .page-head, body .editorial > .blog-head, body .editorial > .admin-page-header { min-width: 0; }
body .editorial > .page-head > div:last-child { max-width: none; }
body .editorial > .page-head > div:last-child select, body .editorial > .page-head > div:last-child .btn-a { width: 100% !important; max-width: 100%; box-sizing: border-box; display: block; }
body .editorial .p-row, body .editorial .post-row { overflow: visible; }

/* No flash: the old top headers are gone for good, the rail's space is
   reserved from the first paint, and only pages that never get a rail
   (sign-in, activate, or a login with no access) opt out with body.no-rail. */
body .admin-nav, body .hub-nav { display: none !important; }
body { padding-left: var(--rail); }
body .admin-wrap { padding-top: 44px; }
body #hub-body { padding-top: 56px; }
body .editorial > .page-head, body .editorial > .blog-head, body .editorial > .admin-page-header { top: 40px; }
body .eb-page { padding-top: 0; }
body.no-rail { padding-left: 0; }
body.no-rail .admin-wrap { padding-top: 24px; }
@media (max-width: 900px) {
  body { padding-left: 0; padding-top: 58px; }
  body.no-rail { padding-top: 0; }
}

/* Plain form fields inside editorial content, whatever the page's own rules */
body .editorial-main input[type=text], body .editorial-main input[type=email], body .editorial-main input[type=number], body .editorial-main select,
body .df-body input[type=text], body .df-body input[type=email], body .df-body select {
  background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink);
  font-family: var(--font-body, inherit); font-size: 0.9rem; padding: 10px 13px; min-height: 42px; box-sizing: border-box;
}
body .editorial-main .admin-table td, body .editorial-main .staff-table td { vertical-align: middle; }
body .editorial-main .admin-table td:last-child, body .editorial-main .staff-table td:last-child { white-space: nowrap; }

/* Review pass (2026-09-12): tables and small buttons inside editorial content
   look the same on every page, whatever the page's own stylesheet defines. */
body .editorial-main table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
body .editorial-main table th { text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--muted-ink); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-strong); background: transparent; text-transform: none; letter-spacing: 0; }
body .editorial-main table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
body .editorial-main .btn-action, body .df-body .btn-action {
  background: #fff; border: 1px solid var(--line-strong); color: var(--muted-ink); border-radius: 999px;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 6px 12px; cursor: pointer;
}
body .editorial-main .btn-action:hover, body .df-body .btn-action:hover { color: var(--ink); border-color: var(--ink); }
body .editorial-main .btn-action.remove:hover, body .df-body .btn-action.remove:hover { color: #B3261E; border-color: #B3261E; }
/* Users: the AutoAccel-era account sections join the house style */
body .editorial .accounts-section-wrap { background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; padding: 26px 0 30px; margin: 0; }
body .editorial .accounts-section-header { background: transparent; border: 0; padding: 0 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body .editorial .accounts-section-header h2, body .editorial .accounts-section-header h3 { text-transform: none; letter-spacing: -0.03em; font-size: 1.3rem; font-weight: 800; color: var(--ink); flex: 1; margin: 0; }
body .editorial .accounts-section-header span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.8rem; color: var(--muted-ink); }
body .editorial .accounts-section-header button, body .editorial .accounts-section-header .btn { border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 0.8rem; padding: 8px 14px; }
body .editorial .accounts-table th { background: transparent; text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; color: var(--muted-ink); padding-left: 0; border-bottom: 1px solid var(--line-strong); }
body .editorial .accounts-table td { padding-left: 0; border-bottom: 1px solid var(--line); }
body .editorial .accounts-table button { border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 0.78rem; padding: 5px 11px; }
body .editorial .staff-table button, body .editorial .staff-table .role-badge { border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 0.76rem; }

/* Workspaces (proposal editor, website builder): use the whole width beside
   the rail. The list views keep the normal reading column. */
body #root.workspace { max-width: none; width: auto; margin: 0; padding-left: 24px; padding-right: 24px; }
body .workspace .ed { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 24px; }
body .workspace .builder { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); gap: 20px; }
body .workspace .preview-frame { height: calc(100vh - 140px); }
body.has-sidenav .workspace .ed-right, body.has-sidenav .workspace .chat { top: 20px; }

/* ============================================================
   PHONES (2026-09-14, Derek: "unusable on mobile, I can't see the preview").
   Below 900px every workspace is one column and mobile.js adds a bar at the
   bottom that switches between its two panes (Edit / Preview, Chat / Preview,
   Chat / Plan). Tables scroll sideways inside their own box, never the page.
   Desktop rules above are untouched, except the DESKTOP FIT rules right here.
   ============================================================ */
/* DESKTOP FIT (2026-09-14): the big editorial titles never spill into the
   list column ("User Management" did), account sections do not draw two
   rules, the email list's action cell stays a table cell, message rows
   have room. */
body .editorial .page-title, body .editorial .admin-page-title, body .editorial .blog-title, body .eb-list-top .admin-page-title { font-size: clamp(2.4rem, 3.4vw, 3.6rem); overflow-wrap: anywhere; text-wrap: balance; }
body .editorial .accounts-section-wrap .staff-table-wrap { border-top: 0; padding-top: 0; }
body .editorial .accounts-section-wrap { padding-top: 20px; margin-top: 8px; }
body .editorial .accounts-section-header, body .editorial .staff-table-header { padding: 0 0 14px; }
body .eb-table td[style*="display:flex"] { display: table-cell !important; white-space: nowrap; }
body .eb-table td .btn-action + .btn-action { margin-left: 6px; }
body .loading-row td { padding: 16px 0 !important; }
@media (max-width: 900px) {
  body .container { padding-left: 16px; padding-right: 16px; }
  body #root.workspace { padding-left: 14px; padding-right: 14px; }
  body .admin-wrap, body.has-sidenav .admin-wrap { padding-top: 18px; padding-bottom: 40px; }
  body .page-head { margin-bottom: 18px; }
  body .row2, body .row3 { grid-template-columns: 1fr; }
  body .site-bar { padding: 14px 0 12px; }
  body .site-bar .field { min-width: 0; width: 100%; }
  body .modal { padding: 22px 16px 18px; max-height: 92vh; border-radius: 6px; }
  body .modal-overlay { padding: 12px; }
  body .media-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

  /* List pages: the editorial grid (title left, list right) is one column. A
     desktop rule for this grid sits below the 900px rule in admin.css and was
     overriding it, which pushed the list off the right edge of a phone. */
  body .container.editorial, body .eb-list-wrap { grid-template-columns: 1fr !important; column-gap: 0; row-gap: 18px; }
  body .editorial > .page-head, body .editorial > .blog-head, body .editorial > .admin-page-header, body .eb-list-top { position: static; }
  body .editorial > .page-head, body .editorial > .blog-head, body .editorial > .admin-page-header, body .editorial > #body, body .editorial > .editorial-main, body .editorial > .admin-stats, body .editorial > .admin-filters, body .editorial > .admin-table-wrap { grid-column: 1 !important; grid-row: auto !important; }
  body .editorial > .page-head > div:last-child, body .editorial > .blog-head > div:last-child { max-width: none; margin-top: 14px; }
  body .editorial .page-title, body .editorial .admin-page-title, body .editorial .blog-title, body .eb-list-top .admin-page-title { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  body .editorial .stats, body .editorial .admin-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  body .editorial .stat.hot { grid-column: 1 / -1; grid-row: auto; }
  body .editorial .stat + .stat, body .editorial .admin-stat + .admin-stat { border-left: 0; padding-left: 0; }
  body .tabs { flex-wrap: wrap; }

  /* Workspaces: one column, nothing sticky, the preview gets the height */
  body .ed, body .workspace .ed { grid-template-columns: 1fr; gap: 16px; }
  body .builder, body .workspace .builder { grid-template-columns: 1fr; gap: 14px; }
  body .ed-right, body .workspace .ed-right, body .chat, body .workspace .chat, body.has-sidenav .workspace .ed-right, body.has-sidenav .workspace .chat { position: static; top: auto; }
  body .preview-frame, body .workspace .preview-frame { height: calc(100vh - 175px); min-height: 380px; width: 100% !important; }
  body .preview { height: calc(100vh - 190px); min-height: 380px; }
  body .chat { height: auto; min-height: 0; }
  body .chat-log { max-height: 46vh; }
  body .stage-bar { gap: 6px; }
  body .stage-bar select { min-width: 0; flex: 1 1 120px; }
  body .assets-head .btn-b { width: 100%; }
  body .asset-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Pane switching: a = the work (edit, chat), b = the result (preview, plan) */
  body.mob-bar-on { padding-bottom: 66px; }
  body.mob-pane-a .ed-right, body.mob-pane-a .stage, body.mob-pane-a .eb-preview-panel { display: none !important; }
  body.mob-pane-b .ed-left, body.mob-pane-b .builder > .chat, body.mob-pane-b .eb-form-panel, body.mob-pane-b .eb-ai-panel { display: none !important; }
  body.mob-pane-b .ed .actions { display: none; }
  .mob-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; display: flex; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--surface-2, #071626); border-top: 1px solid var(--line, #1a3448);
  }
  .mob-bar button {
    flex: 1; min-height: 42px; border-radius: var(--radius, 4px); border: 1px solid var(--line-strong, #1f4060); background: transparent; color: var(--ink, #dff0fb);
    font-family: var(--font-display, inherit); font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  }
  .mob-bar button.on { background: var(--accent, #00c8f0); border-color: var(--accent, #00c8f0); color: var(--paper, #fff); }

  /* Email builder: the fixed workspace sits under the top bar and above the pane bar */
  body .eb-builder { top: 58px !important; left: 0 !important; }
  body.mob-bar-on .eb-builder { bottom: 62px; }
  body .eb-body { flex-direction: column; }
  body .eb-form-panel, body .eb-ai-panel { width: auto !important; max-width: none; border-left: 0; border-right: 0; border-top: 1px solid var(--line, #1a3448); flex: 1 1 auto; min-height: 0; max-height: none !important; order: 2; }
  body .eb-preview-panel { order: 1; flex: 1 1 auto; min-height: 0; padding: 14px 12px 24px; overflow-y: auto; }
  body.mob-pane-a .eb-form-panel, body.mob-pane-a .eb-ai-panel { border-top: 0; }
  body .eb-preview-topbar { width: 100%; margin-bottom: 8px; }
  body #preview-frame { margin-left: 0; margin-right: 0; }
  body .eb-action-bar { flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px; }
  body .eb-action-bar .btn, body .eb-action-bar .eb-status-select { padding: 7px 10px; font-size: 0.74rem; white-space: nowrap; }
  body .eb-action-bar .eb-campaign-input { min-width: 0; flex: 1 1 160px; font-size: 0.8rem; }
  body .eb-bar-divider { display: none; }
  body .eb-bar-right { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  body .eb-ai-bar { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  body .eb-ai-bar .eb-select { min-width: 0; flex: 1 1 130px; }
  body .eb-ai-title { white-space: nowrap; font-size: 0.85rem; }
  body #root.workspace > div:first-child { gap: 8px; }
  body #root.workspace > div:first-child .btn-a, body #root.workspace > div:first-child .btn-b { padding: 7px 12px; font-size: 0.84rem; }
  body .eb-board { padding: 4px 0 20px; }
  body .eb-2col, body .eb-utm-grid { grid-template-columns: 1fr; }

  /* Tables become stacked cards: mobile.js labels every cell from its column
     header (data-label). A table without a header row scrolls in its own box. */
  body table.mob-cards, body table.mob-cards tbody, body table.mob-cards tr, body table.mob-cards td { display: block; width: 100%; box-sizing: border-box; }
  body table.mob-cards thead { display: none; }
  body table.mob-cards tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px 10px; margin: 0 0 10px; background: var(--surface-2); }
  body table.mob-cards td { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 7px 0 !important; border: 0 !important; white-space: normal; text-align: left; min-height: 0; line-height: 1.4; }
  body table.mob-cards td::before { content: attr(data-label); flex: 0 0 38%; font-family: var(--font-body); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-ink); font-weight: 700; }
  body table.mob-cards td:first-child:not([data-label=""]) { font-size: 1rem; font-weight: 700; padding-top: 10px !important; }
  body table.mob-cards td[data-label=""]::before, body table.mob-cards tr.mob-msg td::before { display: none; }
  body table.mob-cards td[data-label=""] { display: flex !important; white-space: normal !important; justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding-top: 10px !important; margin-top: 4px; border-top: 1px solid var(--line) !important; }
  body table.mob-cards td[data-label=""] > div, body table.mob-cards td .td-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  body table.mob-cards tr.mob-msg td { display: block; color: var(--muted-ink); font-style: italic; }
  body table:not(.mob-cards) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  body .eb-table-wrap, body .admin-table-wrap, body .staff-table-wrap { max-width: 100%; overflow: visible; }
  /* Section headers (Users, Clients): title on its own line, buttons wrap full width */
  body .staff-table-header, body .accounts-section-header, body .editorial .staff-table-header, body .editorial .accounts-section-header { padding: 14px 0 10px; }
  body .accounts-section-header > div, body .staff-table-header > div { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: center; }
  body .accounts-section-header .btn, body .staff-table-header .btn { flex: 1 1 auto; text-align: center; white-space: nowrap; }
  body .accounts-section-header h2, body .staff-table-header h2 { flex: 1 1 100%; }
  body .editorial .accounts-section-wrap { margin-top: 6px; padding-top: 12px; }
  body .editorial .admin-filters .admin-search { flex: 1 1 100%; }
  body .editorial .admin-filters select { flex: 1 1 40%; }
  body .p-row, body .post-row { grid-template-columns: 1fr; }
  body .row-actions { justify-content: flex-start; }
  body .editorial > .page-head > div:last-child { max-width: none; margin-top: 16px; }
  body .btn-a, body .btn-b, body .tab { min-height: 38px; }
}
@media (max-width: 480px) {
  body .editorial .page-title, body .editorial .admin-page-title, body .eb-list-top .admin-page-title, body .editorial .blog-title { font-size: 2.4rem; }
  body .hub-title { font-size: 2.8rem; }
}