/*
 * Sun Valley Console -- Option A "Resort paper" design system
 * Built: 27-07-2026 (Task 10)
 * All pages import this file via /console-assets/console.css
 */

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

/* ---- PALETTE VARIABLES ---- */
:root {
  /* Sun Valley brand colours */
  --sv-navy:    #0B1B2B;
  --sv-yellow:  #FFD200;
  --sv-green:   #8CC63F;
  --sv-blue:    #29ABE2;
  --sv-charcoal:#3F4044;
  --sv-gold:    #B08D4F;
  --sv-paper:   #F4F1EA;

  /* Option A derivations */
  --bg:              #EFEBE2;   /* 17-08: deepened a shade so white cards read as objects on it */
  --topbar-bg:       var(--sv-navy);
  --card-bg:         #FFFFFF;
  --card-border:     #DFDACF;
  --sidebar-bg:      #E7E2D8;
  --text-main:       var(--sv-navy);
  --text-muted:      #635D4E;   /* 17-08: darkened from #6B6556, now clears WCAG AA on paper */
  --text-light:      #6E6752;   /* 17-08: was #9A9282 at 2.4:1. Now 4.74:1 on paper
                                   and 5.64:1 on card, so the small print clears
                                   WCAG AA everywhere it is used. */
  --line:            #DFDACF;
  --input-bg:        #FFFFFF;
  --input-border:    #C8C3B8;
  --input-focus-shadow: rgba(176,141,79,0.25);

  /* ---- 17-08-2026 design pass: shape, elevation, motion ----
     One radius scale, one shadow family, one easing. Before this the console
     used eleven different corner radii and a single flat navy shadow on a warm
     paper background, which is what made it read as unfinished up close. */
  --r-control:  8px;    /* buttons, inputs, selects, small chips  */
  --r-card:     12px;   /* cards, rows, panels                    */
  --r-pill:     999px;  /* status pills, warmth chips             */

  /* Shadows are tinted to the paper, not to pure black or navy. */
  --shadow-flat:  0 1px 2px rgba(74,62,38,0.05);
  --shadow-card:  0 1px 2px rgba(74,62,38,0.05), 0 2px 6px rgba(74,62,38,0.045);
  --shadow-lift:  0 2px 4px rgba(74,62,38,0.06), 0 8px 20px rgba(74,62,38,0.09);
  --shadow-modal: 0 4px 8px rgba(74,62,38,0.07), 0 20px 48px rgba(11,27,43,0.16);

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  0.12s;
  --dur-base:  0.18s;

  /* Focus ring, used by every interactive element on every page. */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--sv-gold);

  /* 17-08: console.html and console-leads.html reference --ink and --muted in
     seventeen places, but neither name was ever defined here or locally, so
     those rules silently did nothing and the text fell back to whatever it
     inherited. Aliased to the real tokens rather than editing every call site.
     (console-login.html defines its own --muted for the dark card, and that
     local definition still wins there.) */
  --ink:   var(--text-main);
  --muted: var(--text-muted);

  /* Warmth chips */
  --chip-hot-bg:     rgba(192,57,43,0.10);
  --chip-hot-txt:    #C0392B;
  --chip-hot-brd:    rgba(192,57,43,0.25);
  --chip-warm-bg:    rgba(176,141,79,0.12);
  --chip-warm-txt:   #8B6B2A;
  --chip-warm-brd:   rgba(176,141,79,0.30);
  --chip-cool-bg:    rgba(41,171,226,0.10);
  --chip-cool-txt:   #1A7FA8;
  --chip-cool-brd:   rgba(41,171,226,0.25);

  /* Status colours */
  --green-bg:    rgba(140,198,63,0.12);
  --green-txt:   #3A6010;
  --green-brd:   rgba(140,198,63,0.35);
  --amber-bg:    rgba(176,141,79,0.12);
  --amber-txt:   #8B6B2A;
  --amber-brd:   rgba(176,141,79,0.30);
  --red-bg:      rgba(192,57,43,0.10);
  --red-txt:     #8B2E23;
  --red-brd:     rgba(192,57,43,0.25);
  --blue-bg:     rgba(41,171,226,0.10);
  --blue-txt:    #1A6F96;
  --blue-brd:    rgba(41,171,226,0.25);

  /* Spinner accent on paper pages */
  --spinner-brd: rgba(176,141,79,0.20);
  --spinner-top: var(--sv-gold);
}

/* ---- BASE ---- */
html, body {
  min-height: 100%;
  background: var(--bg);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
textarea, input, select { font-family: inherit; }

/* ---- TOPBAR ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  height: 60px;
  background: var(--topbar-bg);
  border-bottom: 3px solid var(--sv-gold);
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

/* SV logo image (replaces old text wordmark) */
.sv-logo-img {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* Vesta Engine brand group -- right end of topbar */
.ve-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.15);
  margin-left: 6px;
}

.ve-lockup { height: 34px; width: auto; display: block; }

.topbar-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* ---- NAV STRIP ---- */
.nav-strip {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-wrap: nowrap;
}

.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.nav-link:hover {
  color: #FFFFFF;
  background: rgba(255,255,255,0.08);
}

.nav-link.active {
  color: var(--sv-navy);
  background: var(--sv-yellow);
  font-weight: 700;
}

/* User label + sign-out button inside nav strip */
.nav-user {
  font-size: 12px;
  color: rgba(255,255,255,0.50);
  padding: 0 10px 0 14px;
  border-left: 1px solid rgba(255,255,255,0.15);
  margin-left: 6px;
  white-space: nowrap;
}

/* Sign out appears as a subtle nav-link in the strip */
.nav-signout {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.40);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}

.nav-signout:hover {
  color: rgba(255,255,255,0.80);
  background: rgba(255,255,255,0.08);
}

/* ---- MAIN LAYOUT ---- */
.main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px;
}

/* ---- CARDS ---- */
.sv-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(11,27,43,0.06);
}

/* ---- PAGE HEADING ---- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.page-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ---- BUTTONS ---- */
.btn-primary {
  background: var(--sv-yellow);
  color: var(--sv-navy);
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}

.btn-primary:hover { background: #E6BD00; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.50; cursor: not-allowed; transform: none; }

.btn-danger {
  background: transparent;
  color: #C0392B;
  border: 1px solid #E3B4AE;
  border-radius: 8px;
  padding: 9px 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}

.btn-danger:hover { background: #C0392B; color: #fff; }
.btn-danger:active { transform: scale(0.98); }
.btn-danger:disabled { opacity: 0.50; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--card-border);
  border-radius: 7px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.btn-secondary:hover { border-color: var(--sv-gold); }
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-danger {
  background: rgba(192,57,43,0.08);
  color: var(--red-txt);
  border: 1px solid var(--red-brd);
  border-radius: 7px;
  padding: 7px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-danger:hover { background: rgba(192,57,43,0.16); }

/* ---- WARMTH CHIPS ---- */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.chip-hot  { background: var(--chip-hot-bg);  color: var(--chip-hot-txt);  border: 1px solid var(--chip-hot-brd); }
.chip-warm { background: var(--chip-warm-bg); color: var(--chip-warm-txt); border: 1px solid var(--chip-warm-brd); }
.chip-cool { background: var(--chip-cool-bg); color: var(--chip-cool-txt); border: 1px solid var(--chip-cool-brd); }
.chip-none { background: rgba(107,101,86,0.08); color: var(--text-muted); border: 1px solid var(--card-border); }

/* Category chip (answers page) */
.chip-cat   { background: var(--blue-bg);  color: var(--blue-txt);  border: 1px solid var(--blue-brd);  border-radius: 4px; }
.chip-live  { background: var(--green-bg); color: var(--green-txt); border: 1px solid var(--green-brd); border-radius: 4px; }
.chip-draft { background: var(--amber-bg); color: var(--amber-txt); border: 1px solid var(--amber-brd); border-radius: 4px; }
.chip-awaiting  { background: var(--blue-bg);  color: var(--blue-txt);  border: 1px solid var(--blue-brd);  border-radius: 4px; }
.chip-rejected  { background: var(--red-bg);   color: var(--red-txt);   border: 1px solid var(--red-brd);   border-radius: 4px; }

/* ---- STATUS PILLS ---- */
.status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: capitalize;
  border: 1px solid transparent;
}

.sp-new       { background: rgba(255,210,0,0.12);  color: #7A6200; border-color: rgba(255,210,0,0.40); }
.sp-contacted { background: rgba(41,171,226,0.10); color: #1A6F96; border-color: rgba(41,171,226,0.30); }
.sp-booked    { background: rgba(140,198,63,0.12); color: #4E7A15; border-color: rgba(140,198,63,0.35); }
.sp-won       { background: rgba(140,198,63,0.20); color: #3A6010; border-color: rgba(140,198,63,0.50); }
.sp-lost      { background: rgba(192,57,43,0.10);  color: #8B2E23; border-color: rgba(192,57,43,0.25); }

/* ---- ADMIN PAGE PILLS ---- */
.pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(176,141,79,0.12);
  color: var(--chip-warm-txt);
  border: 1px solid rgba(176,141,79,0.25);
  white-space: nowrap;
}

.pill-none {
  font-size: 11px;
  color: var(--text-muted);
}

.badge-admin {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--chip-hot-bg);
  color: var(--chip-hot-txt);
  border: 1px solid var(--chip-hot-brd);
  white-space: nowrap;
}

/* ---- TOAST ---- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--sv-navy);
  border: 1px solid rgba(176,141,79,0.30);
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 13px;
  color: #FFFFFF;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
  pointer-events: none;
}

.toast.on, .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.toast-ok  { border-color: rgba(140,198,63,0.40); color: #4E7A15; background: rgba(140,198,63,0.12); }
.toast.toast-err { border-color: var(--red-brd); color: var(--red-txt); background: rgba(192,57,43,0.08); }

/* ---- SPINNER ---- */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--spinner-brd);
  border-top-color: var(--spinner-top);
  border-radius: 50%;
  animation: sv-spin 0.7s linear infinite;
}

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

.loading {
  display: flex;
  justify-content: center;
  padding: 48px;
}

/* ---- FILTER CONTROLS ---- */
.filter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-row select,
.filter-row input[type="search"] {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--text-main);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-row select {
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6556' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.filter-row select:focus,
.filter-row input[type="search"]:focus {
  border-color: var(--sv-gold);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.filter-row input[type="search"] { flex: 1; min-width: 160px; }
.filter-row input[type="search"]::placeholder { color: var(--text-light); }

.result-count {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 6px 0;
}

/* ---- FILTER CHIPS (answers filter bar) ---- */
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.fchip {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
}

.fchip.on {
  background: var(--sv-navy);
  border-color: var(--sv-navy);
  color: #FFFFFF;
}

/* ---- POWERED BY FOOTER ---- */
.powered-wrap {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

a.powered {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-light);
  text-decoration: none;
}

a.powered:hover { color: var(--text-muted); }

.pmark-img{height:14px;width:14px;vertical-align:-2px}

/* ---- EMPTY STATES ---- */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.empty { text-align: center; color: var(--text-muted); font-size: 14px; padding: 60px 0; }

/* ---- HIDDEN UTILITY ---- */
.hidden { display: none !important; }

/* ---- LEAD ROWS ---- */
.leads-list { display: flex; flex-direction: column; gap: 10px; }

.lead-row {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  box-shadow: 0 1px 3px rgba(11,27,43,0.06);
}

.lead-row:hover {
  border-color: var(--sv-gold);
  box-shadow: 0 2px 8px rgba(176,141,79,0.15);
}

.lead-row[role="button"] { cursor: pointer; }

.lead-row-left  { min-width: 0; }
.lead-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  white-space: nowrap;
  gap: 4px;
}

.lead-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.lead-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.lead-line2 {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-line3 {
  font-size: 13px;
  color: var(--text-light);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lead-date { font-size: 12px; color: var(--text-muted); }
.lead-dur  { font-size: 12px; color: var(--text-light); }

/* ---- LEAD DETAIL ---- */
.detail-view { display: none; }
.detail-view.active { display: block; }
.list-view { display: block; }
.list-view.hidden { display: none; }

.detail-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 7px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: color 0.15s, border-color 0.15s;
  text-decoration: none;
}

.btn-back:hover { color: var(--text-main); border-color: var(--sv-gold); }

.detail-header {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 16px;
}

.detail-header-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.detail-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
  flex: 1;
  min-width: 160px;
}

.detail-contact-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.contact-link {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  transition: color 0.15s, border-color 0.15s;
  word-break: break-all;
}

.contact-link:hover { color: var(--text-main); border-color: var(--sv-gold); }

.booking-banner {
  margin-top: 14px;
  background: var(--green-bg);
  border: 1px solid var(--green-brd);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--green-txt);
}

/* Detail cards */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(11,27,43,0.04);
}

.card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 20px;
}

/* Status update buttons */
.status-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.status-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: capitalize;
}

.status-btn:hover { color: var(--text-main); border-color: var(--sv-gold); }
.status-btn.active { border-color: var(--sv-gold); color: var(--chip-warm-txt); background: rgba(176,141,79,0.10); }
.status-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Call recording player -- drawn by us, because the browser's own controls
   have no speed setting and a scrub bar too thin to drag with a thumb. */
.player { display: flex; flex-direction: column; }

.player-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
  display: block;
}
.player-seek::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--sv-gold) 0%, var(--sv-gold) var(--pct, 0%),
    #E4DFD4 var(--pct, 0%), #E4DFD4 100%);
}
.player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--sv-navy);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(11,27,43,0.35);
}
.player-seek::-moz-range-track { height: 6px; border-radius: 3px; background: #E4DFD4; }
.player-seek::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--sv-gold); }
.player-seek::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sv-navy); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(11,27,43,0.35);
}
.player-seek:disabled { opacity: 0.5; cursor: default; }

.player-times {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin: -2px 2px 14px;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.player-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.player-btn .player-arc { font-size: 19px; font-weight: 400; }
.player-btn:hover { border-color: var(--sv-gold); }
.player-btn:active { background: rgba(176,141,79,0.10); }

.player-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: var(--sv-navy);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(11,27,43,0.25);
}
.player-play svg { width: 26px; height: 26px; fill: currentColor; }
.player-play:active { transform: scale(0.96); }

.player-rate {
  min-width: 56px;
  height: 52px;
  padding: 0 12px;
  border-radius: 26px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.player-rate:hover { border-color: var(--sv-gold); }
.player-rate.fast { border-color: var(--sv-gold); background: rgba(176,141,79,0.10); color: var(--chip-warm-txt); }

/* Section text / bullets / quotes */
.section-text {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.7;
}

.bullet-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }

.bullet-list li {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}

.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sv-gold);
}

.quote-list { display: flex; flex-direction: column; gap: 10px; }

.quote-item {
  border-left: 3px solid rgba(176,141,79,0.40);
  padding: 10px 16px;
  background: rgba(176,141,79,0.06);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.6;
}

/* Tables (reactions / objections / staff) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--card-border);
}

tbody tr {
  border-bottom: 1px solid rgba(11,27,43,0.05);
  transition: background 0.1s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(11,27,43,0.03); }

td {
  padding: 13px 12px;
  vertical-align: middle;
  color: var(--text-main);
}

.td-name  { font-weight: 500; color: var(--text-main); white-space: nowrap; }
.td-email { color: var(--text-muted); font-size: 13px; }
.td-property { color: var(--text-muted); font-size: 13px; }
.td-time { color: var(--text-main); font-size: 13px; white-space: nowrap; }
.td-time-sub { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.td-contact { color: var(--text-muted); font-size: 13px; }
.td-contact a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.td-contact a:hover { color: var(--text-main); }
.td-action { white-space: nowrap; }

.reactions-table, .obj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.reactions-table th, .obj-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--card-border);
}

.reactions-table td, .obj-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(11,27,43,0.05);
  color: var(--text-muted);
  vertical-align: top;
  line-height: 1.55;
}

.reactions-table tr:last-child td, .obj-table tr:last-child td { border-bottom: none; }

/* ---- NOTES THREAD ---- */
.notes-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

.note-item {
  background: rgba(11,27,43,0.04);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px 16px;
}

.note-meta { font-size: 11px; color: var(--text-light); margin-bottom: 6px; }

.note-body {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-add-wrap { display: flex; flex-direction: column; gap: 8px; }

textarea.note-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--text-main);
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea.note-input::placeholder { color: var(--text-light); }

textarea.note-input:focus {
  border-color: var(--sv-gold);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

/* ---- DETAILS GRID ---- */
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.details-item { display: flex; flex-direction: column; gap: 3px; }

.details-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.details-value {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.5;
  word-break: break-word;
}

/* ---- TRANSCRIPT ---- */
details.transcript-details {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
}

details.transcript-details summary {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11,27,43,0.03);
  transition: background 0.1s;
}

details.transcript-details summary:hover { background: rgba(11,27,43,0.06); }

details.transcript-details summary::before {
  content: '>';
  font-size: 10px;
  transition: transform 0.2s;
  display: inline-block;
}

details.transcript-details[open] summary::before { transform: rotate(90deg); }

.transcript-body {
  padding: 16px 18px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  border-top: 1px solid var(--card-border);
  max-height: 400px;
  overflow-y: auto;
}

/* ---- BOOKINGS ---- */
.info-banner {
  background: rgba(176,141,79,0.08);
  border: 1px solid rgba(176,141,79,0.25);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--chip-warm-txt);
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.booking-cards { display: none; flex-direction: column; gap: 12px; }

.booking-card {
  background: rgba(11,27,43,0.04);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 16px;
}

.bc-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.bc-row {
  display: flex;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.bc-row span { color: var(--text-main); }
.bc-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.btn-lead {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(176,141,79,0.35);
  background: rgba(176,141,79,0.10);
  color: var(--chip-warm-txt);
  text-decoration: none;
  transition: background 0.15s;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

.btn-lead:hover { background: rgba(176,141,79,0.18); }

/* ---- ADMIN FORM ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }

label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

input[type="email"],
input[type="text"],
input[type="password"] {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}

input[type="email"]::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder {
  color: var(--text-light);
}

input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: var(--sv-gold);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.checks-wrap { display: flex; flex-wrap: wrap; gap: 12px; }

.check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-main);
}

.check-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sv-gold);
  cursor: pointer;
  flex-shrink: 0;
}

.admin-toggle-wrap { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.admin-toggle-label { font-size: 13px; color: var(--text-main); }
.admin-toggle-desc  { font-size: 12px; color: var(--text-muted); }

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--card-border);
}

.err-line { font-size: 13px; color: var(--red-txt); min-height: 20px; }
.ok-line  { font-size: 13px; color: var(--green-txt); min-height: 20px; }

/* Active toggle */
/* 17-08: this is a <label>, so it was inline by default and ignored its own
   width and height. Both its children are absolutely positioned, so it
   collapsed to 0x0 and the switch was invisible anywhere it was not already a
   flex item. That is why every Active switch in the staff table could not be
   seen or clicked, while the same control worked inside .toggle-wrap below. */
.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  vertical-align: middle;
}

.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(11,27,43,0.15);
  cursor: pointer;
  transition: background 0.2s;
}

.toggle input:checked + .toggle-track { background: var(--sv-gold); }

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.2s;
}

.toggle input:checked + .toggle-track::after { transform: translateX(18px); }
.toggle-label { font-size: 12px; color: var(--text-muted); }

/* Flash banner */
.flash {
  display: none;
  background: var(--green-bg);
  border: 1px solid var(--green-brd);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--green-txt);
  margin-bottom: 16px;
  max-width: 1100px;
}

.flash.show { display: block; }

/* Modal */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11,27,43,0.50);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-backdrop.open { display: flex; }

.modal {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 32px 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 64px rgba(11,27,43,0.18);
}

.modal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.modal-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.modal-body strong { color: var(--text-main); }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---- ANSWERS PAGE ---- */
/* Sidebar */
.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex-shrink: 0;
}

.slabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-light);
  padding: 8px 8px 6px;
  margin-top: 4px;
}

.slabel:first-child { margin-top: 0; }

.sitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}

.sitem:hover { background: rgba(11,27,43,0.06); }

.sitem.on {
  background: var(--sv-navy);
  color: #FFFFFF;
  font-weight: 600;
}

/* 17-08: this was `.sitem .n`, so it painted every count in the sidebar yellow
   on a 20% yellow chip. Against the light sidebar that is roughly 1.3:1 and
   the numbers could not be read at all. The yellow was only ever meant for the
   selected row, where it sits on navy. */
.sitem.on .n { background: rgba(255,210,0,0.22); color: var(--sv-yellow); }

.n {
  font-size: 11px;
  color: var(--text-light);
  background: rgba(11,27,43,0.08);
  border-radius: 10px;
  padding: 2px 7px;
  font-weight: 500;
}

.sspacer { flex: 1; }

.suser {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 6px 0;
  border-top: 1px solid var(--line);
}

.sav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sv-navy);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--sv-yellow);
  font-weight: 700;
}

/* Panel (editor) */
.panel {
  width: 400px;
  /* 17-08: the sidebar had flex-shrink:0 and this did not, so the editor was
     the only thing in the row free to give way. It was rendering at 196px of
     its 400px on a 1440 screen, which is why the empty-state sentence wrapped
     over four lines and the edit form felt cramped. */
  flex: 0 0 400px;
  background: var(--card-bg);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.panel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
  padding: 30px;
  text-align: center;
}

.pan-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pan-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.pan-close {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}

.pan-close:hover { color: var(--text-main); }

.pan-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.flabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.finput {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--text-main);
  background: var(--bg);
  resize: vertical;
}

.finput:focus {
  outline: none;
  border-color: var(--sv-gold);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

textarea.finput { min-height: 100px; line-height: 1.55; }

select.finput {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6556' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.fhint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

.speak-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-speak {
  background: var(--card-bg);
  color: var(--sv-navy);
  border: 1px solid var(--sv-navy);
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
}

.btn-speak:hover:not(:disabled) { background: var(--sv-navy); color: #fff; }
.btn-speak:disabled { opacity: 0.45; cursor: default; }

.speak-hint { font-size: 11px; color: var(--text-muted); line-height: 1.4; flex: 1; min-width: 140px; }

audio#speakPlayer { width: 100%; margin-top: 8px; border-radius: 6px; }

.preview-block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.preview-block .flabel { margin-bottom: 8px; }

.prev-q-row { display: flex; gap: 8px; align-items: flex-start; }
#testQ { flex: 1; }

.btn-sm { border: none; border-radius: 7px; padding: 9px 14px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.btn-prev { background: var(--sv-navy); color: #fff; }
.btn-prev:hover { background: #0F2336; }
.btn-prev:disabled { opacity: 0.45; cursor: default; }

.spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sv-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

audio#previewPlayer { width: 100%; margin-top: 10px; border-radius: 6px; }

#previewTranscript {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  display: none;
}

.prev-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; font-style: italic; line-height: 1.5; }

.btn-publish {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: var(--sv-navy);
  color: var(--sv-yellow);
  transition: 0.15s;
}

.btn-publish:hover:not(:disabled) { background: #0F2336; }
.btn-publish:disabled { opacity: 0.40; cursor: default; }
.btn-publish.live { background: var(--green-txt); color: #fff; }
.btn-publish.reverted { background: var(--red-txt); color: #fff; }
.btn-publish.awaiting { background: var(--blue-txt); color: #fff; }

.pub-warn {
  font-size: 11.5px;
  color: var(--chip-warm-txt);
  margin-top: 6px;
  line-height: 1.5;
  padding: 6px 10px;
  background: var(--amber-bg);
  border-radius: 6px;
  border: 1px solid var(--amber-brd);
}

.pub-warn.red {
  color: var(--red-txt);
  background: var(--red-bg);
  border-color: var(--red-brd);
}

.prev-gate-note { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; text-align: center; }

.pan-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-save {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--card-bg);
  color: var(--text-main);
}

.btn-save:hover { background: var(--bg); }
.btn-save:disabled { opacity: 0.45; cursor: default; }

.hist-list { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }

.hrow {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
}

.hrow-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.hrow-q  { font-size: 13px; font-weight: 500; color: var(--text-main); margin-bottom: 2px; }
.hrow-a  { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; white-space: pre-wrap; }

.restoreBtn {
  font-size: 12px;
  font-weight: 600;
  color: var(--sv-navy);
  background: none;
  border: 1px solid var(--sv-navy);
  border-radius: 6px;
  padding: 5px 12px;
}

.restoreBtn:hover { background: var(--sv-navy); color: #fff; }

/* HOW THIS WORKS block */
.howto {
  background: var(--sv-navy);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
  color: #fff;
  border-left: 4px solid var(--sv-gold);
}

.howto-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--sv-gold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.howto-lead { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.92); margin-bottom: 12px; }

.howto-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.howto-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}

.howto-step b { color: #fff; }

.howto-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sv-yellow);
  color: var(--sv-navy);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.howto-note {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 10px;
}

/* Powered-by in-page variant */
.pwrby {
  text-align: center;
  font-size: 11px;
  color: var(--text-light);
  padding: 16px 0 10px;
  letter-spacing: 0.3px;
}

/* Section labels */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ---- MOBILE ---- */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .panel { width: 100%; border-left: none; border-top: 1px solid var(--line); }
  .app { flex-direction: column; }
}

@media (max-width: 700px) {
  .topbar { padding: 10px 16px; height: auto; flex-wrap: wrap; gap: 8px; }
  /* Nav strip: order 3 so it wraps to its own row below logo + VE mark */
  .nav-strip { order: 3; margin-left: 0; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  /* VE mark: order 2, pushed to right of logo row; hide border + label */
  .ve-brand { order: 2; margin-left: auto; padding-left: 0; border-left: none; margin-right: 0; }
  .topbar-divider { display: none; }
  .nav-user { display: none; }
  .main { padding: 16px; }
  .lead-row { grid-template-columns: 1fr; }
  .lead-row-right { flex-direction: row; align-items: center; margin-top: 6px; }
  .details-grid { grid-template-columns: 1fr 1fr; }
  /* .table-wrap hide + .booking-cards show are bookings-page-local (console-bookings.html <style>) */
  .topbar-right { margin-left: 0; width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: 1; }
  .filter-row { gap: 8px; }
  .sv-logo-img { height: 28px; }
  .ve-lockup { height: 28px; }
}

@media (max-width: 600px) {
  .panel { display: none; }
}

@media (max-width: 390px) {
  .nav-link { font-size: 12px; padding: 6px 10px; }
  .page-title { font-size: 18px; }
  .details-grid { grid-template-columns: 1fr; }
  .status-btns { gap: 6px; }
  .status-btn { font-size: 12px; padding: 7px 12px; }
}

/* ==========================================================================
   17-08-2026 DESIGN PASS
   Refinement of the existing Option A system, not a replacement. Brand
   colours, layout and copy are untouched. Everything below is type, spacing,
   depth, focus and motion. Kept in one block so it can be read, judged or
   reverted on its own.
   ========================================================================== */

/* ---- 1. TYPE ----------------------------------------------------------- */

html { -moz-osx-font-smoothing: grayscale; }

body {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
}

/* Headings should not leave a single word stranded on the last line. */
.page-title, .card-title, .detail-name, .lead-name, h1, h2, h3 {
  text-wrap: balance;
}

.section-text, .note-body, .page-sub, .details-value, .lead-line3 {
  text-wrap: pretty;
}

/* Display type carries the weight, so it gets the tighter tracking. */
.page-title  { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; }
.detail-name { font-size: 28px; letter-spacing: -0.025em; line-height: 1.15; }
.card-title  { font-size: 17px; letter-spacing: -0.015em; }

/* The lead name is the thing the eye should land on first in a row. */
.lead-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

/* Anything countable, dated or measured lines up in a column. */
.lead-date, .lead-dur, .result-count, .td-time, .td-time-sub,
.player-times, .note-meta, .block-when, .sitem-count, .count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Small caps labels were 11px/700 at 0.10em, which crushed at this size. */
.card-label, .details-label, thead th,
.reactions-table th, .obj-table th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-light);
}

/* ---- 2. SHAPE ---------------------------------------------------------- */
/* One radius scale. Controls 8, cards 12, pills full. */

.btn-primary, .btn-secondary, .btn-danger, .btn-back, .status-btn, .fchip,
.filter-row select, .filter-row input[type="search"],
textarea.note-input, .finput,
input[type="email"], input[type="text"], input[type="password"] {
  border-radius: var(--r-control);
}

.sv-card, .card, .lead-row, .detail-header, .note-item, .booking-banner {
  border-radius: var(--r-card);
}

.chip, .status-pill, .pill, .badge-admin { border-radius: var(--r-pill); }

/* Category chips were square while every other chip was round. Now they
   match the rest, so a row reads as one family of objects. */
.chip-cat, .chip-live, .chip-draft, .chip-awaiting, .chip-rejected {
  border-radius: var(--r-pill);
}

/* ---- 3. DEPTH ---------------------------------------------------------- */

.sv-card, .card, .detail-header { box-shadow: var(--shadow-card); }

.lead-row {
  box-shadow: var(--shadow-flat);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

/* A row you can click should answer when you point at it. */
.lead-row:hover {
  border-color: rgba(176,141,79,0.55);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.lead-row:active { transform: translateY(0); box-shadow: var(--shadow-flat); }

/* The topbar sat on a flat 3px gold rule. A hairline plus a soft cast
   separates it from the page without shouting. */
.topbar {
  border-bottom: 1px solid rgba(176,141,79,0.55);
  box-shadow: 0 1px 0 rgba(11,27,43,0.06), 0 6px 20px rgba(11,27,43,0.10);
}

/* ---- 4. CONTROLS ------------------------------------------------------- */

.btn-primary {
  box-shadow: 0 1px 2px rgba(122,98,0,0.20), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn-primary:hover { box-shadow: 0 2px 6px rgba(122,98,0,0.26), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(122,98,0,0.22); }
.btn-primary:disabled { box-shadow: none; transform: none; }

/* `transition: all` made the browser watch every property on this button. */
.status-btn {
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.btn-secondary:hover, .btn-back:hover, .contact-link:hover, .fchip:hover {
  background: rgba(176,141,79,0.07);
  border-color: rgba(176,141,79,0.55);
}

.btn-secondary:active, .btn-back:active, .status-btn:active, .fchip:active {
  transform: translateY(1px);
}

/* ---- 5. FOCUS ---------------------------------------------------------- */
/* Before this pass nothing in the console showed a focus ring except three
   input types, so a keyboard user could not see where they were. */

a, button, [role="button"], [tabindex]:not([tabindex="-1"]),
input, select, textarea, summary {
  outline: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: var(--r-control);
}

.lead-row:focus-visible { box-shadow: var(--focus-ring), var(--shadow-lift); border-radius: var(--r-card); }
.chip:focus-visible, .status-pill:focus-visible { border-radius: var(--r-pill); }

/* On the navy topbar the gold ring needs the navy behind it, not the paper. */
.topbar a:focus-visible, .topbar button:focus-visible {
  box-shadow: 0 0 0 2px var(--sv-navy), 0 0 0 4px var(--sv-yellow);
}

/* Inputs keep their existing gold glow and gain the ring. */
.filter-row select:focus-visible,
.filter-row input[type="search"]:focus-visible,
textarea.note-input:focus-visible,
.finput:focus-visible,
input[type="email"]:focus-visible,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible {
  border-color: var(--sv-gold);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

/* ---- 6. TABLES --------------------------------------------------------- */

thead th { padding-bottom: 12px; }

tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover { background: rgba(176,141,79,0.06); }

/* ---- 7. EMPTY AND LOADING STATES --------------------------------------- */

.empty-state, .empty {
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 44ch;
  margin-inline: auto;
}

.loading { padding: 64px 24px; }

/* ---- 8. MOTION --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* The spinner still has to read as "working", so it steps instead of spins. */
  .spinner { animation: sv-spin 1.2s steps(8, end) infinite !important; }
  .lead-row:hover { transform: none; }
}

/* ---- 9. TOUCH ---------------------------------------------------------- */

button, a, [role="button"], .lead-row, .fchip, .status-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(176,141,79,0.18);
}

/* ---- 10. LEAD ROWS ----------------------------------------------------- */
/* The row was a two column grid with the content free to run the full 1280px
   and the date and duration pinned to opposite corners of the right column.
   On a wide screen that left a dead band across the middle of every row and
   split the two pieces of time information as far apart as the layout allowed.
   Now: content is capped at a readable measure, and date and duration sit
   together in a fixed column the eye can run straight down. */

.leads-list { gap: 8px; }

.lead-row { padding: 16px 20px; align-items: start; }

.lead-row-left { max-width: 78ch; }

/* Scoped above the phone breakpoint. This block sits later in the file than
   the mobile rules, so left unscoped it would beat them and squeeze a row to
   152px of content on a 390px screen. */
@media (min-width: 701px) {
  .lead-row {
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 4px 32px;
  }

  .lead-row-right {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 3px;
    text-align: right;
  }
}

.lead-date { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.lead-dur  { font-size: 12px; color: var(--text-light); }

/* The summary is the sentence that tells you whether a lead is worth opening,
   so it is content, not small print. Moved off the lightest grey. */
.lead-line3 { color: var(--text-muted); }

.lead-line1 { gap: 10px; margin-bottom: 4px; }
.lead-line2 { font-size: 13px; margin-bottom: 4px; }
.lead-line3 { font-size: 13px; line-height: 1.5; }

/* ---- 11. CHIPS --------------------------------------------------------- */
/* Warmth and status were two separate colour systems firing at once, so a
   list of six leads showed five different accent colours competing. Warmth
   now carries the colour, because that is the thing worth spotting across a
   list. Status is the same information in a quieter register. */

.chip {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
}

.status-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  background: rgba(11,27,43,0.05);
  color: var(--text-muted);
  border-color: rgba(11,27,43,0.10);
}

/* Won and lost are the two outcomes worth colouring. Everything in between
   is progress, not news, so it stays neutral. */
.sp-won {
  background: rgba(140,198,63,0.16);
  color: #3A6010;
  border-color: rgba(140,198,63,0.45);
}

.sp-lost {
  background: rgba(192,57,43,0.08);
  color: #8B2E23;
  border-color: rgba(192,57,43,0.22);
}

/* ---- 12. PAGE HEAD ----------------------------------------------------- */

.page-head { margin-bottom: 20px; align-items: flex-end; }
.page-sub { font-size: 13.5px; color: var(--text-muted); max-width: 68ch; margin-top: 5px; }

/* ---- 13. FILTER ROW ---------------------------------------------------- */

.filter-row { gap: 8px; margin-bottom: 16px; }

.filter-row select,
.filter-row input[type="search"] {
  font-size: 13.5px;
  padding: 9px 13px;
  box-shadow: var(--shadow-flat);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* Keep clear of the chevron drawn in the select background. */
.filter-row select { padding-right: 32px; }

.filter-row select:hover,
.filter-row input[type="search"]:hover { border-color: #B5AFA2; }

/* The search field was taking the whole remaining width, which made the two
   selects next to it look like an afterthought. */
.filter-row input[type="search"] { flex: 1 1 260px; max-width: 460px; }

.result-count { margin-left: auto; font-size: 12.5px; color: var(--text-light); }

/* ---- 14. HOW THIS PAGE WORKS ------------------------------------------- */
/* A flat navy slab with a 4px gold stripe was the first and heaviest thing on
   the Answers page, so the page led with its instructions rather than its
   content. Same words, same position, given some depth and pulled back so the
   answers below it read as the main event. */

.howto {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 120px),
    var(--sv-navy);
  border: 1px solid rgba(176,141,79,0.35);
  border-left: 3px solid var(--sv-gold);
  border-radius: var(--r-card);
  padding: 18px 22px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.06);
  max-width: 74ch;
}

.howto-title { font-size: 10.5px; letter-spacing: 0.13em; margin-bottom: 10px; }
.howto-lead  { font-size: 13.5px; color: rgba(255,255,255,0.90); }
.howto-step  { font-size: 13px; }

.howto-num {
  background: var(--sv-yellow);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.25);
  font-variant-numeric: tabular-nums;
}

.howto-note {
  font-size: 12.5px;
  color: rgba(255,255,255,0.70);
  border-top-color: rgba(255,255,255,0.12);
}

/* ---- 15. ANSWER ROWS --------------------------------------------------- */

.row {
  border-radius: var(--r-card);
  padding: 15px 18px;
  box-shadow: var(--shadow-flat);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.row:hover {
  border-color: rgba(176,141,79,0.55);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.row.sel {
  border-color: var(--sv-navy);
  box-shadow: 0 0 0 2px rgba(11,27,43,0.14), var(--shadow-card);
  transform: none;
}

.row-q { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; }
.row-meta { font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* The status chips ran down the right edge at four different widths, so every
   row ended on a ragged margin. Right aligned and spaced as one group. */
.row-right { gap: 5px; align-items: flex-end; }
.row-hist { text-decoration: none; border-bottom: 1px solid rgba(99,93,78,0.35); }
.row-hist:hover { color: var(--sv-navy); border-bottom-color: var(--sv-navy); }

/* ---- 16. SIDEBAR ------------------------------------------------------- */

.sidebar { width: 232px; padding: 20px 14px; }

.slabel { font-size: 10px; letter-spacing: 0.13em; color: var(--text-light); }

.sitem {
  font-size: 13.5px;
  border-radius: var(--r-control);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.sitem.on { box-shadow: var(--shadow-flat); }

.n { font-variant-numeric: tabular-nums; border-radius: var(--r-pill); }

/* ---- 17. NEW ANSWER BUTTON --------------------------------------------- */

.btn-new {
  border-radius: var(--r-control);
  box-shadow: 0 1px 2px rgba(122,98,0,0.20), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn-new:hover { box-shadow: 0 2px 6px rgba(122,98,0,0.26), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn-new:active { transform: translateY(1px); }

/* ---- 18. EDITOR PANEL -------------------------------------------------- */

.panel { box-shadow: -1px 0 0 rgba(11,27,43,0.04), -8px 0 24px rgba(74,62,38,0.05); }

.panel-empty { max-width: 30ch; margin-inline: auto; line-height: 1.6; }

/* ---- 19. STAFF TABLE --------------------------------------------------- */
/* Re-invite and Reset 2FA were two inline buttons in a cell with no width
   rule, so they wrapped onto separate lines and made every row twice as tall
   as it needed to be. */

.td-action {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}

.td-action .btn-secondary { font-size: 12.5px; padding: 6px 12px; }

/* Headers now sit over the thing they name. */
thead th:last-child { text-align: right; }

.badge-admin { font-size: 10.5px; letter-spacing: 0.02em; }

/* The little page permissions read as one group per person rather than a
   scatter of separate chips. */
.pill { font-size: 11px; padding: 3px 9px; }

.toggle-track { box-shadow: inset 0 1px 2px rgba(11,27,43,0.14); }
.toggle-track::after { box-shadow: 0 1px 2px rgba(11,27,43,0.25); }
.toggle input:focus-visible + .toggle-track { box-shadow: var(--focus-ring); }


/* Key moments under the call player (19-08-2026) */
.moments { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.moment {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--panel, #fff); border: 1px solid var(--line, #e3e8ee);
  border-radius: 10px; font: inherit; color: inherit;
  transition: border-color .15s, background .15s;
}
.moment:hover { border-color: var(--gold, #b0894a); }
.moment.on { border-color: var(--gold, #b0894a); background: rgba(176,137,74,.08); }
.moment-t {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 13px; color: var(--gold, #b0894a); padding-top: 1px;
}
.moment-l { font-size: 14px; line-height: 1.4; }
.liked-line { margin-bottom: 10px; font-weight: 600; }

/* 08-09-2026 GUEST (read-only demo view for a developer's own code) */
.guest .nav-signout { display: none; }
.guest #btnSaveDraft, .guest #btnPublish, .guest .preview-block, .guest #btnSpeak, .guest .speak-hint, .guest #prevGateNote, .guest #btnNew { display: none !important; }
.guest #statusBtns, .guest .note-add-wrap, .guest #cardDelete { display: none !important; }
.guest-note { margin: 12px 0 14px; padding: 10px 14px; border-radius: 10px; background: #FFF6E5; color: #6E5A2E; font-size: 14px; line-height: 1.45; }