/* ============================================================
   Simchas Booking Platform — Premium Luxury Design System (§1)
   English-only, LTR. Royal Purple & Deep Indigo + Metallic Gold.
   ============================================================ */
:root {
  /* Colors - Dark Theme (Default) */
  --primary-indigo: #251c16; /* Deep espresso/dark brown */
  --primary-purple: #5c3826; /* Rich warm chocolate */
  --secondary-blue: #8c5230; /* Cognac/chestnut accent */
  --accent-gold: linear-gradient(135deg, #fef08a 0%, #facc15 50%, #ca8a04 100%);
  --accent-gold-solid: #ca8a04;
  --gold-bright: #facc15;
  --glass-bg: rgba(37, 28, 22, 0.45); /* derived from #251c16 */
  --glass-border: rgba(250, 204, 21, 0.2);
  --bg-deep: #15100c; /* rich dark espresso black-brown */
  --text: #fcfbfa; /* warm ivory white */
  --text-dim: #c8bbae; /* warm sand gray */
  --danger: #8c2519;
  --success: #34d399;
  --warning: #f59e0b;   /* hold/attention amber — pair with color-mix tints */
  --radius: 16px;

  /* Type & rhythm scale (M40). The canonical steps for the inline styles the
     templates carry — caption 11 / meta 12 / body-sm 13 / body 14 / h3 16.
     Half-pixel sizes (12.5px…) are banned: snap to the nearest step. */
  --fs-caption: 11px;
  --fs-meta: 12px;
  --fs-body-sm: 13px;
  --fs-body: 14px;
  --fs-h3: 16px;
  --lh-body: 1.6;
  /* Sticky offsets: anything sticky below the top nav offsets by this. */
  --nav-h: 62px;
  /* Gold that is safe as TEXT in both themes (light --gold-bright is ~2.3:1
     on cream — fills only). Dark keeps the bright gold. */
  --gold-text: var(--gold-bright);
  
  /* Fonts */
  --font-ui: "Mulish", "Outfit", "Inter", system-ui, sans-serif;
  --font-serif: "Fraunces", "Tinos", Georgia, serif;

  /* Button Overrides */
  --btn-default-bg: rgba(255, 255, 255, 0.06);
  --btn-default-border: transparent;
  --btn-default-hover-bg: rgba(255, 255, 255, 0.12);
  --btn-default-color: var(--text);
  
  --btn-ghost-bg: transparent;
  --btn-ghost-border: var(--glass-border);
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.04);

  /* Button Shadows */
  --btn-primary-shadow: 0 4px 15px rgba(92, 56, 38, 0.4);
  --btn-primary-hover-shadow: 0 6px 24px rgba(92, 56, 38, 0.55);
  --btn-gold-shadow: none;
  --btn-gold-hover-shadow: 0 4px 15px rgba(250, 204, 21, 0.25);

  /* Navigation Bar */
  --nav-bg: rgba(21, 16, 12, 0.75); /* derived from bg-deep #15100c */
  --nav-border: var(--glass-border);
  --nav-link-color: var(--text-dim);
  --nav-link-hover-color: var(--gold-bright);

  /* Shadows & elevation */
  --card-shadow: none;
  --card-hover-shadow: 0 12px 40px rgba(92, 56, 38, 0.25);
  --card-hover-border: rgba(250, 204, 21, 0.45);

  /* Gold Text Gradient */
  --gold-text-bg: var(--accent-gold);

  /* Tables */
  --table-border: rgba(255, 255, 255, 0.07);
  --table-hover-bg: rgba(255, 255, 255, 0.02);

  /* Badges */
  --badge-hold-bg: rgba(245, 158, 11, 0.18);
  --badge-hold-color: var(--gold-bright);
  --badge-hold-border: rgba(250, 204, 21, 0.2);
  --badge-confirmed-bg: rgba(52, 211, 153, 0.18);
  --badge-confirmed-color: var(--success);
  --badge-confirmed-border: rgba(52, 211, 153, 0.2);
  --badge-cancelled-bg: rgba(140, 37, 25, 0.18);
  --badge-cancelled-color: var(--danger);
  --badge-cancelled-border: rgba(140, 37, 25, 0.2);

  /* Forms */
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: var(--glass-border);
  --input-focus-border: var(--gold-bright);
  --input-focus-shadow: rgba(250, 204, 21, 0.15);

  /* Calendar */
  --cal-day-bg: rgba(255, 255, 255, 0.04);
  --cal-day-avail-bg: rgba(255, 255, 255, 0.09); /* slightly whiter/brighter background for empty available days in dark mode */
  --cal-day-border: rgba(255, 255, 255, 0.06);
  --cal-day-shabbos-bg: rgba(92, 56, 38, 0.18); /* warm chocolate tone for shabbos */

  /* Aliases referenced across the JS templates. Values are var() references,
     so they resolve at usage time and follow the light-theme overrides. */
  --muted: var(--text-dim);
  --glass: var(--glass-bg);
  --gold-dim: color-mix(in srgb, var(--gold-bright) 18%, transparent);
}

/* ---- Light theme overrides ---- */
[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(92, 56, 38, 0.15);
  --bg-deep: #faf8f5; /* warm cream/ivory */
  --text: #2c1c14; /* deep chocolate brown */
  --text-dim: #756256; /* warm mocha grey */

  /* Bright gold for button backgrounds in light theme */
  --accent-gold: linear-gradient(135deg, #fef08a 0%, #eab308 50%, #ca8a04 100%);
  --accent-gold-solid: #ca8a04;
  --gold-bright: #eab308;

  /* Button style adjustments */
  --btn-default-bg: rgba(92, 56, 38, 0.06);
  --btn-default-border: rgba(92, 56, 38, 0.15);
  --btn-default-hover-bg: rgba(92, 56, 38, 0.12);
  --btn-default-color: var(--text);

  --btn-ghost-bg: rgba(0, 0, 0, 0.02);
  --btn-ghost-border: rgba(92, 56, 38, 0.22);
  --btn-ghost-hover-bg: rgba(92, 56, 38, 0.06);

  /* Refined, softer shadows for light theme buttons */
  --btn-primary-shadow: 0 4px 12px rgba(92, 56, 38, 0.12);
  --btn-primary-hover-shadow: 0 6px 20px rgba(92, 56, 38, 0.22);
  --btn-gold-shadow: 0 4px 12px rgba(234, 179, 8, 0.15);
  --btn-gold-hover-shadow: 0 6px 18px rgba(234, 179, 8, 0.25);

  /* Navigation Bar adjustments */
  --nav-bg: rgba(250, 246, 240, 0.85);
  --nav-border: rgba(92, 56, 38, 0.1);
  --nav-link-color: var(--text-dim);
  --nav-link-hover-color: var(--accent-gold-solid);

  /* Soft shadow depth instead of glowing colors */
  --card-shadow: 0 8px 30px rgba(92, 56, 38, 0.04);
  --card-hover-shadow: 0 16px 40px rgba(92, 56, 38, 0.08);
  --card-hover-border: rgba(92, 56, 38, 0.32);

  /* High contrast gold text gradient for light background */
  --gold-text-bg: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);

  /* Tables */
  --table-border: rgba(92, 56, 38, 0.08);
  --table-hover-bg: rgba(92, 56, 38, 0.03);

  /* Higher contrast status badges for light backgrounds */
  --badge-hold-bg: rgba(234, 179, 8, 0.12);
  --badge-hold-color: #b45309;
  --badge-hold-border: rgba(234, 179, 8, 0.15);
  --badge-confirmed-bg: rgba(4, 120, 87, 0.1);
  --badge-confirmed-color: #047857;
  --badge-confirmed-border: rgba(4, 120, 87, 0.15);
  --badge-cancelled-bg: rgba(185, 28, 28, 0.1);
  --badge-cancelled-color: #b91c1c;
  --badge-cancelled-border: rgba(185, 28, 28, 0.15);
  --danger: #b91c1c;

  /* Form elements */
  --input-bg: rgba(0, 0, 0, 0.02);
  --input-border: rgba(92, 56, 38, 0.15);
  --input-focus-border: var(--primary-purple);
  --input-focus-shadow: rgba(92, 56, 38, 0.1);

  /* Calendar */
  --cal-day-bg: rgba(92, 56, 38, 0.02);
  --cal-day-avail-bg: #ffffff; /* whiter background for empty available days in light mode */
  --cal-day-border: rgba(92, 56, 38, 0.08);
  --cal-day-shabbos-bg: rgba(92, 56, 38, 0.06);

  /* M40: these existed only in :root — light mode was rendering the DARK
     mint/amber on cream. Match the light badge colors. */
  --success: #047857;
  --warning: #b45309;
  /* Gold as TEXT needs the darker solid in light mode (fills keep --gold-bright). */
  --gold-text: #b45309;
}

[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(146, 64, 14, 0.04), transparent),
    radial-gradient(900px 500px at -10% 110%, rgba(180, 83, 9, 0.03), transparent),
    var(--bg-deep);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
[data-theme="light"] a { color: #854d0e; }

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 999px;
  border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-purple);
}

/* ---- Base Reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(146, 64, 14, 0.25), transparent),
    radial-gradient(900px 500px at -10% 110%, rgba(180, 83, 9, 0.15), transparent),
    var(--bg-deep);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  line-height: 1.5;
  transition: background 0.3s ease, color 0.3s ease;
}
a {
  color: var(--secondary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--gold-bright);
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* M40: bare h3s fell to the ~18.7px browser default while inline-styled
   siblings pinned 15-16px — one canonical card-heading size. */
h3 { font-size: var(--fs-h3); }

/* Keyboard focus (M40): the primary controls had no :focus-visible at all —
   a shared gold ring, matching what .cal-day/.hero-dot already do. */
.btn:focus-visible, .tab-btn:focus-visible, a:focus-visible,
.input:focus-visible, .nav-search-btn:focus-visible,
.nav-search-input:focus-visible, .nav-search-mobile:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* Gold gradient text for hero/special titles */
.gold-text {
  background: var(--gold-text-bg);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-gold-solid);
}

/* ---- Layout ---- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.app-main { padding: 28px 0 64px; }

/* ---- Top nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 62px; padding: 0 40px; }
.nav-inner > *:first-child { justify-self: start; }
.nav-inner > *:nth-child(2) { justify-self: center; }
.nav-inner > *:nth-child(3) { justify-self: end; }
.brand {
  font-weight: 800;
  font-size: 20px;
  animation: brandGleam 6s infinite ease-in-out;
}
.nav-links { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.nav-links a {
  color: var(--nav-link-color);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.nav-links a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--nav-link-hover-color);
}
[data-theme="light"] .nav-links a:hover {
  background: rgba(92, 56, 38, 0.05);
}
.nav-links a.active {
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.25);
  color: var(--gold-bright);
}
[data-theme="light"] .nav-links a.active {
  background: rgba(133, 77, 14, 0.08);
  border-color: rgba(133, 77, 14, 0.2);
  color: var(--accent-gold-solid);
}

/* Right-side utility cluster (search · inbox · help): icon tools, kept visually
   distinct from the centred text destinations so the bar reads as "pages | tools". */
.nav-util-group { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.nav-util { color: var(--nav-link-color); transition: color 0.2s ease, background 0.2s ease; }
.nav-util:hover { color: var(--gold-bright); background: rgba(255, 255, 255, 0.06); }
[data-theme="light"] .nav-util:hover { background: rgba(92, 56, 38, 0.06); }
.nav-util.active { color: var(--gold-bright); background: rgba(250, 204, 21, 0.12); }
[data-theme="light"] .nav-util.active { background: rgba(133, 77, 14, 0.1); }

/* ---- Glass cards ---- */
.card {
  /* The default card is calm: a faint warm top gradient + a soft hover glow — NO accent
     bar. Accent treatments are reserved for specific card families so the UI stays varied
     instead of every card wearing the same side stripe:
       · settings section cards → a left tinted bar
       · Manage/Settings hub boxes → a top ribbon
       · stat / KPI cards → a bottom meter bar + corner glow
       · marketplace/visual cards → a gradient bar + diagonal sheen
       · modals → a top banner */
  --accent: #b4882a;
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 150px), var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--card-shadow);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--glass-border));
  box-shadow: 0 14px 36px -22px color-mix(in srgb, var(--accent) 45%, transparent), var(--card-shadow);
}
a.card, .card-interactive {
  cursor: pointer;
  text-decoration: none;
}
a.card:hover, .card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px -18px color-mix(in srgb, var(--accent) 65%, transparent), var(--card-hover-shadow);
  border-color: var(--card-hover-border);
}
.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Stat / KPI cards ---- */
.stat .label {
  color: var(--text-dim);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat .value {
  font-size: 34px;
  font-weight: 800;
  margin-top: 6px;
}
/* A distinct KPI look (NOT the left ribbon): a soft corner glow + a bottom accent
   "meter" bar that widens on hover, with a gentle lift. Each card's --accent tints
   the glow and bar; themed dashboard stats colour-match their badge. */
.card.stat {
  --accent: #b4882a;
  overflow: hidden;
  background: radial-gradient(135% 135% at 100% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 56%), var(--glass-bg);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.card.stat::before {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 0; top: auto;
  width: auto; height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
  transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1), right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card.stat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--glass-border));
  box-shadow: 0 16px 38px -20px color-mix(in srgb, var(--accent) 55%, transparent), var(--card-shadow);
}
.card.stat:hover::before { left: 8px; right: 8px; }
.card.stat .value { margin-top: 8px; line-height: 1; }
.stat-hold { --accent: var(--badge-hold-color); }
.stat-confirmed { --accent: var(--badge-confirmed-color); }
/* Outstanding = money still to collect — normal business, so amber, not the
   cancelled/danger red (red is reserved for genuinely overdue/negative). */
.stat-outstanding { --accent: var(--badge-hold-color); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 44px; padding: 10px 20px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 15px;
  border: 1px solid var(--btn-default-border);
  background: var(--btn-default-bg);
  color: var(--btn-default-color) !important;
  transition: transform 0.12s ease, box-shadow 0.3s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.btn:not(.btn-primary):not(.btn-gold):not(.btn-ghost):hover {
  background: var(--btn-default-hover-bg);
  box-shadow: 0 4px 12px rgba(92, 56, 38, 0.05);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-blue));
  background-repeat: no-repeat;
  background-origin: border-box;
  color: #ffffff !important;
  border: 1px solid transparent;
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover {
  box-shadow: var(--btn-primary-hover-shadow);
  filter: brightness(1.08);
}
.btn-gold {
  background: var(--accent-gold);
  background-repeat: no-repeat;
  background-origin: border-box;
  color: #1a1300 !important;
  border: 1px solid transparent;
  box-shadow: var(--btn-gold-shadow);
}
.btn-gold:hover {
  filter: brightness(1.08);
  box-shadow: var(--btn-gold-hover-shadow);
}
.btn-ghost {
  background: var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
  color: var(--text) !important;
}
.btn-ghost:hover {
  background: var(--btn-ghost-hover-bg);
}
.btn-danger {
  background: var(--danger);
  color: #ffffff !important;
  border: 1px solid transparent;
}
.btn-danger:hover {
  filter: brightness(1.08);
}
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* Metallic Shine sweep effect on hover */
.btn-gold::after, .btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 50%; height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}
.btn-gold:hover::after, .btn-primary:hover::after {
  left: 150%;
  transition: left 0.75s ease;
}

/* ---- Forms ---- */
.field { display: block; margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.input {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-family: inherit; font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.input:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
  transform: scale(1.006);
}
.input::placeholder {
  color: var(--text-dim);
  opacity: 0.5;
}

/* ---- Name fields — a name is a headline, not a plain box ----------------
   Every primary "name" input across the app — entity names (name="name",
   "hall", "hallName") and people's names (first/last/company) — sheds the
   boxed .input look for a large, bold headline that grows a gold underline
   on focus, matching the event title (.editable-header-input) and the
   floor-plan room name (.fp-tot-head). Scoped to <input> so the hall-picker
   <select name="hall"> keeps its box, and keyed by field name so the look
   stays consistent across every form — current and future. */
input.input[name="name"],
input.input[name="first_name"],
input.input[name="last_name"],
input.input[name="company"],
input.input[name="hall"],
input.input[name="hallName"] {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px dashed transparent;
  min-height: 0;
  padding: 4px 2px;
}
input.input[name="name"]:hover,
input.input[name="first_name"]:hover,
input.input[name="last_name"]:hover,
input.input[name="company"]:hover,
input.input[name="hall"]:hover,
input.input[name="hallName"]:hover {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
[data-theme="light"] input.input[name="name"]:hover,
[data-theme="light"] input.input[name="first_name"]:hover,
[data-theme="light"] input.input[name="last_name"]:hover,
[data-theme="light"] input.input[name="company"]:hover,
[data-theme="light"] input.input[name="hall"]:hover,
[data-theme="light"] input.input[name="hallName"]:hover {
  border-bottom-color: rgba(92, 56, 38, 0.2);
}
input.input[name="name"]:focus,
input.input[name="first_name"]:focus,
input.input[name="last_name"]:focus,
input.input[name="company"]:focus,
input.input[name="hall"]:focus,
input.input[name="hallName"]:focus {
  outline: none;
  border-bottom-color: var(--gold-bright);
  border-bottom-style: solid;
  background: rgba(250, 204, 21, 0.06);
  box-shadow: none;
  transform: none;
}
input.input[name="name"]::placeholder,
input.input[name="first_name"]::placeholder,
input.input[name="last_name"]::placeholder,
input.input[name="company"]::placeholder,
input.input[name="hall"]::placeholder,
input.input[name="hallName"]::placeholder {
  font-weight: 600;
  opacity: 0.45;
}

/* ---- List search + sort toolbar (sits next to a page's "+ Add" button) ---- */
.list-tools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-search {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-dim); cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.list-search:focus-within {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}
.list-search .icon-svg { flex-shrink: 0; opacity: 0.6; }
.list-search-input {
  border: none; background: transparent; outline: none; padding: 0;
  color: var(--text); font-family: inherit; font-size: 15px;
  min-height: 42px; width: 170px; max-width: 48vw;
}
.list-search-input::placeholder { color: var(--text-dim); opacity: 0.6; }
.list-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.list-sort-select { width: auto; min-width: 0; max-width: 220px; }
@media (max-width: 560px) {
  .list-tools { width: 100%; }
  .list-search { flex: 1 1 auto; }
  .list-search-input { width: auto; flex: 1 1 auto; max-width: none; }
}

/* ---- Custom Checkboxes ---- */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  margin: 0;
}

input[type="checkbox"]:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

input[type="checkbox"]:checked {
  background: var(--accent-gold);
  border-color: var(--accent-gold-solid);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #15100c;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
[data-theme="light"] input[type="checkbox"]:checked::after {
  border-color: #faf8f5;
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: rgba(255, 255, 255, 0.02);
  border-color: var(--glass-border);
}

[data-theme="light"] input[type="checkbox"]:disabled {
  background-color: rgba(0, 0, 0, 0.03);
}

/* ---- Tables ---- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 6px 0;
}
.table th, .table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--table-border);
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.table th {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--table-border);
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .table th {
  background: rgba(92, 56, 38, 0.02);
}
.table th:first-child {
  border-top-left-radius: 8px;
}
.table th:last-child {
  border-top-right-radius: 8px;
}
.table tbody tr {
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.table tr:hover td {
  background: var(--table-hover-bg) !important;
}
.table tbody tr td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.table tbody tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.table tbody tr:last-child td {
  border-bottom: none;
}
.table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.01);
}
[data-theme="light"] .table tbody tr:nth-child(even) {
  background-color: rgba(92, 56, 38, 0.005);
}
/* Clickable rows: on hover the whole row gets a thin gold border (rounded at the row's
   ends). A transparent border is reserved at rest so nothing shifts. */
.table tbody tr[class*="clickable"] td {
  border-top: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.table tbody tr[class*="clickable"] td:first-child { border-left: 1px solid transparent; }
.table tbody tr[class*="clickable"] td:last-child { border-right: 1px solid transparent; }
/* the last row drops its bottom border by default — give clickable last rows a reserved
   transparent one so the hover outline closes at the bottom instead of being open. */
.table tbody tr[class*="clickable"]:last-child td { border-bottom: 1px solid transparent; }
/* Empty-state cells (the "Nothing yet" rows use a single td[colspan]) read as a proper
   centered placeholder rather than a cramped left-aligned cell. */
.table td[colspan] {
  text-align: center;
  padding: 30px 16px;
  color: var(--text-dim);
}

/* ---- Auth (login / signup / reset): a calm, centered, branded card ---- */
.auth-wrap { max-width: 440px; padding-top: 64px; }
.auth-card { text-align: center; padding: 34px 30px; }
.auth-card::before { display: none; } /* no left stripe — the badge is the accent */
.auth-card:hover { box-shadow: var(--card-shadow); border-color: var(--glass-border); }
.auth-badge {
  width: 56px; height: 56px; border-radius: 16px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-bright), #8a6a1f);
  box-shadow: 0 12px 28px -8px rgba(180, 136, 42, 0.6);
}
.auth-title { margin: 0; font-family: var(--font-serif); font-size: 30px; font-weight: 700; }
.auth-sub { margin: 6px 0 0; font-size: 13px; }
.auth-card form { text-align: left; }
.table tbody tr[class*="clickable"]:hover td {
  border-top-color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}
.table tbody tr[class*="clickable"]:hover td:first-child { border-left-color: var(--gold-bright); }
.table tbody tr[class*="clickable"]:hover td:last-child { border-right-color: var(--gold-bright); }

/* ---- Badges (status) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.badge-hold {
  background: var(--badge-hold-bg);
  color: var(--badge-hold-color);
  animation: goldPulse 2.2s infinite;
}
.badge-hold::before {
  animation: badgeDotPulse 1.8s infinite ease-in-out;
}
.badge-confirmed {
  background: var(--badge-confirmed-bg);
  color: var(--badge-confirmed-color);
}
.badge-cancelled {
  background: var(--badge-cancelled-bg);
  color: var(--badge-cancelled-color);
}
@keyframes badgeDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

/* ---- Hero / public ---- */
.hero-wrapper {
  position: relative;
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--glass-border);
}
.hero-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: right center;
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.hero-bg-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(92, 56, 38, 0.25) 0%, rgba(37, 28, 22, 0.45) 100%);
  mix-blend-mode: color-burn;
  pointer-events: none;
}
[data-theme="light"] .hero-bg-slide::before {
  background: linear-gradient(135deg, rgba(140, 82, 48, 0.1) 0%, rgba(234, 179, 8, 0.05) 100%);
  mix-blend-mode: multiply;
}
.hero-bg-slide.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}
.hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right, 
    var(--bg-deep) 0%, 
    var(--bg-deep) 35%, 
    rgba(21, 16, 12, 0.65) 70%, 
    rgba(21, 16, 12, 0.1) 100%
  );
}
[data-theme="light"] .hero-bg-overlay {
  background: linear-gradient(to right, 
    var(--bg-deep) 0%, 
    var(--bg-deep) 35%, 
    rgba(250, 248, 245, 0.65) 70%, 
    rgba(250, 248, 245, 0.1) 100%
  );
}
@media (max-width: 768px) {
  .hero-wrapper {
    min-height: auto;
  }
  .hero-bg-overlay {
    background: linear-gradient(to bottom,
      var(--bg-deep) 0%,
      rgba(21, 16, 12, 0.85) 50%,
      var(--bg-deep) 100%
    );
  }
  [data-theme="light"] .hero-bg-overlay {
    background: linear-gradient(to bottom,
      var(--bg-deep) 0%,
      rgba(250, 248, 245, 0.85) 50%,
      var(--bg-deep) 100%
    );
  }
}

/* ==== Landing (M44 full rewrite): one message, calm sections, scroll reveals ==== */
.landing { overflow-x: clip; }
.l-hero {
  position: relative; min-height: 74vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 92px 16px 80px;
  border-bottom: 1px solid var(--glass-border);
}
.l-hero-bg { position: absolute; inset: 0; background: url("/simcha_hall.webp") center / cover no-repeat; }
.l-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-deep) 72%, transparent) 0%,
    color-mix(in srgb, var(--bg-deep) 86%, transparent) 55%,
    var(--bg-deep) 100%);
}
.l-hero-inner { position: relative; z-index: 1; max-width: 780px; animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.l-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 14px; }
.l-hero h1 { font-family: var(--font-serif); font-size: clamp(38px, 6.4vw, 66px); line-height: 1.07; letter-spacing: 0.2px; margin: 0; }
.l-sub { color: var(--text-dim); font-size: clamp(15px, 2vw, 17.5px); line-height: 1.65; max-width: 580px; margin: 18px auto 0; }
.l-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.l-cta .btn { height: 46px; padding: 0 24px; font-size: 14.5px; display: inline-flex; align-items: center; }
.l-note { color: var(--text-dim); font-size: 12.5px; margin: 14px 0 0; }
.l-section { padding: 68px 0 0; }
.l-h2 { font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 36px); text-align: center; margin: 0; }
.l-lead { color: var(--text-dim); text-align: center; max-width: 620px; margin: 12px auto 0; line-height: 1.65; }
/* Three value points — borderless, centered, airy. */
.l-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; text-align: center; }
.l-point-ic {
  width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center;
  font-size: 22px; border-radius: 16px;
  color: var(--gold-text);
  background: color-mix(in srgb, var(--gold-bright) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-bright) 22%, transparent);
}
.l-point-ic svg { width: 22px !important; height: 22px !important; }
.l-point h3 { font-size: 16.5px; margin: 14px 0 6px; }
.l-point p { color: var(--text-dim); font-size: 14px; line-height: 1.65; margin: 0 auto; max-width: 300px; }
/* The four parties — slim glass rows, two-up. */
.l-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.l-party {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border: 1px solid var(--glass-border); border-radius: 16px;
  background: var(--glass-bg);
}
.l-party-ic {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; color: var(--gold-text);
  background: color-mix(in srgb, var(--gold-bright) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-bright) 22%, transparent);
}
.l-party-ic svg { width: 18px !important; height: 18px !important; }
.l-party h3 { margin: 0; font-size: 15.5px; }
.l-party p { margin: 5px 0 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }
/* Clickable panels (M44): every point, party row and peek panel deep-links
   into the sandbox at the thing it shows. The "Try it →" hint is always
   visible (no hover-only affordance on touch), brightening on hover. */
.l-link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease; }
.l-link:hover { transform: translateY(-3px); }
.l-party.l-link:hover { border-color: color-mix(in srgb, var(--gold-bright) 45%, var(--glass-border)); box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.6); }
.l-try { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--gold-text); opacity: 0.75; transition: opacity 0.2s ease; }
.l-link:hover .l-try { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .l-link:hover { transform: none; } }

/* "Not a hall?" — two quiet pills. */
.l-roles { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.l-role {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  color: var(--text); text-decoration: none; font-size: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.l-role:hover { border-color: var(--gold-bright); transform: translateY(-2px); }
.l-role-ic { display: inline-flex; line-height: 0; color: var(--gold-text); }
.l-close { padding-bottom: 12px; }

/* "Sound familiar?" — the four office pains, two-up glass cards. */
.l-pains { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.l-pain {
  padding: 20px 22px; border: 1px solid var(--glass-border); border-radius: 16px;
  background: var(--glass-bg);
}
.l-pain-ic {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; color: var(--gold-text);
  background: color-mix(in srgb, var(--gold-bright) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-bright) 22%, transparent);
}
.l-pain-ic svg { width: 18px !important; height: 18px !important; }
.l-pain h3 { font-size: 15.5px; margin: 12px 0 5px; }
.l-pain p { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.65; }

/* Three numbered steps on a gold thread. */
.l-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 36px; }
.l-steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-bright) 30%, transparent), transparent);
}
.l-step { position: relative; }
.l-step-n {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-serif); font-size: 17px; color: var(--gold-text);
  background: var(--bg-deep);
  border: 1px solid color-mix(in srgb, var(--gold-bright) 35%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--gold-bright) 18%, transparent);
}
.l-step h3 { font-size: 16.5px; margin: 16px 0 6px; }
.l-step p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.65; }

/* Spotlight: one strong card for the family link, gold glow from the corner. */
.l-spot {
  position: relative; overflow: hidden; margin-top: 30px;
  padding: 34px; border-radius: 20px;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  background-image: radial-gradient(ellipse 70% 90% at 85% 10%,
    color-mix(in srgb, var(--gold-bright) 10%, transparent), transparent 60%);
}
.l-spot-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 34px; align-items: center; }
.l-spot h2 { font-family: var(--font-serif); font-size: clamp(24px, 3.2vw, 32px); line-height: 1.15; margin: 0; }
.l-check { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.l-check li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; }
.l-check-ic { flex: none; margin-top: 2px; color: var(--gold-text); }
.l-mini {
  border: 1px solid var(--glass-border); border-radius: 14px; padding: 16px 18px;
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
}
.l-mini + .l-mini { margin-top: 12px; }
.l-mini-label { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.l-mini-chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--glass-border);
}
.l-mini-chip-gold { border-color: var(--gold-dim); color: var(--gold-text); }

/* FAQ — a quiet accordion of the questions halls actually ask. */
.l-faq { max-width: 720px; margin: 26px auto 0; display: grid; gap: 10px; }
.l-faq details { border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); }
.l-faq summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  font-size: 14.5px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; flex: none; font-size: 18px; line-height: 1; color: var(--gold-text); transition: transform 0.25s ease; }
.l-faq details[open] summary::after { transform: rotate(45deg); }
.l-faq details > p { margin: 0; padding: 0 18px 16px; color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }

/* Closing CTA — one glowing card instead of a bare headline. */
.l-close-card {
  position: relative; overflow: hidden; text-align: center;
  padding: 46px 28px 42px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 30%, var(--glass-border));
  background: var(--glass-bg);
  background-image: radial-gradient(ellipse 60% 100% at 50% 0%,
    color-mix(in srgb, var(--gold-bright) 12%, transparent), transparent 65%);
}

/* "A peek inside" — a cover-flow carousel of faux app windows.
   The screens STACK IN ONE GRID CELL rather than being absolutely positioned:
   the stage is then exactly as tall as its tallest screen, at every width, so
   nothing is clipped and no hard-coded height has to be kept in sync. */
.l-shots { position: relative; margin-top: 32px; user-select: none; }
.l-shots-stage {
  position: relative; width: 100%; max-width: 900px; margin: 0 auto;
  /* minmax(0, 1fr), not the implicit `auto` track: an auto track sizes to the
     widest screen's max-content and would overflow the viewport on a phone. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center; justify-items: center;
  perspective: 1400px;
}
.l-shot-item {
  grid-area: 1 / 1;
  width: 100%; max-width: 660px; min-width: 0;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.l-shot-item.is-active {
  transform: none; opacity: 1; z-index: 10; cursor: default; filter: none;
}
.l-shot-item.is-active .l-shot-win {
  border-color: color-mix(in srgb, var(--gold-bright) 55%, var(--glass-border));
  box-shadow: 0 26px 65px -15px rgba(0, 0, 0, 0.55), 0 0 25px rgba(250, 204, 21, 0.12);
}
.l-shot-item.is-prev {
  transform: translateX(-42%) rotateY(16deg) scale(0.82);
  opacity: 0.42; z-index: 5; filter: blur(1px);
}
.l-shot-item.is-next {
  transform: translateX(42%) rotateY(-16deg) scale(0.82);
  opacity: 0.42; z-index: 5; filter: blur(1px);
}
.l-shot-item.is-hidden {
  transform: scale(0.65); opacity: 0; z-index: 1; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .l-shot-item { transition: none; }
}
.l-shot-win {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-deep) 75%, #18153b);
  box-shadow: 0 20px 40px -25px rgba(0, 0, 0, 0.65);
}
.l-shot-win:hover { border-color: color-mix(in srgb, var(--gold-bright) 45%, var(--glass-border)); }
.l-shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--glass-border); background: rgba(0,0,0,0.25); }
.l-shot-light { width: 9px; height: 9px; border-radius: 50%; opacity: 0.85; }
.l-shot-title { margin-left: 8px; font-size: 11.5px; color: var(--text-dim); }
.l-shot-body { display: flex; align-items: stretch; min-height: 270px; }
.l-shot-side {
  flex: 0 0 128px; padding: 12px 10px;
  border-right: 1px solid var(--glass-border);
  display: flex; flex-direction: column; gap: 2px; background: rgba(0,0,0,0.15);
}
.l-shot-brand { margin: 0 0 10px; font-family: var(--font-serif); font-size: 12px; color: var(--gold-text); }
.l-shot-it { font-size: 11.5px; color: var(--text-dim); padding: 5px 8px; border-radius: 8px; }
.l-shot-it.on { color: var(--gold-text); background: color-mix(in srgb, var(--gold-bright) 10%, transparent); }
.l-shot-main { flex: 1; min-width: 0; padding: 14px 16px; text-align: left; }
.l-shot-card {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-deep) 45%, transparent);
}
.l-shot-line { margin: 4px 0 0; font-size: 11.5px; color: var(--text-dim); }
.l-shot-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 8px; }
.l-shot-day {
  position: relative; aspect-ratio: 5 / 4; padding: 3px 4px;
  border: 1px solid var(--glass-border); border-radius: 6px;
  font-size: 10px; color: var(--text-dim);
}
.l-shot-day span { display: block; line-height: 1.1; }
.l-shot-day i { display: block; font-style: normal; font-size: 7.5px; opacity: 0.7; line-height: 1.2; }
.l-shot-day u { display: block; text-decoration: none; font-size: 7.5px; color: var(--gold-text); }
.l-shot-day.tov { background: color-mix(in srgb, var(--gold-bright) 7%, transparent); }
.l-shot-day b { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 4px; border-radius: 2px; }
.l-shot-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.l-shot-tile { padding: 9px 11px; border: 1px solid var(--glass-border); border-radius: 10px; }
.l-shot-tile i { display: block; font-style: normal; font-size: 10px; color: var(--text-dim); }
.l-shot-tile b { display: block; margin-top: 2px; font-size: 16px; }
.l-shot-bars { display: flex; gap: 10px; align-items: flex-end; margin-top: 8px; height: 100px; }
.l-shot-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.l-shot-bars b { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: var(--gold-bright); opacity: 0.85; }
.l-shot-bars i { font-style: normal; font-size: 9px; color: var(--text-dim); }

.l-shot-cap {
  max-width: 560px; margin: 18px auto 0; min-height: 44px;
  text-align: center; font-size: 13px; color: var(--text-dim); line-height: 1.6;
  transition: opacity 0.3s ease;
}
.l-shot-cap b { color: var(--text); font-size: 14.5px; }
.l-shot-cap .l-try { display: inline-block; margin-left: 6px; color: var(--gold-bright); font-weight: 600; text-decoration: none; }

.l-shot-arrow {
  position: absolute; top: 50%; margin-top: -22px; z-index: 25;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--glass-border); color: var(--gold-bright);
  background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.l-shot-arrow:hover { border-color: var(--gold-bright); transform: scale(1.1); box-shadow: 0 0 20px rgba(250, 204, 21, 0.3); }
#l-shot-prev { left: 0; }
#l-shot-next { right: 0; }

.l-shot-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.l-shot-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: var(--glass-border); cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.l-shot-dot.on { background: var(--gold-bright); transform: scale(1.35); }

/* Under ~860px the stage is as wide as the container, so the arrows overlay the
   side screens instead of sitting beside them — shrink them and pull them in. */
@media (max-width: 860px) {
  .l-shot-arrow { width: 36px; height: 36px; margin-top: -18px; }
  #l-shot-prev { left: -4px; }
  #l-shot-next { right: -4px; }
}
@media (max-width: 768px) {
  .l-shot-side { display: none; }
  .l-shot-body { min-height: 0; }
}

/* Sections fade up once, the first time they scroll into view (mount wires the
   IntersectionObserver that adds .in). */
.l-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.l-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .l-reveal { opacity: 1; transform: none; transition: none; }
  .l-hero-inner { animation: none; }
}
@media (max-width: 860px) {
  .l-hero { min-height: 60vh; padding: 68px 16px 56px; }
  .l-points { grid-template-columns: 1fr; gap: 28px; }
  .l-parties { grid-template-columns: 1fr; }
  .l-section { padding-top: 52px; }
}
.serif { font-family: var(--font-serif); }
.nowrap-desktop {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .nowrap-desktop {
    white-space: normal;
  }
}

/* ---- Animations ---- */
.fade-in { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Generic staggered entrance — put .stagger on any container and its direct
   children rise in sequence (capped at ~600ms; later children arrive together).
   The per-page equivalent of .portal-stagger, with no inline --i bookkeeping. */
.stagger > * { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger > :nth-child(2) { animation-delay: 55ms; }
.stagger > :nth-child(3) { animation-delay: 110ms; }
.stagger > :nth-child(4) { animation-delay: 165ms; }
.stagger > :nth-child(5) { animation-delay: 220ms; }
.stagger > :nth-child(6) { animation-delay: 275ms; }
.stagger > :nth-child(7) { animation-delay: 330ms; }
.stagger > :nth-child(8) { animation-delay: 385ms; }
.stagger > :nth-child(9) { animation-delay: 440ms; }
.stagger > :nth-child(10) { animation-delay: 495ms; }
.stagger > :nth-child(n+11) { animation-delay: 550ms; }

/* Global reduced-motion kill-switch for ENTRANCE animations. Duration is a
   hair above zero (not `none`) on purpose: modal close and toast dismissal
   wait for `animationend`, which never fires on a removed animation. */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-out,
  .stagger > *, .portal-stagger > *,
  .modal-overlay.fade-in, .modal-overlay.fade-out,
  .modal-overlay.fade-in .modal-box, .modal-overlay.fade-out .modal-box,
  .modal-overlay.fade-in .modal-card, .modal-overlay.fade-out .modal-card {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}
@keyframes goldPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* ---- Utility ---- */
.row { display: flex; gap: 12px; align-items: center; }
.between { justify-content: space-between; }
.muted { color: var(--text-dim); }
.mt { margin-top: 18px; } .mt-lg { margin-top: 32px; }

/* ---- M40 shared primitives — build once, stop hand-rolling ---- */
/* Small uppercase section label: ~30 inline recipes with 12 letter-spacings
   collapsed to one. Gold variant for emphasized eyebrows. */
.sec-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 6px;
}
.sec-label.gold { color: var(--gold-text); }
/* Progress meter: the one track/fill pair behind todos/RSVP/tasks/seating/
   %-paid/profile/trial bars (heights 4-20px & four track colors before).
   Override thickness per site with --meter-h; fill color with --meter-fill. */
.meter {
  height: var(--meter-h, 5px);
  border-radius: 999px;
  background: var(--glass-border);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--meter-fill, var(--gold-bright));
  transition: width 0.4s ease;
}
/* Dashed gold "nudge" suggestion card — 21 inline copies drifted on the
   color-mix percentage and border; one recipe. */
/* Coach tips as one quiet line (M44): collapsed by default, expands in place.
   The dismiss ✕ sits inside the summary; wireCoachTips stops its propagation. */
.coach-line { margin-top: 14px; font-size: 13px; color: var(--text-dim); }
.coach-line > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px dashed transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.coach-line > summary::-webkit-details-marker { display: none; }
.coach-line > summary:hover { color: var(--text); border-color: var(--glass-border); }
.coach-line[open] > summary { color: var(--text); }
.coach-line .coach-x { background: none; border: none; color: inherit; cursor: pointer; padding: 0 2px; opacity: 0.55; line-height: 0; }
.coach-line .coach-x:hover { opacity: 1; }
.coach-line .coach-x svg { width: 13px; height: 13px; }
.coach-line > ul {
  margin: 6px 0 0; padding: 10px 16px 10px 32px;
  border: 1px dashed var(--gold-bright); border-radius: 12px;
  background: color-mix(in srgb, var(--gold-bright) 4%, transparent);
  line-height: 1.7; animation: fadeInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nudge-card {
  border: 1px dashed var(--gold-bright);
  background: color-mix(in srgb, var(--gold-bright) 5%, transparent);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.center { text-align: center; }
.hidden { display: none !important; }
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(247, 244, 238, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(202, 138, 4, 0.45);
  color: #5c3e16;
  padding: 10px 20px;
  border-radius: 40px;
  z-index: 10000;
  box-shadow: 0 10px 30px rgba(133, 77, 14, 0.12), 0 4px 12px rgba(0, 0, 0, 0.1);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  animation: toastEntranceExit 3.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes toastEntranceExit {
  0% {
    transform: translate(-50%, 40px) scale(0.92);
    opacity: 0;
  }
  10% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
  90% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 25px) scale(0.96);
    opacity: 0;
  }
}

/* Toast stack (M40): toasts used to append to <body> at identical fixed
   coordinates, so two quick mutations overlapped illegibly. The stack owns
   the fixed position; toasts inside it flow as a column. */
#toast-stack {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
#toast-stack .toast {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  pointer-events: auto;
  animation-name: toastStackEntranceExit;
}
@keyframes toastStackEntranceExit {
  0% { transform: translateY(40px) scale(0.92); opacity: 0; }
  10% { transform: translateY(0) scale(1); opacity: 1; }
  90% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(25px) scale(0.96); opacity: 0; }
}

/* Tab-bar "More ▾" overflow (vendor self-portal): the occasional tabs fold
   into a popover so the bar isn't 12 equal pills. */
.tab-more > summary { list-style: none; }
.tab-more > summary::-webkit-details-marker { display: none; }
.tab-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 170px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.tab-more-menu .tab-btn { width: 100%; text-align: left; }
/* Inside the mobile scroll strip an absolute popover would clip — pin it. */
@media (max-width: 640px) { .tab-more-menu { position: fixed; left: 16px; right: 16px; top: 110px; } }

/* Lead-card "⋯" popover: summary is a plain button, no disclosure marker. */
.lead-more > summary { list-style: none; }
.lead-more > summary::-webkit-details-marker { display: none; }

/* Small-button size tokens — use instead of ad-hoc inline padding/font-size
   overrides so chip buttons are consistent card to card. */
.btn.btn-sm { height: auto; padding: 4px 12px; font-size: 13px; border-radius: 8px; }
.btn.btn-xs { height: auto; padding: 2px 9px; font-size: 12px; border-radius: 7px; }

/* Text labels beside icon buttons that only fit on wider screens. */
@media (max-width: 720px) { .wide-only { display: none; } }

/* Event lifecycle strip on phones: every dot stays, but only the CURRENT step
   keeps its label — six labels never fit a phone row. */
@media (max-width: 480px) {
  .lifecycle-strip .lc-step:not(.current) .lc-lbl { display: none; }
}

/* ---- Help topics (collapsed by default — scan titles, expand on demand) ---- */
.help-topic > summary { list-style: none; }
.help-topic > summary::-webkit-details-marker { display: none; }
.help-topic .help-topic-chev::before { content: "＋"; }
.help-topic[open] .help-topic-chev::before { content: "−"; }

/* ---- Toggle switch (label.switch > input[type=checkbox]) ----
   Referenced by the email-template on/off control; previously undefined, so it
   rendered as a bare native checkbox among the custom toggles. */
.switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 34px; height: 20px;
  border-radius: 999px;
  background: var(--btn-default-bg);
  border: 1px solid var(--glass-border);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex: none;
  margin: 0;
}
.switch input[type="checkbox"]::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.2s ease, background 0.2s ease;
}
.switch input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--gold-bright) 35%, transparent);
  border-color: var(--gold-bright);
}
.switch input[type="checkbox"]:checked::after { transform: translateX(14px); background: var(--gold-bright); }
.switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---- Booking wizard sections ----
   The one-screen booking form reads as two deliberate steps plus a distinct
   availability panel, instead of a flat stack of fields and muted lines. */
.wiz-sec { margin-top: 16px; }
.wiz-sec-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 6px;
}
.wiz-info {
  margin-top: 16px;
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--gold-bright);
  border-radius: 10px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--gold-bright) 3%, transparent);
}
.wiz-info p:empty { display: none; }

/* ---- Segmented control (view-mode switchers: Month / Week / List) ----
   One shared pill container so the mode toggles read as ONE control, visually
   separate from the action buttons beside them. */
.seg-control {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--btn-default-bg);
}
.seg-control .btn {
  border: none;
  background: transparent;
  box-shadow: none;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
  color: var(--text-dim);
}
.seg-control .btn:hover { background: var(--btn-default-hover-bg); color: var(--text); transform: none; }
.seg-control .btn.seg-active {
  background: color-mix(in srgb, var(--gold-bright) 16%, transparent);
  color: var(--gold-bright);
  font-weight: 700;
}

/* ---- Calendar ---- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
/* Week view: 7-across on wide screens (continuous with the month grid), card
   flow on smaller ones. */
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .week-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
.cal-head { text-align: center; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 0; }
.cal-day {
  min-height: 94px; padding: 8px; border-radius: 10px;
  background: var(--cal-day-bg);
  border: 1px solid var(--cal-day-border);
  overflow: hidden;
  transition: all 0.25s ease;
}
.cal-day.empty { background: transparent; border: none; }
/* Keyboard focus: a clear gold ring so arrow-key navigation is visible. */
.cal-day:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-color: var(--gold-bright);
}
.cal-day.shabbos {
  background: var(--cal-day-shabbos-bg);
  border-color: var(--glass-border);
}
/* Available = "a room is free" — a faint GOLD wash + gold-tinted border, so it
   matches the coach copy ("a day tinted gold has a room free") and is actually
   scannable, not a barely-brighter neutral. */
.cal-day.available {
  background: color-mix(in srgb, var(--gold-bright) 7%, var(--cal-day-avail-bg));
  border-color: color-mix(in srgb, var(--gold-bright) 28%, var(--cal-day-border));
}
.cal-day.available:hover {
  border-color: var(--gold-bright);
}
.cal-day .heb { font-size: 11px; }
.cal-tag { font-size: 10px; color: var(--gold-text); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event {
  display: block; font-size: 11px; margin-top: 4px; padding: 2px 6.5px; border-radius: 6px;
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-blue));
  color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(92, 56, 38, 0.15);
  transition: transform 0.2s ease, filter 0.2s ease, color 0.2s ease;
  border-left: 2.5px solid rgba(255, 255, 255, 0.45);
}
.cal-event:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  color: #fff !important;
  text-decoration: none;
}
.cal-day.today {
  outline: 2px solid var(--gold-bright);
  outline-offset: -2px;
  box-shadow: inset 0 0 8px rgba(250, 204, 21, 0.15), 0 0 10px rgba(250, 204, 21, 0.1);
}
.cal-day.locked { opacity: 0.6; }
.cal-icons { display: flex; gap: 5px; }
.cal-ico { background: transparent; border: none; cursor: pointer; font-size: 11px; padding: 0; line-height: 1; color: var(--text-dim); }
/* On pointer devices the ~90 per-day quick-action icons only appear on the day
   you're on — hover or keyboard focus — so the month reads as a calendar, not
   an icon field. Touch devices (no hover) keep them always-on; the day modal
   offers the same actions either way. */
@media (hover: hover) {
  .cal-day .cal-icons { opacity: 0; transition: opacity 0.15s ease; }
  .cal-day:hover .cal-icons, .cal-day:focus-visible .cal-icons, .cal-day:focus-within .cal-icons { opacity: 1; }
}
.cal-event.hold {
  opacity: 0.9;
  border: 1px dashed var(--gold-bright);
  border-left: 2.5px solid var(--gold-bright);
}
/* M41: a dashed border disappears on saturated occasion fills — stripe the
   fill itself so HOLD reads at a glance (chips set background-color, not the
   shorthand, so this image survives). */
.cal-event.hold { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.22) 0 4px, transparent 4px 9px); }

@keyframes brandGleam {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0px rgba(250, 204, 21, 0)); }
  50% { filter: brightness(1.2) drop-shadow(0 0 6px rgba(250, 204, 21, 0.45)); }
}

/* ---- Responsive Table & Layouts ---- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.grid.cols-2-wide {
  grid-template-columns: 2fr 1fr;
}

/* ---- Responsive ---- */
@media (max-width: 1120px) {
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 14px; }
  #nav-search { display: none; }
  /* The inline search box is gone below this width — surface the 🔍 launcher. */
  .nav-search-mobile { display: inline-flex; }
}
@media (max-width: 990px) {
  .grid.cols-2-wide {
    grid-template-columns: 1fr;
  }
}
/* Phone nav (M25-A2): .nav-inner is a GRID, so the old flex-direction:column
   was inert — the three columns stayed cramped. Re-lay it as brand + actions on
   a top row with the links wrapping full-width beneath, and grow tap targets to
   the 44px minimum. */
@media (max-width: 890px) {
  .nav-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand right" "links links";
    height: auto;
    padding: 10px 16px;
    row-gap: 6px;
  }
  .nav-inner > *:first-child { grid-area: brand; justify-self: start; }
  .nav-inner > #nav-links { grid-area: links; justify-self: stretch; }
  .nav-inner > #nav-right { grid-area: right; justify-self: end; }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin-left: 0; width: 100%; }
  .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
  /* The round icon tools (search · inbox · help) grow to a real touch target. */
  .nav-util { width: 42px !important; height: 42px !important; }
}
@media (max-width: 820px) {
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .cal-day { min-height: 64px; padding: 5px; }
  .cal-day .heb { display: none; }
}
/* Phone-width month cells (~45px) can't hold three action icons + holiday tags
   next to the day number — hide them and let a tap open the day modal, which
   has the same actions with real touch targets. */
@media (max-width: 600px) {
  .cal-day .cal-icons { display: none; }
  .cal-day .cal-tag { display: none; }
}

/* ---- Print (invoice / contract) ---- */
/* ---- AI report document (report assistant §6.3) ---- */
.report-doc { max-width: 820px; margin: 0 auto; }
.report-cover { text-align: center; padding: 6px 0 16px; }
.report-doc-title { font-size: 28px; font-weight: 800; letter-spacing: .01em; }
.report-doc-subtitle { color: var(--text-dim); font-size: 15px; margin-top: 4px; }
.report-doc-period { color: var(--text-dim); font-size: 13px; margin-top: 6px; }
.report-doc-rule { height: 2px; width: 80px; margin: 14px auto 0; background: var(--gold-bright); border-radius: 2px; }
.report-doc-section { margin: 20px 0; padding: 16px 18px; border: 1px solid var(--glass-border); border-radius: 14px; background: rgba(255,255,255,0.02); }
.report-doc-heading { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 8px; }
.report-doc-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-bright); color: #1a1330; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.report-doc-narrative { color: var(--text-dim); font-size: 13px; line-height: 1.55; margin: 0 0 10px; }

/* Print-only branding: hidden on screen (the pageHead hero is the screen title),
   shown when printing (so a printed contract still carries the hall logo). */
.no-screen { display: none; }

@media print {
  .nav, .no-print, .toast, .btn, button { display: none !important; }
  .no-screen { display: block !important; }
  body { background: #fff !important; color: #000 !important; }
  .app-main { padding: 0 !important; }
  .card, .print-doc { background: #fff !important; color: #000 !important; border: 1px solid #ccc !important; backdrop-filter: none !important; box-shadow: none !important; }
  .muted { color: #555 !important; }
  .table th, .table td { border-color: #ddd !important; }
  .gold-text, h1, h2, h3 { -webkit-text-fill-color: #000 !important; color: #000 !important; background: none !important; }
  a { color: #000 !important; }
  /* Report document: clean white/ink, keep the gold + chart colors, no split blocks. */
  .report-doc, .report-doc *, .print-doc, .print-doc * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .report-doc-title, .report-doc-heading { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .report-doc-section { break-inside: avoid; border: 1px solid #ccc !important; background: #fff !important; margin: 12px 0 !important; }
  .report-doc-num { color: #1a1330 !important; -webkit-text-fill-color: #1a1330 !important; }
  .rb-kpis > div, .rb-compare div, .rb-empty > div { border-color: #ccc !important; background: #fff !important; }
  /* Page-break hygiene: never split a card mid-block, and repeat table headers
     when a long table (payments, line items) spills onto a second page. */
  .print-doc .card, .print-doc .table, .print-doc tr { break-inside: avoid; page-break-inside: avoid; }
  .print-doc thead { display: table-header-group; }
}

/* ---- First-booking confetti (one-time celebration; respects reduced-motion) ---- */
@keyframes confettiFall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ---- Skeleton Loader ---- */
.skeleton-title {
  height: 36px;
  width: 250px;
  border-radius: 8px;
  background: var(--btn-default-bg);
  position: relative;
  overflow: hidden;
}
.skeleton-line {
  height: 16px;
  border-radius: 4px;
  background: var(--btn-default-bg);
  position: relative;
  overflow: hidden;
}
.skeleton-line.short {
  width: 40%;
}
.skeleton-line.val {
  height: 38px;
  width: 60%;
}
.skeleton-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
}

/* Shimmer Animation overlay */
.skeleton-title::after,
.skeleton-line::after,
.skeleton-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: skeleton-shimmer-anim 1.5s infinite;
}
[data-theme="light"] .skeleton-title::after,
[data-theme="light"] .skeleton-line::after,
[data-theme="light"] .skeleton-card::after {
  background: linear-gradient(
    90deg,
    rgba(92, 56, 38, 0) 0%,
    rgba(92, 56, 38, 0.04) 50%,
    rgba(92, 56, 38, 0) 100%
  );
}
@keyframes skeleton-shimmer-anim {
  100% { transform: translateX(100%); }
}

/* ---- Tabs navigation ---- */
.tab-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 12px;
  flex-wrap: wrap;
}
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.3s ease;
}
.tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
[data-theme="light"] .tab-btn:hover {
  background: rgba(92, 56, 38, 0.05);
  color: var(--text);
}
.tab-btn.active {
  background: var(--primary-purple);
  border-color: var(--gold-bright);
  color: var(--gold-bright) !important;
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.15);
}
[data-theme="light"] .tab-btn.active {
  background: rgba(133, 77, 14, 0.08);
  border-color: var(--accent-gold-solid);
  color: var(--accent-gold-solid) !important;
}

/* Sliding "selected pill" — one element per tab bar that glides to the active tab.
   The per-button active background is dropped only once the pill is in place
   (.tabs-pill), so a tab bar always shows an indicator even before JS runs. */
.tab-container { position: relative; }
.tab-pill {
  position: absolute; left: 0; top: 0;
  border-radius: 20px;
  background: var(--primary-purple);
  border: 1px solid var(--gold-bright);
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.15);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), width 0.34s cubic-bezier(0.4, 0, 0.2, 1), height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; z-index: 0; opacity: 0;
}
[data-theme="light"] .tab-pill { background: rgba(133, 77, 14, 0.08); border-color: var(--accent-gold-solid); box-shadow: none; }
.tab-btn { position: relative; z-index: 1; }
.tab-container.tabs-pill .tab-btn.active { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
/* Content-only transition: just the switched panel animates, not the page or tabs. */
.tab-panel.tab-anim { animation: tabPanelIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes tabPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.ov-bar { height: 9px; border-radius: 999px; background: var(--glass-border); overflow: hidden; }
.ov-bar-fill { height: 100%; border-radius: 999px; background: var(--accent-gold); transition: width .5s cubic-bezier(.16,1,.3,1); }

/* Lead pipeline board (M33-A): horizontally-scrolling stage columns of cards. */
.lead-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.lead-col { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; min-width: 0; }
.lead-col-head { padding: 10px 12px; border-bottom: 1px solid var(--glass-border); font-size: 13px; }
.lead-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.lead-card { border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--glass-bg) 60%, transparent); animation: fadeInUp .4s cubic-bezier(.16,1,.3,1) both; }
.lead-card.lead-stale { border-color: var(--gold-bright); }
@media (max-width: 640px) { .lead-board { grid-auto-columns: minmax(78vw, 1fr); } }

/* Collections aging strip (M28-A): four buckets of outstanding balances. */
.aging-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.aging-cell { border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px 16px; background: var(--glass-bg); border-top-width: 3px; }
.aging-amt { font-family: var(--font-serif); font-size: 22px; font-weight: 700; }
.aging-lbl { font-weight: 700; font-size: 13px; margin-top: 2px; }
.aging-note { font-size: 12px; margin-top: 3px; }
/* A true severity ramp — border AND amount step green → gold → amber → red,
   so the four buckets are tellable apart at a glance. */
.aging-ok   { border-top-color: color-mix(in srgb, var(--success, #34d399) 70%, transparent); }
.aging-ok .aging-amt { color: var(--success, #34d399); }
.aging-mild { border-top-color: #c99a2e; }
.aging-mild .aging-amt { color: var(--gold-bright); }
.aging-warn { border-top-color: var(--warning, #f59e0b); }
.aging-warn .aging-amt { color: var(--warning, #f59e0b); }
.aging-bad  { border-top-color: var(--danger, #8c2519); }
.aging-bad .aging-amt { color: var(--danger, #8c2519); }
/* Clicking a bucket filters the receivables table to it. */
.aging-cell.aging-active { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
@media (max-width: 720px) { .aging-strip { grid-template-columns: repeat(2, 1fr); } }

/* Readiness ring (M27-B1): a small progress donut + click-popover of open items. */
.rr-wrap { position: relative; flex: none; }
.rr-ring { background: none; border: none; padding: 0; cursor: pointer; display: block; line-height: 0; border-radius: 50%; }
.rr-ring:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.rr-pop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 8px; box-shadow: 0 18px 44px rgba(0,0,0,.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.rr-pop-head { font-weight: 700; font-size: 13px; padding: 4px 8px 8px; color: var(--gold-bright); }
.rr-item {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); font-size: 13px; cursor: pointer;
  padding: 7px 8px; border-radius: 8px;
}
.rr-item:hover { background: color-mix(in srgb, var(--gold-bright) 8%, transparent); }
.rr-arrow { margin-left: auto; color: var(--gold-bright); }

/* ==== Event detail redesign (M44/M45): hero card, stat strip, lifecycle ==== */

/* The event header becomes a true hero — a frosted card with the occasion's
   tint washing in from the corner and a hairline gold shimmer along the top. */
.ev-detail .page-hero {
  position: relative;
  padding: 20px 22px;
  margin: 2px 0 6px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background:
    radial-gradient(120% 190% at 0% 0%, color-mix(in srgb, var(--hero, #8a7355) 13%, transparent), transparent 58%),
    var(--glass-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: visible; /* the Actions dropdown must escape the card */
}
.ev-detail .page-hero::after {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-bright) 50%, transparent), transparent);
  pointer-events: none;
}
.ev-detail .page-hero-text h1 { font-size: 30px; }
@media (max-width: 640px) {
  .ev-detail .page-hero { padding: 16px; }
  .ev-detail .page-hero-text h1 { font-size: 23px; }
}

/* ---- The event as a hub and its pages (M45) ----
   /app/events/:id is the hub — the overview plus a box per topic; each topic is
   its own page below it, reached from a row and left by the breadcrumb, exactly
   like Settings. These style the two ends of a section page and the "needs you"
   dot the old tab badges used to carry. */
.ev-sec-head { margin: 18px 0 2px; }
.ev-sec-head h2 {
  margin: 0; font-family: var(--font-serif); font-size: 22px; font-weight: 700; line-height: 1.2;
}
.ev-sec-head p { margin: 4px 0 0; font-size: 13.5px; }
.ev-sec-foot {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--glass-border);
}
.ev-sec-foot > .apple-list-row {
  border: 1px solid var(--glass-border); border-radius: 14px;
  background: var(--glass-bg);
}
.ev-sec-foot .settings-section-title { margin-top: 22px; }
.ev-needs-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-bright); vertical-align: middle; margin-left: 5px;
}
/* The hub's six boxes: two to a row, each one a section that shows what's live
   inside it and opens on click. They replace what used to be said three times —
   four stat tiles, four summary cards, then a list of links to the same places. */
.ev-hero-tools {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 4px;
}
.ev-boxes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 14px;
}
@media (max-width: 820px) { .ev-boxes { grid-template-columns: 1fr; gap: 12px; } }
.ev-box {
  display: flex; flex-direction: column; min-width: 0;
  padding: 16px 18px 18px; border-radius: 18px; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ev-box:nth-child(2) { animation-delay: 0.05s; }
.ev-box:nth-child(3) { animation-delay: 0.10s; }
.ev-box:nth-child(4) { animation-delay: 0.15s; }
.ev-box:nth-child(5) { animation-delay: 0.20s; }
.ev-box:nth-child(6) { animation-delay: 0.25s; }
.ev-box:hover, .ev-box:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gold-bright) 40%, var(--glass-border));
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.55);
}
.ev-box:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.ev-box-head { display: flex; align-items: center; gap: 10px; }
.ev-box-head h3 {
  flex: 1; min-width: 0; margin: 0;
  font-family: var(--font-serif); font-size: 17px; font-weight: 700; line-height: 1.2;
}
.ev-box-ic {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; color: var(--gold-text);
  background: color-mix(in srgb, var(--gold-bright) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-bright) 22%, transparent);
}
.ev-box-ic svg { width: 15px !important; height: 15px !important; }
.ev-box-go { flex: none; display: inline-flex; color: var(--text-dim); transition: transform 0.2s ease, color 0.2s ease; }
.ev-box:hover .ev-box-go { color: var(--gold-bright); transform: translateX(2px); }
.ev-box-body { margin-top: 10px; min-width: 0; }
/* The bodies came from cards that set their own top border on the first row;
   inside a box the heading already separates them. */
.ev-box-body > :first-child { border-top: 0 !important; }

/* Lifecycle strip — booked → settled as a lit path; the current step breathes. */
.lifecycle-strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; margin-top: 14px; padding: 4px 2px 8px; }
.lc-step { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.lc-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  border: 1px solid var(--glass-border); color: var(--text-dim);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.lc-step.done .lc-dot { background: var(--accent-gold); border-color: transparent; color: #1a1300; box-shadow: 0 3px 10px -3px rgba(250, 204, 21, 0.5); }
.lc-step.current .lc-dot { border: 2px solid var(--gold-bright); color: var(--gold-text); animation: lcPulse 2.4s ease-out infinite; }
@keyframes lcPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-bright) 38%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
.lc-lbl { font-size: 11.5px; white-space: nowrap; color: var(--text-dim); }
.lc-step.done .lc-lbl { color: var(--text); }
.lc-step.current .lc-lbl { color: var(--gold-text); font-weight: 800; }
.lc-rule { flex: 1 1 14px; min-width: 12px; height: 2px; border-radius: 2px; background: var(--glass-border); }
.lc-rule.done { background: linear-gradient(90deg, var(--gold-bright), color-mix(in srgb, var(--gold-bright) 30%, transparent)); }


@media (prefers-reduced-motion: reduce) {
  .ev-box { animation: none; }
  .lc-step.current .lc-dot { animation: none; }
  .ev-box:hover, .ev-box:focus-visible { transform: none; }
}

/* Grouped Vendors card (M27-B4): avatar + name/role + chips + reach buttons. */
.ev-vend-group { }
.ev-vend-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--glass-border);
}
.ev-vend-row:hover { background: color-mix(in srgb, var(--gold-bright) 4%, transparent); }
.ev-vend-av {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: var(--gold-bright); background: color-mix(in srgb, var(--gold-bright) 12%, transparent);
  border: 1px solid var(--glass-border);
}
.ev-vend-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ev-vend-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ev-vend-act { flex: none; display: inline-flex; gap: 4px; }

/* ---- The offering picker (M46) ----
   ONE control for every place an offering is chosen — the event, a package, a
   package's choices. A search box over a grouped, scrollable list rather than a
   <select>, because a working hall has more offerings than a dropdown is usable
   for, and because what it costs and what kind it is should be visible WHILE
   choosing. */
.off-pick { display: block; min-width: 0; }
.off-pick-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 6px; }
.off-pick-q { margin-bottom: 8px; }
.off-pick-list {
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--glass-border); border-radius: 12px;
  background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
}
.off-pick-glabel {
  position: sticky; top: 0; z-index: 1;
  padding: 7px 14px 5px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim);
  background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--glass-border);
}
.off-pick-row {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 9px 14px; border: 0; border-top: 1px solid var(--glass-border);
  background: transparent; color: var(--text); font: inherit; text-align: left;
  cursor: pointer; transition: background 0.15s ease;
}
.off-pick-group > .off-pick-row:first-of-type { border-top: 0; }
.off-pick-row:hover { background: color-mix(in srgb, var(--gold-bright) 8%, transparent); }
.off-pick-row:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.off-pick-row.is-on {
  background: color-mix(in srgb, var(--gold-bright) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--gold-bright);
}
.off-pick-name { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.off-pick-row.is-on .off-pick-name { font-weight: 700; }
.off-pick-meta { flex: none; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.off-pick-new { margin-top: 10px; }
.off-pick-new > summary {
  cursor: pointer; font-size: 12.5px; color: var(--gold-text); list-style: none;
  padding: 4px 0; user-select: none;
}
.off-pick-new > summary::-webkit-details-marker { display: none; }
.off-pick-new > summary::before { content: "+ "; font-weight: 800; }
.off-pick-manage { display: inline-block; margin-top: 10px; font-size: 12px; }
@media (max-width: 640px) { .off-pick-list { max-height: 210px; } }

/* A quiet strip at the foot of a card — a small form that belongs to the card
   above it (how a simcha is filed, under the customers who make it) rather than
   a second card competing with it. */
.ev-filed-under {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

/* Print an "event brief" — the hero (who and when) plus the hub's six boxes,
   which is exactly what the one-page brief was when it was the Overview tab. */
@media print {
  body.printing-brief * { visibility: hidden !important; }
  body.printing-brief .page-hero, body.printing-brief .page-hero *,
  body.printing-brief #ev-hub, body.printing-brief #ev-hub * { visibility: visible !important; }
  body.printing-brief .page-hero {
    display: block !important; position: absolute; left: 0; top: 0; width: 100%;
  }
  body.printing-brief #ev-hub {
    display: block !important; position: absolute; left: 0; top: 130px; width: 100%;
  }
  body.printing-brief .page-hero-actions,
  body.printing-brief .ev-hero-tools,
  body.printing-brief .ev-box-go,
  body.printing-brief [data-gototab] { display: none !important; }
  /* On paper a box is a block, not a card that lifts. */
  body.printing-brief .ev-boxes { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.printing-brief .ev-box {
    break-inside: avoid; animation: none !important; box-shadow: none !important;
    background: transparent !important; border-color: #999 !important;
  }
}

/* Phone-first (M27-E1): under 640px the ~9-tab bar wraps into three stacked
   rows that shove the panel down the page. Collapse it to a single sticky,
   swipeable strip instead — no-wrap + horizontal scroll, pinned to the top so
   the tabs stay reachable while a long panel scrolls. The active tab is scrolled
   into view by JS on switch. */
@media (max-width: 640px) {
  .tab-container {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    position: sticky; top: var(--nav-h); z-index: 30; margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
    background: color-mix(in srgb, var(--bg-deep, #15100c) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .tab-container::-webkit-scrollbar { display: none; }
  .tab-btn { flex: none; white-space: nowrap; }
}

/* Pricing page cards */
.pricing-card { display: flex; flex-direction: column; gap: 10px; }
.pricing-card-pro { border-color: var(--gold-bright); box-shadow: 0 8px 30px rgba(250, 204, 21, 0.12); position: relative; }
.pricing-tier { font-family: var(--font-serif); font-size: 23px; font-weight: 700; }
.pricing-price { font-size: 34px; font-weight: 800; line-height: 1; }
.pricing-price span { font-size: 14px; font-weight: 400; color: var(--text-dim); }
.pricing-list { list-style: none; padding: 0; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 9px; }
.pricing-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.4; }
.pricing-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--text-dim); font-weight: 800; }
.pricing-list-gold li::before { color: var(--gold-bright); }
.pricing-flag { position: absolute; top: -11px; right: 18px; background: var(--gold-bright); color: #1e1b4b; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
.pricing-card .btn { margin-top: auto; }

/* Small uppercase group label for grouped links inside a settings card */
.settings-group-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 18px 0 8px;
}
.settings-group-label:first-of-type { margin-top: 8px; }

/* Modal scroll lock is handled in JS (see lockScroll/syncScrollLock in core.js): the
   body is pinned with position:fixed at its current offset so the background can't scroll
   and, crucially, the page doesn't jump to the top on open/close. A CSS-only overflow
   lock can't preserve the offset because html,body are height:100%. */

/* Confirmation popup (confirmDialog) & general modal overlays */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 12, 10, 0.72); /* Dark espresso tinted */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Start from the top to allow scrolling */
  overflow-y: auto; /* Enable vertical scroll if content is too tall */
  overscroll-behavior: contain; /* Prevent scroll chaining to background */
  padding: 40px 20px;
  box-sizing: border-box;
}

[data-theme="light"] .modal-overlay {
  background: rgba(44, 28, 20, 0.45); /* Rich mocha translucent overlay */
}

/* Modal entry & exit animations */
.modal-overlay.fade-in {
  animation: modalOverlayFadeIn 0.25s ease-out forwards;
}
.modal-overlay.fade-in .modal-box,
.modal-overlay.fade-in .modal-card {
  animation: modalScaleIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.fade-out {
  animation: modalOverlayFadeOut 0.2s ease-in forwards;
}
.modal-overlay.fade-out .modal-box,
.modal-overlay.fade-out .modal-card {
  animation: modalScaleOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalOverlayFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalScaleOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
}

.modal-box, .modal-box.card, .modal-card {
  background: var(--bg-deep) !important;
  border: 1px solid var(--gold-bright) !important;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  max-width: 380px;
  width: 100%;
  margin: auto; /* Vertically centers the modal if it fits, otherwise places it with top padding */
  position: relative;
  box-sizing: border-box;
  padding: 28px;
  overflow: hidden; /* clip the top banner to the rounded corners (the overlay scrolls, not the box) */
}

/* Day calendar modal specific overrides to prevent double padding and allow internal body scrolling */
.modal-card {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

[data-theme="light"] .modal-box,
[data-theme="light"] .modal-box.card,
[data-theme="light"] .modal-card {
  box-shadow: 0 24px 60px rgba(92, 56, 38, 0.18), 0 0 0 1px rgba(92, 56, 38, 0.05);
}

/* A modal's accent is a thick gold header banner spanning the full top edge. The modal's
   overflow:hidden clips it to the rounded corners, so its ends curve in with the border
   instead of poking past. A slow shimmer keeps it lively. Overrides .card::before. */
.modal-box::before, .modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: auto;
  width: auto;
  height: 7px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--gold-bright), #f3e0ad 45%, #f6e8bf 50%, #f3e0ad 55%, var(--gold-bright));
  background-size: 220% 100%;
  animation: modalRibbon 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes modalRibbon {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-box::before, .modal-card::before { animation: none; }
}

.modal-box [data-close], #close-day-modal {
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.25s, transform 0.2s, color 0.2s;
  color: var(--text-dim) !important;
  cursor: pointer;
}

.modal-box [data-close]:hover, #close-day-modal:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
  transform: rotate(90deg);
}

[data-theme="light"] .modal-box [data-close]:hover,
[data-theme="light"] #close-day-modal:hover {
  background: rgba(92, 56, 38, 0.08) !important;
}

/* ---- Settings page layout ---- */
.settings-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.settings-hero-logo img { max-height: 58px; max-width: 150px; background: #fff; border-radius: 10px; padding: 6px; display: block; }
.settings-hero-mark {
  width: 58px; height: 58px; border-radius: 14px;
  background: var(--primary-purple); color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 24px;
  border: 1px solid var(--glass-border);
}
.settings-logo-box {
  min-height: 76px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--glass-border);
  border-radius: 12px; padding: 10px;
}
[data-theme="light"] .settings-logo-box { background: rgba(92, 56, 38, 0.03); }
.settings-logo-box img { max-height: 60px; background: #fff; border-radius: 8px; padding: 6px; }
.settings-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 4px;
}
.settings-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border: 1px solid var(--glass-border); border-radius: 12px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.settings-tile:hover { border-color: var(--gold-bright); background: rgba(255, 255, 255, 0.03); transform: translateY(-1px); }
[data-theme="light"] .settings-tile:hover { background: rgba(92, 56, 38, 0.04); }
.settings-tile-arrow { opacity: 0.45; display: inline-flex; flex-shrink: 0; }

/* Settings sub-nav: tabs rendered as links */
.tab-container a.tab-btn { text-decoration: none; display: inline-block; }

/* ---- Calendar Popover Dropdown Picker ---- */
.cal-picker-wrapper {
  position: relative;
  display: inline-block;
}
.cal-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
  padding: 4px 8px;
  border-radius: 8px;
}
.cal-picker-trigger:hover {
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .cal-picker-trigger:hover {
  background: rgba(92, 56, 38, 0.03);
}
.cal-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 1000;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 16px;
  width: 290px;
  animation: cal-picker-slide-down 0.2s ease-out;
}
[data-theme="light"] .cal-picker-dropdown {
  box-shadow: 0 10px 30px rgba(92, 56, 38, 0.12);
}
@keyframes cal-picker-slide-down {
  from { opacity: 0; transform: translateX(-50%) translateY(0); }
  to { opacity: 1; transform: translateX(-50%) translateY(8px); }
}
.cal-picker-section {
  margin-bottom: 12px;
}
.cal-picker-section:last-child {
  margin-bottom: 0;
}
.cal-picker-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  margin-bottom: 8px;
  padding-left: 2px;
}
.cal-picker-months-grid, .cal-picker-years-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.cal-picker-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 12px 0;
}
.cal-picker-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 6px 0;
  text-align: center;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cal-picker-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
[data-theme="light"] .cal-picker-btn {
  background: rgba(92, 56, 38, 0.02);
}
[data-theme="light"] .cal-picker-btn:hover {
  background: rgba(92, 56, 38, 0.06);
}
.cal-picker-btn.active {
  background: var(--primary-purple);
  border-color: var(--gold-bright);
  color: var(--gold-bright) !important;
  box-shadow: 0 2px 8px rgba(250, 204, 21, 0.15);
}
[data-theme="light"] .cal-picker-btn.active {
  background: rgba(133, 77, 14, 0.08);
  border-color: var(--accent-gold-solid);
  color: var(--accent-gold-solid) !important;
}
.dropdown-chevron {
  transition: transform 0.2s ease;
}

/* ---- Profile dropdown menu ----
   The panel sizes itself to its widest row (min 210px, capped so a long hall
   name can't push it off-screen) instead of being pinned to one hard width —
   that's what made "Venue profile" and "Switch theme" wrap onto two lines. */
.profile-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 12px;
  vertical-align: middle;
}
.profile-trigger {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 8px 0;
  text-align: left;
  background: var(--bg-deep);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
.dropdown-menu.hidden { display: none; }

.dropdown-head {
  padding: 8px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}
.dropdown-head-name {
  font-weight: 700; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-head-mail {
  font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-group {
  padding: 2px 8px 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}
.dropdown-group-label {
  padding: 0 8px 3px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim);
}

.dropdown-item {
  display: flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 6px 16px;
  color: var(--text) !important;
  text-decoration: none; font-size: 13.5px; line-height: 1.3;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown-item > svg { flex: 0 0 auto; }
.dropdown-item:hover {
  background: rgba(250, 204, 21, 0.1);
  color: var(--gold-bright) !important;
}
[data-theme="light"] .dropdown-item:hover {
  background: rgba(133, 77, 14, 0.08);
  color: var(--accent-gold-solid) !important;
}

/* ---- Expanding search box ---- */
.nav-search-form {
  display: inline-flex;
  align-items: center;
  background: rgba(250, 204, 21, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 3px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 36px;
  height: 36px;
  overflow: hidden;
  box-sizing: border-box;
}
.nav-search-form:hover {
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.25);
}
.nav-search-form.expanded {
  width: 180px;
  background: rgba(250, 204, 21, 0.08);
  border-color: var(--gold-bright);
}
.nav-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-dim);
  padding: 0;
  outline: none;
  flex-shrink: 0;
  transition: color 0.3s ease;
}
.nav-search-btn:hover {
  color: var(--gold-bright);
}
.nav-search-form.expanded .nav-search-btn {
  color: var(--gold-bright);
}
.nav-search-input {
  background: none;
  border: none;
  color: var(--text);
  height: 28px;
  padding: 0;
  font-size: 13px;
  width: 0;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  margin-left: 0;
  box-shadow: none;
}
.nav-search-form.expanded .nav-search-input {
  width: 130px;
  opacity: 1;
  padding: 0 8px 0 4px;
}
/* Mobile search launcher (M25-A3): hidden on desktop (the inline search box
   handles it there); shown as a 44px touch target once that box is hidden. */
.nav-search-mobile {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  outline: none;
}
.nav-search-mobile:hover { color: var(--gold-bright); }

/* ---- Themed Stat Cards ---- */
.stat-hold {
  background: var(--badge-hold-bg) !important;
  border-color: var(--badge-hold-border) !important;
}
.stat-hold .value {
  color: var(--badge-hold-color) !important;
}
.stat-confirmed {
  background: var(--badge-confirmed-bg) !important;
  border-color: var(--badge-confirmed-border) !important;
}
.stat-confirmed .value {
  color: var(--badge-confirmed-color) !important;
}
.stat-outstanding {
  background: var(--badge-hold-bg) !important;
  border-color: var(--badge-hold-border) !important;
}
.stat-outstanding .value {
  color: var(--badge-hold-color) !important;
}

/* ---- Secondary hero links ---- */
.hero-secondary-link {
  text-decoration: none;
  color: var(--text-dim);
  font-weight: 600;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.hero-secondary-link:hover {
  color: var(--gold-bright);
  transform: translateY(-1px);
}
[data-theme="light"] .hero-secondary-link:hover {
  color: var(--accent-gold-solid);
}

/* ---- Beta Badge sticker ---- */
.beta-badge {
  position: absolute;
  top: -8px;
  right: -36px;
  background: #562B10;
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 4.5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  line-height: 1;
  font-family: var(--font-ui);
  box-shadow: 0 2px 4px rgba(86, 43, 16, 0.25);
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
  pointer-events: none;
}

/* ---- Editable Header Input ---- */
.editable-header-input {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 2px dashed transparent;
  padding: 4px 0;
  width: 100%;
  max-width: 100%;
  outline: none;
  cursor: text;
  transition: all 0.2s ease;
  margin-bottom: 18px;
}
.editable-header-input:hover {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .editable-header-input:hover {
  border-bottom-color: rgba(92, 56, 38, 0.2);
}
.editable-header-input:focus {
  border-bottom-color: var(--gold-bright);
  border-bottom-style: solid;
}

/* ---- Accordion ---- */
.accordion-section {
  border-top: 1px solid var(--glass-border);
  padding-top: 16px;
  margin-top: 24px;
  margin-bottom: 16px;
}
.accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 0;
  outline: none;
  transition: color 0.2s ease;
}
.accordion-toggle:hover {
  color: var(--gold-bright);
}
.accordion-toggle .chevron-wrapper {
  transition: transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.accordion-toggle.active {
  color: var(--text);
}
.accordion-toggle.active .chevron-wrapper {
  transform: rotate(180deg);
}
.accordion-content {
  margin-top: 12px;
}

/* ---- Scroll Up for Past Events Banner ---- */
.scroll-up-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: rgba(250, 204, 21, 0.04);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
  margin: 16px 0;
  box-sizing: border-box;
}
.scroll-up-banner:hover {
  background: rgba(250, 204, 21, 0.08);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

/* ---- Get Started Onboarding Accordions ---- */
.gs-accordion {
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
[data-theme="light"] .gs-accordion {
  background: rgba(92, 56, 38, 0.02);
}
.gs-accordion.open {
  border-color: var(--gold-bright);
  box-shadow: 0 4px 20px rgba(250, 204, 21, 0.05);
  cursor: default;
}
.gs-accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
}
.gs-accordion-trigger:focus-visible {
  outline: none;
}
.gs-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.gs-indicator.pending {
  border: 2px solid var(--glass-border);
  background: transparent;
}
.gs-indicator.complete {
  border: 2px solid var(--success);
  background: var(--success);
  color: #15100c;
}
.gs-indicator.complete::before {
  content: "✓";
}
[data-theme="light"] .gs-indicator.complete {
  color: #ffffff;
}

.gs-chev {
  font-size: 16px;
  color: var(--text-dim);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
}
.gs-accordion-trigger:hover .gs-chev {
  color: var(--gold-bright);
  background: rgba(250, 204, 21, 0.08);
  border-color: rgba(250, 204, 21, 0.3);
}
.gs-accordion.open .gs-chev {
  transform: rotate(180deg);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
  background: rgba(250, 204, 21, 0.05);
}

.gs-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.gs-accordion-content > div {
  overflow: hidden;
}
.gs-accordion-content.open {
  grid-template-rows: 1fr;
}

/* ---- Dashboard Setup Link Card ---- */
.setup-card-link:hover {
  transform: translateY(-2px);
  border-color: var(--gold-bright) !important;
  background: rgba(250, 204, 21, 0.1) !important;
  box-shadow: 0 8px 30px rgba(250, 204, 21, 0.15) !important;
}

/* ---- Logo SVG Dynamic Colors ---- */
.logo-svg .cls-2 {
  fill: #faf8f5; /* Light ivory in dark mode (default) */
  stroke: #faf8f5;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
[data-theme="light"] .logo-svg .cls-2 {
  fill: #562B10; /* Chocolate brown in light mode */
  stroke: #562B10;
}
.logo-svg .cls-3 {
  fill: #ffffff; /* Solid white background inside the calendar */
  transition: fill 0.3s ease;
}
[data-theme="light"] .logo-svg .cls-3 {
  fill: #faf8f5; /* Light cream inside the calendar in light mode */
}

/* ---- Close X Button Customization ---- */
.btn-ghost:has(.close-x) {
  border: none !important;
  background: transparent !important;
  color: var(--gold-bright) !important;
  box-shadow: none !important;
  padding: 4px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-ghost:has(.close-x):hover {
  background: rgba(250, 204, 21, 0.08) !important;
  color: var(--gold-bright) !important;
}
[data-theme="light"] .btn-ghost:has(.close-x):hover {
  background: rgba(234, 179, 8, 0.08) !important;
}

/* ============================================================
   Visual Floor-Plan & Seating-Layout Editor (docs/visual-layout-editor.md)
   ============================================================ */
.fp-thumb { width: 84px; height: 50px; border-radius: 6px; border: 1px solid var(--glass-border); vertical-align: middle; background: #fbf7ef; }

.fp-editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  min-height: 520px;
  width: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  border-radius: 16px;
  border: 1px solid var(--glass-border);
}
.fp-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--glass-border); background: var(--glass-bg); flex-shrink: 0; }
/* M40: ~9 controls render into the toolbar — without wrapping, everything past
   the room switcher (including SAVE) clipped off-screen at phone widths. */
@media (max-width: 720px) { .fp-toolbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; } }
.fp-title { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.fp-title .fp-mode { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.fp-title h2 { margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36vw; }
.fp-title .fp-name { height: 30px; font-size: 15px; font-weight: 700; padding: 2px 8px; max-width: 240px; }
.btn.fp-dirty::after { content: " ●"; font-size: 10px; vertical-align: middle; }

.fp-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.fp-palette { flex-shrink: 0; overflow-y: auto; padding: 14px; background: var(--glass-bg); width: 288px; border-right: 1px solid var(--glass-border); }
/* Inspector lives inside the (wider) left sidebar now — a section, not a sidebar. */
.fp-inspector:not(:empty) { border-top: 1px solid var(--glass-border); margin-top: 16px; padding-top: 14px; }
/* Big always-on totals at the top of the sidebar. */
.fp-totals { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--glass-border); }
.fp-tot-head { font-size: 26px; font-weight: 800; line-height: 1.1; }
.fp-tot-head b { color: var(--gold-bright); }
/* Inline-editable room dimensions (room setup) — click a number to edit it. */
.fp-tot-dims { display: flex; align-items: baseline; gap: 7px; }
.fp-tot-edit { color: var(--gold-bright); cursor: text; outline: none; border-bottom: 2px solid transparent; padding: 0 2px; min-width: 14px; border-radius: 2px 2px 0 0; transition: border-color 0.12s ease, background 0.12s ease; }
.fp-tot-edit:hover { border-bottom-color: rgba(250, 204, 21, 0.5); }
.fp-tot-edit:focus { border-bottom-color: var(--gold-bright); background: rgba(250, 204, 21, 0.12); }
.fp-tot-x { color: var(--text-dim); font-weight: 600; }
.fp-tot-unit { color: var(--text); font-size: 17px; font-weight: 700; }
.fp-tot-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.fp-tot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 10px; font-size: 13px; }
.fp-tot-grid b { font-size: 15px; }
.fp-tot-grid span { color: var(--text-dim); }
.fp-pal-group { margin-bottom: 18px; }
.fp-pal-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 8px; }
.fp-pal-btns { display: flex; flex-direction: column; gap: 6px; }
.fp-pal-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 9px; border: 1px solid var(--glass-border); border-radius: 9px; background: var(--input-bg); color: var(--text); cursor: grab; font-size: 13px; font-family: var(--font-ui); transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease; }
.fp-pal-btn:hover { border-color: var(--gold-bright); background: var(--btn-default-hover-bg); }
.fp-pal-btn:active { cursor: grabbing; }
/* A to-scale picture of the actual piece (drawn by the same renderer the floor uses),
   so the palette reads like the hall floor — and each button drags straight onto it. */
.fp-pal-thumb { flex: 0 0 auto; width: 48px; height: 38px; border-radius: 6px; border: 1px solid var(--glass-border); background: #fbf7ef; pointer-events: none; }
.fp-pal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-pal-dragging { opacity: 0.4; }
/* The same picture + label card, reused read-only in the Pieces catalog (click to edit,
   no dragging) so the catalog reads exactly like the editor palette. */
.fp-pal-btn.fp-pal-static, .fp-pal-btn.fp-pal-static:active { cursor: pointer; }
.fp-pal-btn.fp-pal-static .fp-pal-thumb { width: 54px; height: 44px; }
.fp-autofill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fp-autofill .input { height: 32px; padding: 4px 6px; width: 56px; }
.fp-autofill select.input { width: 78px; }
.fp-hint { font-size: 12px; line-height: 1.5; }

.fp-stagewrap { flex: 1; position: relative; min-width: 0; overflow: hidden; background: #fbf7ef; }
.fp-canvas { position: absolute; inset: 0; }
/* Keyboard focus ring on the canvas (arrow-key nudging / Tab cycling live here). */
.fp-canvas:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.fp-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-dim); font-size: 14px; padding: 20px; }

.fp-insp-title { font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.fp-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; }
.fp-field > span { color: var(--text-dim); }
.fp-field .input { height: 34px; }

/* Table catalog: palette buttons carry name + dims/seats + live inventory; tables are fixed-size. */
.fp-pal-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-pal-meta { font-size: 11px; color: var(--text-dim); }
.fp-pal-count { color: var(--gold-bright); font-weight: 700; }
.fp-pal-disabled { opacity: 0.45; pointer-events: none; }
.fp-autofill #fp-af-type { width: 104px; }
.fp-thumb-sq { width: 50px; height: 50px; }
.fp-insp-sub { font-size: 12px; margin: -6px 0 12px; }
.fp-stepper { display: flex; align-items: center; gap: 6px; }
.fp-stepper .input { height: 34px; text-align: center; }
.fp-stepper .btn { padding: 4px 11px; font-size: 16px; line-height: 1; min-width: 34px; }
.fp-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); margin-bottom: 10px; cursor: pointer; }

/* Minimized Rooms / Objects sections above the primary Layouts card. */
.fp-mini { border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-bg); margin-bottom: 10px; overflow: hidden; }
.fp-mini > summary { cursor: pointer; padding: 11px 16px; font-size: 14px; display: flex; align-items: center; gap: 8px; list-style: none; }
.fp-mini > summary::-webkit-details-marker { display: none; }
.fp-mini > summary::before { content: "▸"; color: var(--text-dim); font-size: 11px; transition: transform 0.15s ease; }
.fp-mini[open] > summary::before { transform: rotate(90deg); }
.fp-mini > summary .muted { margin-left: auto; }
.fp-mini-body { padding: 0 16px 14px; }

/* Read-only seating plan(s) on the event schedule tab. */
.fp-ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.fp-ev-fig { margin: 0; }
.fp-ev-img { width: 100%; border: 1px solid var(--glass-border); border-radius: 10px; display: block; background: #fbf7ef; }
.fp-ev-fig figcaption { margin-top: 6px; font-size: 12px; }

@media (max-width: 820px) {
  .fp-editor { height: calc(100vh - 56px); }
  .fp-palette { width: 210px; }
  .fp-title h2 { max-width: 28vw; }
}
/* Phones: a 210px sidebar beside a ~150px canvas is unusable — stack the
   palette as a capped-height scrollable strip above a full-width canvas. */
@media (max-width: 640px) {
  .fp-body { flex-direction: column; }
  .fp-palette { width: 100%; max-height: 32vh; border-right: none; border-bottom: 1px solid var(--glass-border); }
}

/* ---- Apple Settings Redesign ---- */

/* Profile card at the top of settings */
.settings-profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 24px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.25s;
  cursor: pointer;
}
.settings-profile-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-bright);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.settings-profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-bright);
  background: var(--primary-purple);
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.settings-profile-info {
  flex: 1;
  min-width: 0;
}
.settings-profile-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.settings-profile-meta {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}
.settings-profile-edit-hint {
  font-size: 12px;
  color: var(--gold-bright);
  font-weight: 600;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 5-Card grid layout */
.settings-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 640px) {
  .settings-dashboard-grid {
    grid-template-columns: 1fr;
  }
}
.settings-visual-card {
  --accent: #b4882a;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 140px), var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
  position: relative;
  min-height: 220px;
}
.settings-visual-card::before {
  content: "";
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  /* a gradient ribbon that fades top → bottom; fixed length, clear of the 20px radius */
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
  z-index: 2;
}
/* a diagonal sheen that sweeps across on hover */
.settings-visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.65s ease;
  pointer-events: none;
  z-index: 1;
}
.settings-visual-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-bright);
  box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--accent) 60%, transparent), 0 12px 40px rgba(180, 136, 42, 0.10);
}
.settings-visual-card:hover::after { transform: translateX(130%); }
.settings-visual-card .card-icon-wrapper { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.settings-visual-card:hover .card-icon-wrapper { transform: scale(1.08); }
[data-theme="light"] .settings-visual-card:hover {
  box-shadow: 0 12px 40px rgba(92, 56, 38, 0.08);
}
.settings-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.card-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  background: rgba(180, 136, 42, 0.12);
  border: 1px solid rgba(180, 136, 42, 0.2);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
/* Visual Content styling */
.card-visual-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 8px;
  min-height: 80px;
}

/* Rooms & Layouts preview */
.settings-visual-rooms {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.room-preview-box {
  width: 100%;
  height: 64px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--glass-border);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
[data-theme="light"] .room-preview-box {
  background: rgba(0,0,0,0.01);
}
.stage-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  background: rgba(180, 136, 42, 0.2);
  color: var(--gold-bright);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(180,136,42,0.3);
}
.tables-grid {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.table-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--glass-border);
  border: 1.5px solid var(--text-dim);
  transition: transform 0.3s, background 0.3s, border-color 0.3s;
}
.settings-visual-card:hover .table-dot {
  transform: scale(1.15);
  background: rgba(180, 136, 42, 0.15);
  border-color: var(--gold-bright);
}
.settings-visual-stats {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Event View preview */
.settings-visual-event-view {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.event-view-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  transition: transform 0.3s, background 0.3s, color 0.3s;
}
[data-theme="light"] .event-view-chip {
  background: rgba(0,0,0,0.02);
}
.event-view-chip.active {
  background: rgba(180, 136, 42, 0.1);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}
.settings-visual-card:hover .event-view-chip:nth-child(even) {
  transform: translateY(-2px);
}
.settings-visual-card:hover .event-view-chip:nth-child(odd) {
  transform: translateY(2px);
}

/* Catalog preview */
.settings-visual-catalog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.catalog-item-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.2s;
}
[data-theme="light"] .catalog-item-chip {
  background: rgba(0,0,0,0.02);
}
.settings-visual-card:hover .catalog-item-chip {
  transform: translateX(4px);
}

/* Financial preview */
.settings-visual-financial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  text-align: center;
}
.fin-stat {
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--text) 2%, transparent);
  font-size: 11px;
  color: var(--text-dim);
}
.fin-stat b {
  display: block;
  font-size: 12px;
  margin-top: 2px;
  color: var(--text);
}
.settings-visual-card:hover .fin-stat {
  border-color: var(--gold-bright);
}

/* Staff avatar stack */
.settings-visual-staff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.avatar-stack {
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-bubble {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg-deep);
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: margin 0.3s, transform 0.3s;
}
.avatar-bubble:first-child {
  margin-left: 0;
}
.avatar-color-0 { background: linear-gradient(135deg, #a78bfa, #4f46e5); }
.avatar-color-1 { background: linear-gradient(135deg, #f472b6, #db2777); }
.avatar-color-2 { background: linear-gradient(135deg, #fb923c, #ea580c); }
.avatar-more {
  background: #4b5563;
  font-size: 8px;
}
.settings-visual-card:hover .avatar-bubble {
  margin-left: -2px;
}
.staff-count-preview {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

/* iOS / Apple List groups */
.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  margin: 28px 0 10px 4px;
}
/* Category boxes: a titled card whose body is a list of directly-clickable rows.
   The header is a label (not a link); each row inside navigates to its own destination. */
.settings-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch; /* paired boxes match the taller neighbour's height */
  gap: 20px;
  margin-bottom: 28px;
}
@media (max-width: 640px) {
  .settings-cat-grid { grid-template-columns: 1fr; }
}
.settings-cat-box {
  --accent: #b4882a;
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 130px), var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 16px 16px 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.settings-cat-box::before {
  content: "";
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  pointer-events: none;
  /* kept clear of the 20px corner radius; hover brightens (no resize → no poke) */
  transition: background 0.3s ease;
}
/* The box itself isn't a link (its rows are), so it must NOT move on hover — that
   fights the row hover and reads as a glitch. Just a still, subtle glow + ribbon. */
.settings-cat-box:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--glass-border));
  box-shadow: 0 12px 32px -24px color-mix(in srgb, var(--accent) 50%, transparent), 0 4px 20px rgba(0,0,0,0.05);
}
.settings-cat-box:hover::before { background: color-mix(in srgb, var(--accent) 90%, transparent); }
/* Staggered entrance on the Manage / Settings hubs. */
@keyframes catRise { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }
.settings-cat-grid .settings-cat-box { animation: catRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.settings-cat-grid .settings-cat-box:nth-child(2) { animation-delay: 0.05s; }
.settings-cat-grid .settings-cat-box:nth-child(3) { animation-delay: 0.1s; }
.settings-cat-grid .settings-cat-box:nth-child(4) { animation-delay: 0.15s; }
.settings-cat-grid .settings-cat-box:nth-child(5) { animation-delay: 0.2s; }
.settings-cat-grid .settings-cat-box:nth-child(6) { animation-delay: 0.25s; }
.settings-cat-grid .settings-cat-box:nth-child(7) { animation-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .settings-cat-grid .settings-cat-box { animation: none; }
  .settings-cat-box:hover, .card:hover, a.card:hover, .card-interactive:hover { transform: none; }
}
/* body fills the stretched box; tiles share the extra height so paired boxes look even */
.settings-cat-body { flex: 1; display: flex; flex-direction: column; }
.settings-cat-body > .cat-tiles { flex: 1; }
.settings-cat-body > .cat-tiles .cat-tile { justify-content: flex-start; }
.settings-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 12px;
}
.settings-cat-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.settings-cat-rows .apple-list-row {
  border-radius: 12px;
  border-bottom: none;
  padding: 10px 12px;
}
.settings-cat-rows .apple-list-row:hover {
  padding-left: 16px;
}

/* ---- Box-content variants — each box wears the look of what it holds ---- */

/* Tiles: spatial two-up tiles (rooms, profile) */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 2px 8px;
}
.cat-tiles:has(> .cat-tile:only-child) { grid-template-columns: 1fr; }
.cat-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s, border-color 0.25s;
}
[data-theme="light"] .cat-tile { background: rgba(0, 0, 0, 0.015); }
.cat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gold-bright);
  background: rgba(180, 136, 42, 0.06);
}
.cat-tile-ic {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
}
.cat-tile-label { font-size: 14px; font-weight: 700; }
.cat-tile-desc { font-size: 12px; color: var(--text-dim); font-weight: 400; }

/* Chips: catalog tags, wrapped pills */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 4px 12px;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
[data-theme="light"] .cat-chip { background: rgba(0, 0, 0, 0.015); }
.cat-chip:hover {
  transform: translateY(-2px);
  border-color: var(--gold-bright);
  background: rgba(180, 136, 42, 0.07);
}
.cat-chip-ic { display: inline-flex; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cat-chip:hover .cat-chip-ic { transform: scale(1.14); }
.cat-chip-ic svg { width: 15px; height: 15px; }

/* Mini-grid: round-avatar people tiles */
.cat-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px 6px;
  padding: 4px 4px 12px;
}
.cat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s;
}
.cat-mini:hover { transform: translateY(-3px); }
.cat-mini-ic {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
  transition: box-shadow 0.2s;
}
.cat-mini:hover .cat-mini-ic { box-shadow: 0 6px 18px rgba(180, 136, 42, 0.18); }
.cat-mini-ic svg { width: 19px; height: 19px; }
.cat-mini-label { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }

/* Ledger: finance rows with a leading colored accent */
.cat-ledger { display: flex; flex-direction: column; padding: 0 2px 6px; }
.cat-ledger-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  position: relative;
  transition: background 0.25s ease;
}
.cat-ledger-row::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
/* quiet hover: a soft accent sheen + the leading bar brightens — no slide, no resize */
.cat-ledger-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 62%, transparent); }
.cat-ledger-row:hover::before { opacity: 1; }
.cat-ledger-ic { display: inline-flex; }
.cat-ledger-ic svg { width: 17px; height: 17px; }
.cat-ledger-label {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.cat-ledger-desc { font-size: 12px; color: var(--text-dim); font-weight: 400; }

/* Normalize every icon dropped into a coloured chip/avatar/tile. The shared icon set
   carries its own inline width/height (and a couple carry inline-text margins), so we
   override both with !important to get one consistent, centred size per context. */
.card-icon-wrapper > svg,
.apple-list-icon > svg,
.cat-tile-ic > svg,
.cat-chip-ic > svg,
.cat-mini-ic > svg,
.cat-ledger-ic > svg {
  margin: 0 !important;
  vertical-align: middle;
}
.card-icon-wrapper > svg { width: 17px !important; height: 17px !important; }
.apple-list-icon > svg { width: 15px !important; height: 15px !important; }
.cat-tile-ic > svg { width: 18px !important; height: 18px !important; }
.cat-chip-ic > svg { width: 15px !important; height: 15px !important; }
.cat-mini-ic > svg { width: 20px !important; height: 20px !important; }
.cat-ledger-ic > svg { width: 17px !important; height: 17px !important; }

/* ---- Leaf-page hero header (one consistent look for every settings/manage page) ---- */
.page-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 2px 2px 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--glass-border);
}
.page-hero-ic {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
  flex-shrink: 0;
  box-shadow: 0 12px 26px -10px var(--hero, rgba(180, 136, 42, 0.5));
}
.page-hero-ic > svg { width: 25px !important; height: 25px !important; margin: 0 !important; }
.page-hero-text { min-width: 0; flex: 1; }
.page-hero-actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .page-hero { flex-wrap: wrap; }
  .page-hero-actions { width: 100%; justify-content: flex-start; margin-top: 12px; }
}
.page-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--hero, var(--gold-bright));
}
.page-hero-text h1 {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.2px;
}
.page-hero-text p { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-dim); }
@media (max-width: 640px) {
  .page-hero { gap: 13px; margin-bottom: 20px; padding-bottom: 18px; }
  .page-hero-ic { width: 46px; height: 46px; border-radius: 14px; }
  .page-hero-ic > svg { width: 22px !important; height: 22px !important; }
  .page-hero-text h1 { font-size: 23px; }
}

/* ---- Refined section card (settingsCard): optional icon chip + tidy header ---- */
.settings-section-card + .settings-section-card { margin-top: 22px; }
/* Section cards keep a left tinted bar (their identity) — accents elsewhere differ. */
.settings-section-card::before {
  content: "";
  position: absolute;
  left: 0; top: 20px; bottom: 20px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  pointer-events: none;
  transition: background 0.3s ease;
}
.settings-section-card:hover::before { background: color-mix(in srgb, var(--accent) 85%, transparent); }
.settings-card-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 16px;
}
.settings-card-ico {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-section-card:hover .settings-card-ico { transform: scale(1.06); }
.settings-card-ico > svg { width: 18px !important; height: 18px !important; margin: 0 !important; }
.settings-card-headtext { flex: 1; min-width: 0; }
.settings-card-headtext h3 { margin: 0; font-size: 16px; font-weight: 700; }
.settings-card-headtext p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.settings-card-action { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }
.apple-list-group {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.apple-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.25s ease;
}
.apple-list-row:last-child {
  border-bottom: none;
}
/* On hover the row just tints with a soft accent sheen that fades to the right — no
   slide, no icon movement. The accent inherits from the surrounding box (gold otherwise). */
.apple-list-row:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, var(--gold-bright)) 14%, transparent), color-mix(in srgb, var(--accent, var(--gold-bright)) 4%, transparent) 62%, transparent);
}
.apple-list-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.apple-list-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.apple-list-chevron {
  opacity: 0.35;
  transition: opacity 0.2s;
  display: inline-flex;
}
.apple-list-row:hover .apple-list-chevron {
  opacity: 0.75;
}

/* Plan / subscription page styling */
.plan-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .plan-container {
    grid-template-columns: 3fr 2fr;
  }
}
.plan-hero-card {
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: radial-gradient(circle at top right, rgba(180, 136, 42, 0.08), transparent), var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}
.plan-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.plan-detail-item {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.01);
}

/* Breadcrumb navigation styling */
.settings-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.settings-breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.settings-breadcrumb-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
}
[data-theme="light"] .settings-breadcrumb-pill:hover {
  background: rgba(0, 0, 0, 0.02);
}
.settings-breadcrumb-pill.active {
  background: rgba(180, 136, 42, 0.1);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  cursor: default;
  pointer-events: none;
}
.settings-breadcrumb-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  opacity: 0.5;
}
/* Each crumb (arrow + pill) is one keyed unit so the crumbbar can animate them in/out. */
.crumb-unit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.crumb-unit.crumb-enter, .crumb-unit.crumb-exit { overflow: hidden; }
.crumb-unit.crumb-enter { animation: crumbIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }
.crumb-unit.crumb-exit { animation: crumbOut 0.26s cubic-bezier(0.4, 0, 1, 1) both; pointer-events: none; }
@keyframes crumbIn {
  from { opacity: 0; max-width: 0; transform: translateY(-5px) scale(0.82); }
  to   { opacity: 1; max-width: 480px; transform: none; }
}
@keyframes crumbOut {
  from { opacity: 1; max-width: 480px; transform: none; }
  to   { opacity: 0; max-width: 0; transform: translateY(-5px) scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .crumb-unit.crumb-enter, .crumb-unit.crumb-exit { animation-duration: 0.01ms; }
}

/* Breadcrumbs in editor toolbar */
.fp-toolbar .settings-breadcrumbs {
  margin-bottom: 0;
  gap: 6px;
}
.fp-toolbar .settings-breadcrumb-pill {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 12px;
}

/* Animation keyframes */
@keyframes settingsFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.setup-wizard-page {
  width: 100%;
  height: calc(100vh - 63px);
  padding-top: 16px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.setup-wizard-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(15, 12, 10, 0.1) 0%, rgba(10, 8, 6, 0.75) 100%), var(--wizard-bg-image) no-repeat center/cover;
  filter: blur(3px) brightness(0.85);
  z-index: -1;
  pointer-events: none;
}

/* Progress indicator outside the card */
.setup-progress-wrapper {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 12px;
  padding: 0 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.setup-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.setup-progress-info span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.setup-progress-info .gold-text {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-bright);
}
.setup-progress-bar-container {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.setup-progress-bar-fill {
  height: 100%;
  background: var(--accent-gold);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Carousel layout showing active centered, adjacent halfway visible */
.setup-carousel-viewport {
  width: 100%;
  overflow: visible;
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 12px;
}
.setup-carousel-track {
  display: flex;
  gap: var(--card-gap, 32px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  width: 100%;
}

:root {
  --card-width: 560px;
  --card-gap: 32px;
}
@media (max-width: 768px) {
  :root {
    --card-width: 82vw;
    --card-gap: 16px;
  }
}

/* Setup Card styling */
.setup-card {
  width: var(--card-width);
  height: 460px;
  flex-shrink: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.3;
  filter: blur(2px);
  pointer-events: auto;
  cursor: pointer;
  overflow: visible;
  box-sizing: border-box;
  position: relative;
}
.setup-card.prev {
  transform: scale(0.68) translateX(-38%);
}
.setup-card.next {
  transform: scale(0.68) translateX(38%);
}
.setup-card.next::after {
  content: "";
  position: absolute;
  top: -15vh;
  bottom: -15vh;
  left: -600px;
  right: -300px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
}
.setup-card.prev::after {
  content: "";
  position: absolute;
  top: -15vh;
  bottom: -15vh;
  right: -600px;
  left: -300px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
}
.setup-card:not(.active) * {
  pointer-events: none;
}
.setup-card.active {
  opacity: 1;
  filter: none;
  transform: scale(1) translateX(0);
  pointer-events: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  border-color: rgba(250, 204, 21, 0.35);
}

/* Card Header, Body, Footer */
.setup-card-header {
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.setup-card-header-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.setup-card-header-step {
  font-size: 13px;
  color: var(--text-dim);
}

.setup-card-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex-grow: 1;
  box-sizing: border-box;
}

/* Scrollbar inside card */
.setup-card-body::-webkit-scrollbar {
  width: 6px;
}
.setup-card-body::-webkit-scrollbar-track {
  background: transparent;
}
.setup-card-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.setup-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.setup-card-footer {
  padding: 16px 28px 20px;
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

@keyframes scalePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(180, 136, 42, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(180, 136, 42, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(180, 136, 42, 0); }
}

.setup-wizard-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-shrink: 0;
  width: 100%;
  max-width: var(--card-width);
  box-sizing: border-box;
  padding: 0 16px;
  z-index: 10;
}

.setup-wizard-footer .btn-ghost {
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s ease;
}

.setup-wizard-footer .btn-ghost:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Premium input icons and section headers */
.input-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.input-icon-wrapper .input {
  padding-left: 36px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.input-icon-span {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  opacity: 0.6;
  pointer-events: none;
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.input-icon-span svg {
  width: 14px;
  height: 14px;
}
.input-icon-wrapper:focus-within .input-icon-span {
  color: var(--accent-gold);
  opacity: 1;
  transform: scale(1.15);
}
.input-icon-wrapper:focus-within .input {
  border-color: rgba(250, 204, 21, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12) !important;
}

.form-section-header {
  display: flex;
  align-items: center;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(251, 191, 36, 0.2);
  color: var(--accent-gold);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.form-section-title-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  opacity: 0.85;
}
.form-section-title-icon svg {
  width: 13px;
  height: 13px;
}

.editable-gold-title-input {
  font-family: var(--font-ui), inherit;
  font-size: 24px;
  font-weight: 800;
  color: var(--accent-gold) !important;
  background: transparent;
  border: none;
  border-bottom: 2px dashed rgba(251, 191, 36, 0.2);
  text-align: center;
  padding: 6px 12px;
  width: 100%;
  max-width: 420px;
  outline: none;
  cursor: text;
  border-radius: 6px 6px 0 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin: 0 auto 8px;
}
.editable-gold-title-input:hover {
  border-bottom-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.03);
}
.editable-gold-title-input:focus {
  border-bottom-color: var(--accent-gold);
  border-bottom-style: solid;
  box-shadow: none !important;
  background: rgba(251, 191, 36, 0.07);
}

.grid.cols-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 820px) {
  .grid.cols-6 {
    grid-template-columns: 1fr !important;
  }
  .grid.cols-6 > .field {
    grid-column: span 1 !important;
  }
}

/* ===== Get Started — grouped stepper onboarding (hall) ===== */
.gs-wizard-page { align-items: stretch; justify-content: flex-start; padding: 18px 16px 0; gap: 0; }

/* Progress stepper — one pill per group, ✓ when done, click to jump */
.gs-stepper { display: flex; align-items: flex-start; justify-content: center; width: 100%; max-width: 900px; margin: 0 auto 16px; flex-shrink: 0; }
.gs-step { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0 4px; color: inherit; font: inherit; flex: 0 0 auto; }
.gs-step-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--glass-bg); border: 2px solid var(--glass-border); color: var(--text-dim); transition: all .25s ease; }
.gs-step.active .gs-step-dot { border-color: var(--accent-gold); color: var(--accent-gold); box-shadow: 0 0 0 4px rgba(251, 191, 36, .12); transform: scale(1.06); }
.gs-step.done .gs-step-dot { background: var(--accent-gold); border-color: var(--accent-gold); color: #1c1404; }
.gs-step-label { font-size: 13px; font-weight: 600; color: var(--text-dim); white-space: nowrap; transition: color .25s ease; }
.gs-step.active .gs-step-label, .gs-step.done .gs-step-label { color: var(--text); }
.gs-stepper-line { flex: 1 1 auto; height: 2px; min-width: 16px; max-width: 90px; background: var(--glass-border); margin: 16px 0 0; transition: background .3s ease; }
.gs-stepper-line.filled { background: var(--accent-gold); }

/* The big panel for the active group */
.gs-panel { width: 100%; max-width: 960px; margin: 0 auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: 0 22px 55px rgba(0, 0, 0, .38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.gs-panel-head { padding: 24px 28px 8px; }
.gs-panel-title { margin: 0; font-size: 24px; font-weight: 800; }
.gs-panel-subtitle { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.gs-panel-body { padding: 14px 28px 28px; display: flex; flex-direction: column; gap: 16px; }

/* Sub-cards: one per profile / defaults / section block */
.gs-subcard { background: rgba(255, 255, 255, .025); border: 1px solid var(--glass-border); border-radius: 16px; padding: 18px; }
.gs-subcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.gs-subcard-title { margin: 0; font-size: 16px; font-weight: 700; }
.gs-subcard-hint { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.gs-subcard-table { margin-bottom: 14px; max-height: 260px; overflow-y: auto; border: 1px solid var(--glass-border); border-radius: 12px; }
.gs-subcard-table table { margin: 0; }
.gs-subcard-table td { vertical-align: middle; }
.gs-subcard-manage { display: inline-block; margin-top: 14px; font-size: 13px; text-decoration: none; }
.gs-subcard-manage:hover { color: var(--accent-gold); }

/* Floor-plan thumbnail (painted by fpMountThumbs, mirrors Settings → Layouts) */
.gs-fp-thumb { width: 130px; height: 76px; display: block; border-radius: 8px; border: 1px solid var(--glass-border); background: #fbf7ef; }

/* Footer (extends .setup-wizard-footer) */
.gs-footer { width: 100%; max-width: 960px; margin: 14px auto 0; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gs-footer-progress { font-size: 13px; font-weight: 600; }

@media (max-width: 768px) {
  .gs-step-label { display: none; }
  .gs-stepper-line { max-width: none; }
  .gs-panel-head { padding: 18px 16px 4px; }
  .gs-panel-title { font-size: 20px; }
  .gs-panel-body { padding: 12px 16px 22px; }
  .gs-subcard { padding: 14px; }
  .gs-subcard-head { flex-direction: column; align-items: stretch; }
  .gs-fp-thumb { width: 96px; height: 58px; }
}

/* ===== Removed old onboarding explainer styles to avoid animation clash ===== */
/* ===== Offerings catalog — one self-contained card per category =====
   Each section owns a warm tone via --hue + --sat (from categoryTone): a gold→brown
   ramp — Food gold, Items honey-amber, Services bronze, Fees coffee, custom = hashed
   into the same band. Backgrounds tint at L50; text/glyph/rail use a deliberate
   lightness that reads on both the dark and light themes. */
.off-cats { display: flex; flex-direction: column; gap: 16px; }
.off-cat { --hue: 38; --sat: 55%; position: relative; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass-bg); overflow: hidden; }
.off-cat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: hsl(var(--hue) var(--sat) 50%); }
.off-cat-head { display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: linear-gradient(180deg, hsl(var(--hue) var(--sat) 50% / .08), transparent); }
.off-cat-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: hsl(var(--hue) var(--sat) 50% / .16); color: hsl(var(--hue) var(--sat) 45%); }
.off-cat-icon svg { width: 24px; height: 24px; }
.off-cat-titles { flex: 1 1 0; min-width: 0; }
.off-cat-name { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; color: var(--text); }
.off-cat-count { font-size: 12px; font-weight: 700; color: hsl(var(--hue) var(--sat) 40%); background: hsl(var(--hue) var(--sat) 50% / .16); border-radius: 999px; padding: 1px 9px; }
.off-cat-sub { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); }
.off-add-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 8px 15px 8px 12px; border-radius: 10px; border: 1px solid hsl(var(--hue) var(--sat) 50% / .42); background: hsl(var(--hue) var(--sat) 50% / .14); color: hsl(var(--hue) var(--sat) 42%); cursor: pointer; transition: background .15s, transform .05s; }
.off-add-btn svg { width: 15px; height: 15px; }
.off-add-btn:hover { background: hsl(var(--hue) var(--sat) 50% / .24); }
.off-add-btn:active { transform: scale(.97); }
.off-cat-body { display: flex; flex-direction: column; }
.off-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 18px; background: transparent; border: 0; border-top: 1px solid var(--glass-border); color: inherit; font: inherit; cursor: pointer; transition: background .12s; }
.off-row:hover { background: hsl(var(--hue) var(--sat) 50% / .08); }
.off-row-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.off-row-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.off-row-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Narrow screens: let the meta wrap to a second line instead of silently
   clipping occasion locks / "replaces" facts behind an ellipsis. */
@media (max-width: 720px) { .off-row-meta { white-space: normal; overflow: visible; text-overflow: clip; } }
.off-row-price { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.off-row-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-dim); opacity: .55; }
.off-empty { padding: 16px 18px; font-size: 13px; color: var(--text-dim); border-top: 1px solid var(--glass-border); }
.off-empty-add { background: none; border: 0; padding: 0; font: inherit; color: hsl(var(--hue) var(--sat) 45%); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.off-cat--none::before { background: var(--glass-border); }
.off-cat--none .off-cat-icon { background: var(--glass-bg); color: var(--text-dim); border: 1px solid var(--glass-border); }
.off-cat--none .off-cat-count { color: var(--text-dim); background: var(--glass-bg); }

/* Read-only category chip atop the add/edit modal (replaces the old dropdown) */
.off-modal-cat { --hue: 38; --sat: 55%; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: hsl(var(--hue) var(--sat) 50% / .1); border: 1px solid hsl(var(--hue) var(--sat) 50% / .28); }
.off-modal-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: hsl(var(--hue) var(--sat) 50% / .16); color: hsl(var(--hue) var(--sat) 45%); }
.off-modal-ic svg { width: 19px; height: 19px; }
.off-modal-cat-tx { display: flex; flex-direction: column; line-height: 1.25; }
.off-modal-cat-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; }
.off-modal-cat-name { font-size: 15px; font-weight: 800; color: var(--text); }

@media (max-width: 640px) {
  .off-cat-head { flex-wrap: wrap; gap: 12px 14px; }
  .off-cat-icon { width: 40px; height: 40px; }
  .off-add-btn { order: 3; margin-left: 60px; }
  .off-cat-titles { flex-basis: calc(100% - 54px); }
}

/* ============================================================
   Customer / performer portal — public token pages (luxury polish)
   ============================================================ */
.portal { max-width: 660px; margin: 0 auto; padding: 44px 16px 72px; }
.portal-hero { text-align: center; margin-bottom: 20px; animation: fadeInUp .5s cubic-bezier(.16,1,.3,1) both; }
.portal-hero img { max-height: 66px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.4)); }
.portal-hero h1 {
  font-family: var(--font-serif); font-size: clamp(28px, 6vw, 38px); line-height: 1.05;
  margin: 10px 0 2px; background: var(--accent-gold);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.portal-sub { color: var(--text-dim); font-size: 14px; }

/* Customer-portal tabs (M44): the long card stack became four rooms behind a
   sticky glass tab bar (replaces the M27-E1 jump-chip strip). One scrollable
   row on phones; the universal .tab-pill glides between buttons. */
.tab-container.portal-tabs {
  position: sticky; top: 0; z-index: 40;
  margin: 18px 0 0; padding: 10px 2px; border-bottom: 0;
  justify-content: flex-start; flex-wrap: nowrap; gap: 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  isolation: isolate;
}
.tab-container.portal-tabs::-webkit-scrollbar { display: none; }
/* Full-bleed frosted backdrop once pinned — same treatment as the event tabs. */
.tab-container.portal-tabs::before {
  content: "";
  position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  background: var(--nav-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-border);
}
.portal-tabs .tab-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; }
.portal-tabs .tab-btn .icon-svg { opacity: 0.75; }
.portal-tabs .tab-btn.active .icon-svg, .portal-tabs .tab-btn:hover .icon-svg { opacity: 1; }
/* Sandbox Role-Dock rows: the role glyph sits in a small gold chip. */
.sb-role-ic {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; color: var(--gold-text);
  background: color-mix(in srgb, var(--gold-bright) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-bright) 22%, transparent);
}
.sb-role-ic svg { width: 16px !important; height: 16px !important; }
/* One rhythm below the bar: every card directly in a panel sits 16px down. */
.portal .ptab > .portal-card { margin-top: 16px; }
.portal-card[id] { scroll-margin-top: 74px; }

/* Systematic side chips (M27-C2): one chip language for "whose is this" across
   every side-scoped card. Your side is gold; the other side is calm/muted. */
.side-chip {
  display: inline-block; font-size: 11px; font-weight: 700; vertical-align: middle;
  padding: 2px 9px; border-radius: 999px; letter-spacing: .02em;
  color: var(--text-dim); background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.side-chip-you { color: #1a1300; background: linear-gradient(90deg,#f0d888,#c99a2e); border-color: transparent; }
/* The other side's block in a two-sided card reads as a calm reference, never a form. */
.side-other { opacity: .72; }
.side-you { border-color: var(--gold-bright) !important; box-shadow: 0 0 0 1px var(--gold-bright) inset; }

/* Cards float in, gently lifting */
.portal-card { animation: fadeInUp .55s cubic-bezier(.16,1,.3,1) both; }
.portal-card + .portal-card, .portal .card + .card { margin-top: 18px; }
.portal-card h3, .portal .card > h3 {
  font-family: var(--font-serif); font-size: 21px; letter-spacing: .005em;
  margin: 20px 0 12px; display: flex; align-items: center; gap: 9px;
}
.portal-card h3:first-child, .portal .card > h3:first-child { margin-top: 0; }
.portal-card h3::before {
  content: ""; width: 5px; height: 19px; border-radius: 3px;
  background: var(--accent-gold); box-shadow: 0 0 10px rgba(250,204,21,.4); flex: none;
}
/* staggered field entrance (set --i inline) */
.portal-stagger > * { animation: fadeInUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 55ms); }

.portal .input, .portal select.input, .portal textarea.input { transition: border-color .2s ease, box-shadow .2s ease, background .25s ease; }
.portal .input:focus, .portal select.input:focus, .portal textarea.input:focus {
  border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(250,204,21,.16); outline: none;
}
.portal option:disabled { color: var(--text-dim); opacity: .55; }

/* Per-portal help footer: plain-text collapsible Q&A, styled like fp-mini */
.portal-help .portal-faq { border-top: 1px solid var(--glass-border); }
.portal-help .portal-faq:first-of-type { border-top: none; }
.portal-faq > summary {
  cursor: pointer; padding: 11px 2px; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.portal-faq > summary::-webkit-details-marker { display: none; }
.portal-faq > summary::before {
  content: "▸"; color: var(--text-dim); font-size: 11px; transition: transform .15s ease;
}
.portal-faq[open] > summary::before { transform: rotate(90deg); }
.portal-faq > p { margin: 0 0 12px 19px; color: var(--text-dim); font-size: 13px; line-height: 1.6; }

/* Optional-extra rows become tappable chips that light up gold when picked */
.portal-extra {
  display: flex; align-items: center; gap: 10px; margin: 7px 0; padding: 11px 13px;
  border: 1px solid var(--glass-border); border-radius: 12px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.portal-extra:hover { background: rgba(255,255,255,.035); transform: translateY(-1px); }
.portal-extra:has(input:checked) { border-color: var(--gold-bright); background: rgba(250,204,21,.07); }
.portal-extra input[type=checkbox] { accent-color: var(--gold-bright); width: 17px; height: 17px; }
.portal-extra .qty { margin-left: auto; width: 66px; padding: 5px 7px; }

/* Sticky submit + live total */
.portal-bar {
  position: sticky; bottom: 12px; margin-top: 18px; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--glass-border);
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(0,0,0,.3); animation: fadeInUp .6s .15s cubic-bezier(.16,1,.3,1) both;
}
.portal-bar .total-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.portal-bar .total-amt { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.portal-bar .total-amt.bump { animation: scalePulse .35s ease; color: var(--gold-bright); }
.portal-bar .btn { flex: 1; max-width: 300px; margin-left: auto; }

/* PIN gate */
.pin-card { max-width: 380px; margin: 9vh auto 0; text-align: center; animation: modalScaleIn .42s cubic-bezier(.16,1,.3,1) both; }
.pin-icon { font-size: 34px; line-height: 1; margin-bottom: 6px; animation: goldPulse 2.4s infinite; }
.pin-input { text-align: center; letter-spacing: 12px; font-size: 26px; font-weight: 700; padding: 13px; }

/* Messages */
.msg-scroll { max-height: 300px; overflow: auto; margin: 12px 0; padding: 4px 2px; scroll-behavior: smooth; }
.msg-row { margin: 7px 0; display: flex; animation: fadeInUp .32s cubic-bezier(.16,1,.3,1) both; }
.msg-row.me { justify-content: flex-end; }
.msg-bubble {
  overflow-wrap: anywhere;   /* family-typed URLs/words must not overflow on phones */
  max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
}
.msg-row.me .msg-bubble { background: var(--accent-gold); color: #1a1300; border: none; box-shadow: var(--btn-gold-hover-shadow); }
.msg-bubble .who { font-size: 11px; opacity: .7; margin-bottom: 1px; }
.thread-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.thread-tab { padding: 5px 12px; font-size: 12px; border-radius: 14px; }
.portal-phone { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* Success state */
.portal-done { text-align: center; padding: 36px 20px; animation: modalScaleIn .5s cubic-bezier(.16,1,.3,1) both; }
.portal-done .big { font-size: 60px; line-height: 1; display: inline-block; animation: scalePulse .6s cubic-bezier(.16,1,.3,1) both; }
.portal-done h1 { font-family: var(--font-serif); margin: 12px 0 6px; }

@media (max-width: 640px) {
  .portal { padding: 28px 12px 64px; }
  .portal-bar { flex-wrap: wrap; }
  .portal-bar .btn { max-width: none; width: 100%; margin-left: 0; }
}

/* ---- Settings: hall profile header (Apple-style identity card) ---- */
.settings-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 8px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.settings-profile-avatar {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif, serif); font-weight: 700; font-size: 22px;
  color: #2a1c05;
  background: linear-gradient(135deg, #f5d98a 0%, #d4af37 45%, #b4882a 100%);
  box-shadow: 0 4px 14px rgba(180, 136, 42, 0.35);
}
.settings-profile-info { flex: 1; min-width: 0; }
.settings-profile-info h2 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; }
.settings-profile-info p { margin: 2px 0 0; font-size: 13px; }
.settings-plan-chip {
  display: inline-block; margin-top: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px;
  color: var(--text-dim); background: rgba(140,115,85,.14); border: 1px solid var(--glass-border);
}
.settings-plan-chip.is-plus { color: #2a1c05; background: linear-gradient(135deg, #f5d98a, #d4af37); border-color: transparent; }
/* An expired/locked subscription must read as needs-attention, not neutral. */
.settings-plan-chip.is-locked { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.settings-profile-edit { flex-shrink: 0; }
@media (max-width: 560px) {
  .settings-profile { flex-wrap: wrap; }
  .settings-profile-edit { width: 100%; }
}

/* ---- Settings/Manage grouped-list rows with a subtitle ---- */
.apple-list-label { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.apple-list-desc { font-size: 12px; color: var(--text-dim); font-weight: 400; }

/* ---- Persistent breadcrumb bar (lives above #view, updated in place by the router) ---- */
.crumbbar { max-width: 1100px; margin: 0 auto; padding: 14px 24px 0; }
.crumbbar[hidden] { display: none; }
.crumbbar .settings-breadcrumbs { margin: 0; justify-content: center; }
.settings-actions-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 12px; }

/* ---- Persistent feedback button ----
   Bottom-LEFT so it never collides with the bottom-right setup launcher, and small
   + quiet by default (it's always on screen) — it brightens and lifts on hover/focus. */
.feedback-fab {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 1400;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--bg-deep);
  color: var(--text);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.feedback-fab:hover, .feedback-fab:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

/* ---- Floating setup launcher (replaces the Get-Started page) ---- */
.setup-launcher {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
  /* The collapsed panel stays in layout (so it can animate open), reserving a tall
     invisible box above the pill. Without this, that box — a fixed element with
     default pointer-events — silently swallows every mouse click over the bottom-
     right of the page (keyboard still reached the buttons underneath, mouse didn't).
     Make the container transparent to the pointer; only its visible interactive
     parts (the pill always, the panel when open) opt back in. */
  pointer-events: none;
}
.setup-launcher[hidden] { display: none; }
.setup-pill {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  background: var(--bg-deep);
  border: 1px solid var(--gold-bright);
  box-shadow: 0 12px 30px -8px rgba(180, 136, 42, 0.55);
  cursor: pointer; color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.setup-pill:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(180, 136, 42, 0.7); }
.setup-pill-tx { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.setup-pill-tx b { font-size: 13px; font-weight: 800; }
.setup-pill-tx small { font-size: 11px; color: var(--text-dim); }
.setup-pill-chev { display: inline-flex; color: var(--text-dim); transition: transform 0.3s ease; }
.setup-launcher.open .setup-pill-chev { transform: rotate(180deg); }
.setup-ring-num { font-size: 11px; font-weight: 800; fill: var(--gold-bright); }
.setup-panel {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.96) translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.setup-launcher.open .setup-panel { transform: none; opacity: 1; pointer-events: auto; }
.setup-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 16px 10px; }
.setup-panel-title { font-weight: 800; font-size: 15px; }
.setup-panel-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.setup-x { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; border-radius: 8px; display: inline-flex; transition: background 0.2s, color 0.2s; }
.setup-x:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.setup-progress { height: 4px; background: var(--glass-border); margin: 0 16px 8px; border-radius: 2px; overflow: hidden; }
.setup-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-bright), #f0dca8); transition: width 0.4s ease; }
.setup-steps { display: flex; flex-direction: column; padding: 6px 6px 10px; max-height: min(52vh, 360px); overflow-y: auto; overscroll-behavior: contain; }
.setup-explainer-link { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 16px); margin: 0 8px 10px; padding: 9px 12px; border: 1px dashed var(--glass-border); border-radius: 12px; background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.setup-explainer-link:hover { background: rgba(180, 136, 42, 0.08); color: var(--text); border-color: var(--gold-bright); }
.setup-explainer-link svg { color: var(--gold-bright); flex-shrink: 0; }
.pkg-explainer-banner { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 18px; padding: 14px 18px; border: 1px solid var(--glass-border); border-radius: 14px; background: linear-gradient(135deg, rgba(180, 136, 42, 0.08), rgba(180, 136, 42, 0.02)); color: var(--text); font-size: 13px; text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.pkg-explainer-banner:hover { border-color: var(--gold-bright); transform: translateY(-1px); }
.pkg-explainer-banner b { font-weight: 800; }
.pkg-explainer-banner > svg:first-child { color: var(--gold-bright); }
.setup-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text); transition: background 0.2s, padding-left 0.2s; }
.setup-step:hover { background: rgba(180, 136, 42, 0.08); padding-left: 15px; }
.setup-step-ic { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--glass-border); color: var(--text-dim); }
.setup-step.is-done .setup-step-ic { background: var(--gold-bright); border-color: var(--gold-bright); color: #1a1300; }
.setup-step-n { font-size: 12px; font-weight: 700; }
.setup-step-tx { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.setup-step-tx b { font-size: 13px; font-weight: 700; }
.setup-step-tx small { font-size: 12px; color: var(--text-dim); }
.setup-step.is-done .setup-step-tx b { color: var(--text-dim); }
.setup-step-go { color: var(--gold-bright); flex-shrink: 0; display: inline-flex; }
@media (max-width: 480px) {
  .setup-launcher { right: 12px; bottom: 12px; left: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .setup-panel { transition: opacity 0.2s ease; transform: none; }
}

/* ---- Legal pages (Terms of Service & Privacy Policy) ---- */
.legal-wrap { max-width: 860px; padding-top: 34px; padding-bottom: 72px; }
.legal-head h1 { margin: 0; font-size: clamp(30px, 5vw, 42px); }
.legal-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; }
.legal-meta { font-size: 13px; color: var(--text-dim); margin: 6px 0 14px; }
.legal-blurb { max-width: 620px; line-height: 1.65; margin: 0 0 22px; }
.legal-toc-card { margin-bottom: 18px; }
.legal-toc-label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
.legal-toc { columns: 2; column-gap: 32px; list-style: none; counter-reset: legal-toc; margin: 0; padding: 0; font-size: 13px; line-height: 2.1; }
.legal-toc li { counter-increment: legal-toc; break-inside: avoid; }
.legal-toc li::before { content: counter(legal-toc) ". "; color: var(--gold-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
.legal-toc a { color: var(--text-dim); text-decoration: none; }
.legal-toc a:hover { color: var(--gold-bright); }
.legal-summary { margin-bottom: 18px; border-color: var(--card-hover-border); }
.legal-summary ul { margin: 0; padding-left: 20px; }
.legal-summary li { color: var(--text-dim); font-size: 13px; line-height: 1.8; }
.legal-summary li b, .legal-body b { color: var(--text); }
.legal-section { scroll-margin-top: 90px; }
.legal-section + .legal-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--table-border); }
.legal-section h2 { font-family: var(--font-serif); font-size: 21px; margin: 0 0 10px; }
.legal-section h2 .legal-num { color: var(--gold-bright); margin-right: 8px; }
.legal-section h3 { font-size: 14px; margin: 16px 0 6px; }
.legal-section p, .legal-section li { color: var(--text-dim); font-size: 13px; line-height: 1.75; }
.legal-section p { margin: 8px 0; }
.legal-section ul, .legal-section ol { margin: 8px 0; padding-left: 20px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.legal-table th, .legal-table td { padding: 8px 10px; border-bottom: 1px solid var(--table-border); text-align: left; vertical-align: top; color: var(--text-dim); line-height: 1.6; }
.legal-table th { color: var(--text); font-weight: 700; }
@media (max-width: 640px) { .legal-toc { columns: 1; } }

/* Inline glossary term-tooltips (backlog): dotted underline, help cursor. */
.term-tip { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--gold-bright); cursor: help; }
.term-tip:hover { color: var(--gold-bright); }

/* Page-guide chip (M42): the "How this page works" affordance on every page
   hero. Quiet by default (it's on every screen), gold on hover — same
   language as .setup-explainer-link, sized to sit under the hero subtitle. */
.page-guide-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 11px; border: 1px dashed var(--glass-border); border-radius: 999px; background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.page-guide-chip:hover { background: rgba(180, 136, 42, 0.08); color: var(--text); border-color: var(--gold-bright); }
.page-guide-chip svg { color: var(--gold-bright); }

/* ============================================================
   M40 — mobile honesty, touch, motion & theme coherence
   ============================================================ */

/* iOS zooms the viewport on focus of any input under 16px — hall staff hit
   this on every field. Only coarse pointers pay the size cost. */
@media (pointer: coarse) {
  .input, select.input, textarea.input, .list-search-input { font-size: 16px; }
  /* Table-row & toolbar small buttons were ~22-26px tall — under any touch
     minimum. Keep them visually compact but give the finger a real target. */
  .btn.btn-sm { min-height: 38px; }
  .btn.btn-xs { min-height: 34px; }
}

/* The one grid family with no phone rule: two tiles at ~165px each on a
   375px screen. */
@media (max-width: 560px) {
  .cat-tiles { grid-template-columns: 1fr; }
}

/* The nav's inner link group carried 48px of side margins into 375px. */
@media (max-width: 640px) {
  .nav-links-group { margin: 0 !important; }
}

/* Modals kept desktop padding on phones: 28px box + 40px overlay left ~279px
   of usable content at 375px wide. */
@media (max-width: 480px) {
  .modal-overlay { padding: 16px 12px; }
  .modal-box { padding: 18px 16px; }
}

/* Horizontal-scroll affordance: .table-responsive gave no hint content
   continues — a thin, always-available scrollbar is the honest signal. */
.table-responsive { scrollbar-width: thin; overscroll-behavior-x: contain; }
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

/* Div-based clickable rows (vendor rows, offering rows) missed the table
   rows' hover treatment — same "this is clickable" feedback everywhere. */
.ev-vend-row:hover, .off-row:hover { background: var(--table-hover-bg); }

/* Light-theme scrollbar thumb was nearly invisible on cream. */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(92, 56, 38, 0.3); }

/* Motion: the pieces the earlier reduced-motion blocks missed — infinite
   shimmer/pulse loops and entrance animations keep running for users who
   asked for calm. */
@media (prefers-reduced-motion: reduce) {
  .skeleton-title::after, .skeleton-line::after, .skeleton-card::after { animation: none !important; }
  /* JS removes toasts on a timer, so dropping the animation keeps them
     visible for their full window with no entrance/exit motion. */
  .toast { animation: none !important; }
  .badge::before { animation: none !important; }
  .tab-panel { animation: none !important; }
}

/* Public sandbox (M43): reserve space for the fixed countdown ribbon so it never
   covers the sticky nav, and push the nav's sticky offset below it. */
body.has-sandbox-ribbon { padding-top: 34px; }
body.has-sandbox-ribbon .nav { top: 34px; }
@media (max-width: 560px) { body.has-sandbox-ribbon { padding-top: 52px; } body.has-sandbox-ribbon .nav { top: 52px; } }
.sandbox-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--gold-bright) 30%, transparent); border-top-color: var(--gold-bright); animation: sandboxSpin 0.8s linear infinite; display: inline-block; }
@keyframes sandboxSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sandbox-spin { animation: none; } }