/* ============================================================
   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 { 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); }
.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);
  box-shadow: 0 16px 38px -20px color-mix(in srgb, var(--accent) 55%, transparent), var(--card-shadow); }
.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); }
.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; }

/* ---- 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 { 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 { 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-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 { 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: "−"; }
/* M48: a long question wraps beside its +, never pushing it onto its own line. */
.app-main .help-topic > summary > .row.between { flex-wrap: nowrap; }
.help-topic .help-topic-chev { flex: none; }

/* ---- 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 .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-tag.cal-away { color: var(--danger); }
.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-jump-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ev-jump-t {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  color: var(--text); text-decoration: none; font-size: 13.5px;
}
.ev-jump-t b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-jump-t svg { width: 16px; height: 16px; flex: none; color: var(--gold-text); }
.ev-jump-t:hover { background: color-mix(in srgb, var(--gold-bright) 7%, var(--glass-bg)); }
a.ev-jump-t, a.ev-jump-t:visited { color: var(--text) !important; }
@media (max-width: 560px) {
  .ev-jump-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-jump-t b { white-space: normal; line-height: 1.25; }
}
.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);
  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 { 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);
  background: rgba(250, 204, 21, 0.1) !important;
  box-shadow: 0 8px 30px rgba(250, 204, 21, 0.15) !important; }

/* ---- 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-insp-room { font-size: 12px; margin: -4px 0 10px; }
.fp-insp-room.is-crowded { color: var(--danger); font-weight: 600; }
.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);
  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);
  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 .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); }
.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);
}

/* 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 { box-shadow: 0 12px 32px -24px color-mix(in srgb, var(--accent) 50%, transparent), 0 4px 20px rgba(0,0,0,0.05); }
/* 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);
  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);
  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-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-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 { 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; } }

/* ============================================================
   M47 — the premium pass. One motion language, quieter chrome,
   lighter page headers, calm static cards, crisper tables, and
   hover feedback only where something is clickable. Appended last
   so it refines the layers above instead of rewriting them.
   ============================================================ */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 20px -12px rgba(0, 0, 0, 0.45);
  --elev-2: 0 2px 6px rgba(0, 0, 0, 0.2), 0 22px 44px -20px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px color-mix(in srgb, var(--gold-bright) 32%, transparent);
}
[data-theme="light"] {
  --elev-1: 0 1px 2px rgba(60, 38, 22, 0.05), 0 8px 22px -14px rgba(60, 38, 22, 0.22);
  --elev-2: 0 2px 6px rgba(60, 38, 22, 0.05), 0 24px 48px -22px rgba(60, 38, 22, 0.32);
  --card-shadow: var(--elev-1);
}
::selection { background: color-mix(in srgb, var(--gold-bright) 35%, transparent); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 1 · Page entrance — every page rises in section by section. `backwards` (not
   `both`) so no transform lingers after the animation: a leftover transform would
   become the containing block for fixed/sticky children inside the page. */
@keyframes m47Rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes m47Pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
#view > .app-main > *, #view > .container > * { animation: m47Rise var(--dur-3) var(--ease-out) backwards; }
#view > .app-main > :nth-child(2), #view > .container > :nth-child(2) { animation-delay: 40ms; }
#view > .app-main > :nth-child(3), #view > .container > :nth-child(3) { animation-delay: 80ms; }
#view > .app-main > :nth-child(4), #view > .container > :nth-child(4) { animation-delay: 120ms; }
#view > .app-main > :nth-child(5), #view > .container > :nth-child(5) { animation-delay: 160ms; }
#view > .app-main > :nth-child(6), #view > .container > :nth-child(6) { animation-delay: 200ms; }
#view > .app-main > :nth-child(n+7), #view > .container > :nth-child(n+7) { animation-delay: 240ms; }
.dropdown-menu:not(.hidden) { animation: m47Pop var(--dur-2) var(--ease-out); transform-origin: top right; }

/* 2 · Buttons — a 1px lift on hover, a quick press on click, a soft gold focus ring. */
.btn {
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-std),
    background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std),
    color var(--dur-2) var(--ease-std), filter var(--dur-2) var(--ease-std);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 60ms; }
.btn-gold:hover, .btn-primary:hover { filter: brightness(1.05) saturate(1.06); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--gold-bright) 45%, var(--btn-ghost-border)); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-xs { min-height: 0 !important; height: 28px; padding: 0 12px; font-size: 12px; border-radius: 9px; gap: 6px; }
.btn-xs svg { width: 14px; height: 14px; flex-shrink: 0; }

/* 3 · Fields — answer the pointer, glow on focus. */
.input { transition: border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std); }
.input:hover:not(:focus):not([disabled]) { border-color: color-mix(in srgb, var(--text) 24%, var(--input-border)); }
.input:focus { box-shadow: 0 0 0 4px var(--input-focus-shadow); }

/* 4 · Cards — a static card stays still; only a card you can click lifts. Hover
   feedback that fires on everything teaches the eye that nothing in particular is
   clickable. */
.card:not(a):not(.card-interactive):not([data-link]):not([role="button"]):not(.stat):hover {
  border-color: var(--glass-border);
  box-shadow: var(--card-shadow);
}
a.card, .card-interactive { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std); }

/* 5 · Page header — lighter: no rule under it, a smaller badge, a crisper title,
   and the "How this page works" chip as a quiet link instead of a dashed pill. */
.page-hero { border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; gap: 18px; }
.page-hero-ic { width: 48px; height: 48px; border-radius: 14px; box-shadow: none; }
.page-hero-ic > svg { width: 22px !important; height: 22px !important; }
.page-hero-text h1 { font-size: clamp(26px, 2.3vw, 32px); letter-spacing: -0.015em; line-height: 1.1; }
.page-hero-text p { font-size: 14px; max-width: 62ch; }
.page-guide-chip { border: 0; padding: 0; margin-top: 6px; background: none; font-weight: 600; transition: color var(--dur-2) var(--ease-std); }
.page-guide-chip:hover { background: none; color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .page-hero { margin-bottom: 20px; gap: 14px; }
  .page-hero-ic { width: 42px; height: 42px; border-radius: 12px; }
  .page-hero-text h1 { font-size: 24px; }
}

/* 6 · Tables — cleaner headers, no zebra, aligned numbers, and a clickable row
   lights up with a soft wash and a gold edge instead of a full gold outline. */
.table th { background: none !important; letter-spacing: 0.1em; padding-top: 11px; padding-bottom: 11px; }
.table td { font-variant-numeric: tabular-nums; }
.table tbody tr:nth-child(even) { background-color: transparent !important; }
.table tbody tr[class*="clickable"] { cursor: pointer; }
.table tbody tr[class*="clickable"]:hover td { background: color-mix(in srgb, var(--gold-bright) 7%, transparent) !important; }

/* 7 · Top nav — pill links, no boxy borders; on phones one swipeable row instead
   of two wrapped rows of links. */
.nav { box-shadow: 0 10px 30px -26px rgba(0, 0, 0, 0.5); }
.nav-links-group { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; margin: 0 24px; }
.nav-links a { border-radius: 999px; border: 0; padding: 8px 15px; transition: color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std); }
.nav-links a.active { border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-bright) 28%, transparent); }
@media (max-width: 890px) {
  .nav-inner { row-gap: 2px; padding: 8px 12px 6px; }
  .nav-inner > #nav-links { overflow: hidden; min-width: 0; }
  .nav-links {
    flex-wrap: nowrap; justify-content: flex-start; gap: 2px;
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent);
    padding: 2px 10px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links-group { margin: 0; flex-wrap: nowrap; }
  .nav-links a { min-height: 40px; white-space: nowrap; scroll-snap-align: center; padding: 8px 13px; font-size: 14px; }
}

/* 8 · Sandbox ribbon — one slim, fixed-height bar (its buttons used to inherit the
   44px .btn minimum and push the bar over the logo). */
.sandbox-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2600;
  height: 40px; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 0 14px; font-size: 13px; color: var(--text);
  background: linear-gradient(90deg, var(--bg-deep), color-mix(in srgb, var(--gold-bright) 18%, var(--bg-deep)), var(--bg-deep));
  border-bottom: 1px solid color-mix(in srgb, var(--gold-bright) 55%, transparent);
}
.sandbox-ribbon-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sandbox-ribbon-acts { display: inline-flex; gap: 6px; flex-shrink: 0; }
body.has-sandbox-ribbon { padding-top: 40px; }
body.has-sandbox-ribbon .nav { top: 40px; }
@media (max-width: 640px) {
  .sandbox-ribbon { justify-content: space-between; gap: 8px; padding: 0 10px; }
  .sandbox-ribbon-sub, #sandbox-dock span { display: none; }
  body.has-sandbox-ribbon { padding-top: 40px; }
  body.has-sandbox-ribbon .nav { top: 40px; }
}

/* 9 · Floating helpers — never over the last row; quieter and smaller on phones
   (feedback moves into the profile menu there). */
.app-main { padding-bottom: 112px; }
.setup-pill { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg-deep) 90%, transparent); }
@media (max-width: 640px) {
  .feedback-fab { display: none; }
  .setup-launcher { right: 14px; bottom: 14px; }
  .setup-launcher:not(.open) .setup-pill-tx, .setup-launcher:not(.open) .setup-pill-chev { display: none; }
  .setup-launcher:not(.open) .setup-pill { padding: 6px; }
}

/* 10 · Calendar — a confirmed simcha is a solid chip in its occasion colour; a HOLD
   is the same colour pencilled in (a light wash, dashed edge, dark readable text).
   The old striped HOLD replaced the chip's background and lost the text entirely
   when an occasion had no colour of its own. */
.cal-event.occ { background: var(--occ, var(--primary-purple)); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.06)); }
.cal-event.occ.hold {
  background: color-mix(in srgb, var(--occ, #b4882a) 13%, var(--cal-day-avail-bg));
  color: color-mix(in srgb, var(--occ, #8c5230) 72%, var(--text)) !important;
  border: 1px dashed color-mix(in srgb, var(--occ, #b4882a) 65%, transparent);
  border-left: 3px solid var(--occ, #b4882a);
  box-shadow: none; opacity: 1;
}
.cal-event.occ.hold:hover { color: color-mix(in srgb, var(--occ, #8c5230) 80%, var(--text)) !important; filter: none; background: color-mix(in srgb, var(--occ, #b4882a) 20%, var(--cal-day-avail-bg)); }
.cal-event { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-std), filter var(--dur-2) var(--ease-std); }
.cal-event:hover { box-shadow: var(--elev-1); }
.cal-legend-hold { display: inline-block; flex: none; width: 14px; height: 12px; border-radius: 3px; border: 1px dashed var(--gold-text); border-left: 3px solid var(--gold-text); background: color-mix(in srgb, var(--gold-bright) 13%, transparent); }
.cal-day { transition: background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std); }
.cal-day:hover { box-shadow: var(--elev-1); }

@media (prefers-reduced-motion: reduce) {
  #view > .app-main > *, #view > .container > *, .dropdown-menu:not(.hidden) { animation: none !important; }
  .btn:hover, .btn:active { transform: none; }
}

/* 11 · Foundations the reviewers caught. `.app-main`'s padding shorthand (above)
   zeroed `.container`'s side padding — every app page sat flush against the phone
   edge. And <button>/<input> never inherited the UI font, so tabs, the guide chip
   and the floating helpers rendered in the system font. */
.container.app-main { padding-left: 20px; padding-right: 20px; }
@media (max-width: 640px) { .container.app-main { padding-left: 16px; padding-right: 16px; } }
button, input, select, textarea { font-family: inherit; }
h1 { font-family: var(--font-serif); letter-spacing: -0.01em; }

/* 12 · Public forms keep a real box around name fields. The headline-style name
   input is an in-app idea (an event title you edit in place); on sign-up, RSVP and
   the hall's own page it read as a missing field. */
body:not([data-zone="app"]) input.input[name="name"],
body:not([data-zone="app"]) input.input[name="first_name"],
body:not([data-zone="app"]) input.input[name="last_name"],
body:not([data-zone="app"]) input.input[name="company"],
body:not([data-zone="app"]) input.input[name="hall"],
body:not([data-zone="app"]) input.input[name="hallName"] {
  font-size: 15px; font-weight: 400; line-height: normal;
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 12px;
  min-height: 44px; padding: 10px 14px;
}
body:not([data-zone="app"]) input.input[name]:focus {
  border-color: var(--input-focus-border); border-bottom-style: solid;
  background: var(--input-bg); box-shadow: 0 0 0 4px var(--input-focus-shadow);
}
body:not([data-zone="app"]) input.input[name]::placeholder { font-weight: 400; opacity: 0.5; }

/* 13 · One primary colour. Gold is the brand's call to action (244 uses); the 90
   brown "primary" buttons now wear the same gold, so a page never offers two
   different-looking "main" actions. */
.btn-primary { background: var(--accent-gold); color: #1a1300 !important; box-shadow: var(--btn-gold-shadow); }
.btn-primary:hover { box-shadow: var(--btn-gold-hover-shadow); }

/* 14 · Gold as text — readable on cream. The light theme's gold gradient started
   near #facc15 (under 2:1 on cream); it now runs through the deep ambers. */
[data-theme="light"] { --gold-text-bg: linear-gradient(135deg, #b45309 0%, #92400e 100%); }

/* 15 · Page header, one look on every page: a gold eyebrow and a neutral badge
   (pages used to tint both their own way); the badge steps aside on phones, and a
   crowded action bar wraps into a tidy grid with search on its own row. */
.page-hero-eyebrow { color: var(--gold-text) !important; }
.page-hero-ic { color: var(--gold-text) !important; background: color-mix(in srgb, var(--gold-bright) 11%, transparent) !important; border-color: color-mix(in srgb, var(--gold-bright) 26%, transparent) !important; }
@media (max-width: 640px) {
  .page-hero-ic { display: none; }
  .page-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .page-hero-actions > .list-tools, .page-hero-actions > input, .page-hero-actions > .nav-search-form { flex: 1 1 100%; }
}

/* 16 · KPI tiles — one calm surface (no per-tile tinted fills), the colour lives in
   the meter bar; numbers line up. */
.card.stat { background: var(--glass-bg) !important; }
.card.stat .value { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
@media (max-width: 640px) {
  .card.stat .value { font-size: 26px; }
}

/* 17 · Buttons inside table rows are compact, so rows keep one height instead of
   zig-zagging between 72px (with a button) and 54px (without). On phones, cells
   don't wrap mid-number and the scroll container hints there's more to the right. */
.table .btn { min-height: 32px; padding: 5px 12px; font-size: 13px; border-radius: 9px; }
@media (max-width: 640px) {
  .table th, .table td { padding: 10px 12px; }
  .table-responsive { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
}

/* 18 · Breadcrumbs read as a path, not a row of tabs: small left-aligned text with
   chevrons; the current page is plain text. (Single crumbs are hidden in app.js.) */
.crumbbar { max-width: 1180px; padding: 16px 20px 0; }
.crumbbar .settings-breadcrumbs { justify-content: flex-start; margin: 0; gap: 4px; }
.crumbbar .settings-breadcrumb-pill { padding: 4px 6px; border: 0; background: none; box-shadow: none; font-size: 13px; border-radius: 6px; }
.crumbbar .settings-breadcrumb-pill:hover { background: color-mix(in srgb, var(--gold-bright) 9%, transparent); color: var(--text); transform: none; }
.crumbbar .settings-breadcrumb-pill.active { background: none; color: var(--text); font-weight: 700; }
.crumbbar .crumb-unit { gap: 4px; }

/* 19 · Public nav: the sun/moon is a real icon button and the call to action sits
   last; on phones the two text links step aside so brand + Login + CTA fit one row. */
.nav-theme { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0 !important; border-radius: 50% !important; }
.nav-theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.nav-cta { height: 36px !important; min-height: 0 !important; padding: 0 16px !important; font-size: 13px !important; border-radius: 10px !important; }
@media (max-width: 600px) {
  body:not([data-zone="app"]) .nav-links a[href="/help"], body:not([data-zone="app"]) .nav-links a[href="/pricing"] { display: none; }
}

/* 20 · Auth pages: the public nav is back on top; the card sits a little lower and
   About/Contact get a reading width. */
.auth-wrap { padding-top: clamp(28px, 8vh, 80px); padding-bottom: 64px; }
.auth-wrap.auth-wide { max-width: 720px; }

/* 21 · Landing: sections revealed on scroll must never stay invisible — a link
   preview, a print, or a missed observer used to show an empty page below the fold. */
@keyframes m47RevealFallback { to { opacity: 1; transform: none; } }
/* (M48: only where the effects never started; with .l-fx the observer owns the reveal.) */
.landing:not(.l-fx) .l-reveal:not(.in) { animation: m47RevealFallback 0.6s var(--ease-out) 1.6s forwards; }
@media print { .l-reveal { opacity: 1 !important; transform: none !important; } }

/* 22 · Small fixes: the PIN field's placeholder no longer inherits the 12px digit
   spacing ("4 – 8  d i g i t s"); the lobby TV hides the cursor. */
.pin-input::placeholder { letter-spacing: normal; font-size: 15px; font-weight: 500; }
.lobby { cursor: none; }

/* 23 · Calendar on phones: the header wraps instead of pushing the page sideways,
   the view tools step aside, and a booking shows as a colour bar in its day
   (the full title is in the day panel a tap away) instead of "10:…". */
.cal-top { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 640px) {
  .cal-tool { display: none !important; }
  .cal-day .cal-event { font-size: 0; height: 6px; min-height: 0; padding: 0; margin-top: 3px; border-radius: 3px; border-left-width: 0; }
  .cal-day .cal-event > * { display: none; }
  .cal-day .cal-event.occ.hold { height: 6px; border-width: 1px; }
}

/* 24 · Events list: the next step is a quiet line under the title (it used to be a
   second chip beside the status), and the day-of shortcut is an icon that appears
   on row hover instead of a button on every row. */
.ev-next { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--tone-act, var(--gold-text)); }
.ev-next.warn { color: var(--tone-act, var(--gold-text)); }
.row-act { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 6px; border-radius: 8px; color: var(--text-dim); vertical-align: middle; opacity: 0; transition: opacity var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std); }
.row-act svg { width: 15px !important; height: 15px !important; }
tr:hover .row-act, .row-act:focus-visible { opacity: 1; }
.row-act:hover { background: color-mix(in srgb, var(--gold-bright) 14%, transparent); color: var(--text); }
@media (hover: none) { .row-act { display: none; } }
#ev-status-chips .btn { min-height: 0; height: 34px; padding: 0 14px; font-size: 13px; border-radius: 999px; }
@media (max-width: 640px) {
  #ev-status-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #ev-status-chips::-webkit-scrollbar { display: none; }
  #ev-status-chips .btn { flex-shrink: 0; }
}

/* 25 · KPI tiles two-up on phones (the third spans), not three tall stacked cards. */
@media (max-width: 640px) {
  .grid.cols-3:has(> .card.stat) { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid.cols-3:has(> .card.stat) > .card.stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid.cols-3:has(> .card.stat) > .card.stat { padding: 16px; }
}

/* 26 · An empty table shows its message, not a row of column headers over nothing. */
.table:has(> tbody > tr:only-child > td[colspan]) > thead { display: none; }

/* 27 · Reading pages: legal text at a comfortable size, titles in ink not gold. */
.legal-section p, .legal-section li { color: var(--text); font-size: 15px; line-height: 1.7; }
.legal-blurb { font-size: 17px; }
.legal-meta { font-size: 13px; }

/* 28 · A crowded page header never crushes the title: actions wrap under it. */
.page-hero { flex-wrap: wrap; }
.page-hero-text { flex: 1 1 360px; }
.page-hero-actions { flex-shrink: 1; min-width: 0; }

/* 29 · Card headers with actions wrap on phones (they pushed whole pages sideways:
   Rooms & layouts, the event's Vendors & tasks, the package editor). Buttons never
   break their own label across two lines. */
.btn { white-space: nowrap; }
.settings-card-head { flex-wrap: wrap; }
@media (max-width: 640px) {
  .settings-card-action { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .app-main .row.between { flex-wrap: wrap; row-gap: 8px; }
  /* Two-column form grids written inline collapse to one column on phones. */
  .app-main [style*="grid-template-columns:1fr 1fr"], .app-main [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
.app-main .card { overflow-wrap: break-word; }

/* 30 · Form controls in the house colours: gold checkboxes/radios (no browser blue
   or black squares), styled file pickers, and number/time fields at a sensible
   width instead of stretching across half the page. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-gold-solid); }
input[type="file"] { font: inherit; font-size: 13px; color: var(--text-dim); max-width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; margin-right: 12px;
  border-radius: 10px; border: 1px solid var(--btn-ghost-border); background: var(--btn-default-bg);
  color: var(--text); cursor: pointer; transition: background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);
}
input[type="file"]::file-selector-button:hover { border-color: var(--gold-bright); background: var(--btn-default-hover-bg); }
.field > input.input[type="number"], .field > input.input[type="time"] { max-width: 220px; }

/* 31 · The contract signature pad was white-on-white with no edge — now a clear,
   dashed "sign here" surface. */
canvas#sig { border: 1.5px dashed color-mix(in srgb, var(--text) 30%, transparent) !important; border-radius: 12px !important; box-shadow: inset 0 -26px 0 -25px color-mix(in srgb, var(--text) 25%, transparent); cursor: crosshair; }

/* 32 · Tabs: left-aligned under the header, pill-shaped, with a scroll hint on phones. */
.tab-container { justify-content: flex-start; }
.tab-btn { transition: color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std); }
@media (max-width: 640px) {
  .tab-container { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}

/* 33 · Event hub: the when / time / where / how-many line sits right under the title. */
.ev-hero-meta { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-allclear { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 4px; font-size: 14px; }
.dash-allclear-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 18%, transparent); }

/* 34 · Settings hub, balanced: the big "Hall" group spans the full width with its
   tiles four across; the three small groups sit side by side beneath it (they used
   to pair with Hall and leave a tall empty column). Phones get compact rows. */
@media (min-width: 900px) {
  .settings-cat-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .settings-cat-grid > .settings-cat-box:first-child { grid-column: 1 / -1; }
  .settings-cat-grid > .settings-cat-box:first-child .cat-tiles { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .settings-cat-grid .cat-tile { flex-direction: row !important; align-items: center !important; gap: 12px; padding: 12px !important; min-height: 0 !important; }
}

/* ============================================================
   M48 — Brass & Cream. The owner picked this look in the look
   studio: a calm ivory ground, brass instead of bright yellow,
   flat buttons, hairline cards, soft-cornered chips, no orange,
   no pulsing. Colours are light-theme tokens; shapes apply to
   both themes, and the dark theme gets the same brass accent.
   ============================================================ */
:root {
  --font-ui: "DM Sans", "Mulish", system-ui, sans-serif;
  --font-serif: "DM Serif Display", "Fraunces", Georgia, serif;
  --radius: 16px;
  --brass: #c9a46a;
  --brass-fill: #c9a46a;
  --brass-ink: #1d1712;
  --gold-bright: #c9a46a;
  --accent-gold-solid: #c9a46a;
  --accent-gold: #c9a46a;
  --gold-text: #d8b97f;
  --btn-gold-shadow: none;
  --btn-gold-hover-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(201, 164, 106, 0.32);
}
[data-theme="light"] {
  --brass: #a8834a;
  --brass-fill: #97743e;     /* a shade deeper than the accent, so white button text reads */
  --brass-ink: #ffffff;
  --bg-deep: #f6f1e9;
  --text: #2a211b;
  --text-dim: #64564c;
  --glass-bg: #fffdf9;
  --glass-border: #e7ddcf;
  --gold-bright: #a8834a;
  --accent-gold-solid: #a8834a;
  --accent-gold: var(--brass-fill);
  --gold-text: #8a6631;
  --gold-text-bg: linear-gradient(#8a6631, #8a6631);
  --primary-purple: #97743e;
  --secondary-blue: #74582c;
  --success: #4f7a5a;
  --warning: #a9773a;
  --danger: #a33a32;
  --badge-hold-bg: rgba(169, 119, 58, 0.12);
  --badge-hold-color: #8f6430;
  --badge-hold-border: rgba(169, 119, 58, 0.2);
  --badge-confirmed-bg: rgba(79, 122, 90, 0.12);
  --badge-confirmed-color: #4f7a5a;
  --badge-confirmed-border: rgba(79, 122, 90, 0.2);
  --badge-cancelled-bg: rgba(163, 58, 50, 0.1);
  --badge-cancelled-color: #a33a32;
  --badge-cancelled-border: rgba(163, 58, 50, 0.2);
  --btn-default-bg: #fffdf9;
  --btn-default-border: #e3d8c8;
  --btn-default-hover-bg: #f7efe2;
  --btn-ghost-bg: #fffdf9;
  --btn-ghost-border: #e3d8c8;
  --btn-ghost-hover-bg: #f7efe2;
  --btn-primary-shadow: none;
  --btn-primary-hover-shadow: 0 6px 16px -10px rgba(42, 33, 27, 0.45);
  --btn-gold-shadow: none;
  --btn-gold-hover-shadow: 0 6px 16px -10px rgba(42, 33, 27, 0.45);
  --nav-bg: rgba(246, 241, 233, 0.92);
  --nav-border: #e7ddcf;
  --nav-link-color: #7d6e62;
  --nav-link-hover-color: #8a6631;
  --card-shadow: 0 1px 0 rgba(42, 33, 27, 0.04);
  --card-hover-shadow: 0 2px 6px rgba(42, 33, 27, 0.06), 0 22px 44px -22px rgba(42, 33, 27, 0.4);
  --card-hover-border: #d6c3a3;
  --elev-1: var(--card-shadow);
  --elev-2: var(--card-hover-shadow);
  --table-border: #ece3d6;
  --table-hover-bg: rgba(168, 131, 74, 0.05);
  --input-bg: #fffdf9;
  --input-border: #e2d7c7;
  --input-focus-border: #a8834a;
  --cal-day-avail-bg: #fffdf9;
  --ring: 0 0 0 3px rgba(168, 131, 74, 0.3);
}
[data-theme="light"] body { background: var(--bg-deep); }
[data-theme="light"] a { color: #8a6631; }

/* Cards: the ivory surface, a hairline edge, no frosted glass. */
.card, .ev-box, .ev-detail .page-hero { backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 16px; }
[data-theme="light"] .card, [data-theme="light"] .ev-box, [data-theme="light"] .ev-detail .page-hero { background: var(--glass-bg); border-color: var(--glass-border); box-shadow: var(--card-shadow); }
.ev-detail .page-hero::after { display: none; }
.ev-box:hover, .ev-box:focus-visible { transform: translateY(-1px); box-shadow: var(--card-hover-shadow); }

/* Buttons: flat brass for the one main action, ivory with a thin edge for the rest. */
.btn { border-radius: 10px; }
.btn-gold, .btn-primary { background: var(--brass-fill) !important; color: var(--brass-ink) !important; border: 1px solid transparent; box-shadow: var(--btn-gold-shadow); }
.btn-gold:hover, .btn-primary:hover { filter: brightness(1.06); box-shadow: var(--btn-gold-hover-shadow); }
.btn-gold::after, .btn-primary::after { display: none !important; }

/* Status chips: soft corners, quiet, and a HOLD no longer pulses. */
.badge { border-radius: 6px; }
.badge-hold, .badge-hold::before { animation: none !important; }

/* Icon tiles: a thin outline instead of a gold wash. */
.ev-box-ic, .page-hero-ic { background: transparent !important; border: 1px solid var(--glass-border) !important; color: var(--gold-text) !important; border-radius: 9px !important; box-shadow: none !important; }

/* Brass wherever the old gold filled a shape. */
.lc-step.done .lc-dot { background: var(--brass-fill); color: var(--brass-ink); box-shadow: none; }
.lc-rule.done { background: var(--gold-bright); }
.ov-bar-fill { background: var(--brass-fill); }
.gold-text { background: none; -webkit-text-fill-color: currentColor; color: var(--gold-text); }
.cal-event.occ { background: var(--occ, var(--brass-fill)); background-image: none; }
[data-theme="light"] .settings-hero-mark, [data-theme="light"] .settings-profile-avatar { color: #fff; }
[data-theme="light"] .tab-btn.active, [data-theme="light"] .cal-picker-btn.active { box-shadow: none; }

/* Serif numbers line up with the sans ones. */
.serif, h1, h2, h3, .aging-amt { font-variant-numeric: lining-nums; }

/* M48 round 2 — the owner's type and header pick from the header studio ("Panel").
   DM Serif Display has a single weight, so bold requests render the real face
   instead of a smeared synthetic bold; bold text is 600, not 700. */
html { font-synthesis-weight: none; }
b, strong { font-weight: 600; }
.ev-detail .page-hero-text h1 { font-size: 36px; line-height: 1.1; }
.ev-box { padding: 20px 22px 22px; }
.ev-box-head { gap: 12px; margin: -20px -22px 0; padding: 13px 22px; background: color-mix(in srgb, var(--gold-bright) 8%, var(--glass-bg)); border-bottom: 1px solid var(--glass-border); border-radius: 15px 15px 0 0; }
.ev-box-head h3 { font-size: 21px; line-height: 1.15; font-weight: 400; }
.ev-box-ic { background: var(--brass-fill) !important; color: var(--brass-ink) !important; border-color: transparent !important; }
.ev-box-go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--glass-border); background: var(--glass-bg); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.ev-box:hover .ev-box-go { background: var(--brass-fill); border-color: transparent; color: var(--brass-ink); transform: none; }
.ev-box-body { margin-top: 14px; zoom: 1.08; }
.ev-box-body [style*="font-weight:700"] { font-weight: 600 !important; }
@media (max-width: 640px) {
  .ev-detail .page-hero-text h1 { font-size: 27px; }
  .ev-box { padding: 16px 16px 18px; }
  .ev-box-head { margin: -16px -16px 0; padding: 12px 16px; }
  .ev-box-head h3 { font-size: 19px; }
  .ev-box-body { zoom: 1.04; }
}

/* M48 round 3 — the status ladder (the owner's pick from the status studio).
   Six meanings, one colour each, everywhere: done, waiting, your next step,
   urgent, closed, and time/neutral. Red is only for what is actually urgent;
   a cancelled booking is grey, and a next step is brass text, not a chip. */
:root {
  --tone-done: #8fc0a0; --tone-wait: #d8ad6e; --tone-act: #d8b97f;
  --tone-urgent: #e58a7e; --tone-closed: #a89e94; --tone-time: #c9bcae;
}
[data-theme="light"] {
  --tone-done: #4f7a5a; --tone-wait: #946631; --tone-act: #8a6631;
  --tone-urgent: #b03a2e; --tone-closed: #7d746b; --tone-time: #5f5148;
}
.badge { font-weight: 600; letter-spacing: 0; text-transform: none; border: 1px solid transparent; }
.badge::before { width: 7px; height: 7px; }
.badge-confirmed, .tone-done { background: color-mix(in srgb, var(--tone-done) 13%, transparent); color: var(--tone-done); }
.badge-hold, .tone-wait { background: color-mix(in srgb, var(--tone-wait) 13%, transparent); color: var(--tone-wait); }
.tone-act { background: color-mix(in srgb, var(--tone-act) 13%, transparent); color: var(--tone-act); }
.badge-urgent, .tone-urgent { background: color-mix(in srgb, var(--tone-urgent) 12%, transparent); color: var(--tone-urgent); }
.badge-cancelled, .tone-closed { background: color-mix(in srgb, var(--tone-closed) 13%, transparent); color: var(--tone-closed); }
.tone-time { background: color-mix(in srgb, var(--tone-time) 11%, transparent); color: var(--tone-time); }
.ns { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--tone-act); white-space: nowrap; }

/* M48 round 4 — the dashboard is "today first" (the owner's pick from the
   dashboard studio): what needs doing and what's coming fill the wide column;
   the numbers, the setup line and the demo note sit in a narrow rail; and the
   page carries one gold button, Quick hold. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; margin-top: 22px; }
.dash-main, .dash-side { display: grid; gap: 18px; align-content: start; min-width: 0; }
.dash-grid .mt-lg { margin-top: 0 !important; }
.dash-side:empty { display: none; }
.dash-stats { display: grid; gap: 10px; }
.dash-stats .card.stat { padding: 14px 18px; }
.dash-stats .card.stat::before, .dash-stats .card.stat::after { display: none; }
.dash-stats .card.stat .value { font-size: 26px; }
.dash-setup { padding: 12px 16px; }
.dash-setup .row { flex-wrap: wrap; gap: 10px !important; }
.dash-setup b { font-size: 15px !important; }
.dash-setup .btn { color: var(--gold-text) !important; }
.dash-main > .card > h3 { font-family: var(--font-serif); font-weight: 400; font-size: 22px; margin-bottom: 4px; }
.dash-main > .card > h3 .muted { font-family: var(--font-ui); font-size: 13px !important; }
.dash-main .clickable-up-row td { padding-top: 12px; padding-bottom: 12px; }
.dash-side .card h3 .muted { display: block; margin-top: 2px; }
@media (max-width: 980px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* M48 round 5 — forms are the "Panel form" with underline fields (the owner's
   pick from the forms studio). In the app, a field is a label over an
   underline; on focus a brass line grows out from the centre and the label
   turns brass. A name field (hall, room, package, person) is set as the
   heading it becomes. Settings sections get the hub's header band, and every
   settings form ends in a save bar that stays in view (installSaveBars). */
:root { --field-line: rgba(255, 255, 255, 0.22); }
[data-theme="light"] { --field-line: #d6c8b3; }
[data-zone="app"] .field > label { font-size: 13.5px; font-weight: 600; color: var(--text); transition: color 0.25s ease; }
[data-zone="app"] .field:focus-within > label { color: var(--gold-text); }
[data-zone="app"] .field input.input,
[data-zone="app"] .field select.input {
  min-height: 44px; padding-left: 0; padding-right: 0; border: 0; border-bottom: 1px solid var(--field-line); border-radius: 0;
  background-color: transparent; box-shadow: none;
  background-image: linear-gradient(var(--gold-bright), var(--gold-bright));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 0% 2px;
  transition: background-size 0.4s var(--ease-out), border-color 0.2s ease, color 0.2s ease;
}
[data-zone="app"] .field select.input { padding-right: 4px; }
[data-zone="app"] .field input.input:hover, [data-zone="app"] .field select.input:hover { border-bottom-color: color-mix(in srgb, var(--gold-bright) 50%, var(--field-line)); }
[data-zone="app"] .field input.input:focus, [data-zone="app"] .field select.input:focus {
  outline: none; box-shadow: none; transform: none; background-color: transparent; background-size: 100% 2px; border-bottom-color: transparent;
}
[data-zone="app"] .field input.input[type="file"], [data-zone="app"] .field input.input[type="color"] {
  border: 1px solid var(--field-line); border-radius: 10px; padding: 6px 10px; background-image: none;
}
[data-zone="app"] .field input.input:disabled { border-bottom-style: dashed; color: var(--text-dim); }
[data-zone="app"] .field textarea.input { border-radius: 10px; border: 1px solid var(--field-line); background: var(--glass-bg); }
[data-zone="app"] .field textarea.input:focus { border-color: var(--gold-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-bright) 25%, transparent); transform: none; }
@media (prefers-reduced-motion: reduce) { [data-zone="app"] .field .input { transition: none; } }

/* A name field is a heading while you type it. */
[data-zone="app"] input.input:is([name="name"], [name="first_name"], [name="last_name"], [name="company"], [name="hall"], [name="hallName"]) {
  font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: 0;
  min-height: 0; padding: 2px 0 6px; color: var(--text);
  border: 0; border-bottom: 1px solid var(--field-line); border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--gold-bright), var(--gold-bright));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 0% 2px;
  transition: background-size 0.4s var(--ease-out), border-color 0.2s ease;
}
[data-zone="app"] input.input:is([name="name"], [name="first_name"], [name="last_name"], [name="company"], [name="hall"], [name="hallName"]):focus {
  background-color: transparent; background-size: 100% 2px; border-bottom-color: transparent; box-shadow: none; transform: none;
}
[data-zone="app"] input.input:is([name="name"], [name="first_name"], [name="last_name"], [name="company"], [name="hall"], [name="hallName"])::placeholder {
  font-family: var(--font-serif); color: var(--text-dim); opacity: 0.45;
}

/* Settings sections wear the hub's header band. */
[data-zone="app"] .gs-accordion:has(> .gs-accordion-title) { padding: 0; overflow: clip; border-radius: 16px; border-color: var(--glass-border); background: var(--glass-bg); box-shadow: var(--card-shadow); }
[data-zone="app"] .gs-accordion-title { background: color-mix(in srgb, var(--gold-bright) 8%, var(--glass-bg)); border-bottom: 1px solid var(--glass-border); padding: 14px 22px; font: 400 21px var(--font-serif); color: var(--text); border-radius: 0 !important; }
[data-zone="app"] .gs-accordion-title + .gs-accordion-content { padding: 20px 22px 22px; border: 0 !important; }
[data-zone="app"] .settings-section-card::before { display: none; }
[data-zone="app"] .settings-section-card > .settings-card-head { margin: -22px -22px 18px; padding: 14px 22px; background: color-mix(in srgb, var(--gold-bright) 8%, var(--glass-bg)); border-bottom: 1px solid var(--glass-border); border-radius: 15px 15px 0 0; align-items: center; }
[data-zone="app"] .settings-section-card > .settings-card-head h3 { font-family: var(--font-serif); font-weight: 400; font-size: 21px; margin: 0; }
[data-zone="app"] .settings-section-card > .settings-card-head p { margin: 2px 0 0; }

/* The save bar. */
.sv-bar { position: sticky; bottom: 14px; z-index: 20; margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; background: color-mix(in srgb, var(--glass-bg) 94%, transparent); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: 0 12px 30px -16px rgba(42, 33, 27, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sv-state { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-dim); }
.sv-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone-done); transition: background-color 0.2s ease; }
.sv-bar.dirty .sv-state { color: var(--text); font-weight: 600; }
.sv-bar.dirty .sv-state i { background: var(--tone-wait); }
.sv-acts { display: flex; gap: 8px; align-items: center; }
.sv-acts .btn { width: auto !important; margin: 0 !important; }
.sv-bar:not(.dirty) .sv-undo { visibility: hidden; }
.sv-bar:not(.dirty) .sv-acts .btn:not(.sv-undo) { opacity: 0.55; }

/* M48 round 6 — family pages wear the hall's letterhead (the owner's pick from
   the family-pages studio): the hall's photo behind its name, the simcha and
   date under it, the address and phone at the foot, line icons not emoji. */
[data-zone="public"] #view { overflow-x: clip; }
.portal-hero.fam {
  position: relative; width: 100vw; margin: 0 0 26px calc(50% - 50vw); padding: 64px 20px 52px; text-align: center; color: #fbf6ee;
  background: linear-gradient(rgba(30, 22, 16, 0.55), rgba(30, 22, 16, 0.72)), var(--fam-photo, none) center 35% / cover no-repeat, #2a211b;
}
.portal-hero.fam h1 { color: #fbf6ee; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 4vw, 38px); margin: 0; -webkit-text-fill-color: currentColor; background: none; }
.portal-hero.fam h1::after { content: ""; display: block; width: 46px; height: 1px; background: #d9b878; margin: 12px auto 0; }
.portal-hero.fam .portal-sub { color: #eadcc4; margin-top: 10px; }
.portal-hero.fam img { max-height: 56px; background: #fffdf9; padding: 6px 10px; border-radius: 12px; margin-bottom: 12px; }
.portal-hero.fam .btn-ghost { background: rgba(255, 253, 249, 0.12) !important; color: #fbf6ee !important; border-color: rgba(255, 253, 249, 0.32) !important; }
.portal-hero.fam .badge { background: rgba(255, 253, 249, 0.92) !important; }
.portal-hero.fam a:not(.btn) { color: #f0d9a8; }
.fam-page { margin-top: 0 !important; }
.fam-foot { text-align: center; font-size: 12.5px; color: var(--text-dim); padding: 28px 16px 34px; }
.fam-foot b { color: var(--text); font-weight: 600; }
.fam-ic { display: inline-flex; color: var(--gold-text); }
.fam-ic-sm svg { width: 13px; height: 13px; vertical-align: -2px; }
.pin-icon .fam-ic svg { width: 34px; height: 34px; }
.portal:has(> .portal-hero.fam:first-child) { padding-top: 0; }
.portal-hero.fam { animation: none; }
.portal-hero.fam h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; }

/* M48 round 7 — the printed papers (the owner's pick from the papers studio:
   "brass band"). One letterhead for the statement and the contract: a brass
   band with the hall's name, address and phone; a big title with its numbers;
   ivory paper; shaded rows; the balance in a box; paper signature lines. */
.print-doc.doc { --doc-ink: #1f1a16; --doc-soft: #6b5f55; --doc-rule: #ddd3c4; --doc-acc: #8f6b35; --doc-tint: #f4ede2;
  background: #fbf7ef !important; color: var(--doc-ink); border: 1px solid var(--doc-rule) !important; border-radius: 6px !important; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 30px 60px -34px rgba(0,0,0,.35) !important;
  padding: 0 56px 40px !important; overflow: hidden; font-size: 13.5px; line-height: 1.55; display: flex; flex-direction: column; min-height: 900px; }
.print-doc.doc .q { color: var(--doc-soft); }
.print-doc.doc .doc-band { margin: 0 -56px 30px; padding: 44px 56px 30px; background: linear-gradient(rgba(122, 90, 44, 0.80), rgba(84, 60, 28, 0.88)), var(--doc-photo, none) center 35% / cover no-repeat, var(--doc-acc); color: #fffaf1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-doc.doc .doc-logo { max-height: 46px; background: #fffaf1; padding: 5px 9px; border-radius: 8px; margin-bottom: 10px; display: block; }
.print-doc.doc .doc-name { font: 400 30px/1.1 var(--font-serif); color: #fffaf1; }
.print-doc.doc .doc-line { margin-top: 6px; font-size: 12px; letter-spacing: 0.02em; color: rgba(255, 250, 241, 0.85); }
.print-doc.doc .doc-line.doc-kash { margin-top: 3px; font-style: italic; }
.print-doc.doc .doc-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--doc-rule); }
.print-doc.doc .doc-t { font: 400 34px/1 var(--font-serif); }
.print-doc.doc .doc-meta { text-align: right; font-size: 12.5px; color: var(--doc-soft); }
.print-doc.doc .doc-meta b { color: var(--doc-ink); font-weight: 600; }
.print-doc.doc .doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 20px 0 4px; }
.print-doc.doc .doc-lbl { font: 700 10.5px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--doc-soft); margin-bottom: 4px; }
.print-doc.doc table { width: 100%; border-collapse: collapse; margin-top: 18px; font-variant-numeric: tabular-nums; }
.print-doc.doc th { text-align: left; font: 700 10.5px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--doc-soft); padding: 8px 10px; border-bottom: 1px solid var(--doc-ink); background: none; }
.print-doc.doc td { padding: 9px 10px; border: 0; vertical-align: top; color: var(--doc-ink); }
.print-doc.doc .r { text-align: right; }
.print-doc.doc table.doc-items tbody tr:nth-child(odd) td { background: var(--doc-tint); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-doc.doc table.doc-kv td { border-bottom: 1px solid var(--doc-rule); }
.print-doc.doc table.doc-kv td.q { width: 170px; }
.print-doc.doc .doc-totals { margin: 16px 0 0 auto; width: 300px; }
.print-doc.doc .doc-totals > div { display: flex; justify-content: space-between; padding: 6px 10px; }
.print-doc.doc .doc-totals .sum { border-top: 1px solid var(--doc-ink); font-weight: 600; margin-top: 4px; }
.print-doc.doc .doc-due { margin-top: 10px; padding: 12px 14px !important; align-items: baseline; font-weight: 700; background: var(--doc-tint); border-left: 3px solid var(--doc-acc); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-doc.doc .doc-due .amt { font: 400 26px var(--font-serif); color: var(--doc-acc); }
.print-doc.doc .doc-due-by { justify-content: flex-end !important; font-size: 11.5px; padding-top: 6px !important; }
.print-doc.doc h3 { font: 400 18px var(--font-serif); margin: 30px 0 0; color: var(--doc-ink); }
.print-doc.doc .doc-terms { margin-top: 22px; white-space: pre-line; font-size: 14px; line-height: 1.7; }
.print-doc.doc .doc-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 54px; }
.print-doc.doc .doc-sig .line { border-bottom: 1px solid var(--doc-ink); height: 46px; }
.print-doc.doc .doc-sig .cap { display: flex; justify-content: space-between; color: var(--doc-soft); font-size: 11.5px; margin-top: 6px; }
.print-doc.doc .doc-sig-img { display: block; max-height: 60px; margin-bottom: -50px; }
.print-doc.doc .doc-foot { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-top: 1px solid var(--doc-rule); padding-top: 12px; margin-top: auto; color: var(--doc-soft); font-size: 11.5px; }
.print-doc.doc .doc-foot::before { content: none; }
.print-doc.doc .doc-body-end { height: 40px; flex: none; }
.print-doc.doc .doc-thanks { font: 400 15px var(--font-serif); color: var(--doc-ink); white-space: nowrap; }
.print-doc.doc .doc-foot > span:last-child { text-align: right; overflow-wrap: anywhere; }
@media print { .print-doc.doc { min-height: 0; box-shadow: none !important; border: 0 !important; padding: 0 0 20px !important; } .print-doc.doc .doc-band { margin: 0 0 26px; padding: 24px 28px 20px; } }
@media (max-width: 640px) { .print-doc.doc { padding: 0 18px 28px !important; } .print-doc.doc .doc-band { margin: 0 -18px 22px; padding: 22px 18px; } .print-doc.doc .doc-parties { grid-template-columns: 1fr; } .print-doc.doc .doc-totals { width: 100%; } }

/* M48 round 8 — one SVG icon family (owner fact F36: no emoji anywhere). Every
   former emoji is an `ico(name)` from icons.js; it inherits the text colour and
   scales with the font size around it. */
.ic { width: 1.1em; height: 1.1em; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; }

/* ==== M48 · Landing effects: the first layout, with hover and scroll on top ====
   The owner's ask: the landing exactly as it first was, only with hover and
   scroll effects. Motion only — every element ends where the layout puts it.
   The scroll states hang off .l-fx, which landingFx() adds only when motion is
   welcome; the hero gets --sy (px scrolled, up to its height) and --sp (0..1). */
@keyframes lRise { from { opacity: 0; transform: translateY(20px); } }
@keyframes lLine { from { transform: translateY(108%); } }
@keyframes lSettle { from { transform: scale(1.12); } }
.l-line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.l-line > span { display: inline-block; }
/* Hero: the headline rises line by line; the photo settles, then drifts slower
   than the page while the copy eases up and fades as you scroll away. */
.landing.l-fx .l-hero h1 .l-line > span { animation: lLine 1s var(--ease-out) 0.15s both; }
.landing.l-fx .l-hero h1 .l-line + .l-line > span { animation-delay: 0.3s; }
.landing.l-fx .l-hero { overflow: hidden; }
.landing.l-fx .l-hero-bg { transform: translate3d(0, calc(var(--sy, 0) * 0.38px), 0) scale(1.06); animation: lSettle 2.4s var(--ease-out) both; will-change: transform; }
.landing.l-fx .l-hero-inner > * { transform: translate3d(0, calc(var(--sy, 0) * -0.12px), 0); opacity: calc(1 - var(--sp, 0) * 0.9); }
/* Sections: the heading leads, then cards, steps and questions follow one another. */
.landing.l-fx .l-reveal .l-h2, .landing.l-fx .l-reveal .l-lead { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.landing.l-fx .l-reveal:not(.in) .l-h2, .landing.l-fx .l-reveal:not(.in) .l-lead { opacity: 0; transform: translateY(14px); }
.landing.l-fx .l-reveal .l-lead { transition-delay: 0.08s; }
.landing.l-fx .l-reveal:not(.in) :is(.l-pains, .l-points, .l-steps, .l-parties, .l-faq, .l-spot-grid) > * { opacity: 0; }
.landing.l-fx .l-reveal.in :is(.l-pains, .l-points, .l-steps, .l-parties, .l-faq, .l-spot-grid) > * { animation: lRise 0.8s var(--ease-out) backwards; }
.landing.l-fx .l-reveal.in :is(.l-pains, .l-points, .l-steps, .l-parties, .l-faq, .l-spot-grid) > :nth-child(1) { animation-delay: 0.16s; }
.landing.l-fx .l-reveal.in :is(.l-pains, .l-points, .l-steps, .l-parties, .l-faq, .l-spot-grid) > :nth-child(2) { animation-delay: 0.26s; }
.landing.l-fx .l-reveal.in :is(.l-pains, .l-points, .l-steps, .l-parties, .l-faq, .l-spot-grid) > :nth-child(3) { animation-delay: 0.36s; }
.landing.l-fx .l-reveal.in :is(.l-pains, .l-points, .l-steps, .l-parties, .l-faq, .l-spot-grid) > :nth-child(4) { animation-delay: 0.46s; }
.landing.l-fx .l-reveal.in :is(.l-pains, .l-points, .l-steps, .l-parties, .l-faq, .l-spot-grid) > :nth-child(5) { animation-delay: 0.56s; }
.landing.l-fx .l-reveal.in :is(.l-pains, .l-points, .l-steps, .l-parties, .l-faq, .l-spot-grid) > :nth-child(6) { animation-delay: 0.66s; }
/* The steps' gold thread draws itself left to right once the steps arrive. */
.landing.l-fx .l-steps::before { transform-origin: left center; transition: transform 1.3s var(--ease-out) 0.3s; }
.landing.l-fx .l-reveal:not(.in) .l-steps::before { transform: scaleX(0); }
/* The closing card swells into place. */
.landing.l-fx .l-close-card { transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out); }
.landing.l-fx .l-reveal:not(.in) .l-close-card { transform: scale(0.95); }
/* Hover: cards lift with a soft shadow (never a border), their icon tilts,
   a step's number glows, a question's row warms, the gold button catches light. */
.landing :is(.l-pain, .l-point, .l-party, .l-spot, .l-close-card) { transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.landing :is(.l-pain, .l-party):hover { transform: translateY(-4px); box-shadow: 0 18px 36px -24px rgba(42, 33, 27, 0.45); }
.landing .l-point:hover { transform: translateY(-4px); }
.landing .l-spot:hover, .landing .l-close-card:hover { box-shadow: 0 26px 50px -30px rgba(42, 33, 27, 0.4); }
.landing :is(.l-pain-ic, .l-point-ic, .l-party-ic, .l-role-ic, .l-check-ic) { transition: transform 0.35s var(--ease-out), background-color 0.35s ease; }
.landing :is(.l-pain, .l-point, .l-party, .l-role):hover :is(.l-pain-ic, .l-point-ic, .l-party-ic, .l-role-ic) { transform: scale(1.1) rotate(-6deg); }
.landing .l-check:hover .l-check-ic { transform: scale(1.18); }
.landing .l-step-n { transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.landing .l-step:hover .l-step-n { transform: scale(1.1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold-bright) 14%, transparent), 0 0 26px color-mix(in srgb, var(--gold-bright) 30%, transparent); }
.landing .l-faq summary { transition: background-color 0.2s ease; border-radius: 14px; }
.landing .l-faq summary:hover { background-color: color-mix(in srgb, var(--gold-bright) 7%, transparent); }
.landing .btn-gold { position: relative; overflow: hidden; }
.landing .btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.landing .btn-gold:hover::after { transform: translateX(120%); transition: transform 0.75s var(--ease-out); }
.landing .l-try { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: opacity 0.2s ease, background-size 0.3s var(--ease-out); }
.landing .l-link:hover .l-try, .landing .l-try:hover { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  .landing :is(.l-pain, .l-point, .l-party):hover, .landing .l-step:hover .l-step-n { transform: none; }
  .landing .btn-gold:hover::after { transform: translateX(-120%); transition: none; }
}
@media print {
  .landing .l-reveal *, .landing .l-line > span { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ==== M48 · Public pages open like the website ====
   Pricing, How it works, About and Contact start with a short band of the
   hall photo in the landing hero's exact treatment (same overlay, ivory type,
   warm-gold eyebrow); the title rises in on load and the photo settles. The
   page below keeps its own layout. */
.pub-band { position: relative; overflow: hidden; text-align: center; padding: 84px 20px 70px; background: #2a211b; }
.pub-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(30, 22, 16, 0.48), rgba(30, 22, 16, 0.72)), url("/simcha_hall.webp") center 35% / cover no-repeat; animation: pubSettle 1.6s var(--ease-out) both; }
.pub-band-in { position: relative; max-width: 760px; margin: 0 auto; }
.pub-band-eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #eadcc4; }
.pub-band h1 { margin: 0; font-family: var(--font-serif); font-size: clamp(32px, 4.6vw, 50px); line-height: 1.1; color: #fbf6ee; -webkit-text-fill-color: currentColor; background: none; }
.pub-band h1 .l-line > span { animation: lLine 0.95s var(--ease-out) 0.1s both; }
.pub-band-sub { margin: 14px auto 0; max-width: 620px; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.65; color: #eadcc4; animation: lRise 0.8s var(--ease-out) 0.3s both; }
.pub-after { padding-top: 34px; }
.auth-wrap.pub-after { padding-top: 34px; }
@keyframes pubSettle { from { transform: scale(1.06); } }
@media (max-width: 560px) { .pub-band { padding: 60px 16px 50px; } }
@media (prefers-reduced-motion: reduce) {
  .pub-band::before, .pub-band h1 .l-line > span, .pub-band-sub { animation: none; }
}

/* ==== M48 · Calendar (the owner's pick in the calendar studio: "cards",
   capital weekday names, today as a brass dot) ====
   Plain ivory day cards (the gold "a room is free" wash is gone; the n/total
   beside the date carries that), Shabbos a quiet warm grey, the date in DM
   Serif, parsha and yom tov in a small brass pill, simchas as brass chips,
   holds dashed, and today's number sitting in a brass dot. */
.cal-day { min-height: 100px; }
.cal-day.available { background: var(--glass-bg); border-color: var(--glass-border); }
.cal-day.shabbos, .cal-day.shabbos.available { background: color-mix(in srgb, var(--glass-border) 42%, var(--glass-bg)); }
.cal-day .day-num { font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1; }
.cal-day .day-num .muted { font-family: var(--font-ui); font-size: 10px !important; margin-left: 4px; vertical-align: 3px; }
.cal-tag { display: inline-block; max-width: 100%; margin-top: 5px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--brass-fill) 12%, transparent); font-size: 10px; }
.cal-day.today { outline: 0; box-shadow: none; }
.cal-day.today .day-n { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--brass-fill); color: #fff; font-size: 16px; }

/* ==== M48 · Today (the owner's pick in the Today studio: "morning briefing") ====
   A light briefing card that says the day in one sentence (simchas, guests,
   what's next, Rosh Chodesh / yom tov) beside its facts (sunset, Hebrew date,
   what's waiting); the simchas as a timeline; "Needs your attention" grouped
   (holds / payments / replies) beside the tasks grouped by simcha. */
.td-page .page-hero p { display: none; }
.td-body { display: grid; gap: 18px; margin-top: 22px; }
.td-card { margin: 0 !important; }
.td-h { margin: 0 0 10px; font-family: var(--font-serif); font-weight: 400; font-size: 22px; }
.td-sub { font-family: var(--font-ui); font-size: 12.5px; font-weight: 400; }
.td-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.td-row { align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--glass-border); }
.td-row .ic { color: var(--gold-text); }
.td-row .btn { flex-shrink: 0; }
.td-task { align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--glass-border); cursor: pointer; }
.td-task input { width: 18px; height: 18px; flex: none; }
.td-acts { display: inline-flex; gap: 6px; white-space: nowrap; }
.td-tmw { margin: 10px 2px 0; font-size: 13px; }
.td-eb { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.td-meta { font-size: 13px; margin-top: 2px; }
.td-meta .ic { vertical-align: -2px; }
.td-ev-t { font-family: var(--font-serif); font-size: 19px; color: var(--text); }
.td-brief { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 26px 28px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass-bg); background-image: radial-gradient(ellipse 60% 140% at 100% 0%, color-mix(in srgb, var(--brass-fill) 14%, transparent), transparent 62%); animation: m47Rise var(--dur-3, .5s) var(--ease-out) backwards; }
.td-big { font-family: var(--font-serif); font-size: 34px; line-height: 1.12; margin: 8px 0 6px; color: var(--text); }
.td-big em { font-style: normal; color: var(--gold-text); }
.td-brief p { margin: 0; color: var(--text-dim); font-size: 14.5px; }
.td-brief-r { display: grid; gap: 10px; border-left: 1px solid var(--glass-border); padding-left: 22px; }
.td-brief-r span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.td-brief-r b { font-weight: 500; font-size: 15px; color: var(--text); }
.td-tl { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.td-tl li { display: grid; grid-template-columns: 96px 22px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--glass-border); }
.td-tl li:first-child { border-top: 0; }
.td-time b { display: block; font-weight: 600; font-size: 14px; }
.td-time i { display: block; font-style: normal; font-size: 12px; color: var(--text-dim); }
.td-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--brass-fill); background: var(--glass-bg); justify-self: center; }
.td-tl li.next .td-dot { background: var(--brass-fill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass-fill) 18%, transparent); }
.td-tl li.over { opacity: .55; }
.td-tl li.over .td-dot { border-color: var(--text-dim); }
.td-grp + .td-grp { margin-top: 12px; }
.td-grp-h { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); padding: 2px 0 6px; }
.td-grp-h a { color: inherit; }
.td-grp-h span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; border-radius: 999px; background: color-mix(in srgb, var(--brass-fill) 14%, transparent); font-size: 10.5px; letter-spacing: 0; }
@media (max-width: 860px) {
  .td-brief { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .td-brief-r { border-left: 0; padding-left: 0; border-top: 1px solid var(--glass-border); padding-top: 14px; }
  .td-big { font-size: 27px; }
  .td-cols { grid-template-columns: minmax(0, 1fr); }
  .td-tl li { grid-template-columns: 74px 16px minmax(0, 1fr); }
  .td-tl li .td-acts { grid-column: 3; }
}

/* ==== M48 · The list kit (the owner's Events studio pick, "by month") ====
   One look for every list in the app, so the tables end up alike: add the
   classes and a list follows it. Events, the calendar's list view and the
   invoices use it today.
   - table.list-table      comfortable rows, hairline separators, no hover border
   - tr.list-group         a heading row (month + a small gold line under it)
   - .date-leaf            a small calendar leaf: day, MON · DOW, Hebrew date
   - .row-eyebrow / .row-name   small caps type line over a DM Serif name
   - td.status-dot         the status badge as a coloured dot with its word
   - .seg-meter            readiness, one segment per dimension
   - .tabs-line            a filter row as underlined tabs; any .btn inside is a
                           tab, .btn-gold marks the active one, .tab-n a count */
.list-table td { padding: 14px 16px; vertical-align: middle; }
.list-table td small { font-size: 12px; color: var(--text-dim); }
.list-table tr.list-group td { text-align: left; padding: 22px 16px 8px; border-bottom: 1px solid var(--glass-border); background: none; cursor: default; }
.list-table tr.list-group:first-child td { padding-top: 6px; }
.list-table tr.list-group b { font-family: var(--font-serif); font-weight: 400; font-size: 21px; color: var(--text); margin-right: 12px; }
.list-table tr.list-group span { font-size: 12px; color: var(--gold-text); letter-spacing: .04em; }
.date-leaf { display: grid; justify-items: start; line-height: 1.1; }
.date-leaf b { font-family: var(--font-serif); font-weight: 400; font-size: 26px; color: var(--text); }
.date-leaf i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--gold-text); margin-top: 2px; white-space: nowrap; }
.date-leaf u { text-decoration: none; font-size: 11.5px; font-weight: 400; color: var(--text-dim); margin-top: 3px; white-space: nowrap; }
.date-leaf-flag { font-size: 9px !important; padding: 0 6px !important; margin-left: 4px; letter-spacing: .04em; vertical-align: 1px; }
.row-eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; }
.row-eyebrow-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.row-name, .list-table a.row-name { font-family: var(--font-serif); font-size: 18px; color: var(--text); }
td.status-dot { white-space: nowrap; }
.status-dot .badge { background: none !important; border: 0 !important; padding: 0 !important; font-weight: 600; }
.seg-meter { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 8px; }
.seg-meter i { width: 16px; height: 5px; border-radius: 3px; background: var(--glass-border); }
.seg-meter i.on { background: var(--brass-fill); }
.tabs-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-bottom: 12px; }
.tabs-line .btn { background: none !important; border: 0 !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; box-shadow: none !important; color: var(--text-dim) !important; padding: 6px 2px !important; font-size: 13.5px; font-weight: 600; transform: none !important; }
.tabs-line .btn.btn-gold { border-bottom-color: var(--brass-fill) !important; color: var(--text) !important; }
.tabs-line .tab-n { font-size: 11px; font-weight: 500; opacity: .7; margin-left: 2px; }
.tabs-line .tab-n::before { content: "· "; }
.tabs-sep { width: 1px; height: 22px; background: var(--glass-border); }
@media (max-width: 640px) {
  .list-table tr.list-group span { display: block; margin-top: 2px; }
  .list-table td { padding: 12px 10px; }
  .row-name, .list-table a.row-name { font-size: 16px; }
  .date-leaf b { font-size: 22px; }
  .tabs-line { gap: 2px 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs-line .btn { white-space: nowrap; flex: none; }
}
/* The month picker row wraps on a phone, so the "Today" jump (shown off the
   current month) drops under it instead of pushing the page sideways. */
@media (max-width: 640px) { .cal-picker-wrapper { max-width: 100%; } .cal-picker-wrapper > div:first-child { flex-wrap: wrap; row-gap: 8px; } }

/* ==== M48 · The Keystone Ring logo (the owner's pick in the ring studio: R3,
   the two-tone band) ====
   The nav brand is the lockup as one SVG (the ring beside the outlined DM Serif
   "SimchaRing", "Ring" in brass), replacing the calendar mark and the Orbitron
   wordmark. No gleam: the mark stays still. */
.brand { position: relative; display: inline-flex; align-items: center; text-decoration: none; animation: none; }
.brand-lockup { display: block; height: 40px; width: auto; }
.brand .beta-badge { top: -4px; right: -30px; }
@media (max-width: 640px) { .brand-lockup { height: 34px; } }

/* ==== M48 · Customers (the owner's pick in the Customers studio: "families
   with their simchas") ====
   On the list kit: a monogram set in a ring like the logo (ink band, brass
   lining), the count of simchas and when the next is in small caps over the
   family name in DM Serif, the next simcha as a date leaf with its status,
   and call / WhatsApp / email as round buttons beside the number. */
.cu-id { display: inline-flex; align-items: center; gap: 12px; }
.cu-id > span { display: grid; }
.cu-av { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--glass-bg); box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 3.5px var(--brass-fill); color: var(--text); font-family: var(--font-serif); font-size: 18px; line-height: 1; }
.list-table a.cu-name { font-size: 19px; }
.cu-next { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.cu-next .date-leaf b { font-size: 22px; }
.cu-next > span:last-child { display: grid; gap: 2px; }
.cu-next > span:last-child b { font-weight: 600; font-size: 14px; color: var(--text); }
.cu-next small { font-size: 12px; font-weight: 600; }
.cu-next small.ok { color: var(--success); }
.cu-next small.hold { color: var(--gold-text); }
.cu-next small::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.cu-contact { display: inline-flex; align-items: center; gap: 12px; }
.cu-acts { display: inline-flex; gap: 6px; }
.cu-act { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--brass-fill) 9%, transparent); color: var(--gold-text); transition: background-color .2s, transform .2s; }
.cu-act:hover { background: color-mix(in srgb, var(--brass-fill) 18%, transparent); transform: translateY(-1px); }
.cu-act svg { width: 15px; height: 15px; }
.cu-ph { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 13.5px; white-space: nowrap; }
@media (max-width: 640px) {
  /* A phone stacks each family: the name across the top, the next simcha and
     the round buttons under it. */
  .cu-list thead { display: none; }
  .cu-list tr.clickable-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px 6px; border-bottom: 1px solid var(--glass-border); }
  .cu-list tr.clickable-row > td { padding: 0 !important; border: 0 !important; background: none !important; }
  .cu-list tr.clickable-row > td:first-child { grid-column: 1 / -1; }
  .cu-list tr.clickable-row > td:last-child { display: none; }
  .cu-av { width: 34px; height: 34px; font-size: 15px; }
  .cu-ph { display: none; }
  .cu-next .date-leaf u { display: none; }
}

/* ==== M48 · Reports (the owner's pick in the Reports studio: "a briefing and
   columns") ====
   A light briefing card says the money in one sentence beside a collected
   meter and the three ledgers; revenue by month stands as columns (the best
   month in full brass, months from this one on hatched as "booked so far",
   the Hebrew months under each); what's coming is one stacked bar per month;
   months read "November 2026" with their Hebrew months; the tabs are
   underlined. */
.rp-eye { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.rp-brief { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 26px 28px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass-bg); background-image: radial-gradient(ellipse 60% 140% at 100% 0%, color-mix(in srgb, var(--brass-fill) 14%, transparent), transparent 62%); animation: m47Rise var(--dur-3, .5s) var(--ease-out) backwards; }
.rp-big { font-family: var(--font-serif); font-size: 30px; line-height: 1.2; margin: 8px 0; color: var(--text); text-wrap: balance; }
.rp-big em { font-style: normal; color: var(--gold-text); }
.rp-sub { margin: 0; color: var(--text-dim); font-size: 14px; }
.rp-side { display: grid; gap: 8px; border-left: 1px solid var(--glass-border); padding-left: 22px; }
.rp-side a { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text-dim); text-decoration: none; padding: 6px 0; border-top: 1px solid var(--glass-border); }
.rp-side a b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rp-meter { display: flex; height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--brass-fill) 22%, transparent); overflow: hidden; }
.rp-meter i { background: var(--success); }
.rp-meter-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.rep-tabs-line { border-bottom: 1px solid var(--glass-border); gap: 18px !important; margin-top: 22px; }
.rep-tabs-line .tab-pill { display: none !important; }
.rep-tabs-line .tab-btn { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 2px !important; margin-bottom: -1px; border-bottom: 2px solid transparent !important; color: var(--text-dim) !important; font-weight: 600; }
.rep-tabs-line .tab-btn.active { border-bottom-color: var(--brass-fill) !important; color: var(--text) !important; }
.rp-chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rp-chart-h h3 { margin: 0; }
.rp-legend { font-size: 12px; color: var(--text-dim); }
.rp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin: 0 4px 0 10px; }
.rp-legend i.past { background: var(--brass-fill); }
.rp-legend i.ahead, .rp-col.ahead .rp-bar i, .rp-fc-bar .h { background: repeating-linear-gradient(45deg, var(--brass-fill) 0 4px, color-mix(in srgb, var(--brass-fill) 42%, transparent) 4px 8px); }
.rp-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 10px; margin-top: 18px; overflow-x: auto; padding-bottom: 4px; }
.rp-col { display: grid; justify-items: center; gap: 3px; text-align: center; }
.rp-v { font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rp-bar { display: flex; align-items: flex-end; width: 100%; max-width: 46px; height: 170px; }
.rp-bar i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--brass-fill) 70%, transparent); }
.rp-col.best:not(.ahead) .rp-bar i { background: var(--brass-fill); }
.rp-col b { font-family: var(--font-serif); font-weight: 400; font-size: 17px; color: var(--text); margin-top: 6px; }
.rp-col small { font-size: 11px; color: var(--text-dim); }
.rp-col u { text-decoration: none; font-size: 10.5px; color: var(--gold-text); line-height: 1.25; min-height: 13px; }
.rp-col em { font-style: normal; font-size: 11px; color: var(--text-dim); }
.rp-mw { display: grid; }
.rp-mw b { font-weight: 600; }
.rp-mw small { font-size: 11.5px; color: var(--gold-text); }
.rp-fc { display: grid; margin-top: 10px; }
.rp-fc-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 110px; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--glass-border); }
.rp-fc-row:first-child { border-top: 0; }
.rp-fc-bar { display: flex; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--glass-border) 60%, transparent); overflow: hidden; }
.rp-fc-bar .c { background: var(--brass-fill); }
.rp-fc-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-fc-row.tot .rp-fc-v { color: var(--gold-text); }
@media (max-width: 860px) {
  .rp-brief { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .rp-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--glass-border); padding-top: 14px; }
  .rp-big { font-size: 24px; }
  .rp-fc-row { grid-template-columns: 110px minmax(0, 1fr) 84px; gap: 10px; }
  .rp-bar { height: 130px; }
}

/* ==== M48 · Manage & Settings hubs: every group its own idea, one quiet style ====
   The owner keeps a different look per group (there is a lot to find, and the
   shape tells you where you are) but in the studio's calm style: plain line
   icons, never set in circles, squares or coloured chips; the box titles in DM
   Serif; no accent ribbons and no side bars. The groups:
     tiles  (Rooms & layouts, Hall)      — big warm tiles, the count beneath
     chips  (Catalog)                    — soft filled tags
     grid   (People & vendors)           — a contact sheet with hairlines
     rows   (Pricing & booking, Team)    — rows with a line of description
     ledger (Money)                      — a ledger: dotted leaders to the arrow
     steps  (Tools)                      — numbered steps in serif numerals
     links  (Settings)                   — one quiet line of links */
.settings-cat-box { background: var(--glass-bg); border-radius: 18px; padding: 18px 18px 12px; }
.settings-cat-box::before { display: none; }
.settings-cat-box:hover { box-shadow: 0 14px 34px -26px rgba(60, 38, 22, .45), 0 4px 20px rgba(0, 0, 0, .04); }
.settings-cat-head { padding: 0 2px 12px; }
.settings-cat-head .card-icon-wrapper { width: auto; height: auto; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; color: var(--gold-text) !important; }
.settings-cat-head .card-icon-wrapper > svg { width: 20px !important; height: 20px !important; }
.settings-cat-head h3 { font-family: var(--font-serif); font-weight: 400; font-size: 21px; color: var(--text); }
.cat-n { font-weight: 500; font-size: .85em; color: var(--text-dim); margin-left: 2px; font-variant-numeric: tabular-nums; }

/* tiles */
.cat-tile { background: color-mix(in srgb, var(--brass-fill) 6%, transparent) !important; border: 0; border-radius: 14px; padding: 16px 16px 14px; gap: 6px; transition: transform .25s var(--ease-out), box-shadow .25s; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(60, 38, 22, .5); background: color-mix(in srgb, var(--brass-fill) 9%, transparent) !important; }
.cat-tile-ic { width: auto !important; height: auto !important; background: none !important; border: 0 !important; color: var(--gold-text) !important; justify-content: flex-start; }
.cat-tile-ic > svg { width: 22px !important; height: 22px !important; }
.cat-tile-label { font-family: var(--font-serif); font-weight: 400; font-size: 18px; color: var(--text); }
.cat-tile-desc { font-size: 12.5px; }

/* chips */
.cat-chips { gap: 8px; }
.cat-chip { background: color-mix(in srgb, var(--brass-fill) 9%, transparent) !important; border: 0 !important; border-radius: 999px; padding: 8px 14px; color: var(--text); font-weight: 600; font-size: 13.5px; box-shadow: none; }
.cat-chip:hover { transform: none; background: color-mix(in srgb, var(--brass-fill) 17%, transparent) !important; }
.cat-chip-ic { color: var(--gold-text) !important; }
.cat-chip:hover .cat-chip-ic { transform: none; }

/* grid — a contact sheet */
.cat-mini-grid { gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 12px; overflow: hidden; }
.cat-mini { gap: 8px; padding: 16px 6px 14px; border-radius: 0; border-right: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); transition: background-color .2s; }
.cat-mini:nth-child(3n) { border-right: 0; }
.cat-mini:hover { transform: none; background: color-mix(in srgb, var(--brass-fill) 7%, transparent); }
.cat-mini-ic { width: auto !important; height: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--text) !important; }
.cat-mini:hover .cat-mini-ic { box-shadow: none; }
.cat-mini-ic > svg { width: 22px !important; height: 22px !important; }
.cat-mini-label { font-size: 12.5px; color: var(--text); }

/* rows */
.settings-cat-rows .apple-list-row { padding: 10px 8px; border-radius: 10px; }
.settings-cat-rows .apple-list-row:hover { padding-left: 8px; background: color-mix(in srgb, var(--brass-fill) 7%, transparent); }
.settings-cat-rows .apple-list-icon { background: none !important; box-shadow: none !important; width: 24px; height: 24px; color: var(--gold-text); }
.settings-cat-rows .apple-list-icon > svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; }
.settings-cat-rows .apple-list-label { font-weight: 600; }

/* ledger */
.cat-ledger-row { display: grid; grid-template-columns: auto auto minmax(16px, 1fr) auto; gap: 12px; padding: 12px 8px; border-radius: 10px; }
.cat-ledger-row::before { display: none; }
.cat-ledger-row:hover { background: color-mix(in srgb, var(--brass-fill) 7%, transparent); }
.cat-ledger-ic { color: var(--gold-text) !important; }
.cat-ledger-label { font-family: var(--font-serif); font-weight: 400; font-size: 17px; }
.cat-ledger-desc { font-family: var(--font-ui); font-size: 12.5px; }
.cat-ledger-dots { align-self: center; height: 0; border-bottom: 1.5px dotted color-mix(in srgb, var(--brass-fill) 55%, transparent); }

/* steps */
.cat-steps { display: grid; padding: 0 2px 4px; }
.cat-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 8px; border-top: 1px solid var(--glass-border); border-radius: 10px; text-decoration: none; color: var(--text); transition: background-color .2s; }
.cat-step:first-child { border-top-color: transparent; }
.cat-step:hover { background: color-mix(in srgb, var(--brass-fill) 7%, transparent); }
.cat-step-n { font-family: var(--font-serif); font-size: 24px; line-height: 1; color: var(--gold-text); text-align: center; }
.cat-step-label { display: grid; gap: 1px; font-weight: 600; font-size: 14px; }
.cat-step-desc { font-weight: 400; font-size: 12.5px; color: var(--text-dim); }

/* links */
.cat-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; padding: 2px 0 6px; }
.cat-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; border-left: 1px solid var(--glass-border); }
.cat-link:first-child { border-left: 0; padding-left: 4px; }
.cat-link:hover { color: var(--gold-text); }
.cat-link-ic { display: inline-flex; color: var(--gold-text); }
.cat-link-ic > svg { width: 16px !important; height: 16px !important; margin: 0 !important; }
@media (max-width: 640px) {
  .cat-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-mini:nth-child(3n) { border-right: 1px solid var(--glass-border); }
  .cat-mini:nth-child(2n) { border-right: 0; }
  .cat-link { padding: 6px 12px; }
}
/* The labels read in ink — brass is for the icons and the step numbers. A row
   marked dangerous (Account → Delete) keeps its red. */
.settings-cat-rows .apple-list-row:not([style*="danger"]) .apple-list-label,
.cat-ledger-row .cat-ledger-label, .cat-step .cat-step-label, a.cat-chip, a.cat-link, a.cat-mini .cat-mini-label { color: var(--text) !important; }
a.cat-link:hover { color: var(--gold-text) !important; }

/* ==== M48 · Reports, Occupancy and Pipeline tabs: the Money tab's language ====
   A one-sentence answer on top of each tab; weekdays and seasons as small
   columns; rooms and occasions as bars; open prime nights as date leaves with
   a Quick hold; the pipeline as four serif figures over one status bar; repeat
   families on the list kit. */
.rp-brief-sm { grid-template-columns: minmax(0, 1fr); padding: 22px 26px; }
.rp-brief-sm .rp-big { font-size: 26px; }
.rp-tip { margin-top: 6px; }
.rp-tip a { font-weight: 600; }
.rp-two { align-items: start; }
.rp-two h3, .rp-cols-sm + * { margin-top: 0; }
.rp-cols-sm .rp-bar { height: 120px; }
.rp-cols-sm { grid-auto-columns: minmax(40px, 1fr); }
.rp-open { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.rp-open-d { display: grid; gap: 8px; justify-items: start; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--brass-fill) 6%, transparent); }
.rp-open-d > span { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.rp-open-d .btn { padding: 5px 12px; font-size: 13px; }
.rp-figs4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 12px; }
.rp-figs4 > span { display: grid; padding: 0 16px; border-left: 1px solid var(--glass-border); }
.rp-figs4 > span:first-child { padding-left: 0; border-left: 0; }
.rp-figs4 b { font-family: var(--font-serif); font-weight: 400; font-size: 32px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rp-figs4 small { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.rp-status-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--glass-border) 60%, transparent); }
.rp-status-bar .ok { background: var(--success); }
.rp-status-bar .hold { background: var(--brass-fill); }
.rp-status-bar .off { background: color-mix(in srgb, var(--text-dim) 45%, transparent); }
.rp-rep { display: grid; }
.rp-rep-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--glass-border); }
.rp-rep-row:first-child { border-top: 0; }
.rp-rep-row .cu-av { width: 34px; height: 34px; font-size: 15px; }
.rp-rep-row .row-name { font-size: 17px; font-weight: 400; }
.rp-two .rp-fc-row { grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; }
@media (max-width: 640px) {
  .rp-figs4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .rp-figs4 > span:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ==== M48 · Family portal in the house style ====
   No glowing side bars before the card titles; the tabs are underlined like
   Reports; the to-do list shows what's done with a brass check and a quiet
   "done" instead of a strike-through; the questions open with a plus; the PIN
   lock stands still (its pulse drew a box round it). */
.portal-card h3::before { display: none; }
.portal-tabs .tab-pill { display: none !important; }
.portal-tabs .tab-btn { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 4px !important; margin: 0 8px -1px 0; border-bottom: 2px solid transparent !important; color: var(--text-dim) !important; font-weight: 600; }
.portal-tabs .tab-btn.active { border-bottom-color: var(--brass-fill) !important; color: var(--text) !important; }
.pt-todo { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--glass-border); font-size: 14.5px; }
.pt-todo svg { flex: none; width: 17px !important; height: 17px !important; color: var(--text-dim); }
.pt-todo.done { color: var(--text-dim); }
.pt-todo.done svg { color: var(--success); }
.pt-todo small { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--success); }
.portal-faq > summary::before { content: "+"; color: var(--gold-text); font-size: 17px; font-weight: 400; width: 12px; transition: none; }
.portal-faq[open] > summary::before { content: "\2212"; transform: none; }
.pin-icon { animation: none; }

/* ==== M48 · The event hub by the moment (the owner's pick in the event-page
   study) ====
   One progress line instead of dots, rules and a ring (no circles); a "What
   now" card with the button that does it; three cards — money, the night, the
   people; the sections as compact boxes with one line each. */
.ev-detail .lifecycle-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 18px; padding: 0; overflow: visible; }
.ev-detail .lc-rule { display: none; }
.ev-detail .lc-step { gap: 7px; padding-top: 10px; border-top: 3px solid var(--glass-border); }
.ev-detail .lc-step.done, .ev-detail .lc-step.current { border-top-color: var(--brass-fill); }
.ev-detail .lc-dot { width: auto; height: auto; min-width: 12px; border: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; font-size: 11px; font-weight: 700; color: var(--text-dim); }
.ev-detail .lc-step.done .lc-dot { color: var(--success); }
.ev-detail .lc-step.current .lc-dot { color: var(--gold-text); }
.ev-detail .lc-lbl { font-size: 12.5px; font-weight: 600; }
.ev-detail .lc-step.current .lc-lbl { font-weight: 700; }
.wn-card { margin-top: 18px; padding: 22px 26px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass-bg); background-image: radial-gradient(ellipse 60% 140% at 100% 0%, color-mix(in srgb, var(--brass-fill) 14%, transparent), transparent 62%); animation: m47Rise var(--dur-3, .5s) var(--ease-out) backwards; }
.wn-txt { font-family: var(--font-serif); font-size: 26px; line-height: 1.25; margin: 8px 0 14px; color: var(--text); text-wrap: balance; }
.wn-txt b { font-weight: 400; color: var(--gold-text); }
.wn-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wn-count { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.wn-count input { width: 70px; border: 0; background: none; font-family: var(--font-serif); font-size: 24px; color: var(--text); text-align: center; }
.wn-count input:focus { outline: none; }
.wn-count span { font-size: 13px; color: var(--text-dim); }
.wn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.wn-c { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.wn-h { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-family: var(--font-serif); font-size: 20px; }
.wn-h svg { width: 18px !important; height: 18px !important; color: var(--gold-text); stroke: currentColor; }
.wn-h svg:last-child { margin-left: auto; width: 14px !important; height: 14px !important; color: var(--text-dim); }
.wn-big { margin: 0; font-family: var(--font-serif); font-size: 30px; color: var(--text); }
.wn-big small { font-family: var(--font-ui); font-size: 13px; color: var(--text-dim); }
.wn-line { margin: 0; font-size: 13.5px; color: var(--text-dim); }
a.wn-line { text-decoration: none; }
.wn-sm { justify-self: start; padding: 6px 14px !important; font-size: 13px !important; }
.wn-night { display: flex; gap: 16px; align-items: center; }
.wn-night > div { display: grid; gap: 2px; font-size: 13.5px; color: var(--text-dim); }
.wn-night > div b { color: var(--text); font-size: 15px; }
.wn-pr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--glass-border); }
.wn-c > .wn-pr:nth-child(2) { border-top: 0; }
.wn-pr > span:first-child { display: grid; min-width: 0; }
.wn-pr b { font-weight: 600; font-size: 14px; }
.wn-pr small { font-size: 12px; color: var(--text-dim); }
.wn-pr-acts { display: inline-flex; gap: 6px; flex: none; }
.wn-h2 { margin: 26px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.wn-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ev-box.wn-box { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.ev-box.wn-box:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(60, 38, 22, .5); }
.wn-box-ic { display: inline-flex; color: var(--gold-text); }
.wn-box-ic svg { width: 20px !important; height: 20px !important; }
.wn-box-t { display: grid; gap: 3px; min-width: 0; }
.wn-box-t b { font-family: var(--font-serif); font-weight: 400; font-size: 19px; color: var(--text); }
.wn-box-t small { font-size: 13px; color: var(--text-dim); }
.wn-box-go { color: var(--text-dim); display: inline-flex; }
.ev-box.wn-box.quiet .wn-box-t b { font-size: 16px; color: var(--text-dim); }
@media (max-width: 900px) {
  .wn-cards, .wn-boxes { grid-template-columns: minmax(0, 1fr); }
  .wn-txt { font-size: 21px; }
  .ev-detail .lc-step:not(.current) .lc-lbl { display: none; }
}
.ev-detail a.wn-h { color: var(--text) !important; }
.ev-detail a.wn-line.wn-vend { color: var(--text-dim) !important; }
.ev-detail a.wn-line.wn-vend:hover { color: var(--gold-text) !important; }

/* ==== M48 · Billing & payments (the owner's pick in the Billing studio) ====
   One sentence for the money with the three buttons used most; the bill as a
   receipt beside the payments and the schedule; the terms folded away (set
   once); the rarer cards follow under "Also for this simcha". */
.bl-brief { padding: 22px 26px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass-bg); background-image: radial-gradient(ellipse 60% 140% at 100% 0%, color-mix(in srgb, var(--brass-fill) 14%, transparent), transparent 62%); display: grid; gap: 12px; animation: m47Rise var(--dur-3, .5s) var(--ease-out) backwards; }
.bl-big { font-family: var(--font-serif); font-size: 27px; line-height: 1.25; margin: 0; color: var(--text); text-wrap: balance; }
.bl-big em { font-style: normal; color: var(--gold-text); }
.bl-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.bl-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.bl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.vt-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.bl-stack { display: grid; gap: 16px; min-width: 0; }
.bl-cols .card { margin: 0; }
.bl-card { display: grid; gap: 8px; align-content: start; }
.bl-card h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 21px; }
.bl-sub { margin: 0; font-size: 13px; color: var(--text-dim); }
.bl-l { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--glass-border); font-variant-numeric: tabular-nums; }
.bl-l > span:first-child { display: grid; min-width: 0; }
.bl-l b { font-weight: 600; font-size: 14px; }
.bl-l small { font-size: 12px; color: var(--text-dim); }
.bl-rule { border-top: 1.5px solid var(--text); opacity: .25; margin: 6px 0 2px; }
.bl-t { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.bl-t.big { font-family: var(--font-serif); font-size: 19px; padding-top: 6px; }
.bl-mini { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.bl-fold > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.bl-fold > summary::-webkit-details-marker { display: none; }
.bl-fold > summary > span:first-child { display: grid; }
.bl-fold > summary b { font-family: var(--font-serif); font-weight: 400; font-size: 19px; }
.bl-fold > summary small { font-size: 13px; color: var(--text-dim); }
.bl-edit { font-size: 13px; font-weight: 600; color: var(--gold-text); }
.bl-fold[open] .bl-edit { visibility: hidden; }
.bl-fold > form { margin-top: 14px; }
@media (max-width: 860px) {
  .bl-cols { grid-template-columns: minmax(0, 1fr); }
  .bl-big { font-size: 22px; }
}

/* Event History (M48): a diary — day headings, a time column, runs folded. */
.hist-day { margin: 16px 0 4px; }
.hist-day:first-child { margin-top: 0; }
.hist-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--glass-border); }
.hist-t { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.hist-n { font-size: 12px; color: var(--text-dim); }
@media (max-width: 560px) { .hist-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Day-of sheet (M48): the house style — one sentence on top, serif card titles. */
.dayof-sheet .card > h3 { font-family: var(--font-serif); font-weight: 400; font-size: 21px; }
.dayof-collect { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--warning); }

/* Package page list (M48): hundreds of lines read as folded groups. Each group
   is one line (name · count · added · subtotal); rows are a grid that keeps the
   numbers in one column on a desktop and stacks under the name on a phone. */
.of-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 6px; }
.of-q { flex: 1 1 220px; min-width: 0; max-width: 340px; }
.of-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.of-chip {
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text);
}
.of-chip span { color: var(--text-dim); font-variant-numeric: tabular-nums; margin-left: 2px; }
.of-chip[aria-pressed="true"] { background: var(--text); color: var(--bg-deep); border-color: var(--text); }
.of-chip[aria-pressed="true"] span { color: inherit; opacity: .7; }
.of-chip:hover { background: color-mix(in srgb, var(--gold-bright) 8%, var(--glass-bg)); }
.of-chip[aria-pressed="true"]:hover { background: var(--text); }
@media (max-width: 640px) {
  .of-q { max-width: none; flex-basis: 100%; }
}
.of-none[hidden] { display: none; }

/* Rooms & times (M48): one heading per day, rows of time · room · that meal. */
.sl-list { margin-top: 6px; }
.sl-day + .sl-day { margin-top: 10px; }
.sl-dh { margin: 12px 0 2px; font-family: var(--font-serif); font-weight: 400; font-size: 17px; }
.sl-dh span { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-dim); margin-left: 6px; }
.sl-row { display: grid; grid-template-columns: 11em minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 9px 4px; border-top: 1px solid var(--glass-border); font-size: 14px; }
.sl-row:hover { background: color-mix(in srgb, var(--gold-bright) 4%, transparent); }
.sl-t { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-m { min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.sl-m span { color: var(--text-dim); }
.sl-n { color: var(--text-dim); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.sl-n b { color: var(--text); font-weight: 600; }
.hc-jr label { flex: 1; display: grid; gap: 2px; margin: 0; }
.hc-jr label span { font-size: 11.5px; color: var(--text-dim); }
@media (max-width: 640px) {
  .sl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t n" "m m"; }
  .sl-t { grid-area: t; font-weight: 600; }
  .sl-n { grid-area: n; text-align: right; }
  .sl-m { grid-area: m; }
}

/* Settings → The count and the bill (M48 · 0279): each rule a set of choices
   with its meaning under it. */
.cr-h { margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.cr-h:first-of-type { margin-top: 0; }
.cr-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.cr-o { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-bg); cursor: pointer; }
.cr-o:hover { background: color-mix(in srgb, var(--gold-bright) 6%, var(--glass-bg)); }
.cr-o input { margin-top: 3px; }
.cr-o span { display: grid; gap: 2px; min-width: 0; }
.cr-o b { font-size: 13.5px; font-weight: 600; }
.cr-o small { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.cr-o:has(input:checked) { background: color-mix(in srgb, var(--gold-bright) 9%, var(--glass-bg)); }
.cr-chk { font-size: 13.5px; }
/* Package editor (M48 · 0279): the included offerings by part of the night. */
.pkg-part-h { margin: 16px 0 4px; font-family: var(--font-serif); font-size: 17px; }
.pkg-part-h .muted { font-family: var(--font-ui); font-size: 12.5px; }

/* The night (M48 · 0279, the owner's look A): the event's Package page reads
   down the parts of the night — a time spine, each part's dishes as one line of
   text, its choices and extras beside it — then three boxes. */
.nt { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin-top: 14px; }
.nt-tm { position: relative; text-align: right; padding: 15px 18px 0 0; color: var(--gold-text); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.nt-tm::after { content: ""; position: absolute; right: -5px; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-bright); }
.nt-tm[hidden] { display: none; }
.nt-blk { border-left: 1px solid var(--glass-border); padding: 10px 0 20px 22px; min-width: 0; }
.nt-blk[hidden] { display: none; }
.nt-blk h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 21px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.nt-blk h3 small { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-dim); }
.nt-course { margin-top: 8px; }
.nt-course[hidden] { display: none; }
.nt-cn { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.nt-flow { margin: 3px 0 0; line-height: 1.85; }
.nt-it { cursor: pointer; border-radius: 6px; padding: 1px 3px; margin: 0 -3px; display: inline-block; max-width: 100%; line-height: 1.5; }
.nt-it:hover { background: color-mix(in srgb, var(--gold-bright) 9%, transparent); }
.nt-it[hidden], .nt-sep[hidden] { display: none; }
.nt-it small { color: var(--text-dim); font-size: 11.5px; }
.nt-sep { color: var(--gold-bright); opacity: .7; margin: 0 7px; }
.nt-pick { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 8px 0 0; padding: 6px 11px; border-radius: 12px; font-size: 13.5px;
  background: color-mix(in srgb, var(--gold-bright) 8%, var(--glass-bg)); border: 1px solid var(--glass-border); cursor: pointer; }
.nt-pick:hover { background: color-mix(in srgb, var(--gold-bright) 13%, var(--glass-bg)); }
.nt-pick b { font-weight: 600; }
.nt-pick.nt-open { border-style: dashed; border-color: var(--gold-bright); background: var(--glass-bg); cursor: default; }
.nt-pick[hidden] { display: none; }
.nt-x { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-bg); font-size: 14px; cursor: pointer; }
.nt-x:hover { background: color-mix(in srgb, var(--gold-bright) 6%, var(--glass-bg)); }
.nt-x[hidden] { display: none; }
.nt-plus { color: var(--gold-text); font-weight: 700; }
.nt-xr { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.nt-xr small { color: var(--text-dim); font-size: 12px; margin-right: 6px; }
.nt-xr s { color: var(--text-dim); }
.nt-tag { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--badge-hold-bg); color: var(--gold-text); white-space: nowrap; }
.nt-tag.nt-dim { background: transparent; border: 1px dashed var(--glass-border); color: var(--text-dim); }
.nt-hand { font-size: 10.5px; color: var(--text-dim); border: 1px dashed var(--glass-border); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.nt-hint { font-size: 13px; margin: 10px 0 0; }
.nt-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; align-items: start; }
.nt-box { border: 1px solid var(--glass-border); border-radius: 16px; padding: 14px 16px; background: var(--glass-bg); min-width: 0; }
.nt-box[hidden] { display: none; }
.nt-box h3 { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 400; font-size: 19px; display: grid; }
.nt-box h3 small { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-dim); }
.nt-li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent); font-size: 14px; cursor: pointer; }
.nt-li:first-of-type { border-top: 0; }
.nt-li:hover { background: color-mix(in srgb, var(--gold-bright) 5%, transparent); }
.nt-li[hidden] { display: none; }
.nt-li.nt-total { cursor: default; border-top: 1px solid var(--glass-border); margin-top: 4px; }
.nt-li.nt-total:hover { background: none; }
@media (max-width: 860px) { .nt-boxes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  /* One column on a phone: the time sits above its part, on the same spine. */
  .nt { grid-template-columns: minmax(0, 1fr); }
  .nt-tm { text-align: left; padding: 12px 0 0 16px; border-left: 1px solid var(--glass-border); font-size: 12px; }
  .nt-tm:empty { padding-top: 4px; }
  .nt-tm::after { right: auto; left: -5px; top: 16px; }
  .nt-tm:empty::after { display: none; }
  .nt-blk { padding: 2px 0 18px 16px; }
  .nt-blk h3 { font-size: 19px; }
}

/* Rooms & layout — the chain (M48 · 0279, the owner's look A). */
.ch-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.ch-lk { flex: 1 1 150px; display: grid; gap: 1px; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); min-width: 0; }
.ch-lk small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.ch-lk b { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.ch-lk span { font-size: 12.5px; color: var(--text-dim); }
.ch-lk.bad { border-color: color-mix(in srgb, var(--danger) 35%, var(--glass-border)); background: color-mix(in srgb, var(--danger) 5%, var(--glass-bg)); }
.ch-lk.bad span { color: var(--danger); }
.ch-ar { align-self: center; color: var(--gold-bright); font-size: 18px; }
.ch-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 7%, transparent); font-size: 14px; }
.ch-wi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--gold-bright); background: color-mix(in srgb, var(--gold-bright) 4%, var(--glass-bg)); }
.ch-step { display: inline-flex; align-items: center; border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; background: var(--glass-bg); }
.ch-step button { font: inherit; font-size: 18px; width: 38px; height: 36px; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.ch-step button:hover { background: color-mix(in srgb, var(--gold-bright) 9%, transparent); }
.ch-step span { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.ch-eq { font-size: 14.5px; }
.ch-eq b { font-family: var(--font-serif); font-weight: 400; font-size: 19px; color: var(--gold-text); }
.ch-note { flex-basis: 100%; font-size: 13px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ch-note b { color: var(--text); }
@media (max-width: 640px) { .ch-ar { display: none; } .ch-lk { flex-basis: calc(50% - 4px); } .ch-lk b { font-size: 19px; } }
/* The family's invoice, down the parts of the night (M48 · 0279). */
.pt-part td { padding-top: 14px !important; font-family: var(--font-serif); font-size: 16px; border-top: 0 !important; }

/* ===== M48 · The layout designer, look B: the drawing fills the page ===== */
.fpx-page { padding: 0 12px 10px; }
.fpx { position: relative; height: calc(100vh - 150px); min-height: 420px; border-radius: 18px; overflow: hidden; background: #fbf7ef; border: 1px solid var(--glass-border); }
.fpx .fp-canvas { position: absolute; inset: 0; }
.fpx .fp-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.fpx-glass { background: rgba(255, 253, 249, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(231, 221, 207, 0.95); border-radius: 16px; box-shadow: 0 10px 28px -12px rgba(60, 40, 20, 0.28); }
.fpx-ib { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 8px; border: 1px solid var(--btn-ghost-border); border-radius: 10px; background: var(--btn-ghost-bg); color: var(--text); font: 600 13px var(--font-ui); cursor: pointer; text-decoration: none; }
.fpx-ib:hover { background: var(--btn-ghost-hover-bg); }
.fpx-ib:disabled { opacity: 0.4; cursor: default; }
.fpx-ib svg { width: 17px; height: 17px; }
.fpx-ib-text { padding: 0 11px; }
/* head card: name + count, the whole-hall summary folds out of it */
.fpx-head { position: absolute; left: 14px; top: 14px; width: 310px; max-width: calc(100% - 28px); padding: 12px 14px; z-index: 6; max-height: calc(100% - 28px); overflow: auto; }
.fpx-title { display: flex; align-items: center; gap: 10px; }
.fpx-title-t { flex: 1; min-width: 0; }
.fpx-back { width: 30px; min-width: 30px; height: 30px; padding: 0; }
.fpx-kicker { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpx-only { color: var(--gold-text); font-weight: 700; }
.fpx-name { font-family: var(--font-serif); font-size: 20px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpx-sum-tog { width: 30px; min-width: 30px; height: 30px; padding: 0; }
.fpx-sum-tog svg { transition: transform 0.15s ease; }
.fpx-head.is-open .fpx-sum-tog svg { transform: rotate(180deg); }
.fpx[data-mode="room"] .fpx-sum-tog { display: none; }
.fpx-head .fp-totals { margin: 10px 0 0; padding: 0; border: 0; }
.fpx-count { font-family: var(--font-serif); font-size: 28px; line-height: 1; }
.fpx-count b { color: var(--gold-text); font-weight: 400; }
.fpx-meter { font-size: 12px; font-weight: 700; margin-top: 4px; }
.fpx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.fpx-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 12px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fpx-chip b { color: var(--text); font-size: 13px; }
.fpx-chip.is-warn { background: rgba(163, 58, 50, 0.07); border-color: rgba(163, 58, 50, 0.25); color: var(--danger); }
.fpx-chip.is-warn b { color: var(--danger); }
.fpx-chip.is-gold { background: rgba(168, 131, 74, 0.1); border-color: rgba(168, 131, 74, 0.3); color: var(--gold-text); }
.fpx-sum { display: none; margin-top: 10px; border-top: 1px solid var(--glass-border); padding-top: 6px; }
.fpx-head.is-open .fpx-sum { display: block; }
.fpx-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--table-border); font-variant-numeric: tabular-nums; }
.fpx-row:last-of-type { border-bottom: 0; }
.fpx-row span { color: var(--text-dim); }
.fpx-note { border-radius: 12px; padding: 8px 10px; font-size: 12px; line-height: 1.45; margin-top: 8px; }
.fpx-note b { display: block; font-size: 12.5px; }
.fpx-note.is-warn { background: rgba(163, 58, 50, 0.07); color: var(--danger); border: 1px solid rgba(163, 58, 50, 0.2); }
.fpx-note.is-gold { background: rgba(168, 131, 74, 0.08); color: var(--gold-text); border: 1px dashed rgba(168, 131, 74, 0.45); }
.fpx[data-mode="room"] .fp-tot-dims { font-family: var(--font-serif); font-size: 24px; }
/* tools: undo, redo, settings, more, save */
.fpx-tools { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 6px; padding: 6px; z-index: 7; }
.fpx-tools #fp-save { height: 34px; padding: 0 16px; }
.fpx-more { position: relative; }
.fpx-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px; display: flex; flex-direction: column; z-index: 9; }
.fpx-menu[hidden] { display: none; }
.fpx-mi { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: 500 13px var(--font-ui); text-align: left; cursor: pointer; }
.fpx-mi:hover { background: var(--btn-ghost-hover-bg); }
.fpx-mi svg { width: 16px; height: 16px; color: var(--text-dim); }
/* the selected piece's card */
.fpx-pop { position: absolute; left: 50%; top: 80px; width: 280px; max-height: calc(100% - 100px); overflow: auto; padding: 14px; z-index: 8; }
.fpx-pop[hidden] { display: none; }
.fpx-pop .fp-insp-title { font-family: var(--font-serif); font-weight: 400; font-size: 21px; margin-bottom: 8px; }
.fpx-help { position: absolute; right: 64px; top: 72px; width: 300px; padding: 12px 14px; z-index: 9; font-size: 13px; }
.fpx-help[hidden] { display: none; }
.fpx-help-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fpx-help ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; color: var(--text-dim); line-height: 1.45; }
/* the tray of pieces */
.fpx-tray { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(900px, calc(100% - 200px)); padding: 10px 12px 12px; z-index: 5; }
.fpx-tray-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fpx-tray-t { font-weight: 700; font-size: 13px; }
.fpx-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(42, 33, 27, 0.06); }
.fpx-tab { border: 0; background: transparent; border-radius: 8px; padding: 6px 14px; font: 600 13px var(--font-ui); color: var(--text-dim); cursor: pointer; }
.fpx-tab[aria-selected="true"] { background: var(--glass-bg); color: var(--text); box-shadow: 0 1px 3px rgba(60, 40, 20, 0.14); }
.fpx-tray-x { margin-left: auto; display: flex; align-items: center; }
.fpx-tray-x[hidden] { display: none; }
.fpx-tray-fold { margin-left: auto; width: 30px; min-width: 30px; height: 30px; padding: 0; }
.fpx-tray-x + .fpx-tray-fold, .fpx-tray-x:not([hidden]) ~ .fpx-tray-fold { margin-left: 0; }
.fpx-tray-fold svg { transition: transform 0.15s ease; }
.fpx-tray.is-folded .fpx-tray-fold svg { transform: rotate(180deg); }
.fpx-tray.is-folded .fpx-tray-b, .fpx-tray.is-folded .fpx-tray-x { display: none; }
.fpx-tray-b { margin-top: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.fpx-tray-b[hidden] { display: none; }
.fpx-tray .fp-pal-btns { flex-direction: row; gap: 8px; padding-bottom: 2px; }
.fpx-tray .fp-pal-btn { flex: 0 0 104px; width: 104px; flex-direction: column; align-items: center; gap: 4px; padding: 7px 6px 8px; text-align: center; border-radius: 12px; background: var(--glass-bg); }
.fpx-tray .fp-pal-btn:hover { border-color: var(--glass-border); background: var(--btn-ghost-hover-bg); box-shadow: 0 6px 14px -10px rgba(60, 40, 20, 0.4); }
.fpx-tray .fp-pal-thumb { width: 88px; height: 50px; border: 0; background: transparent; }
.fpx-tray .fp-pal-text { align-items: center; width: 100%; }
.fpx-tray .fp-pal-name { font-size: 12px; max-width: 100%; }
.fpx-tray .fp-pal-meta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fpx-tray .fp-pal-obj-ic { height: 50px; display: flex; align-items: center; }
.fpx-tray .fp-autofill { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.fpx-tray .fp-autofill svg { width: 15px; height: 15px; }
.fpx-tray .fp-autofill .input { height: 30px; padding: 2px 6px; width: 54px; }
.fpx-tray .fp-autofill select.input { width: 130px; }
.fpx-empty { display: flex; align-items: center; gap: 12px; padding: 6px 4px; font-size: 13px; color: var(--text-dim); }
.fpx-empty svg { width: 22px; height: 22px; color: var(--gold-text); flex: none; }
.fpx-none { font-size: 12.5px; margin: 6px 4px; }
/* zoom */
.fpx-zoom { position: absolute; right: 14px; top: 72px; display: flex; flex-direction: column; gap: 5px; padding: 5px; z-index: 5; }
.fpx-zoom .fpx-ib { height: 30px; min-width: 30px; }
@media (max-width: 1100px) { .fpx-tray { left: 14px; right: 14px; width: auto; transform: none; } }
/* Phones: the tray and the selected card are bottom sheets; the head card is a slim bar. */
@media (max-width: 640px) {
  .fpx-page { padding: 0 6px 6px; }
  .fpx { border-radius: 14px; }
  .fpx-head { left: 8px; right: 8px; top: 8px; width: auto; padding: 8px 10px; }
  .fpx-name { font-size: 17px; }
  .fpx-count { font-size: 20px; display: inline; }
  .fpx-chips { display: inline-flex; margin: 0 0 0 8px; vertical-align: middle; }
  .fpx-chips .fpx-chip:not(.is-warn):not(.is-gold) { display: none; }
  .fpx-head .fp-totals { margin-top: 6px; }
  .fpx-tools { top: auto; bottom: 8px; right: 8px; left: 8px; justify-content: flex-end; padding: 5px; }
  .fpx-tools #fp-settings span { display: none; }
  .fpx-zoom { display: none; }
  .fpx-tray { left: 8px; right: 8px; bottom: 60px; width: auto; transform: none; padding: 8px 10px 10px; }
  .fpx-tray .fp-autofill span, .fpx-tray .fp-autofill select.input { display: none; }
  .fpx-pop { left: 8px !important; right: 8px; top: auto !important; bottom: 60px; width: auto; max-height: 55%; }
  .fpx.has-pop .fpx-tray { display: none; }
  .fpx-help { left: 8px; right: 8px; width: auto; top: 70px; }
}
.fpx-pop { width: 264px; }
.fpx-pop .fp-insp-sub { margin: -4px 0 10px; }
.fpx-pop .field, .fpx-pop .fp-field { margin-bottom: 9px; }
.fpx-pop label { font-size: 11.5px; }
.fpx-pop .input { height: 34px; min-height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 13.5px; }
.fpx-pop .fp-stepper .btn { min-width: 34px; height: 34px; }
.fpx-pop .btn { height: 34px; padding: 0 14px; font-size: 13px; }
@media (max-width: 640px) { .fpx-tray .fpx-tray-x[data-for="tables"] { display: none; } .fpx-tray-fold { margin-left: auto !important; } }
@media (max-width: 640px) { .fpx-pop { width: auto; } }
.fpx-pop-x { position: absolute; right: 10px; top: 10px; width: 28px; min-width: 28px; height: 28px; padding: 0; border: 0; background: transparent; }

/* ===== M48 · Rooms & layouts, look 1: pictures of every layout ===== */
.lg-page { display: flex; flex-direction: column; gap: 26px; }
.lg-sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lg-sec-h h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 23px; }
.lg-sec-h p { margin: 2px 0 0; font-size: 13px; }
.lg-sec-a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lg-sec-a .btn svg { width: 15px; height: 15px; }
.lg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.lg-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.lg-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-1px); }
.lg-card-pic { display: block; width: 100%; height: 178px; padding: 0; border: 0; border-bottom: 1px solid var(--table-border); background: #fbf7ef; cursor: pointer; }
.lg-card-pic canvas { display: block; width: 100%; height: 100%; }
.lg-undrawn { display: flex; height: 100%; align-items: center; justify-content: center; gap: 8px; color: var(--gold-text); font-weight: 700; font-size: 13px; background: repeating-linear-gradient(45deg, #faf5ec, #faf5ec 10px, #f4ece0 10px, #f4ece0 20px); }
.lg-undrawn svg { width: 16px; height: 16px; }
.lg-card-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.lg-card-name { font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1.2; }
.lg-card-m { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.lg-card-r { font-size: 12px; color: var(--text-dim); }
.lg-card-a { display: flex; gap: 6px; margin-top: 10px; }
.lg-card-a .btn svg { width: 14px; height: 14px; }
.lg-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lg-room { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); color: var(--text); text-align: left; cursor: pointer; font-family: var(--font-ui); }
.lg-room:hover { background: var(--btn-ghost-hover-bg); box-shadow: 0 8px 18px -14px rgba(60, 40, 20, 0.45); }
.lg-room-pic { width: 104px; height: 68px; display: block; border-radius: 8px; background: #fbf7ef; }
.lg-room-none { display: flex; align-items: center; justify-content: center; color: var(--gold-text); }
.lg-room-none svg { width: 18px; height: 18px; }
.lg-room-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-room-t b { font-size: 14.5px; }
.lg-room-t span { font-size: 12px; color: var(--text-dim); }
.lg-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lg-piece { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 11px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); color: var(--text); cursor: pointer; text-align: center; font-family: var(--font-ui); }
.lg-piece:hover { background: var(--btn-ghost-hover-bg); box-shadow: 0 8px 18px -14px rgba(60, 40, 20, 0.45); }
.lg-piece-pic { width: 120px; height: 66px; margin-bottom: 4px; }
.lg-piece b { font-size: 13px; }
.lg-piece span { font-size: 11.5px; color: var(--text-dim); }
.lg-piece .lg-piece-own { color: var(--gold-text); font-weight: 700; }
.lg-empty { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px dashed var(--glass-border); border-radius: 14px; color: var(--text-dim); font-size: 13.5px; }
.lg-empty svg { width: 22px; height: 22px; color: var(--gold-text); flex: none; }
.lg-setup h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; }
.lg-setup > p { margin: 4px 0 12px; font-size: 13px; }
.lg-setup ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lg-step { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(168, 131, 74, 0.06); }
.lg-step-n { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 18px; color: var(--gold-text); }
.lg-step-n svg { width: 22px; height: 22px; color: var(--success); }
.lg-step-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lg-step-t b { font-size: 14px; }
.lg-step-t span { font-size: 12.5px; color: var(--text-dim); }
.lg-step.is-done { background: transparent; }
.lg-step.is-done .lg-step-t b { color: var(--text-dim); }
.lg-step.is-locked { opacity: 0.6; background: transparent; }
.lg-step-a .btn svg { width: 14px; height: 14px; }
.lg-prefs { display: flex; flex-direction: column; gap: 0; padding: 4px 18px; }
.lg-pref { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--table-border); }
.lg-pref:last-child { border-bottom: 0; }
.lg-pref-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 260px; }
.lg-pref-t b { font-size: 14px; }
.lg-pref-t span { font-size: 12.5px; }
.lg-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 11px; background: rgba(42, 33, 27, 0.06); }
.lg-seg-o { border: 0; background: transparent; border-radius: 8px; padding: 6px 12px; font: 600 12.5px var(--font-ui); color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.lg-seg-o[aria-checked="true"] { background: var(--glass-bg); color: var(--text); box-shadow: 0 1px 3px rgba(60, 40, 20, 0.14); }
@media (max-width: 640px) {
  .lg-step { grid-template-columns: 30px 1fr; }
  .lg-step-a { grid-column: 2; }
  .lg-room { grid-template-columns: 84px 1fr; }
  .lg-room-pic { width: 84px; height: 56px; }
}
.lg-step-a .muted { font-size: 12.5px; }
.pkg-need { margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(169, 119, 58, 0.1); color: var(--warning); font-size: 13px; font-weight: 600; }

/* ===== M48 · New booking, step by step (the owner's pick "B") ===== */
.bw-steps { list-style: none; margin: 18px 0 16px; padding: 0; display: flex; align-items: center; gap: 6px; }
.bw-st { display: flex; align-items: center; flex: 1; min-width: 0; }
.bw-st:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); margin: 0 8px; min-width: 14px; }
.bw-st button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: 500 13.5px var(--font-ui); color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.bw-st button:disabled { cursor: default; }
.bw-st-n { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(42, 33, 27, 0.07); font-size: 12.5px; font-weight: 700; flex: none; }
.bw-st-n svg { width: 15px; height: 15px; }
.bw-st.is-done .bw-st-n { background: var(--brass-fill); color: #fff; }
.bw-st.is-cur button { color: var(--text); font-weight: 700; }
.bw-st.is-cur .bw-st-n { background: var(--text); color: var(--glass-bg); }
.bw-steps-m { display: none; }
.bw-card { padding: 24px 26px; }
.bw-q { font-family: var(--font-serif); font-size: clamp(22px, 3vw, 28px); line-height: 1.2; margin: 0 0 16px; }
.bw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bw-grid-pk { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.bw-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 14px 16px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--input-bg); color: var(--text); font-family: var(--font-ui); cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; }
.bw-pick:hover:not(:disabled) { background: var(--btn-ghost-hover-bg); box-shadow: 0 8px 18px -14px rgba(60, 40, 20, 0.45); }
.bw-pick.is-on { background: color-mix(in srgb, var(--gold-bright) 10%, var(--input-bg)); box-shadow: inset 0 0 0 2px var(--gold-bright); }
.bw-pick:disabled { opacity: 0.6; cursor: not-allowed; }
.bw-pick b { font-size: 15px; }
.bw-pick span { font-size: 12.5px; color: var(--text-dim); }
.bw-pick .bw-pr { font-family: var(--font-serif); font-size: 21px; color: var(--gold-text); }
.bw-pick .bw-pr small { font-family: var(--font-ui); font-size: 12px; color: var(--text-dim); }
.bw-need { color: var(--warning) !important; font-weight: 600; display: inline-flex; gap: 5px; align-items: center; }
.bw-need svg { width: 14px; height: 14px; }
.bw .bad { color: var(--danger); } .bw .ok { color: var(--success); }
.bw-slotpick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bw-chip { border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-dim); border-radius: 999px; padding: 8px 15px; font: 600 13px var(--font-ui); cursor: pointer; }
.bw-chip small { font-weight: 500; margin-left: 4px; opacity: 0.85; }
.bw-chip[aria-checked="true"] { background: var(--text); color: var(--glass-bg); border-color: var(--text); }
.bw-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.bw-month-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bw-month-h div { text-align: center; }
.bw-month-h b { font-family: var(--font-serif); font-weight: 400; font-size: 21px; display: block; }
.bw-month-h span { font-size: 12.5px; color: var(--text-dim); }
.bw-nav { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--btn-ghost-border); background: var(--btn-ghost-bg); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bw-nav:hover { background: var(--btn-ghost-hover-bg); }
.bw-nav svg { width: 16px; height: 16px; }
.bw-cal-h, .bw-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.bw-cal-h span { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); text-align: center; padding: 2px 0 4px; }
.bw-day { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 70px; padding: 6px 7px; border: 1px solid var(--table-border); border-radius: 10px; background: var(--input-bg); color: var(--text); font-family: var(--font-ui); text-align: left; cursor: pointer; }
.bw-day:hover:not(:disabled) { background: var(--btn-ghost-hover-bg); }
.bw-day b { font-size: 14px; }
.bw-day i { font-style: normal; font-size: 10.5px; color: var(--text-dim); line-height: 1.25; }
.bw-day.is-pad { border: 0; background: none; cursor: default; }
.bw-day.is-shab { background: rgba(42, 33, 27, 0.04); }
.bw-day.is-full { background: repeating-linear-gradient(45deg, var(--input-bg), var(--input-bg) 5px, rgba(168, 131, 74, 0.08) 5px, rgba(168, 131, 74, 0.08) 10px); }
.bw-day:disabled { opacity: 0.38; cursor: default; }
.bw-day.is-on { background: var(--text); color: var(--glass-bg); border-color: var(--text); }
.bw-day.is-on:hover { background: var(--text); }
.bw-day.is-on i { color: color-mix(in srgb, var(--glass-bg) 75%, transparent); }
.bw-bars { display: flex; gap: 3px; width: 100%; margin-top: auto; }
.bw-bars em, .bw-legend em { flex: 1; height: 5px; border-radius: 3px; background: #cfe0d3; }
.bw-bars em.is-other, .bw-legend em.is-other { background: repeating-linear-gradient(90deg, #cfe0d3 0 4px, #e6d3b0 4px 7px); }
.bw-bars em.is-taken, .bw-legend em.is-taken { background: var(--brass-fill); }
.bw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.bw-legend em { display: inline-block; width: 18px; flex: none; vertical-align: 1px; margin-right: 4px; }
.bw-daybox { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--table-border); }
.bw-daybox-h { font-size: 14px; margin-bottom: 8px; }
.bw-heb { color: var(--gold-text); }
.bw-slots { width: 100%; border-collapse: collapse; font-size: 13px; }
.bw-slots th, .bw-slots td { padding: 7px 10px; border-bottom: 1px solid var(--table-border); text-align: left; }
.bw-slots th { font-weight: 600; font-size: 12.5px; color: var(--text-dim); }
.bw-slots th small { display: block; font-weight: 400; font-size: 11px; }
.bw-slots .is-cur { background: color-mix(in srgb, var(--gold-bright) 7%, transparent); }
.bw-free { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.bw-free.is-free { background: rgba(79, 122, 90, 0.12); color: var(--success); }
.bw-free.is-taken { background: rgba(168, 131, 74, 0.14); color: var(--gold-text); }
.bw-fam { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; }
.bw-match, .bw-using { font-size: 13px; color: var(--text-dim); margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bw-using svg { width: 16px; height: 16px; color: var(--success); }
.bw-receipt { border-top: 1px solid var(--table-border); }
.bw-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--table-border); font-size: 14px; flex-wrap: wrap; }
.bw-row > span { color: var(--text-dim); }
.bw-row > b { font-weight: 600; text-align: right; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bw-time { height: 34px; width: 120px; padding: 2px 6px; }
.bw-total { font-family: var(--font-serif); font-weight: 400; font-size: 22px; color: var(--gold-text); }
.bw-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 10px; background: rgba(42, 33, 27, 0.06); }
.bw-seg button { border: 0; background: none; border-radius: 7px; padding: 5px 12px; font: 600 12.5px var(--font-ui); color: var(--text-dim); cursor: pointer; }
.bw-seg button[aria-checked="true"] { background: var(--glass-bg); color: var(--text); box-shadow: 0 1px 3px rgba(60, 40, 20, 0.14); }
.bw-warn { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(163, 58, 50, 0.07); color: var(--danger); font-size: 13.5px; font-weight: 600; }
.bw-warn svg { width: 16px; height: 16px; flex: none; }
.bw-navbar { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.bw-navbar .bw-sofar { flex: 1; min-width: 0; text-align: center; font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-navbar .btn svg { width: 15px; height: 15px; vertical-align: -3px; }
@media (max-width: 640px) {
  .bw-steps { display: none; }
  .bw-steps-m { display: block; margin: 14px 0 12px; font-size: 13px; color: var(--text-dim); }
  .bw-steps-m i { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: var(--brass-fill); box-shadow: 0 0 0 0 transparent; }
  .bw-card { padding: 18px 14px; }
  .bw-cal-h, .bw-cal-g { gap: 3px; }
  .bw-day { min-height: 56px; padding: 4px; }
  .bw-day i { font-size: 9px; }
  .bw-navbar { position: sticky; bottom: 0; background: var(--bg-deep); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); margin-top: 10px; }
  .bw-navbar .bw-sofar { display: none; }
  .bw-navbar .btn-gold { flex: 1; justify-content: center; }
}
.bw-match { flex-direction: row; }
.bw-hit { border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text); border-radius: 10px; padding: 6px 11px; font: 500 12.5px var(--font-ui); cursor: pointer; text-align: left; }
.bw-hit:hover { background: var(--btn-ghost-hover-bg); }

/* ===== M48 · Leads: three views (to call · board · by date) ===== */
.ld-brief { font-family: var(--font-serif); font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; margin: 14px 0 0; }
.ld-brief em { font-style: normal; color: var(--gold-text); }
.ld-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }
.ld-bar .input { max-width: 260px; flex: 1 1 200px; }
.ld-views { display: inline-flex; padding: 3px; gap: 3px; border-radius: 11px; background: rgba(42, 33, 27, 0.06); }
.ld-view { border: 0; background: none; border-radius: 8px; padding: 7px 14px; font: 600 13px var(--font-ui); color: var(--text-dim); cursor: pointer; }
.ld-view[aria-selected="true"] { background: var(--glass-bg); color: var(--text); box-shadow: 0 1px 3px rgba(60, 40, 20, 0.14); }
.ld-group { margin-top: 18px; }
.ld-group > h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); font-family: var(--font-ui); font-weight: 700; }
.ld-group > h3 span { color: var(--text-dim); margin-left: 4px; }
.ld-month > h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
.ld-month > h3 small { font-family: var(--font-ui); font-size: 12px; color: var(--text-dim); }
.ld-list { display: flex; flex-direction: column; gap: 8px; }
.ld-row.lead-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--glass-bg); animation: none; }
.ld-row b { font-size: 15px; }
.ld-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.ld-contact { font-size: 12.5px; color: var(--text-dim); }
.ld-why { display: block; font-size: 12px; font-weight: 600; color: var(--danger); margin-top: 3px; }
.ld-why.is-new { color: var(--success); }
.ld-av { font-size: 12px; font-weight: 600; }
.ld-av.is-ok { color: var(--success); } .ld-av.is-bad { color: var(--danger); } .ld-av.is-warn { color: var(--gold-text); } .ld-av.is-none { color: var(--text-dim); font-weight: 500; }
.ld-row-a, .ld-card-a { display: flex; align-items: center; gap: 6px; }
.ld-card-a { justify-content: space-between; margin-top: 8px; }
.ld-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 2px; background: rgba(42, 33, 27, 0.07); color: var(--text-dim); }
.ld-pill.is-new { background: rgba(91, 79, 122, 0.12); color: #5b4f7a; }
.ld-pill.is-toured { background: rgba(79, 122, 90, 0.12); color: var(--success); }
.ld-pill.is-quoted { background: rgba(168, 131, 74, 0.14); color: var(--gold-text); }
.ld-pill.is-won { background: rgba(79, 122, 90, 0.16); color: var(--success); }
.lead-more { position: relative; }
.lead-more > summary svg { width: 16px; height: 16px; }
.ld-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 170px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 4px; box-shadow: 0 12px 28px -14px rgba(60, 40, 20, 0.4); }
.ld-menu .dropdown-item { display: block; width: 100%; background: none; border: none; text-align: left; cursor: pointer; padding: 8px 10px; border-radius: 8px; font: 500 13px var(--font-ui); color: var(--text); }
.ld-menu .dropdown-item:hover { background: var(--btn-ghost-hover-bg); }
.ld-board { --cols: 3; grid-auto-flow: row; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); margin-top: 14px; }
.ld-board .lead-col { background: rgba(42, 33, 27, 0.035); border: 0; }
.ld-board .lead-col-head { border: 0; }
.ld-card.lead-card { background: var(--glass-bg); display: flex; flex-direction: column; gap: 2px; }
.ld-card b { font-size: 14.5px; }
.ld-none { font-size: 12px; text-align: center; padding: 10px 4px; }

/* ---- Customer page (M48, the owner's pick "Their story") ---- */
.cs-head { display: flex; gap: 16px 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; animation: fadeInUp 0.4s ease both; }
.cs-who { min-width: 0; }
.cs-eye { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.cs-name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(27px, 4vw, 36px); line-height: 1.1; margin: 2px 0 0; text-wrap: balance; }
.cs-sub { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; overflow-wrap: anywhere; }
.cs-qas { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-qa { display: inline-flex; align-items: center; gap: 6px; }
.cs-qa svg { width: 15px; height: 15px; }
.cs-brief { animation: fadeInUp 0.4s 0.05s ease both; }
.cs-nudge { font-size: 13px; margin: 8px 0 0; }
.cs-nudge svg { width: 14px; height: 14px; vertical-align: -2px; }
.cs-lbl { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin: 24px 0 10px; }
.cs-tl { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.cs-tl::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--table-border); }
.cs-ti { position: relative; margin-bottom: 10px; animation: fadeInUp 0.4s ease both; }
.cs-ti:nth-child(2) { animation-delay: 0.05s; } .cs-ti:nth-child(3) { animation-delay: 0.1s; } .cs-ti:nth-child(n+4) { animation-delay: 0.15s; }
.cs-ti::before { content: ""; position: absolute; left: -20px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--brass, #a8834a); box-shadow: 0 0 0 3px var(--bg-deep, #f6f1e9); }
.cs-ti.is-past::before { background: #cfc3b1; }
.cs-sc { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 16px; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.cs-sc:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-1px); }
.cs-day { font-family: var(--font-serif); font-size: 28px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.cs-day small { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.2; }
.cs-day.is-none { color: var(--text-dim); }
.cs-mid { min-width: 0; }
.cs-t { font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; }
.cs-t:hover { text-decoration: underline; }
.cs-bar { height: 6px; border-radius: 4px; background: rgba(42, 33, 27, 0.08); overflow: hidden; margin-top: 8px; max-width: 260px; }
.cs-bar i { display: block; height: 100%; background: var(--brass-fill, #97743e); border-radius: 4px; }
.cs-note { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.cs-link { border: 0; background: none; padding: 0; font: 600 12.5px var(--font-ui); color: var(--gold-text); cursor: pointer; }
.cs-link:hover { text-decoration: underline; }
.cs-link:disabled { opacity: 0.6; cursor: default; }
.cs-money { font-size: 12.5px; color: var(--text-dim); text-align: right; white-space: nowrap; }
.cs-money b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; }
.cs-money b.is-due { color: var(--gold-text); }
.cs-money b.is-ok { color: var(--success); }
.cs-money b svg { width: 20px; height: 20px; }
.cs-fold { margin-top: 14px; border: 1px dashed var(--table-border); border-radius: 14px; background: transparent; }
.cs-fold[open] { border-style: solid; background: var(--glass-bg); }
.cs-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; font-size: 13.5px; border-radius: 14px; }
.cs-fold > summary::-webkit-details-marker { display: none; }
.cs-fold > summary:hover { background: var(--btn-ghost-hover-bg); }
.cs-open { color: var(--gold-text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cs-open svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.cs-fold[open] .cs-open svg { transform: rotate(180deg); }
.cs-form { padding: 4px 16px 16px; }
.cs-form > h3:first-child { margin-top: 6px; }

/* ---- Vendor page, the hall's view (M48, the owner's pick "B") ---- */
.vd-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; margin-top: 20px; align-items: start; }
.vd-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vd-main { min-width: 0; }
.vd-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 14px 16px; animation: fadeInUp 0.4s ease both; }
.vd-card:nth-child(2) { animation-delay: 0.05s; } .vd-card:nth-child(3) { animation-delay: 0.1s; }
.vd-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.vd-card-h .cs-lbl { margin: 0; }
.vd-card-h .btn svg { width: 14px; height: 14px; }
.vd-kv { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; }
.vd-kv span { color: var(--text-dim); }
.vd-kv b { font-weight: 600; overflow-wrap: anywhere; }
.vd-fine { font-size: 12.5px; margin: 10px 0 0; }
.vd-paper { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--table-border); font-size: 13px; }
.vd-paper:last-child { border-bottom: 0; }
.vd-paper small { display: block; color: var(--text-dim); font-size: 11.5px; }
.vd-paper .btn svg { width: 13px; height: 13px; }
.vd-mhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13.5px; }
.vd-mnav, .vd-x { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer; padding: 0; }
.vd-mnav:hover, .vd-x:hover { background: var(--btn-ghost-hover-bg); color: var(--text); }
.vd-x svg { width: 13px; height: 13px; }
.vd-mhead svg { width: 14px; height: 14px; }
.vd-mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums; }
.vd-mcal i { font-style: normal; padding: 5px 0; border-radius: 6px; }
.vd-mcal .vd-mh { color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; }
.vd-mcal .vd-md { background: rgba(42, 33, 27, 0.035); }
.vd-mcal .vd-md.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--brass, #a8834a); }
.vd-mcal .is-away, .vd-legend i.is-away { background: repeating-linear-gradient(45deg, rgba(163, 58, 50, 0.04), rgba(163, 58, 50, 0.04) 4px, rgba(163, 58, 50, 0.16) 4px, rgba(163, 58, 50, 0.16) 8px); color: var(--danger); }
.vd-mcal .is-booked, .vd-legend i.is-booked { background: rgba(168, 131, 74, 0.2); color: var(--gold-text); font-weight: 700; }
.vd-legend { font-size: 11px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
.vd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 4px; }
.vd-blocks { margin-top: 8px; }
.vd-blockform { margin-top: 8px; }
.vd-blockform > summary { list-style: none; display: inline-block; }
.vd-blockform > summary::-webkit-details-marker { display: none; }
.vd-una { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.vd-una input[name="reason"] { grid-column: 1 / -1; }
.vd-una .btn { grid-column: 1 / -1; }
.vd-away-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.vd-away .vd-una { margin-top: 12px; }
@media (max-width: 640px) { .vd-away-grid { grid-template-columns: minmax(0, 1fr); } }
.vd-strip { display: flex; gap: 10px 28px; flex-wrap: wrap; align-items: center; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 14px 18px; font-size: 12.5px; color: var(--text-dim); animation: fadeInUp 0.4s ease both; }
.vd-strip b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.vd-strip b.is-due { color: var(--gold-text); }
.vd-main > .cs-lbl, .vd-shelf-h { margin-top: 22px; }
.vd-warn { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: rgba(168, 131, 74, 0.12); color: var(--gold-text); font-size: 13px; font-weight: 600; }
.vd-warn svg { width: 16px; height: 16px; flex: none; }
.vd-gigs { display: flex; flex-direction: column; gap: 8px; }
.vd-gigs .cs-sc.is-past { opacity: 0.86; }
.vd-gigs .cs-money .cs-link { display: block; margin: 4px 0 0 auto; }
.vd-more { margin-top: 8px; }
.vd-more > summary { list-style: none; display: inline-block; margin-bottom: 8px; }
.vd-more > summary::-webkit-details-marker { display: none; }
.vd-shelf-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vd-shelf-h .cs-lbl { margin: 0; }
.vd-shelf-h .row { gap: 14px !important; }
.vd-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.vd-of { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: var(--text); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.vd-of:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-1px); }
.vd-of.is-pkg { cursor: default; }
.vd-of-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; width: 100%; }
.vd-of b { font-size: 14px; }
.vd-of-p { font-family: var(--font-serif); font-size: 19px; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.vd-of-s { font-size: 12px; color: var(--text-dim); }
.vd-of .cs-link { margin-top: 6px; }
.vd-page .cs-form > .card, .vd-page .cs-form form.card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; animation: none; }
@media (max-width: 900px) {
  .vd-grid { grid-template-columns: minmax(0, 1fr); }
  .vd-main { order: -1; }
  .vd-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .cs-sc { grid-template-columns: 58px minmax(0, 1fr); padding: 12px 14px; }
  .cs-day { font-size: 24px; }
  .cs-money { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 6px; }
  .cs-money b { display: inline; font-size: 17px; }
  .cs-money b svg { width: 16px; height: 16px; vertical-align: -3px; }
  .cs-tl { padding-left: 16px; }
  .cs-tl::before { left: 3px; }
  .cs-ti::before { left: -17px; }
  .cs-qas { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-qa { justify-content: center; }
}
.ld-dated { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.ld-day { text-align: center; }
.ld-day b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1; }
.ld-day small { display: block; font-size: 10.5px; color: var(--text-dim); }
.ld-day.is-none { color: var(--text-dim); font-size: 20px; }
.ld-closed { margin-top: 18px; border: 1px dashed var(--glass-border); border-radius: 14px; padding: 10px 14px; }
.ld-closed > summary { cursor: pointer; font-size: 13px; color: var(--text-dim); list-style: none; }
.ld-closed > summary::-webkit-details-marker { display: none; }
.ld-closed > summary span { text-decoration: underline; }
.ld-closed[open] > summary span { display: none; }
.ld-closed .ld-list { margin-top: 10px; }
.ld-empty { margin-top: 16px; }
@media (max-width: 860px) { .ld-board { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(78vw, 1fr); } }
@media (max-width: 640px) {
  .ld-row.lead-card { grid-template-columns: minmax(0, 1fr); }
  .ld-row-a { justify-content: flex-end; }
  .ld-dated { grid-template-columns: 48px minmax(0, 1fr); }
}

/* ---- Money pages (M48, the owner's pick "B: each page, its one job") ---- */
.mn-brief { animation: fadeInUp 0.4s ease both; }
.mn-grp { margin-top: 20px; }
.mn-grp-h { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin: 0 0 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mn-grp-h.is-late { color: var(--danger); }
.mn-grp-h span { color: var(--text-dim); letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 12px; }
.mn-row { margin-bottom: 8px; }
.mn-fam { color: var(--text-dim); font-size: 13.5px; }
.mn-late { color: var(--danger); }
.mn-soon { color: var(--gold-text); }
.mn-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.mn-acts .cs-link { text-decoration: none; }
.mn-slip { display: flex; gap: 14px 18px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding: 14px 18px; border-radius: 16px; background: rgba(168, 131, 74, 0.1); border: 1px solid rgba(168, 131, 74, 0.28); animation: fadeInUp 0.4s 0.05s ease both; }
.mn-slip-t { font-family: var(--font-serif); font-size: 21px; }
.mn-slip-t em { font-style: normal; color: var(--gold-text); }
.mn-slip-m { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.mn-slip-a { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.mn-method { font-size: 12.5px; margin: 10px 2px 0; }
.mn-day { margin-top: 18px; }
.mn-day-h { font-family: var(--font-serif); font-weight: 400; font-size: 19px; margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mn-day-h span { font-family: var(--font-ui); font-size: 12px; color: var(--text-dim); }
.mn-day-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 2px 16px; }
.mn-pay { display: grid; grid-template-columns: minmax(0, 1fr) 120px 110px 120px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--table-border); font-size: 13.5px; }
.mn-pay:last-child { border-bottom: 0; }
.mn-pay-w { min-width: 0; }
.mn-pill { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(42, 33, 27, 0.07); color: var(--text-dim); }
.mn-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mn-amt.is-neg { color: var(--danger); }
.mn-bank { font-size: 12px; }
.mn-bank .cs-link { font-size: 12px; }
.mn-ok, .mn-bank .cs-link.mn-ok { color: var(--success); font-weight: 500; }
.mn-inv { display: grid; grid-template-columns: 96px minmax(0, 1fr) 110px 120px; gap: 14px; align-items: center; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.mn-inv:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-1px); }
.mn-inv-n { font-family: var(--font-serif); font-size: 20px; display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .mn-pay { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .mn-pay > div:nth-child(2) { grid-row: 2; }
  .mn-pay .mn-amt { grid-column: 2; grid-row: 1; }
  .mn-pay .mn-bank { grid-column: 2; grid-row: 2; text-align: right; }
  .mn-inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; }
  .mn-inv-n, .mn-inv .cs-mid { grid-column: 1 / -1; }
  .mn-inv-n { font-size: 17px; }
  .mn-inv .cs-money { text-align: left; display: flex; align-items: baseline; gap: 6px; }
  .mn-inv .cs-money b { display: inline; font-size: 17px; }
  .mn-slip-a { margin-left: 0; }
}

/* ---- The catalog: shelves (M48, the owner's pick "B") ---- */
.oc-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 14px; }
.oc-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 10px; }
.oc-mode { display: flex; }
.oc-mode .ld-view { flex: 1; }
.oc-shelves { display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 220px); overflow: auto; }
.oc-shelf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; text-align: left; border: 0; background: none; border-radius: 9px; padding: 8px 11px; font: 500 13.5px var(--font-ui); color: var(--text-dim); cursor: pointer; }
.oc-shelf:hover { background: var(--btn-ghost-hover-bg); color: var(--text); }
.oc-shelf.is-on { background: var(--glass-bg); color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(60, 40, 20, 0.12); }
.oc-n { font-size: 12px; color: var(--text-dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.oc-shelf-foot { display: flex; gap: 14px; flex-wrap: wrap; padding: 4px 11px; font-size: 12.5px; }
.oc-shelf-foot .cs-link { text-decoration: none; }
.oc-main { min-width: 0; }
.oc-search { display: flex; width: 100%; max-width: none; }
.oc-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.oc-lab { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin: 0 2px 0 6px; }
.oc-lab:first-child { margin-left: 0; }
.oc-chip { border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text-dim); border-radius: 999px; padding: 4px 11px; font: 500 12.5px var(--font-ui); cursor: pointer; }
.oc-chip:hover { background: var(--btn-ghost-hover-bg); }
.oc-chip.is-on { background: var(--text); border-color: var(--text); color: var(--bg-deep, #f6f1e9); }
.oc-count { font-size: 12.5px; margin: 10px 2px 6px; }
.oc-bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--text); color: var(--bg-deep, #f6f1e9); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.oc-bulk button { border: 0; background: rgba(255, 255, 255, 0.14); color: inherit; border-radius: 8px; padding: 5px 10px; font: 600 12.5px var(--font-ui); cursor: pointer; }
.oc-bulk button:hover { background: rgba(255, 255, 255, 0.24); }
.oc-bulk .oc-bulk-x { margin-left: auto; background: none; opacity: 0.75; }
.oc-table-wrap { overflow-x: auto; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; }
.oc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.oc-table th { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--table-border); white-space: nowrap; }
.oc-table th.r, .oc-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.oc-sort { border: 0; background: none; padding: 0; font: 700 10.5px var(--font-ui); letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; }
.oc-sort.is-on { color: var(--gold-text); }
.oc-table td { padding: 8px 10px; border-bottom: 1px solid var(--table-border); vertical-align: middle; }
.oc-table tbody tr { cursor: pointer; }
.oc-table tbody tr:hover td { background: var(--table-hover-bg, rgba(168, 131, 74, 0.05)); }
.oc-table tbody tr.is-sel td { background: rgba(168, 131, 74, 0.1); }
.oc-table tbody tr:last-child td { border-bottom: 0; }
.oc-ck { width: 34px; }
.oc-nm a { font-weight: 600; color: var(--text); text-decoration: none; }
.oc-nm a:hover { text-decoration: underline; }
.oc-nm small { display: block; font-size: 11.5px; color: var(--text-dim); }
.oc-pr { font-weight: 600; white-space: nowrap; }
.oc-bs { white-space: nowrap; color: var(--text-dim); }
.oc-sv, .oc-lk { line-height: 1.9; }
.oc-part { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(168, 131, 74, 0.15); color: var(--gold-text); margin: 0 4px 2px 0; white-space: nowrap; }
.oc-part.is-usual { background: rgba(42, 33, 27, 0.06); color: var(--text-dim); }
.oc-part.is-choice { background: rgba(122, 79, 111, 0.12); color: #7a4f6f; }
.oc-tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(168, 131, 74, 0.13); color: var(--gold-text); margin: 0 4px 2px 0; white-space: nowrap; }
.oc-tag.is-p { background: rgba(77, 100, 112, 0.13); color: #4d6470; }
.oc-tag.is-s { background: rgba(86, 112, 74, 0.13); color: #56704a; }
.oc-tag.is-u { background: rgba(122, 79, 111, 0.12); color: #7a4f6f; }
.oc-more { display: block; margin: 12px auto 0; }
@media (max-width: 860px) {
  .oc-grid { grid-template-columns: minmax(0, 1fr); }
  .oc-side { position: static; }
  .oc-shelves { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 4px; }
  .oc-shelf { white-space: nowrap; flex: none; }
  .oc-table .oc-lk, .oc-table th:nth-child(6), .oc-table .oc-bs, .oc-table th:nth-child(4), .oc-table th:nth-child(7), .oc-table td:nth-child(7) { display: none; }
}

/* ---- One offering: the map (M48, the owner's pick "2") ---- */
.om-map { position: relative; height: 470px; margin-top: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; overflow: hidden; animation: fadeInUp 0.4s ease both; }
.om-map.is-empty { height: 260px; }
.om-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.om-lines line { stroke: rgba(168, 131, 74, 0.35); stroke-width: 1.4; }
.om-node { position: absolute; transform: translate(-50%, -50%); max-width: 210px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 7px 12px; text-align: center; font-size: 12.5px; color: var(--text); text-decoration: none; box-shadow: 0 2px 8px rgba(60, 40, 20, 0.07); transition: box-shadow 0.15s ease, transform 0.15s ease; }
a.om-node:hover { box-shadow: var(--card-hover-shadow); transform: translate(-50%, calc(-50% - 1px)); }
.om-node b { display: block; font-weight: 600; font-size: 13px; }
.om-node small { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; line-height: 1.5; }
.om-node { z-index: 1; }
.om-node.is-gold { background: linear-gradient(rgba(168, 131, 74, 0.1), rgba(168, 131, 74, 0.1)), var(--glass-bg); }
.om-node.is-soft { border-style: dashed; }
.om-node.is-pkg { background: linear-gradient(rgba(168, 131, 74, 0.1), rgba(168, 131, 74, 0.1)), var(--glass-bg); min-width: 130px; }
.om-node.is-pkg small { margin-top: 4px; }
.om-node.is-pkg .oc-part { margin: 1px 2px; }
.om-node.is-center { background: var(--text); color: var(--bg-deep, #f6f1e9); border-color: var(--text); padding: 12px 20px; font-size: 15px; z-index: 2; }
.om-node.is-center b { font-size: 15px; }
.om-node.is-center small { color: rgba(246, 241, 233, 0.75); }
.om-empty { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; font-size: 13px; text-align: center; width: 80%; }
.om-calc { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(168, 131, 74, 0.1); font-size: 13.5px; }
.om-n { display: inline-flex; align-items: center; border: 1px solid rgba(168, 131, 74, 0.35); border-radius: 10px; background: var(--glass-bg); overflow: hidden; }
.om-n button { border: 0; background: none; padding: 4px 10px; font: 700 15px var(--font-ui); color: var(--gold-text); cursor: pointer; }
.om-n input { width: 64px; border: 0; background: none; text-align: center; font: 600 14px var(--font-ui); color: var(--text); }
.om-out { font-family: var(--font-serif); font-weight: 400; font-size: 22px; color: var(--gold-text); margin-left: auto; font-variant-numeric: tabular-nums; }
.om-note { font-size: 12px; flex-basis: 100%; }
.om-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 16px 0 0; }
.om-facts div { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 14px; }
.om-facts dt { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.om-facts dd { margin: 3px 0 0; font-size: 14px; }
@media (max-width: 700px) {
  .om-map { height: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
  .om-lines { display: none; }
  .om-node { position: static; transform: none; max-width: none; text-align: left; }
  a.om-node:hover { transform: translateY(-1px); }
  .om-node.is-center { order: -1; }
  .om-empty { position: static; transform: none; width: auto; }
}

/* Package page: a line's quantity and a choice's upgrade price, edited in place. */
.input.pk-inl { display: inline-block; width: 74px; height: 30px; min-height: 0; padding: 2px 8px; margin-left: 4px; font-size: 13px; }

/* ===== M48 · The hall map: everything on one globe, by its connections ===== */
.hm-page { padding: 0 12px 10px; }
.hm { position: relative; height: calc(100vh - 150px); min-height: 460px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(202, 138, 4, 0.08), rgba(202, 138, 4, 0) 45%), #fbf7ef; border: 1px solid var(--glass-border); }
.hm-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.hm.is-drag .hm-cv { cursor: grabbing; }
.hm-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); pointer-events: none; text-align: center; padding: 0 24px; }
.hm-loading[hidden] { display: none; }
.hm-top { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; pointer-events: none; }
.hm-top > * { pointer-events: auto; }
.hm-back { width: 34px; padding: 0; }
.hm-title { font-family: var(--font-serif); font-size: 22px; margin-right: 4px; }
.hm-modes { background: rgba(92, 56, 38, 0.07); }
.hm-find { position: relative; flex: 1 1 220px; max-width: 340px; }
.hm-find .input { height: 36px; min-height: 0; }
.hm-res { position: absolute; left: 0; right: 0; top: 42px; max-height: 300px; overflow: auto; padding: 4px; z-index: 8; }
.hm-res[hidden] { display: none; }
.hm-res button, .hm-nb, .hm-lg { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: 8px; text-align: left; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.hm-res button:hover, .hm-nb:hover, .hm-lg:hover { background: rgba(92, 56, 38, 0.06); }
.hm-res small, .hm-nb small { margin-left: auto; color: var(--text-dim); font-size: 11.5px; white-space: nowrap; }
.hm-nb span, .hm-res span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-shape { flex: none; color: var(--primary-purple); }
.hm-hot .hm-shape { color: #a16207; vertical-align: -1px; }
.hm-legend { position: absolute; left: 14px; bottom: 14px; z-index: 5; width: 200px; padding: 10px; }
.hm-legend h4 { margin: 0 0 4px 8px; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); }
.hm-lg { padding: 3px 8px; }
.hm-lg.is-off { opacity: 0.38; }
.hm-n { margin-left: auto; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.hm-panel { position: absolute; right: 14px; top: 64px; bottom: 14px; width: 340px; z-index: 6; display: flex; flex-direction: column; }
.hm-panel[hidden] { display: none; }
.hm-ph { position: relative; padding: 14px 16px 10px; border-bottom: 1px solid var(--glass-border); }
.hm-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.hm-ph h2 { font-family: var(--font-serif); font-weight: 400; font-size: 23px; line-height: 1.15; margin: 3px 34px 0 0; }
.hm-s { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.hm-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--text-dim); cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.hm-x:hover { background: rgba(92, 56, 38, 0.06); }
.hm-pb { overflow: auto; padding: 6px 16px 12px; flex: 1; min-height: 0; }
.hm-pb h5 { margin: 12px 0 4px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.hm-chain { font-size: 13px; line-height: 1.7; padding: 6px 10px; border-radius: 10px; background: rgba(202, 138, 4, 0.08); margin-bottom: 6px; }
.hm-chain b { font-weight: 700; }
.hm-chain i { font-style: normal; color: #854d0e; font-size: 11.5px; margin: 0 4px; }
.hm-tip { font-size: 12.5px; color: var(--text-dim); margin: 8px 0 0; }
.hm-pact { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--glass-border); font-size: 12px; color: var(--text-dim); }
.hm-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; align-items: center; padding: 6px 8px; }
.hm-cnt { font-family: var(--font-serif); font-size: 18px; min-width: 140px; text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-cnt small { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); }
.hm.is-cinema .hm-top > :not(.hm-title), .hm.is-cinema .hm-legend, .hm.is-cinema .hm-panel { display: none !important; }
@media (max-width: 760px) {
  .hm { height: calc(100vh - 120px); }
  .hm-find { max-width: none; flex-basis: 100%; }
  .hm-legend { right: 14px; width: auto; bottom: 72px; display: flex; flex-wrap: wrap; gap: 0 4px; padding: 6px; }
  .hm-legend h4 { display: none; }
  .hm-lg { width: auto; font-size: 12px; padding: 3px 6px; }
  .hm-lg .hm-n { display: none; }
  .hm-panel { left: 14px; width: auto; top: auto; height: 55%; }
  .hm-cnt { min-width: 90px; }
}

/* ===== M48 · One package: the menu card (the owner's look A) ===== */
.pk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; }
.pk-head-t { min-width: 0; }
.pk-eye { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.pk-title { font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1.12; margin: 2px 0 0; text-wrap: balance; }
.pk-ren { border: 0; background: none; color: var(--text-dim); cursor: pointer; padding: 4px 6px; border-radius: 8px; vertical-align: 6px; }
.pk-ren:hover { background: rgba(92, 56, 38, 0.06); color: var(--text); }
.pk-sub { color: var(--text-dim); font-size: 13.5px; margin-top: 3px; }
.pk-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-acts .btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.pk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.pk-menu { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; padding: 14px 20px 16px; min-width: 0; }
.pk-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pk-hint { margin: 12px 0 0; font-size: 13px; color: var(--text-dim); }
.pk-part { margin-top: 6px; }
.pk-part-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 0 6px; border-bottom: 1px solid var(--glass-border); }
.pk-part-h b { font-family: var(--font-serif); font-weight: 400; font-size: 21px; }
.pk-tm { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pk-adds { margin-left: auto; display: flex; gap: 14px; }
.pk-adds .cs-link { font-size: 12.5px; }
.pk-empty { margin: 8px 2px; font-size: 13px; color: var(--text-dim); }
.pk-it { display: grid; grid-template-columns: minmax(0, 1fr) 140px 74px 84px 28px; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px solid rgba(92, 56, 38, 0.08); font-size: 14px; }
.pk-it-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-it-n a { color: var(--text); text-decoration: none; }
.pk-it-n a:hover { text-decoration: underline; }
.pk-who { font-size: 12px; color: var(--text-dim); }
.pk-pr { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pk-q { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.input.pk-inl { width: 54px; height: 28px; padding: 0 6px; font-size: 13px; }
.pk-move { height: 28px; max-width: 170px; width: 100%; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-dim); font: 12.5px var(--font-ui); padding: 0 4px; cursor: pointer; }
.pk-move:hover, .pk-move:focus { background: rgba(92, 56, 38, 0.06); color: var(--text); }
.pk-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer; }
.pk-x:hover { background: rgba(140, 37, 25, 0.08); color: var(--danger); }
.pk-x svg { width: 13px; height: 13px; }
.pk-ch { margin: 10px 0 4px; border: 1.5px dashed rgba(169, 119, 58, 0.45); border-radius: 12px; padding: 9px 12px; background: rgba(250, 204, 21, 0.05); }
.pk-ch-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.pk-ch-c { display: flex; align-items: center; gap: 2px; }
.pk-ch-c .pk-move { width: auto; }
.pk-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pk-op { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 11px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 13px; }
.pk-op-d { color: var(--gold-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pk-op-in { width: 52px; border: 0; background: transparent; color: var(--gold-text); font: 600 12px var(--font-ui); padding: 2px 0; }
.pk-op-x { display: inline-flex; border: 0; background: none; color: var(--text-dim); cursor: pointer; padding: 3px; border-radius: 50%; }
.pk-op-x:hover { background: rgba(140, 37, 25, 0.08); color: var(--danger); }
.pk-op-x svg { width: 11px; height: 11px; }
.pk-op-add { color: var(--gold-text); font-weight: 600; border-style: dashed; cursor: pointer; padding: 3px 11px; font-family: var(--font-ui); }
.pk-op-add:hover { background: rgba(250, 204, 21, 0.08); }
.pk-fold { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px dashed var(--glass-border); border-radius: 14px; padding: 11px 14px; margin-top: 16px; font-size: 13px; color: var(--text-dim); }
.pk-fold b { color: var(--text); }
.pk-fold-a { display: flex; gap: 14px; }
.pk-none { text-align: center; padding: 34px 16px; color: var(--text-dim); }
.pk-none svg { width: 28px; height: 28px; color: var(--gold-text); }
.pk-rail { position: sticky; top: calc(var(--nav-h) + 12px); display: grid; gap: 12px; }
.pk-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 16px 18px; }
.pk-lbl { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin: 0 0 8px; }
.pk-lbl-row { display: flex; justify-content: space-between; align-items: baseline; }
.pk-lbl-row .cs-link { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.pk-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pk-cur { font-family: var(--font-serif); font-size: 30px; }
.pk-big { width: 130px; border: 0; border-bottom: 1.5px solid var(--glass-border); background: transparent; font: 400 34px/1.1 var(--font-serif); color: var(--text); padding: 0 2px; }
.pk-big::placeholder, .pk-sm::placeholder { color: rgba(92, 56, 38, 0.35); }
.pk-big:focus, .pk-sm:focus { outline: none; border-bottom-color: var(--accent-gold-solid); }
.pk-basis { font-size: 13px; max-width: none; width: auto; }
.pk-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 13px; margin-top: 12px; align-items: baseline; }
.pk-kv > span { color: var(--text-dim); }
.pk-kv > b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-sm { width: 50px; border: 0; border-bottom: 1px solid var(--glass-border); background: transparent; font: 600 13px var(--font-ui); color: var(--text); text-align: right; padding: 1px 2px; }
.pk-say { font-size: 13.5px; line-height: 1.55; margin: 0; }
.pk-gold { color: var(--gold-text); }
.pk-note { font-size: 12px; color: var(--text-dim); margin: 6px 0 0; }
.pk-note:empty { display: none; }
.pk-mbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(92, 56, 38, 0.08); margin-top: 10px; }
.pk-mbar i { display: block; height: 100%; }
.pk-mbar .c { background: #c9b48f; }
.pk-mbar .s { background: var(--accent-gold-solid); }
.pk-mbar .d { flex: 1; background: rgba(92, 56, 38, 0.08); }
.pk-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.pk-leg span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.pk-leg .c::before { background: #c9b48f; }
.pk-leg .s::before { background: var(--accent-gold-solid); }
.pk-leg .d::before { background: rgba(92, 56, 38, 0.15); }
.input.pk-sel { height: 38px; min-height: 0; margin-top: 2px; padding-block: 0; line-height: 1.2; }
.pk-times { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.pk-times .input { height: 32px; min-height: 0; width: 110px; padding: 0 6px; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); font: 500 12.5px var(--font-ui); cursor: pointer; }
.pk-chip:hover { background: rgba(92, 56, 38, 0.06); }
.pk-chip.is-on { background: rgba(250, 204, 21, 0.16); border-color: transparent; color: var(--gold-text); font-weight: 600; }
.pk-pb { display: grid; gap: 6px; font-size: 13px; }
.pk-pb > div { display: flex; justify-content: space-between; gap: 10px; }
.pk-pb i { font-style: normal; color: var(--text-dim); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-pb-pay { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-border); }
@media (max-width: 960px) {
  .pk-grid { grid-template-columns: minmax(0, 1fr); }
  .pk-rail { position: static; order: -1; }
}
@media (max-width: 640px) {
  .pk-it { grid-template-columns: minmax(0, 1fr) auto 70px 28px; row-gap: 2px; column-gap: 6px; }
  .pk-it .pk-it-n { grid-column: 1 / -1; white-space: normal; }
  .pk-it .pk-pr { text-align: left; }
  .pk-it .pk-move { width: 70px; }
  .pk-adds { margin-left: 0; width: 100%; }
  .pk-title { font-size: 28px; }
}

/* ===== M48 · The packages: a card each (the owner's pick 1) ===== */
.pkc-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pkc-occ { flex-wrap: wrap; }
.pkc-q { flex: 1 1 220px; max-width: 320px; }
.pkc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pkc { position: relative; display: grid; gap: 8px; align-content: start; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 16px 18px; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.pkc:hover { box-shadow: 0 10px 26px -14px rgba(60, 40, 20, 0.35); transform: translateY(-1px); }
.pkc[hidden] { display: none; }
.pkc a.pkc-n { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; color: var(--text); text-decoration: none; }
.pkc-p { font-family: var(--font-serif); font-size: 20px; color: var(--gold-text); }
.pkc-p small { font-family: var(--font-ui); font-size: 12px; color: var(--text-dim); }
.pkc-m { font-size: 12.5px; color: var(--text-dim); }
.pkc-strip { display: flex; gap: 2px; height: 6px; border-radius: 4px; overflow: hidden; }
.pkc-strip i { display: block; background: var(--accent-gold-solid); opacity: 0.6; }
.pkc-f { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 8px; margin-top: 2px; }
.pkc-more { position: relative; }
.pkc-dots { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; }
.pkc-dots:hover { background: rgba(92, 56, 38, 0.06); }
.pkc-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; display: grid; min-width: 160px; padding: 5px; background: #fffdf9; border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(60, 40, 20, 0.35); }
.pkc-menu[hidden] { display: none; }
.pkc-menu button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font: 500 13px var(--font-ui); color: var(--text); cursor: pointer; text-align: left; }
.pkc-menu button:hover { background: rgba(92, 56, 38, 0.06); }
.pkc-menu .pkc-del { color: var(--danger); }
.pkc-new { place-items: center; place-content: center; min-height: 170px; border-style: dashed; color: var(--gold-text); font: 600 14px var(--font-ui); }
.pkc-empty { text-align: center; padding: 48px 16px; }
.pkc-empty svg { width: 30px; height: 30px; color: var(--gold-text); }
.pkc-empty h3 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; margin: 8px 0 4px; }
.pkc-none { margin: 10px 2px; }

/* ============================================================
   M48 — Settings, look B (the owner's pick): a home of cards that
   say what each page is set to, and pages of question rows that
   save on their own, with "← previous · next →" at the bottom.
   ============================================================ */
.st-page { max-width: 880px; margin: 0 auto; }
.st-pgh { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.st-eye { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.st-pgh h1 { font-family: var(--font-serif); font-weight: 400; font-size: 32px; margin: 2px 0 0; line-height: 1.15; text-wrap: balance; }
.st-desc { color: var(--text-dim); font-size: 13.5px; margin: 6px 0 0; max-width: 70ch; }
.st-saved { display: inline-flex; align-items: center; gap: 6px; min-height: 18px; font-size: 12px; font-weight: 600; color: var(--success); white-space: nowrap; }
.st-saved:not(:empty)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-saved.is-bad { color: var(--danger); }
.st-grp { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; margin-top: 16px; overflow: hidden; animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.st-grp:nth-of-type(2) { animation-delay: 0.04s; }
.st-grp:nth-of-type(3) { animation-delay: 0.08s; }
.st-grp:nth-of-type(4) { animation-delay: 0.12s; }
.st-grp > h4 { margin: 0; padding: 12px 18px; display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; border-bottom: 1px solid var(--glass-border); background: color-mix(in srgb, var(--gold-bright) 6%, var(--glass-bg)); }
.st-grp > h4 span { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--text-dim); }
.st-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--glass-border); }
.st-q:last-child { border-bottom: 0; }
.st-q-t { min-width: 0; }
.st-q-t > b { display: block; font-size: 14px; font-weight: 600; }
.st-q-m { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; max-width: 62ch; }
.st-q-a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.st-q-wide { grid-template-columns: minmax(0, 1fr); }
.st-q-wide .st-q-a { justify-content: stretch; }
.st-q-wide .st-q-a > * { flex: 1 1 100%; }
.st-q.is-off .st-q-t, .st-q.is-off .st-q-a { opacity: 0.5; }
.st-box { display: inline-flex; align-items: center; gap: 6px; }
.st-box i { font-style: normal; color: var(--text-dim); font-size: 12.5px; }
.st-box.wide { flex: 1 1 260px; min-width: 0; max-width: 360px; }
.st-box.wide .st-in { width: 100%; }
.input.st-in { min-height: 36px; padding: 6px 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
select.input.st-in { padding-right: 28px; }
.input.st-area { min-height: 0; font-size: 14px; line-height: 1.5; resize: vertical; width: 100%; }
.st-chks { flex-wrap: wrap; }
.st-chks label { position: relative; cursor: pointer; }
.st-chks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-chks label:has(input:checked) { background: var(--glass-bg); color: var(--text); box-shadow: 0 1px 3px rgba(60, 40, 20, 0.14); }
.st-chks label:has(input:focus-visible) { box-shadow: var(--ring); }
.bw-day.is-closed { background: repeating-linear-gradient(45deg, var(--input-bg), var(--input-bg) 5px, rgba(42, 33, 27, 0.06) 5px, rgba(42, 33, 27, 0.06) 10px); }
.st-tg { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.st-tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-tg span { width: 42px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--text-dim) 30%, transparent); position: relative; transition: background 0.18s ease; }
.st-tg span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left 0.18s ease; }
.st-tg input:checked + span { background: var(--brass-fill, var(--gold-bright)); }
.st-tg input:checked + span::after { left: 21px; }
.st-tg input:focus-visible + span { box-shadow: var(--ring); }
.st-tg input:disabled + span { opacity: 0.5; }
.st-echo { margin: 0 18px 14px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--gold-bright) 10%, transparent); font-size: 13px; }
.st-echo b { color: var(--gold-text); }
.st-note { padding: 12px 18px; font-size: 13px; color: var(--text-dim); border-bottom: 1px solid var(--glass-border); }
.st-note:last-child { border-bottom: 0; }
.st-lnk { font-size: 12.5px; font-weight: 600; color: var(--gold-text); white-space: nowrap; }
.st-opt-d { font-size: 12.5px; color: var(--text-dim); }
.st-nextp { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--glass-border); font-size: 13px; font-weight: 600; }
.st-nextp a { color: var(--gold-text); }
.st-nextp .st-home { color: var(--text-dim); font-weight: 500; }
/* The settings home */
.st-hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.st-hc { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text); text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease; animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.st-hc:hover { box-shadow: 0 12px 26px -18px rgba(60, 40, 20, 0.5); transform: translateY(-2px); }
.st-hc b { font-family: var(--font-serif); font-weight: 400; font-size: 18px; }
.st-hc span { font-size: 12.5px; color: var(--text-dim); }
.st-hc em { font-style: normal; font-size: 12px; color: var(--gold-text); font-weight: 600; }
/* The first-time setup (M48, look B): six cards in order, each a settings page. */
.su-page { max-width: 1000px; margin: 0 auto; }
.su-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.su-head h1 { margin: 2px 0 0; }
.su-count { text-align: right; display: grid; gap: 2px; }
.su-count b { font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1; }
.su-trial { font-size: 12.5px; color: var(--text-dim); }
.su-bar-p { height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--glass-border) 70%, transparent); overflow: hidden; margin-top: 14px; }
.su-bar-p i { display: block; height: 100%; background: var(--brass-fill, var(--gold-bright)); border-radius: inherit; transition: width 0.4s ease; }
.su-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.su-card { display: grid; gap: 5px; align-content: start; padding: 16px 18px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text); text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease; animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.su-card:hover { box-shadow: 0 12px 26px -18px rgba(60, 40, 20, 0.5); transform: translateY(-2px); }
.su-card.is-next { border-color: var(--gold-bright); box-shadow: 0 8px 20px -14px rgba(151, 116, 62, 0.45); }
.su-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.su-top b { font-family: var(--font-serif); font-weight: 400; font-size: 20px; }
.su-what { font-size: 13px; color: var(--text-dim); }
.su-card em { font-style: normal; font-size: 12.5px; color: var(--gold-text); font-weight: 600; }
.su-go { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--gold-text); display: inline-flex; align-items: center; gap: 5px; }
.su-arrow { display: inline-block; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.su-card:hover .su-arrow, #su-next:hover .su-arrow { transform: translateX(4px); }
.su-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.su-pill .ic { width: 12px; height: 12px; }
.su-pill.is-done { background: color-mix(in srgb, var(--success, #4f7a5a) 14%, transparent); color: var(--success, #4f7a5a); }
.su-pill.is-next { background: var(--brass-fill, var(--gold-bright)); color: #fff; }
.su-pill.is-todo { background: color-mix(in srgb, var(--glass-border) 80%, transparent); color: var(--text-dim); }
.su-book { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.su-later { margin-top: 24px; }
.su-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.su-chips a { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-bg); font-size: 13px; font-weight: 600; color: var(--text-dim); text-decoration: none; transition: background 0.2s ease; }
.su-chips a:hover { background: var(--btn-ghost-hover-bg); }
.su-ways { display: grid; gap: 6px; margin-top: 20px; font-size: 13.5px; }
.su-ways a { color: var(--gold-text); font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.su-ways .ic { width: 15px; height: 15px; flex: none; }
.su-sbar { display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 16px; border-radius: 14px; background: var(--text); color: color-mix(in srgb, var(--glass-bg) 85%, transparent); font-size: 13.5px; }
.su-sbar b { color: var(--glass-bg); }
.su-sbar-r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.su-sbar a { color: var(--gold-bright); font-weight: 600; text-decoration: none; }
.su-make { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.su-make .st-desc { margin: 0; }
.occ-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; }
.occ-q { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text); font: 600 13.5px var(--font-ui); cursor: pointer; transition: background 0.2s ease; }
.occ-q:hover:not(:disabled) { background: var(--btn-ghost-hover-bg); }
.occ-q .ic { width: 14px; height: 14px; color: var(--gold-text); }
@media (max-width: 860px) { .su-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .su-grid { grid-template-columns: minmax(0, 1fr); } .su-count { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .su-card { animation: none; } .su-arrow, .su-bar-p i { transition: none; } }
.st-hg { margin: 24px 0 0; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
@media (max-width: 900px) { .st-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .st-hub { grid-template-columns: minmax(0, 1fr); }
  .st-q { grid-template-columns: minmax(0, 1fr); }
  .st-q-a { justify-content: flex-start; }
  .st-q-a .lg-seg { flex-wrap: wrap; max-width: 100%; }
  .st-pgh h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .st-grp, .st-hc { animation: none; } }
.st-q.is-hidden { display: none; }
.st-hc.is-filtered-out { display: none; }
.st-hub-search { max-width: 460px; margin-top: 14px; }
/* A page not yet in rows keeps its own cards inside the look-B frame. */
.st-legacy { margin-top: 16px; }
.st-legacy > .settings-section-card:first-child, .st-legacy > .card:first-child { margin-top: 0; }
.occ > summary::-webkit-details-marker { display: none; }
.occ[open] > summary { background: color-mix(in srgb, var(--gold-bright) 6%, var(--glass-bg)); }
.occ > summary:hover { background: color-mix(in srgb, var(--gold-bright) 4%, var(--glass-bg)); }
/* The papers (M48): how to pay, and the hall's footer line. */
.doc-payinfo { margin: 18px 0 0; padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--gold-bright) 9%, transparent); font-size: 13.5px; }
.doc-payinfo div { white-space: pre-line; margin-top: 4px; }
.doc-foot-note { margin: 18px 0 0; font-size: 12px; color: var(--text-dim); white-space: pre-line; }

/* ---- Setup Assistant, look A (M48): the chat with the setup beside it ---- */
.as-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-top: 18px; }
.as-chat { margin: 0; min-width: 0; }
.as-side { display: grid; gap: 14px; position: sticky; top: 84px; }
.as-side > .card { margin: 0; }
.as-side-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.as-side-h .muted { font-size: 12px; }
.as-steps .su-bar-p { margin-top: 10px; }
.as-steplist { display: grid; gap: 2px; margin-top: 10px; }
.as-step { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: inherit; transition: background 0.18s ease; }
.as-step:hover { background: color-mix(in srgb, var(--gold-bright) 7%, transparent); }
.as-dot { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--glass-border) 80%, transparent); }
.as-step.is-next .as-dot { background: var(--brass-fill, var(--gold-bright)); }
.as-step.is-done .as-dot { background: none; color: var(--success); }
.as-dot .ic { width: 18px; height: 18px; }
.as-step-t { display: grid; gap: 1px; min-width: 0; }
.as-step-t b { font-size: 13px; font-weight: 600; }
.as-step-t em { font-style: normal; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.as-step.is-fresh { animation: as-tick 1.6s ease; }
@keyframes as-tick { 0% { background: color-mix(in srgb, var(--success) 22%, transparent); } 100% { background: transparent; } }
.as-side-more { display: inline-block; margin-top: 8px; font-size: 12.5px; }
.as-memlist { display: grid; margin-top: 6px; }
.as-mem-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--glass-border); }
.as-mem-row:first-child { border-top: 0; }
.as-mem-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.as-mem-row .ic { flex: 0 0 auto; margin-top: 2px; color: var(--text-dim); }
.as-ask { display: grid; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--gold-bright) 6%, transparent); }
.as-ask::before { content: "Remember this for next time?"; font-size: 12px; color: var(--text-dim); }
.as-ask-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.as-ask-row > span { flex: 1 1 180px; min-width: 0; }
.as-kept { display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 2px 0; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; background: color-mix(in srgb, var(--success) 10%, transparent); }
.as-kept .ic { color: var(--success); }
.as-err { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; background: color-mix(in srgb, var(--danger) 10%, transparent); }
.as-err > .ic { color: var(--danger); flex: 0 0 auto; }
.as-err > span { flex: 1 1 200px; min-width: 0; }
.as-off p { margin: 6px 0 0; }
@media (max-width: 900px) { .as-wrap { grid-template-columns: 1fr; } .as-side { position: static; } }
@media (prefers-reduced-motion: reduce) { .as-step.is-fresh { animation: none; } }

/* ---- Inbox, look A (M48): three live lists, a kind on every row ---- */
.ib-group { margin-top: 22px; }
.ib-list { display: flex; flex-direction: column; gap: 8px; }
.ib-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--glass-bg); transition: background 0.18s ease, box-shadow 0.18s ease; }
.ib-row:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.ib-row b { font-size: 14.5px; font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.ib-row.is-new b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 8px; vertical-align: middle; background: var(--brass-fill, var(--gold-bright)); }
.ib-t { min-width: 0; }
.ib-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.ib-a { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ib-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ib-c, var(--gold-bright)) 13%, transparent); color: var(--ib-c, var(--gold-bright)); }
.ib-ic .ic { width: 17px; height: 17px; }
.ib-g-messages { --ib-c: #3f6aa1; }
.ib-g-family { --ib-c: #b4882a; }
.ib-g-leads { --ib-c: #7a5ea8; }
.ib-g-money { --ib-c: #4f7a5a; }
.ib-g-papers { --ib-c: #8a7355; }
.ib-g-people { --ib-c: #a35d6a; }
.ib-g-system { --ib-c: #6b7280; }
.ib-cleared { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.ib-cleared .ic { color: var(--success); width: 14px; height: 14px; }
.ib-empty { margin: 0; font-size: 13.5px; }
.ib-filter select { min-width: 170px; }
.ib-more { display: flex; justify-content: center; margin-top: 14px; }
.lead-card.is-focus { animation: ib-focus 2.4s ease; }
@keyframes ib-focus { 0%, 40% { background: color-mix(in srgb, var(--gold-bright) 16%, var(--glass-bg)); } 100% { background: var(--glass-bg); } }
@media (max-width: 640px) { .ib-row { grid-template-columns: auto minmax(0, 1fr); } .ib-a { grid-column: 1 / -1; justify-content: flex-start; } .ib-cleared { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .lead-card.is-focus { animation: none; } }

/* ---- An announcement to many bookings (Events) ---- */
.an-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.55; }
.an-kinds { display: flex; gap: 18px; margin: 4px 0 10px; font-size: 14px; }
.an-kinds label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.an-who { font-size: 13px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gold-bright) 6%, transparent); }
.an-who ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 150px; overflow-y: auto; }
.an-who li { display: flex; gap: 10px; padding: 2px 0; }
.an-who li span { flex: 0 0 96px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.an-who li em { font-style: normal; font-size: 11px; color: var(--text-dim); }
.an-none { color: var(--text-dim); }
.an-sent { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--glass-border); font-size: 13px; display: grid; gap: 6px; }
.an-sent details summary { cursor: pointer; }
.an-sent details summary span { font-weight: 600; }
.an-sent details p { margin: 6px 0 2px; white-space: pre-line; }

/* ---- Find a date: the booking page's date step, in a list (M48, look C) ---- */
.bw-qrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bw-qrow .bw-q { margin-bottom: 12px; }
.bw-viewtog { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--glass-border) 60%, transparent); }
.bw-viewtog button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text-dim); font: 600 13px var(--font-ui); padding: 6px 13px; border-radius: 999px; cursor: pointer; }
.bw-viewtog button[aria-selected="true"] { background: var(--glass-bg); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.bw-viewtog .ic { width: 14px; height: 14px; }
.bw-find { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold-bright) 5%, transparent); }
.bw-ai { display: flex; gap: 8px; }
.bw-ai .input { flex: 1; min-width: 0; }
.bw-ff { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bw-ff label { display: grid; gap: 4px; font-size: 12px; color: var(--text-dim); font-weight: 600; }
.bw-ff2 { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.bw-ck { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.bw-dows .lg-seg-o { font-size: 12.5px; }
.bw-fh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.bw-flist { display: grid; gap: 6px; }
.bw-fm { margin: 10px 0 0; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.bw-fr { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--glass-bg); transition: box-shadow 0.18s ease; }
.bw-fr:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.bw-fr-d { display: grid; gap: 1px; }
.bw-fr-d b { font-size: 14px; }
.bw-fr.is-prime .bw-fr-d b { color: var(--gold-text); }
.bw-fr-d span { font-size: 12.5px; color: var(--text-dim); }
.bw-fr-d i { font-style: normal; }
.bw-fr-m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; min-width: 0; }
.bw-tag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gold-bright) 13%, transparent); color: var(--gold-text); }
.bw-fr.is-taken { opacity: 0.6; }
@media (max-width: 760px) { .bw-ff { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bw-fr { grid-template-columns: minmax(0, 1fr) auto; } .bw-fr-m { grid-column: 1 / -1; grid-row: 2; } }

/* ---- Bring in your lists: the Import page in four steps (M48, look A) ---- */
.imp-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; counter-reset: none; }
.imp-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-dim); padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--glass-border) 40%, transparent); }
.imp-steps li span { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--glass-bg); }
.imp-steps li.is-cur { color: var(--text); background: color-mix(in srgb, var(--gold-bright) 14%, transparent); }
.imp-steps li.is-cur span { background: var(--brass-fill, var(--gold-bright)); color: #fff; }
.imp-steps li.is-done span { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.imp-s1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.imp-f { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.imp-ai, #imp-pkg-hint { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.imp-ai .ic { color: var(--gold-text); }
.imp-note { font-size: 12px; color: var(--gold-text); margin: -4px 0 2px 160px; }
.imp-note:empty { display: none; }
.imp-note .ic { width: 13px; height: 13px; }
.imp-check { display: grid; gap: 4px; }
.imp-q { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--glass-border); font-size: 13.5px; }
.imp-q > span { flex: 0 0 auto; color: var(--gold-text); margin-top: 1px; }
.imp-q.is-ok > span { color: var(--success); }
.imp-q > div { flex: 1; min-width: 0; }
.imp-q .muted { font-size: 12.5px; margin-top: 2px; }
.imp-done { margin-top: 6px; }
.imp-rec { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--glass-border); font-size: 13.5px; }
.imp-rec .muted { font-size: 12px; }
.imp-rec-a { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.imp-foot { font-size: 13px; margin-top: 14px; }
.imp-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); text-decoration: none; padding: 6px 8px; border-radius: 8px; transition: background 0.18s ease; }
.imp-link:hover { background: color-mix(in srgb, var(--gold-bright) 9%, transparent); color: var(--text); }
.imp-link .ic { width: 14px; height: 14px; }
@media (max-width: 640px) { .imp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .imp-s1 { grid-template-columns: 1fr; } .imp-note { margin-left: 0; } }

/* ---- Waiting for a date: the waitlist as part of Leads (M48, look B) ---- */
.wl-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.wl-bar p { margin: 0; max-width: 620px; font-size: 13.5px; }
.wl-holder { margin: -2px 0 8px; font-size: 13px; color: var(--text-dim); }
.wl-heb { font-size: 11px; color: var(--text-dim); letter-spacing: 0; text-transform: none; font-weight: 500; margin-left: 6px; }
.wl-pos { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--gold-bright) 16%, transparent); color: var(--gold-text); vertical-align: 1px; }
.wl-row .ld-row-a { flex-wrap: wrap; justify-content: flex-end; }

/* ---- Supplies A (M48): the internal catalog, one level in from Offerings ---- */
.of-tabs { margin: 4px 0 10px; }
.sup-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.sup-st { margin-top: 18px; }
.sup-st > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-family: var(--font-serif); font-weight: 400; font-size: 19px; }
.sup-st > h3 span { font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--text-dim); font-weight: 600; }
.sup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--glass-bg); margin-bottom: 6px; }
.sup-row-t { min-width: 0; }
.sup-row-t b { font-size: 14.5px; }
.sup-from { margin-top: 2px; font-size: var(--fs-meta); color: var(--text-dim); line-height: 1.5; }
.sup-from a { color: inherit; }
.sup-qty { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 13px; }
.sup-qty b { font-size: 17px; color: var(--text); }
.sup-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--gold-bright) 16%, transparent); color: var(--gold-text); vertical-align: 1px; }
.sup-err { color: var(--warning); font-size: 13.5px; }
.sup-item { display: grid; gap: 3px; width: 100%; text-align: left; padding: 11px 14px; margin-bottom: 6px; border: 0; border-radius: 12px; background: var(--glass-bg); color: var(--text); font: inherit; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.sup-item:hover { box-shadow: 0 6px 18px rgba(42, 33, 27, 0.10); transform: translateY(-1px); }
.sup-item > span { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.sup-rules-h { margin: 16px 0 6px; }
.sup-rule { display: grid; gap: 6px; margin-bottom: 8px; }
.sup-rule .r-join { width: auto; justify-self: start; font-size: 12.5px; padding: 4px 8px; }
.sup-rule-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.sup-rule-l .r-qty, .sup-rule-l .r-per { width: 76px; }
.sup-rule-l .r-kind, .sup-rule-l .r-src { width: auto; min-width: 0; max-width: 100%; }
.sup-rule-l .r-unit { color: var(--text-dim); }
.sup-ex { margin: 12px 0 0; font-size: 13px; line-height: 1.5; }
.dof-sup { margin-top: 10px; }
.dof-sup ul { list-style: none; margin: 4px 0 0; padding: 0; }
.dof-sup li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(42, 33, 27, 0.14); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .sup-row { padding: 10px 12px; } .sup-rule-l .r-qty, .sup-rule-l .r-per { width: 64px; } }

/* ---- The performer & vendor app (M48, the owner's look A) ---- */
.tab-btn .tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--brass-fill); color: #fff; vertical-align: 1px; }
.pv-panel { background: var(--glass-bg); border-radius: 16px; padding: 16px 18px; }
.pv-panel + .pv-panel { margin-top: 14px; }
.pv-panel > h5 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); }
.pv-panel > h5 span, .pv-panel > h5 a { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text-dim); }
.pv-panel > h5 a { color: var(--gold-text); text-decoration: none; }
.ph-none { margin: 0; padding: 4px 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.pd { margin-top: 6px; }
.pd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pd-head .eyeb { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.pd-greet { font-family: var(--font-serif); font-weight: 400; font-size: 34px; margin: 2px 0 0; line-height: 1.1; }
.pd-head p { margin: 4px 0 0; font-size: 13.5px; }
.pd-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; align-items: start; }
.pd-side { display: grid; gap: 14px; }
.pd-side .pv-panel + .pv-panel { margin-top: 0; }
.pd-next-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.pd-next-t { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.15; }
.pd-kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 5px 12px; margin-top: 10px; font-size: 13.5px; }
.pd-kv span { color: var(--text-dim); }
.pd-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.pd-acts .btn svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.pn-row .pd-acts { margin-top: 0; }
.pd-more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--gold-text); text-decoration: none; }
.pd-year b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 28px; font-variant-numeric: tabular-nums; }
.pd-year span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.pd-year em { display: block; font-style: normal; font-size: 12.5px; color: var(--success); margin-top: 4px; }
.pd-year small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.pj { display: grid; grid-template-columns: minmax(78px, auto) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--glass-border); }
.pj:last-child { border-bottom: 0; }
.pj-t { min-width: 0; display: grid; justify-items: start; gap: 2px; }
.pj-t .row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; text-decoration: none; }
.pj-t small { font-size: 12.5px; color: var(--text-dim); }
.pj-src { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; }
.pd-next-in .pj-src { margin-top: 4px; }
.pj-src.h { background: color-mix(in srgb, var(--gold-bright) 16%, transparent); color: var(--gold-text); }
.pj-src.d { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pj-src.o { background: rgba(42, 33, 27, 0.07); color: var(--text-dim); }
.pj-cf { margin-top: 4px; border: 1px solid var(--brass-fill); background: transparent; color: var(--gold-text); border-radius: 999px; padding: 2px 10px; font: 600 11.5px var(--font-ui); cursor: pointer; transition: background .15s ease; }
.pj-cf:hover { background: color-mix(in srgb, var(--gold-bright) 12%, transparent); }
.pj-r { display: grid; justify-items: end; gap: 2px; text-align: right; }
.pj-r b { font-variant-numeric: tabular-nums; font-size: 15px; }
.pj-r small { font-size: 11.5px; color: var(--text-dim); }
.pj-edit { border: 0; background: none; padding: 0; font: 600 12px var(--font-ui); color: var(--gold-text); cursor: pointer; }
.pn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold-bright) 7%, transparent); margin-bottom: 6px; }
.pn-row b { display: block; font-size: 13.5px; }
.pn-row small { display: block; font-size: 12px; color: var(--text-dim); }
.po-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--glass-border); font-size: 13.5px; }
.po-row:last-child { border-bottom: 0; }
.po-row small { color: var(--text-dim); font-size: 12.5px; }
.po-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--glass-border); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pc-row:last-child { border-bottom: 0; }
.pc-row b { display: block; font-size: 14.5px; }
.pc-row small { font-size: 12px; color: var(--text-dim); }
.pc-h { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding-top: 0; }
.pc-owed { color: var(--gold-text); font-weight: 700; }
.ph-plan .btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
@media (max-width: 900px) { .pd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .pd-greet { font-size: 28px; }
  .pd-next-in { grid-template-columns: minmax(0, 1fr); }
  .pd-kv { grid-template-columns: 76px minmax(0, 1fr); }
  .pj { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .pj-r { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
  .pn-row { grid-template-columns: minmax(0, 1fr); }
  .pc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pc-row > span:nth-child(n+4), .pc-h { display: none; }
}

/* ---- The plan-share link & the find-your-table kiosk (M48) ---- */
.ps-wrap { max-width: 1100px; padding-block: 28px 40px; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ps-eye, .kf-eye { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.ps-head h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 4vw, 38px); margin: 2px 0 0; line-height: 1.1; text-wrap: balance; }
.ps-head p { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; }
.ps-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ps-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 11px; background: rgba(42, 33, 27, 0.06); }
.ps-fit { border: 0; background: transparent; border-radius: 8px; padding: 6px 12px; font: 600 12.5px var(--font-ui); color: var(--text-dim); cursor: pointer; }
.ps-fit.on { background: var(--glass-bg); color: var(--text); box-shadow: 0 1px 3px rgba(42, 33, 27, 0.12); }
.ps-yours { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gold-bright) 14%, transparent); color: var(--gold-text); font-weight: 600; font-size: 13px; }
.ps-yours span { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-bright) 30%, transparent); }
.ps-map { margin-top: 16px; background: var(--glass-bg); border-radius: 18px; padding: 14px; overflow: auto; text-align: center; }
.ps-map img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ps-map.is-full img { max-width: none; width: 1400px; }
.ps-empty { margin: 0; padding: 40px 0; color: var(--text-dim); }
.ps-foot { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--text-dim); }
.ps-none { max-width: 520px; margin: 12vh auto 0; padding: 40px 24px; text-align: center; background: var(--glass-bg); border-radius: 18px; }
.ps-none svg, .kf-closed svg { width: 34px; height: 34px; color: var(--gold-text); }
.ps-none h1, .kf-closed h1 { font-family: var(--font-serif); font-weight: 400; margin: 10px 0 4px; }
.ps-none p, .kf-closed p { margin: 0; color: var(--text-dim); }
.kf-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 6vh 20px 40px; text-align: center; }
.kf-head { display: grid; justify-items: center; gap: 4px; margin-bottom: 4vh; }
.kf-logo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.kf-simcha { font-family: var(--font-serif); font-size: clamp(24px, 4vw, 36px); line-height: 1.15; text-wrap: balance; }
.kf-date { font-size: clamp(14px, 2vw, 17px); color: var(--text-dim); }
.kf-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 6vw, 52px); margin: 0 0 18px; }
.kf-input { width: min(700px, 100%); font: 500 clamp(22px, 4vw, 34px) var(--font-ui); padding: 18px 24px; border-radius: 18px; border: 2px solid var(--glass-border); background: var(--glass-bg); color: var(--text); text-align: center; outline: none; }
.kf-input:focus { border-color: var(--brass-fill); }
.kf-results { width: min(700px, 100%); margin-top: 22px; display: grid; gap: 10px; }
.kf-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; border: 0; border-radius: 16px; background: var(--glass-bg); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: box-shadow .15s ease, background .15s ease; }
.kf-row:hover { box-shadow: 0 6px 18px rgba(42, 33, 27, 0.10); }
.kf-row.on { background: color-mix(in srgb, var(--gold-bright) 14%, var(--glass-bg)); }
.kf-row span { font-size: clamp(18px, 3vw, 26px); font-weight: 600; }
.kf-row b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 3.6vw, 32px); color: var(--gold-text); white-space: nowrap; }
.kf-none { margin: 0; font-size: clamp(16px, 2.6vw, 22px); color: var(--text-dim); }
.kf-map { width: min(1000px, 100%); margin-top: 22px; background: var(--glass-bg); border-radius: 18px; padding: 14px; }
.kf-map img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.kf-map-cap { margin: 0 0 10px; font-size: clamp(16px, 2.4vw, 20px); }
.kf-map-cap b { font-family: var(--font-serif); font-weight: 400; color: var(--gold-text); }
.kf-map-cap span { color: var(--text-dim); margin-left: 8px; }
.kf-closed { margin-top: 6vh; padding: 36px 28px; background: var(--glass-bg); border-radius: 18px; max-width: 560px; }
.help-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); margin-left: 4px; vertical-align: 2px; }
.aff-list { display: grid; gap: 8px; }
.aff-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 12.5px; }
.day-brief { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--gold-bright) 8%, transparent); font-size: 13.5px; }
.day-brief-t { white-space: pre-wrap; line-height: 1.55; margin-top: 6px; }
.td-later { margin-top: 16px; }
.td-later > summary { cursor: pointer; list-style: none; font-family: var(--font-serif); font-size: 19px; padding: 2px 0 8px; }
.td-later > summary::-webkit-details-marker { display: none; }

/* ---- The setup interview (M48, setup look B): ten short questions, one per
   screen, each already answered for the hall's kind. ---- */
.ss-page { max-width: 1100px; }
.ss-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.ss-segs { display: flex; gap: 5px; flex: 1 1 260px; max-width: 460px; }
.ss-segs i { flex: 1; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--glass-border) 90%, transparent); transition: background 0.3s ease; }
.ss-segs i.on { background: var(--brass-fill, var(--gold-bright)); }
.ss-later { font: inherit; font-size: 13px; font-weight: 600; color: var(--text-dim); background: none; border: 0; cursor: pointer; padding: 6px 2px; }
.ss-later:hover { color: var(--text); }
.ss-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 22px; }
.ss-rail { display: grid; gap: 3px; position: sticky; top: 84px; }
.ss-r { font: inherit; text-align: left; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 11px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text-dim); cursor: pointer; }
.ss-r:disabled { cursor: default; }
.ss-r:not(:disabled):hover { background: color-mix(in srgb, var(--glass-bg) 70%, transparent); }
.ss-r i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--glass-border) 80%, transparent); color: var(--text-dim); }
.ss-r span { font-size: 14px; display: grid; gap: 1px; min-width: 0; }
.ss-r small { font-size: 12px; color: var(--text-dim); opacity: 0.85; overflow-wrap: anywhere; }
.ss-r.dn i { background: var(--success, #4f7a5a); color: #fff; }
.ss-r.on { background: var(--glass-bg); border-color: var(--glass-border); color: var(--text); font-weight: 600; box-shadow: 0 6px 18px -14px rgba(60, 40, 20, 0.45); }
.ss-r.on i { background: var(--brass-fill, var(--gold-bright)); color: #fff; }
.ss-q { min-width: 0; animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ss-n { font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.ss-q h1 { margin: 4px 0 4px; font-size: clamp(26px, 3.6vw, 36px); text-wrap: balance; }
.ss-why { color: var(--text-dim); max-width: 64ch; margin: 0 0 18px; font-size: 14.5px; }
.ss-note { padding: 11px 15px; border-radius: 12px; background: color-mix(in srgb, var(--gold-bright) 10%, var(--glass-bg)); font-size: 13.5px; margin-bottom: 16px; }
.ss-note b { color: var(--gold-text); }
.ss-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ss-kind { font: inherit; text-align: left; display: grid; gap: 7px; align-content: start; padding: 18px; border-radius: 18px; border: 1.5px solid var(--glass-border); background: var(--glass-bg); color: var(--text); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.ss-kind:hover, .ss-ans:hover { box-shadow: 0 12px 26px -18px rgba(60, 40, 20, 0.5); transform: translateY(-1px); }
.ss-kind.on, .ss-ans.on { border-color: var(--brass-fill, var(--gold-bright)); background: color-mix(in srgb, var(--gold-bright) 9%, var(--glass-bg)); }
.ss-kind-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ss-kind-h b { font-family: var(--font-serif); font-weight: 400; font-size: 22px; }
.ss-kind-l { font-size: 13px; color: var(--text-dim); }
.ss-kind-ul { display: grid; gap: 4px; margin-top: 4px; font-size: 12.5px; }
.ss-kind-ul span { display: flex; gap: 7px; align-items: baseline; }
.ss-kind-ul span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); flex: none; transform: translateY(-1px); }
.ss-kind-ul span.off { color: var(--text-dim); opacity: 0.8; }
.ss-kind-ul span.off::before { background: color-mix(in srgb, var(--glass-border) 100%, transparent); }
.ss-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--glass-border); flex: none; transition: border-width 0.15s ease; }
.ss-kind.on .ss-radio, .ss-ans.on .ss-radio { border: 6px solid var(--brass-fill, var(--gold-bright)); }
.ss-else { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.ss-else > span { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-right: 4px; }
.ss-chip { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text); cursor: pointer; }
.ss-chip:hover { background: color-mix(in srgb, var(--gold-bright) 8%, var(--glass-bg)); }
.ss-chip.on { background: var(--text); border-color: var(--text); color: var(--bg, #fff); }
.ss-anss { display: grid; gap: 10px; }
.ss-ans { font: inherit; text-align: left; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 3px 14px; align-items: start; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--glass-border); background: var(--glass-bg); color: var(--text); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.ss-ans .ss-radio { grid-row: 1 / span 3; margin-top: 1px; }
.ss-ans b { font-size: 15.5px; }
.ss-ans span:not(.ss-radio), .ss-ans em { grid-column: 2; }
.ss-ans span:not(.ss-radio) { font-size: 13.5px; color: var(--text-dim); }
.ss-ans em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.ss-in { display: flex; gap: 14px; flex-wrap: wrap; padding: 2px 0 4px 34px; }
.ss-num { display: inline-flex; align-items: center; gap: 8px; }
.ss-num .input { margin: 0; }
.ss-num i { font-style: normal; font-size: 13px; color: var(--text-dim); }
.ss-sub { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 13.5px; cursor: pointer; }
.ss-sub input { margin-top: 3px; }
.ss-say { font-size: 13.5px; color: var(--text-dim); margin: 14px 0 0; max-width: 66ch; }
.ss-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ss-fd { display: grid; gap: 4px; }
.ss-logins { display: grid; gap: 8px; margin-top: 14px; justify-items: start; }
.ss-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto; gap: 8px; align-items: center; width: 100%; }
.ss-login .ss-x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.ss-login .ss-x:hover { background: var(--glass-bg); color: var(--text); }
.ss-sent { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--success, var(--gold-text)); white-space: nowrap; }
@media (max-width: 600px) { .ss-login { grid-template-columns: minmax(0, 1fr) auto; } .ss-login select { grid-column: 1; } }
.ss-fd > span { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.ss-fd .input { margin: 0; width: 100%; min-width: 0; }
.ss-bring { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ss-tile { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text); text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.ss-tile:hover { box-shadow: 0 12px 26px -18px rgba(60, 40, 20, 0.5); transform: translateY(-2px); }
.ss-tile .ic { width: 22px; height: 22px; color: var(--gold-text); }
.ss-tile b { font-family: var(--font-serif); font-weight: 400; font-size: 20px; }
.ss-tile span { font-size: 13px; color: var(--text-dim); }
.ss-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.ss-back { font: inherit; font-size: 14px; font-weight: 600; color: var(--text-dim); background: none; border: 0; cursor: pointer; }
.ss-back:hover { color: var(--text); }
.su-kind { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, #3a2b1f, #6d5131); color: #fffaf1; }
.su-kind b { font-family: var(--font-serif); font-weight: 400; font-size: 21px; display: block; }
.su-kind span { font-size: 13px; opacity: 0.88; }
.su-kind a { color: #fffaf1; text-decoration: none; font-weight: 600; font-size: 13px; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); white-space: nowrap; }
.su-kind a:hover { background: rgba(255, 255, 255, 0.2); }
@media (max-width: 860px) {
  .ss-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ss-rail { position: static; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .ss-r { flex: none; grid-template-columns: 22px auto; white-space: nowrap; padding: 7px 9px; }
  .ss-r small { display: none; }
  .ss-r:not(.on) span { display: none; }
  .ss-r:not(.on) { grid-template-columns: 22px; }
  .ss-kinds { grid-template-columns: minmax(0, 1fr); }
  .ss-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-fd { grid-column: span 2 !important; }
}
.ss-also { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.ss-also > span { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-right: 4px; }
.ss-also .ss-chip { display: inline-flex; align-items: center; gap: 7px; }
.ss-also .ss-chip input { margin: 0; }
.ss-also .ss-chip.on { background: color-mix(in srgb, var(--gold-bright) 12%, var(--glass-bg)); color: var(--text); border-color: var(--brass-fill, var(--gold-bright)); }
.ss-anss .ss-sub { margin-top: 0; }
/* A performer line's row in the package (M48, performers look B). */
.pk-people { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 2px 2px 10px 14px; border-bottom: 1px solid rgba(92, 56, 38, 0.08); }
.pk-people-l { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin-right: 2px; }
.pk-people-e { font-size: 12.5px; color: var(--text-dim); }
.pk-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 13px; }
.pk-person a { color: var(--text); text-decoration: none; font-weight: 600; }
.pk-person small { font-size: 11.5px; color: var(--text-dim); }
.pk-person-x { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--text-dim); cursor: pointer; padding: 0; }
.pk-person-x:hover { background: color-mix(in srgb, var(--danger, #a3543f) 12%, transparent); color: var(--danger, #a3543f); }
.pk-person-x .icon-svg, .pk-person-x svg { width: 12px; height: 12px; }
.ss-norm { margin: -8px 0 16px; font-size: 13px; color: var(--gold-text); font-weight: 600; }
.su-kit { font: inherit; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--gold-text); font-weight: 600; cursor: pointer; text-align: left; }
.su-kit:hover { color: var(--text); }
.su-kit .ic { width: 16px; height: 16px; }

/* ---- The setup page, the owner's journey look A: five stages of boxes, each
   with a bar and words; the whole hall as a ring. ---- */
.su-page { --su-track: color-mix(in srgb, var(--glass-border) 80%, transparent); }
.su-big { display: flex; align-items: center; gap: 18px; margin-top: 14px; color: var(--text); }
.su-big b { font-family: var(--font-serif); font-weight: 400; font-size: 26px; display: block; }
.su-big span { font-size: 13px; color: var(--text-dim); }
.su-mile { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; background: color-mix(in srgb, var(--success, #4f7a5a) 12%, transparent); color: var(--success, #4f7a5a); }
.su-mile .ic { width: 18px; height: 18px; }
.su-mile.is-not { background: color-mix(in srgb, var(--gold-bright) 10%, var(--glass-bg)); color: var(--gold-text); }
.su-stage { margin-top: 22px; }
.su-stage-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.su-stage-h b { font-family: var(--font-serif); font-weight: 400; font-size: 21px; }
.su-stage-h span { font-size: 12.5px; color: var(--text-dim); }
.su-page .su-grid { margin-top: 0; }
.su-page .su-card { position: relative; }
.su-cover { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.su-card > :not(.su-cover) { position: relative; z-index: 1; pointer-events: none; }
.su-card > .su-ways3, .su-card > .su-skip, .su-card > .su-kit { pointer-events: auto; }
.su-cnt { font-size: 12px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.su-cnt.ok { color: var(--success, #4f7a5a); }
.su-pb { display: block; height: 6px; border-radius: 4px; background: var(--su-track); overflow: hidden; }
.su-pb i { display: block; height: 100%; border-radius: inherit; background: var(--brass-fill, var(--gold-bright)); transition: width 0.5s ease; }
.su-pb.ok i { background: var(--success, #4f7a5a); }
.su-ways3 { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.su-ways3 a, .su-forme { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold-text); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.su-ways3 a:hover, .su-forme:hover { color: var(--text); }
.su-ways3 .ic { width: 14px; height: 14px; }
.su-skip { font: inherit; font-size: 12px; color: var(--text-dim); background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; }
.su-skip:hover { color: var(--text); text-decoration: underline; }
.dash-setup-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--gold-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.dash-setup-chip:hover { background: color-mix(in srgb, var(--gold-bright) 8%, var(--glass-bg)); }

.bw-ready { display: block; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--gold-bright) 10%, var(--glass-bg)); color: var(--text); font-size: 13.5px; text-decoration: none; }
.bw-ready b { color: var(--gold-text); }
.bw-ready:hover { background: color-mix(in srgb, var(--gold-bright) 16%, var(--glass-bg)); }
.as-readnote { margin-top: 6px; font-size: 12.5px; color: var(--text-dim); display: flex; gap: 6px; align-items: flex-start; }
.as-readnote svg { flex-shrink: 0; margin-top: 2px; color: var(--gold-text); }
.as-chat.as-drop { background: color-mix(in srgb, var(--gold-bright) 8%, var(--glass-bg)); box-shadow: 0 0 0 2px var(--gold-bright) inset; }

/* ---- Family seating on the floor plan (0307) ---- */
.fs-card .fs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fs-line { margin: 4px 0 0; font-size: 13.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fs-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.fs-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.fs-key span { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: -6px; border: 1.5px solid var(--glass-border); }
.fs-key .is-some { background: color-mix(in srgb, var(--gold-bright) 30%, var(--glass-bg)); border-color: var(--gold-bright); }
.fs-key .is-full { background: color-mix(in srgb, var(--success) 30%, var(--glass-bg)); border-color: var(--success); }
.fs-key .is-over { background: color-mix(in srgb, var(--danger) 28%, var(--glass-bg)); border-color: var(--danger); }
.fs-tip { margin: 6px 0 0; font-size: 12.5px; }
.fs-rooms { display: grid; gap: 14px; margin-top: 10px; }
.fs-room { border: 1px solid var(--glass-border); border-radius: 14px; padding: 8px 10px 10px; background: var(--bg-deep); }
.fs-rh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 4px; }
.fs-side { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gold-bright) 14%, transparent); color: var(--gold-text); }
.fs-plan { width: 100%; height: auto; max-height: 520px; display: block; touch-action: manipulation; }
.fs-shell { fill: var(--glass-bg); stroke: var(--glass-border); stroke-width: 0.25; }
.fs-p { fill: color-mix(in srgb, var(--text-dim) 12%, transparent); stroke: none; }
.fs-p-mechitza { fill: var(--text-dim); opacity: .55; }
.fs-pl { fill: var(--text-dim); text-anchor: middle; font-family: inherit; }
.fs-t { cursor: pointer; outline: none; }
.fs-t circle, .fs-t ellipse, .fs-t rect { fill: var(--glass-bg); stroke: var(--glass-border); stroke-width: 0.22; transition: fill .15s ease; }
.fs-t.is-some circle, .fs-t.is-some ellipse, .fs-t.is-some rect { fill: color-mix(in srgb, var(--gold-bright) 30%, var(--glass-bg)); stroke: var(--gold-bright); }
.fs-t.is-full circle, .fs-t.is-full ellipse, .fs-t.is-full rect { fill: color-mix(in srgb, var(--success) 30%, var(--glass-bg)); stroke: var(--success); }
.fs-t.is-over circle, .fs-t.is-over ellipse, .fs-t.is-over rect { fill: color-mix(in srgb, var(--danger) 28%, var(--glass-bg)); stroke: var(--danger); }
.fs-t:hover circle, .fs-t:hover ellipse, .fs-t:hover rect { filter: brightness(0.96); }
.fs-t.is-sel circle, .fs-t.is-sel ellipse, .fs-t.is-sel rect, .fs-t:focus-visible circle, .fs-t:focus-visible ellipse, .fs-t:focus-visible rect { stroke: var(--text); stroke-width: 0.4; }
.fs-tl { text-anchor: middle; font-weight: 700; fill: var(--text); font-family: inherit; pointer-events: none; }
.fs-tn { text-anchor: middle; fill: var(--text-dim); font-family: inherit; font-variant-numeric: tabular-nums; pointer-events: none; }
.fs-pn { margin-top: 12px; border: 1px solid var(--glass-border); border-radius: 14px; padding: 10px 12px; background: var(--bg-deep); }
.fs-pnh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fs-pnh b { font-size: 15px; }
.fs-cnt { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fs-cnt.is-over { color: var(--danger); font-weight: 700; } .fs-cnt.is-full { color: var(--success); font-weight: 600; }
.fs-close { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--text-dim); cursor: pointer; }
.fs-seg { display: inline-flex; border: 1px solid var(--glass-border); border-radius: 999px; overflow: hidden; }
.fs-seg button { border: 0; background: none; font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer; color: var(--text-dim); }
.fs-seg button[aria-pressed="true"] { background: var(--gold-bright); color: #fff; }
.fs-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 180px) 28px; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--glass-border); font-size: 14px; }
.fs-gn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-gn em { color: var(--text-dim); font-style: normal; font-size: 12.5px; }
.fs-g select { padding: 4px 8px; font-size: 13px; }
.fs-x { border: 0; background: none; font-size: 18px; color: var(--text-dim); cursor: pointer; border-radius: 6px; }
.fs-x:hover { background: var(--btn-ghost-hover-bg); color: var(--danger); }
.fs-addf { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: 6px; margin-top: 8px; }
.fs-uns { margin-top: 14px; }
.fs-uns h4 { margin: 0 0 4px; font-size: 14px; }
@media (max-width: 600px) { .fs-g { grid-template-columns: minmax(0, 1fr) 28px; } .fs-g select { grid-column: 1; grid-row: 2; } .fs-g .fs-x, .fs-g .fs-x-sp { grid-row: 1; grid-column: 2; } }
.ev-seat-line { margin: 4px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.fs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fs-rooms { grid-template-columns: minmax(0, 1fr); } .fs-room, .fs-card { min-width: 0; }

/* ---- The assistant on every page (M48, look A) ---- */
.nav-ask { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin: 0 6px 0 2px; border: 0; border-radius: 999px; background: var(--gold-bright); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; vertical-align: middle; box-shadow: var(--btn-gold-shadow); }
.nav-ask svg { width: 15px; height: 15px; }
.nav-ask:hover { box-shadow: var(--btn-gold-hover-shadow); transform: translateY(-1px); }
.nav-ask[aria-expanded="true"] { background: color-mix(in srgb, var(--gold-bright) 80%, #000); }
@media (max-width: 600px) { .nav-ask span { display: none; } .nav-ask { width: 34px; padding: 0; justify-content: center; } }
.ask-panel { position: fixed; top: var(--nav-h); right: 0; bottom: 0; width: min(410px, 100vw); z-index: 1450; display: flex; flex-direction: column; background: var(--bg-deep); border-left: 1px solid var(--glass-border); box-shadow: -14px 0 34px rgba(0, 0, 0, 0.14); animation: askIn .22s ease; }
.ask-panel[hidden] { display: none; }
@keyframes askIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ask-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--glass-border); }
.ask-h > div { flex: 1; min-width: 0; }
.ask-h b { font-family: var(--font-serif, inherit); font-size: 18px; }
.ask-on { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-full { font-size: 12.5px; color: var(--gold-text); text-decoration: none; white-space: nowrap; }
.ask-x { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--text-dim); cursor: pointer; border-radius: 8px; width: 32px; height: 32px; }
.ask-x:hover { background: var(--btn-ghost-hover-bg); }
.ask-b { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px 12px; }
.ask-b #ai-log { flex: 1; max-height: none !important; min-height: 0 !important; }
.ask-b #ai-form .btn-gold { padding-left: 12px; padding-right: 12px; }
.ask-b > .row:last-child .muted { font-size: 11px !important; }
@media (min-width: 1300px) { body.ask-open #view { padding-right: 410px; } }
@media (max-width: 600px) {
  .ask-panel { top: auto; left: 0; width: auto; height: 88vh; height: 88dvh; border-left: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.22); animation-name: askUp; padding-bottom: env(safe-area-inset-bottom, 0px); }
  @keyframes askUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.ask-veil { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 1600; background: rgba(30, 22, 16, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ask-veil[hidden] { display: none; }
.ask-veil-c { background: var(--bg-deep); border-radius: 20px; padding: 26px 30px; max-width: 420px; text-align: center; display: grid; gap: 6px; justify-items: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); pointer-events: none; }
.ask-veil-c svg { width: 34px; height: 34px; color: var(--gold-text); }
.ask-veil-c b { font-size: 22px; }
.ask-veil-c span { font-size: 13.5px; color: var(--text-dim); }

/* ---- Find more: the directory (M48 sharing phase 1, look A) ---- */
.dir-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--glass-border); margin: 0 0 18px; }
.dir-tabs a { padding: 8px 0 10px; color: var(--text-dim); text-decoration: none; font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dir-tabs a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--gold-text); }
.dir-tabs a:hover { color: var(--text); }
.dir-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.dir-q { flex: 1 1 260px; max-width: 520px; margin: 0; }
.dir-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dir-f { border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
.dir-f:hover { background: color-mix(in srgb, var(--gold-bright) 8%, var(--input-bg)); }
.dir-f.on { background: var(--text); color: var(--bg-deep); border-color: var(--text); }
.dir-f svg { width: 13px; height: 13px; }
.dir-sec { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-text); margin: 18px 0 10px; }
.dir-mine { display: flex; gap: 8px; flex-wrap: wrap; }
.dir-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 5px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--input-bg); color: var(--text); text-decoration: none; font-size: 13px; }
.dir-chip:hover { background: color-mix(in srgb, var(--gold-bright) 8%, var(--input-bg)); }
.dir-av { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-serif); font-size: 18px; background-size: cover; background-position: center; }
.dir-av.sm { width: 24px; height: 24px; font-size: 11px; font-family: inherit; font-weight: 700; }
.dir-av.lg { width: 52px; height: 52px; font-size: 21px; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.dir-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--input-bg); cursor: pointer; transition: box-shadow .16s ease, transform .16s ease; min-width: 0; }
.dir-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-1px); }
.dir-card:focus-visible { box-shadow: var(--card-hover-shadow); outline: 2px solid var(--gold-text); outline-offset: 2px; }
.dir-card-top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.dir-card-n { display: grid; min-width: 0; }
.dir-card-n b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-card-n small { color: var(--text-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.dir-badge { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.dir-badge.on { background: color-mix(in srgb, var(--tone-done) 14%, transparent); color: var(--tone-done); }
.dir-badge.name { background: color-mix(in srgb, var(--text-dim) 14%, transparent); color: var(--text-dim); }
.dir-badge.rec { background: color-mix(in srgb, var(--gold-bright) 14%, transparent); color: var(--gold-text); }
.dir-card .dir-act { width: 100%; justify-content: center; margin-top: auto; }
.dir-wait { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); padding: 7px 10px; border: 1px dashed var(--glass-border); border-radius: 8px; margin-top: auto; }
.dir-wait svg { width: 13px; height: 13px; }
.dir-wait.big { font-size: 13.5px; }
.dir-empty { text-align: center; color: var(--text-dim); padding: 40px 16px; }
.dir-empty svg { width: 26px; height: 26px; }
.dir-panel { position: fixed; top: var(--ask-top, var(--nav-h, 62px)); right: 0; bottom: 0; width: min(430px, 100vw); z-index: 1400; overflow-y: auto; padding: 22px; background: var(--bg-deep); border-left: 1px solid var(--glass-border); box-shadow: -14px 0 34px rgba(0, 0, 0, 0.14); display: flex; flex-direction: column; gap: 14px; animation: askIn .22s ease; }
.dir-panel[hidden] { display: none; }
.dir-p-h { display: flex; gap: 14px; align-items: center; }
.dir-p-n { flex: 1; min-width: 0; }
.dir-p-n h2 { margin: 0; font-family: var(--font-serif); font-size: 24px; }
.dir-p-n small { color: var(--text-dim); font-size: 13.5px; }
.dir-p-x { border: 0; background: none; color: var(--text-dim); cursor: pointer; padding: 6px; border-radius: 8px; }
.dir-p-x:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.dir-p-x svg { width: 18px; height: 18px; }
.dir-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dir-photos span { aspect-ratio: 1; max-width: 100%; border-radius: 8px; background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--gold-bright) 10%, transparent); }
.dir-bio { margin: 0; font-size: 14px; line-height: 1.55; }
.dir-facts { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.dir-facts dt { color: var(--text-dim); }
.dir-facts dd { margin: 0; }
.dir-p-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dir-how { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 600px) {
  .dir-panel { top: auto; left: 0; width: 100%; max-height: 82vh; border-left: 0; border-top: 1px solid var(--glass-border); border-radius: 18px 18px 0 0; box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.18); }
  .dir-q { flex-basis: 100%; max-width: none; }
}
/* The vendor's answer page (/contact/<token>). */
.ca-card { text-align: center; display: grid; gap: 12px; justify-items: center; }
.ca-card h1 { font-family: var(--font-serif); font-size: 26px; margin: 0; text-wrap: balance; }
.ca-card p { margin: 0; line-height: 1.6; }
.ca-k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.ca-big { width: 100%; font-size: 16px; padding: 13px; justify-content: center; }
.ca-stop { border: 0; background: none; color: var(--text-dim); font-size: 12.5px; text-decoration: underline; cursor: pointer; font-family: inherit; }
.ca-ic svg { width: 34px; height: 34px; color: var(--gold-text); }
.ca-list { margin-top: 16px; padding: 18px; border: 1px solid var(--glass-border); border-radius: 14px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.ca-list p { margin: 0; }

/* ---- Partner halls (0310) ---- */
.ph-h { font-size: 15px; margin: 0 0 8px; }
.ph-asks { border-color: var(--gold-bright); background: color-mix(in srgb, var(--gold-bright) 5%, transparent); }
.ph-wait { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.ph-wait svg { width: 13px; height: 13px; }

/* ---- The Share dialog (0310, look A) ---- */
.sd { display: grid; gap: 10px; }
.sd-now { margin: 0; font-size: 13px; color: var(--text-dim); }
.sd-k { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-text); margin-top: 4px; }
.sd-circles { display: grid; gap: 8px; }
.sd-c { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--glass-border); border-radius: 12px; cursor: pointer; background: var(--input-bg); }
.sd-c input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sd-c b { display: block; font-size: 14px; font-weight: 600; }
.sd-c small { color: var(--text-dim); font-size: 12.5px; }
.sd-c .sd-dot { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--text-dim); position: relative; }
.sd-c.on { background: color-mix(in srgb, var(--gold-bright) 9%, var(--input-bg)); border-color: color-mix(in srgb, var(--gold-text) 55%, transparent); }
.sd-c.on .sd-dot { border-color: var(--gold-text); }
.sd-c.on .sd-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold-text); }
.sd-c:has(input:focus-visible) { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.sd-tog { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 2px; border-top: 1px solid var(--glass-border); }
.sd-tog b { display: block; font-size: 14px; font-weight: 600; }
.sd-tog small { color: var(--text-dim); font-size: 12.5px; }
.sd-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 6px 12px; font-size: 13.5px; }
.sd-pick label { display: flex; gap: 8px; align-items: center; }
.sd-pick small { color: var(--text-dim); }
.sd-prev { padding: 12px 14px; border: 1px dashed var(--glass-border); border-radius: 12px; background: color-mix(in srgb, var(--gold-bright) 5%, transparent); font-size: 13px; line-height: 1.55; }
.sd-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.sd-stop { color: var(--danger); }

/* ---- Shared by halls (0310) ---- */
.sh-chips { margin: 4px 0 18px; }
.sh-chips a.dir-f { text-decoration: none; }
.sh-n { font-size: 11px; opacity: .7; }
.sh-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--input-bg); min-width: 0; }
.sh-t { font-size: 15.5px; }
.sh-by { font-size: 13px; color: var(--text-dim); }
.sh-w { font-size: 13px; color: var(--text); }
.sh-card .btn { margin-top: auto; justify-content: center; }
.sh-take { margin-top: 8px !important; }
.sh-who { display: grid; gap: 4px; font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.sh-who select { margin: 0; }
.sh-nm { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.sh-stop { color: var(--danger); }

/* ---- Print center, look A (M48 · 0312) ----
   By the simcha: the coming simchas on the left, the picked one's papers as
   little pages in three groups, the night's sheets checked, one bar to print
   them together. The stack page prints the checked papers in one run. */
.prc-sec { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); margin: 18px 0 9px; }
.prc-wkrow { display: flex; gap: 10px; flex-wrap: wrap; }
.prc-wk { display: flex; gap: 12px; align-items: center; padding: 9px 16px 9px 10px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--input-bg); color: var(--text); text-decoration: none; transition: box-shadow .16s ease, transform .16s ease; }
.prc-wk:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-1px); }
.prc-wk .prc-sheet { width: 30px; padding: 4px; gap: 2px; border-radius: 3px; box-shadow: none; }
.prc-wk .prc-hd { height: 3px; } .prc-wk .prc-ln { height: 2px; } .prc-wk .prc-tb b { height: 4px; }
.prc-wk span:last-child { display: grid; }
.prc-wk b { font-size: 13.5px; font-weight: 600; }
.prc-wk small { font-size: 12px; color: var(--text-dim); }
.prc-cols { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
.prc-left { min-width: 0; }
.prc-list { display: grid; gap: 8px; }
.prc-si { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--input-bg); color: var(--text); font: inherit; cursor: pointer; transition: box-shadow .16s ease, background .16s ease; }
.prc-si:hover { box-shadow: var(--card-hover-shadow); }
.prc-si.on { background: color-mix(in srgb, var(--gold-bright) 13%, var(--input-bg)); }
.prc-si:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.prc-leaf { width: 46px; border-radius: 10px; border: 1px solid var(--glass-border); text-align: center; padding: 4px 0; line-height: 1.1; background: color-mix(in srgb, var(--text) 3%, transparent); }
.prc-leaf b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 20px; }
.prc-leaf span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.prc-si-n { display: grid; min-width: 0; }
.prc-si-n b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prc-si-n small { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prc-cnt { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; background: color-mix(in srgb, var(--tone-wait) 18%, transparent); color: var(--tone-wait); }
.prc-cnt.ok { background: color-mix(in srgb, var(--tone-done) 16%, transparent); color: var(--tone-done); }
.prc-none { padding: 18px 4px; }
.prc-other { display: grid; gap: 5px; margin-top: 14px; font-size: 12.5px; color: var(--text-dim); }
.prc-right { min-width: 0; }
.prc-pick { display: grid; place-items: center; text-align: center; gap: 12px; min-height: 300px; padding: 30px; border: 1px dashed var(--glass-border); border-radius: 16px; color: var(--text-dim); }
.prc-pick .prc-sheet { width: 64px; }
.prc-pick p { margin: 0; line-height: 1.6; }
.prc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.prc-head h2 { margin: 2px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; }
.prc-head p { margin: 2px 0 0; color: var(--text-dim); font-size: 13.5px; }
.prc-eye { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.prc-grp { margin-bottom: 4px; }
.prc-papers { display: flex; gap: 16px; flex-wrap: wrap; }
.prc-pp { width: 124px; display: grid; gap: 5px; justify-items: start; align-content: start; }
.prc-pp > b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.prc-pp > small { font-size: 11.5px; color: var(--tone-done); }
.prc-pp > small.no { color: var(--tone-wait); }
.prc-tog { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 7px; }
.prc-tog:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.prc-tog:hover .prc-sheet { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(60, 40, 20, .14); }
.prc-sheet { position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 100%; aspect-ratio: 8.5 / 11; padding: 10px 9px; background: #fff; border: 1px solid #e3d8c6; border-radius: 6px; box-shadow: 0 3px 8px rgba(60, 40, 20, .08); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.prc-pp.on .prc-sheet { background: #fffaf0; }
.prc-sheet i { display: block; font-style: normal; }
.prc-hd { height: 7px; width: 62%; border-radius: 2px; background: #b08a4a; opacity: .85; }
.prc-ln { height: 3px; border-radius: 2px; background: #e9e0d1; }
.prc-ln.s { width: 70%; } .prc-ln.m { width: 85%; }
.prc-sheet .prc-tb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 3px; }
.prc-tb b { height: 9px; border-radius: 2px; background: #f1e9dc; }
.prc-sheet .prc-plan { position: relative; flex: 1; margin-top: 3px; border: 1px dashed #dccbad; border-radius: 4px; }
.prc-plan b { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #c9ad7c; }
.prc-ck { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #cdb894; background: #fff; }
.prc-ck.on { background: #8f683a; border-color: #8f683a; }
.prc-ck.on::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.prc-pp-acts { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.prc-copies { display: inline-flex; align-items: center; gap: 2px; color: var(--text-dim); }
.prc-copies select { font: inherit; font-size: 12px; padding: 1px 2px; border: 1px solid var(--glass-border); border-radius: 6px; background: var(--input-bg); color: var(--text); }
.prc-open { color: var(--text-dim); font-size: 12px; }
.prc-stack { position: sticky; bottom: 12px; z-index: 5; margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px 11px 18px; border-radius: 14px; background: #2a211b; color: #fbf6ee; font-size: 13.5px; box-shadow: 0 10px 28px rgba(30, 22, 16, .22); }
.prc-stack-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.prc-stack .btn-ghost { color: #fbf6ee; border-color: rgba(251, 246, 238, .3); }
.prc-stack .btn-gold[disabled] { opacity: .5; cursor: default; }
.prc-warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--tone-wait) 13%, transparent); font-size: 13.5px; }
.prc-warn > svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--tone-wait); }
.prc-warn p { margin: 0; }
.prc-warn p + p { margin-top: 4px; }
@media (max-width: 860px) {
  .prc-cols { grid-template-columns: minmax(0, 1fr); }
  .prc-pp { width: calc(50% - 8px); max-width: 150px; }
  .prc-stack { bottom: 8px; }
}

/* The stack: the checked papers one after another; each a page on paper. */
.pst-bar { position: sticky; top: var(--nav-h, 62px); z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px max(16px, calc((100vw - 900px) / 2)); background: var(--bg-deep); border-bottom: 1px solid var(--glass-border); }
.pst-what { flex: 1; min-width: 0; display: grid; }
.pst-what b { font-size: 15px; }
.pst-what small { color: var(--text-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pst-paper { max-width: 900px; margin: 22px auto; padding: 0 16px; }
.pst-paper + .pst-paper { border-top: 1px dashed var(--glass-border); padding-top: 22px; }
.pst-tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; }
.pst-paper .page-hero-actions, .pst-paper .no-print { display: none !important; }
.pst-paper > .container, .pst-paper .app-main { max-width: none; padding-left: 0; padding-right: 0; }
.pst-simple { padding: 28px 30px; background: #fff; color: #1a1a1a; border: 1px solid #e3d8c6; border-radius: 10px; font-family: Georgia, "Times New Roman", serif; }
.pst-hall { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #8a7355; margin-bottom: 6px; }
.pst-simple h1, .pst-rcpt h2 { margin: 0 0 2px; font-size: 22px; color: #1a1a1a; -webkit-text-fill-color: currentColor; background: none; }
.pst-sub { color: #666; margin-bottom: 14px; font-size: 13.5px; }
.pst-rows { width: 100%; border-collapse: collapse; }
.pst-rows th, .pst-rows td { padding: 7px 10px; border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; font-size: 14px; }
.pst-rows th { white-space: nowrap; width: 1%; }
.pst-rows td span { color: #777; }
.pst-receipts { display: grid; gap: 0; background: #fff; color: #111; border: 1px solid #e3d8c6; border-radius: 10px; padding: 8px 28px 18px; font-family: Arial, sans-serif; }
.pst-rcpt { padding: 18px 0; border-bottom: 1.5px dashed #bbb; break-inside: avoid; }
.pst-rcpt img { max-height: 40px; margin-bottom: 6px; }
.pst-rcpt h2 { margin-top: 12px; font-size: 17px; }
.pst-rcpt dl { display: grid; grid-template-columns: 90px 1fr; gap: 3px 10px; margin: 8px 0; font-size: 13.5px; }
.pst-rcpt dt { color: #666; } .pst-rcpt dd { margin: 0; }
.pst-amt { font-size: 21px; font-weight: 700; }
.pst-bal { margin: 14px 0 0; font-size: 13.5px; color: #333; }
@media print {
  .pst-paper { margin: 0; padding: 0; max-width: none; break-after: page; page-break-after: always; }
  .pst-paper:last-child { break-after: auto; page-break-after: auto; }
  .pst-simple, .pst-receipts { border: 0 !important; padding: 0 !important; }
  .pst-tag { display: none !important; }
}

/* The family's contract in the portal (0313): what's included, the payments. */
.pc-ct-k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin: 14px 0 6px; }
.pc-ct-items { display: grid; margin: 0 0 6px; font-size: 14px; }
.pc-ct-part { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 10px 0 2px; }
.pc-ct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); font-variant-numeric: tabular-nums; }
.pc-ct-row > span:first-child { min-width: 0; }
.pc-ct-row > span:last-child { text-align: right; min-width: 72px; }
.pc-ct-sum { font-weight: 700; border-bottom: 0; border-top: 1.5px solid var(--text); margin-top: 4px; }
.pc-ct-ok { color: var(--tone-done); font-weight: 600; }
.pc-ct-nx { color: var(--gold-text); font-weight: 700; }

/* ---- Contract & statement, look A (M48 · 0313) ----
   The paper as it prints on the left; a rail on the right that says where it
   stands and holds the buttons; a Contract | Statement switch on top of it. */
.pp-wrap { max-width: 1180px; }
.pp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.pp-paper { min-width: 0; }
.pp-paper .print-doc { margin-top: 0; }
.pp-rail { position: sticky; top: calc(var(--nav-h, 62px) + 14px); display: grid; gap: 12px; min-width: 0; }
.pp-seg { display: flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--gold-bright) 12%, var(--input-bg)); }
.pp-seg a { flex: 1; text-align: center; padding: 7px 10px; border-radius: 999px; font-size: 13.5px; color: var(--text-dim); text-decoration: none; transition: background .15s ease; }
.pp-seg a:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.pp-seg a.on { background: var(--bg-deep); color: var(--text); font-weight: 600; box-shadow: 0 1px 4px rgba(60, 40, 20, .12); }
.pp-rc { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--input-bg); }
.pp-big { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; text-wrap: balance; }
.pp-big.ok { color: var(--tone-done); }
.pp-sub { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.pp-steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; }
.pp-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; }
.pp-steps li i { width: 12px; height: 12px; margin-left: 3px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text-dim) 45%, transparent); background: var(--bg-deep); }
.pp-steps li.done i { background: var(--tone-done); border-color: var(--tone-done); }
.pp-steps li.now i { background: var(--gold-text); border-color: var(--gold-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-bright) 22%, transparent); }
.pp-steps li.todo { color: var(--text-dim); }
.pp-steps small { font-size: 12px; color: var(--text-dim); text-align: right; }
.pp-note { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tone-wait) 14%, transparent); font-size: 12.5px; line-height: 1.5; }
.pp-note b { display: block; font-size: 13px; margin-bottom: 2px; }
.pp-acts { display: grid; gap: 7px; }
.pp-act { width: 100%; justify-content: center; }
.pp-earlier { display: grid; gap: 2px; font-size: 12.5px; color: var(--text-dim); border-top: 1px solid var(--glass-border); padding-top: 8px; }
.pp-earlier b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.pp-money { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pp-money dt { color: var(--text-dim); } .pp-money dd { margin: 0; text-align: right; font-weight: 600; }
.pp-money dd.b { color: var(--gold-text); }
.print-doc.doc table.doc-items tr.doc-part td { background: none !important; padding-top: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--doc-acc, #8a6631); }
.print-doc.doc table.doc-pays td { font-variant-numeric: tabular-nums; }
.print-doc.doc .doc-ok { color: #4f7a5a; font-weight: 600; }
.print-doc.doc .doc-nx { color: var(--doc-acc, #8a6631); font-weight: 700; }
.print-doc.doc .doc-payqr { display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 12px 14px; border: 1px dashed #d8c7a6; border-radius: 10px; font-size: 13px; break-inside: avoid; }
.print-doc.doc .doc-payqr svg { width: 84px; height: 84px; flex: none; }
.print-doc.doc .doc-payqr > div { display: grid; gap: 2px; min-width: 0; }
.print-doc.doc .doc-payqr b { font-size: 14px; }
.print-doc.doc .doc-payurl { font-size: 11.5px; word-break: break-all; color: #6b5d51; }
.sg-form { display: grid; gap: 10px; }
.sg-pad { width: 100%; max-width: 100%; aspect-ratio: 7 / 2; background: #fff; border: 1px solid var(--glass-border); border-radius: 10px; touch-action: none; }
.sg-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-hsig { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-hsig-img img { display: block; height: 40px; background: #fff; border-radius: 6px; padding: 2px 6px; }
@media (max-width: 900px) {
  .pp-cols { grid-template-columns: minmax(0, 1fr); }
  .pp-rail { position: static; order: -1; }
}
@media print {
  .pp-cols { display: block; }
  .pp-wrap { max-width: none; }
}

/* ---- Live mode, look A (M48 · 0314) ----
   Now and next on a dark card, one big Done; the rest in cards below; a bar at
   the bottom to jump. Two columns on a tablet. */
.lv { max-width: 1100px; margin: 0 auto; padding: 0 0 84px; }
.lv-head { position: sticky; top: var(--nav-h, 62px); z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-deep); border-bottom: 1px solid var(--glass-border); }
.lv-head > div:first-child { display: grid; min-width: 0; }
.lv-head b { font-family: var(--font-serif); font-weight: 400; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-sync { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.lv-sync.on { color: var(--tone-done); }
.lv-sync.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone-done); }
.lv-sync.off { color: var(--tone-wait); }
.lv-queue { font-size: 12px; font-weight: 700; color: var(--tone-wait); }
.lv-head-r { display: flex; gap: 10px; align-items: center; flex: none; }
.lv-clock { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
.lv-exit { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--glass-border); text-decoration: none; color: var(--gold-text); }
.lv-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; padding: 14px 16px; align-items: start; }
.lv-col { display: grid; gap: 12px; min-width: 0; }
.lv-now { background: #2a211b; color: #fbf6ee; border-radius: 20px; padding: 18px 20px; display: grid; gap: 8px; scroll-margin-top: 140px; }
.lv-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #d9bf8c; font-weight: 700; }
.lv-t { font-family: var(--font-serif); font-size: 32px; line-height: 1.1; text-wrap: balance; }
.lv-m { font-size: 13.5px; color: #d7cbbd; }
.lv-nx { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 9px; font-size: 14px; }
.lv-go { margin-top: 4px; width: 100%; min-height: 54px; border: 0; border-radius: 15px; background: #c9a35d; color: #2a211b; font: 700 16px var(--font-ui); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.lv-go:hover { box-shadow: 0 6px 18px rgba(201, 163, 93, .35); }
.lv-go:active { transform: scale(.985); }
.lv-go:focus-visible { outline: 3px solid #fbf6ee; outline-offset: 2px; }
.lv-undo { justify-self: center; border: 0; background: none; color: #d7cbbd; font: 600 12.5px var(--font-ui); cursor: pointer; padding: 4px 8px; text-decoration: underline; text-underline-offset: 3px; }
.lv-sub { font-size: 12.5px; color: inherit; opacity: .85; }
.lv-money { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--tone-wait) 16%, var(--input-bg)); font-size: 13.5px; }
.lv-money b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 24px; color: var(--tone-wait); }
.lv-money small { display: block; font-size: 12px; color: var(--text-dim); }
.lv-card { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--input-bg); scroll-margin-top: 140px; }
.lv-card h5 { margin: 0 0 4px; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.lv-card h5 span { letter-spacing: 0; text-transform: none; color: var(--text-dim); font-weight: 600; }
.lv-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); font-size: 14.5px; }
.lv-card h5 + .lv-row { border-top: 0; }
.lv-tm { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-dim); }
.lv-nm { min-width: 0; display: grid; }
.lv-nm small { font-size: 12px; color: var(--text-dim); }
.lv-nm small.late, .lv-row small.late { color: var(--tone-wait); font-weight: 600; }
.lv-row small.ok { color: var(--tone-done); font-weight: 600; font-size: 12.5px; }
.lv-row.done .lv-nm { color: var(--text-dim); }
.lv-row.now { background: color-mix(in srgb, var(--gold-bright) 13%, transparent); margin: 0 -16px; padding: 10px 16px; }
.lv-row.now .lv-nm { font-weight: 700; }
.lv-note { font-size: 13.5px; }
.lv-acts { display: inline-flex; gap: 6px; align-items: center; }
.lv-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--bg-deep); color: var(--text); font: 700 12.5px var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap; }
.lv-pill svg { width: 14px; height: 14px; }
.lv-pill:hover { background: color-mix(in srgb, var(--gold-bright) 10%, var(--bg-deep)); }
.lv-pill.on { background: var(--tone-done); border-color: var(--tone-done); color: #fff; }
.lv-pill.warn { background: color-mix(in srgb, var(--tone-wait) 18%, var(--bg-deep)); color: var(--tone-wait); }
.lv-pill.gold { background: var(--gold-text); border-color: var(--gold-text); color: #fff; }
.lv-pill:focus-visible, .lv-x:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.lv-x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--text-dim); cursor: pointer; }
.lv-x:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.lv-x svg { width: 14px; height: 14px; }
.lv-count { display: flex; gap: 8px; align-items: center; }
.lv-count .input { max-width: 130px; margin: 0; }
.lv-noteform { display: flex; gap: 8px; margin-top: 6px; }
.lv-noteform .input { flex: 1; min-width: 0; margin: 0; }
.lv-wrap .lv-row { grid-template-columns: minmax(0, 1fr) 52px auto; }
.lv-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--bg-deep); border-top: 1px solid var(--glass-border); }
.lv-bar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; font-size: 11.5px; color: var(--text-dim); text-decoration: none; border-radius: 10px; }
.lv-bar a:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.lv-bar svg { width: 20px; height: 20px; }
.td-golive { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-bright) 22%, transparent); }
@media (max-width: 860px) {
  .lv-body { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .lv-t { font-size: 28px; }
}
@media (min-width: 861px) { .lv-bar { display: none; } .lv { padding-bottom: 24px; } }

/* ---- Search, look A (M48) ----
   One box: results in groups, simchas and people first, pages last; a row has
   a date leaf or an icon, a line that says what it is, and its buttons. The
   Search page shows the same groups in full. On a phone the box fills the screen. */
.sr-ov { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; background: rgba(30, 22, 16, .42); }
.sr-box { width: min(660px, 100%); max-height: 78vh; display: flex; flex-direction: column; background: var(--bg-deep); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: 0 24px 60px rgba(30, 22, 16, .3); overflow: hidden; }
.sr-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--glass-border); }
.sr-in > svg { width: 17px; height: 17px; color: var(--text-dim); flex: none; }
.sr-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 16px var(--font-ui); padding: 15px 0; }
.sr-kbd { font: 600 11px var(--font-ui); color: var(--text-dim); border: 1px solid var(--glass-border); border-radius: 6px; padding: 2px 6px; }
.sr-cancel { display: none; border: 0; background: none; color: var(--gold-text); font: 600 14px var(--font-ui); cursor: pointer; }
.sr-list { overflow-y: auto; padding: 4px 8px 8px; }
.sr-grp h6 { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 8px 4px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.sr-more { letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 12px; color: var(--text-dim); text-decoration: none; }
.sr-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 8px; border-radius: 12px; cursor: pointer; transition: background .12s ease; }
.sr-row:hover, .sr-row.on { background: color-mix(in srgb, var(--gold-bright) 12%, transparent); }
.sr-leaf { width: 36px; height: 36px; display: grid; place-items: center; align-content: center; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--input-bg); line-height: 1; }
.sr-leaf b { font-family: var(--font-serif); font-weight: 400; font-size: 15px; }
.sr-leaf small { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.sr-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-family: var(--font-serif); font-size: 16px; }
.sr-ic svg { width: 17px; height: 17px; }
.sr-txt { display: grid; min-width: 0; }
.sr-txt b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-txt small { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-txt em { font-style: normal; font-weight: 600; color: var(--tone-wait); }
.sr-right { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sr-st { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.sr-st.c { background: color-mix(in srgb, var(--tone-done) 16%, transparent); color: var(--tone-done); }
.sr-st.h { background: color-mix(in srgb, var(--tone-wait) 16%, transparent); color: var(--tone-wait); }
.sr-st.p { background: color-mix(in srgb, var(--text-dim) 14%, transparent); color: var(--text-dim); }
.sr-act { font: 600 12px var(--font-ui); border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px 11px; background: var(--bg-deep); color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.sr-act:hover { background: color-mix(in srgb, var(--gold-bright) 12%, var(--bg-deep)); }
.sr-act:focus-visible, .sr-chip:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.sr-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 8px 6px; }
.sr-chip { font: 500 13px var(--font-ui); border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px 12px; background: var(--input-bg); color: var(--text-dim); cursor: pointer; }
.sr-chip:hover { background: color-mix(in srgb, var(--gold-bright) 10%, var(--input-bg)); }
.sr-note { margin: 10px 8px 2px; font-size: 13px; color: var(--text-dim); }
.sr-none { margin: 22px 12px; text-align: center; color: var(--text-dim); font-size: 14px; }
.sr-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--glass-border); font-size: 12px; color: var(--text-dim); }
.sr-all { font-weight: 700; color: var(--gold-text); text-decoration: none; }
.sr-page { max-width: 860px; }
.sr-pform { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.sr-pform .sr-in { flex: 1; min-width: 0; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--input-bg); }
.sr-counts { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 4px; }
.sr-counts > * { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--glass-border); color: var(--text-dim); text-decoration: none; background: var(--input-bg); }
.sr-counts .on { background: var(--text); color: var(--bg-deep); border-color: var(--text); }
.sr-counts a:hover { background: color-mix(in srgb, var(--gold-bright) 10%, var(--input-bg)); }
.sr-res { margin-top: 10px; padding: 4px 8px 8px; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--input-bg); }
.sr-res .sr-grp { scroll-margin-top: 90px; }
@media (max-width: 600px) {
  .sr-ov { padding: 0; background: var(--bg-deep); }
  .sr-box { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .sr-kbd, .sr-foot { display: none; }
  .sr-cancel { display: inline; }
  .sr-in input { padding: 16px 0; }
  .sr-row { grid-template-columns: 36px minmax(0, 1fr); }
  .sr-right { grid-column: 2; justify-content: flex-start; }
  .sr-pform .btn { display: none; }
}

/* ---- Print a week (M48, the owner's look A): the week as a grid ---- */
.wk-page { max-width: 1240px; }
.wk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wk-bar-mid, .wk-bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-from { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wk-from input { width: auto; padding: 6px 8px; }
.wk-seg, .wk-for { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-for { display: flex; margin-bottom: 14px; font-size: 13px; }
.wk-auto { margin-left: auto; font-size: 12.5px; }
.wk-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text); font-size: 13px; text-decoration: none; }
.wk-chip:hover { background: color-mix(in srgb, var(--gold-bright) 10%, var(--input-bg)); }
.wk-chip.on { background: var(--gold-bright); color: #1d1a16; font-weight: 600; }
.wk-sheet { page: wk; background: #fff; color: #1d1a16; font-family: Georgia, "Times New Roman", serif; padding: 28px 30px 20px; border-radius: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
@page wk { size: landscape; margin: 9mm; }
.wk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid #1d1a16; padding-bottom: 8px; margin-bottom: 12px; }
.wk-h1 { margin: 0; font-size: 24px; font-weight: 700; color: #1d1a16; }
.wk-sub { margin: 3px 0 0; font: 13px/1.4 system-ui, -apple-system, sans-serif; color: #4a4339; }
.wk-tag { font: 700 10px system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a6a2c; border: 1px solid #8a6a2c; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.wk-scroll { overflow-x: auto; }
.wk-table { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; font: 11px/1.35 system-ui, -apple-system, sans-serif; border: 1.5px solid #1d1a16; color: #1d1a16; }
.wk-th { text-align: left; vertical-align: top; padding: 6px 7px; border: 1px solid #cfc6b6; background: #f4efe6; font-weight: 700; font-size: 11.5px; }
.wk-thShab { background: #efe4cc; }
.wk-room { text-align: left; vertical-align: top; padding: 7px; border: 1px solid #cfc6b6; background: #faf7f1; font-weight: 700; font-size: 12px; }
.wk-td { vertical-align: top; padding: 6px 7px; border: 1px solid #cfc6b6; height: 64px; }
.wk-thin .wk-td, .wk-thin .wk-room { height: auto; padding-top: 3px; padding-bottom: 3px; color: #6b6257; font-weight: 400; }
.wk-tdShab { background: #fbf6ea; }
.wk-heb { display: block; font-weight: 400; color: #4a4339; }
.wk-note { display: block; font-weight: 700; color: #8a6a2c; font-size: 10px; }
.wk-ev { border-left: 3px solid #8a6a2c; padding-left: 6px; margin-bottom: 6px; break-inside: avoid; }
.wk-ev:last-child { margin-bottom: 0; }
.wk-evHold { border-left-style: dashed; border-left-color: #b9925a; }
.wk-title { font-weight: 700; font-size: 12px; }
.wk-title a:hover { text-decoration: underline; }
.wk-holdTag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .08em; border: 1px solid #8a6a2c; color: #8a6a2c; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.wk-meta { display: block; color: #4a4339; }
.wk-noteL { display: block; font-style: italic; color: #4a4339; }
.wk-holdL { display: block; font-style: italic; color: #8a6a2c; }
.wk-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font: 10px system-ui, sans-serif; color: #6b6257; }
@media print {
  .wk-page { max-width: none; padding: 0; margin: 0; }
  .wk-sheet { box-shadow: none; padding: 0; border-radius: 0; }
  .wk-scroll { overflow: visible; }
  .wk-table { min-width: 0; }
  .wk-td { height: 52px; }
  .wk-title a { text-decoration: none; }
}
@media (max-width: 600px) { .wk-sheet { padding: 16px 14px; } .wk-auto { margin-left: 0; } .wk-h1 { font-size: 20px; } .wk-head { flex-wrap: wrap; } .wk-table { min-width: 720px; } .wk-table thead th:first-child { width: 92px !important; } }
.wk-hint { font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; }
.wk-hint svg { width: 14px; height: 14px; }

/* ---- The Activity log (M48, the owner's look A): a diary ---- */
.act-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.act-search { flex: 1 1 280px; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--input-bg); padding: 0 12px; }
.act-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.act-search input { border: 0; background: transparent; padding: 10px 0; width: 100%; min-width: 0; color: var(--text); font: inherit; outline: none; }
.act-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.act-kinds, .act-people { margin-top: 10px; }
.act-people { margin-top: 6px; }
.act-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.act-chip:hover { background: color-mix(in srgb, var(--gold-bright) 10%, var(--input-bg)); }
.act-chip.on { background: var(--text); color: var(--bg, #fff); border-color: var(--text); }
.act-auto { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.act-auto input { width: 16px; height: 16px; accent-color: var(--gold-bright); }
.act-scope { margin: 6px 0 4px; font-size: 13.5px; color: var(--muted); }
.act-day { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 8px; font-size: 20px; }
.act-day small { font-family: var(--font-body, inherit); font-size: 12.5px; color: var(--muted); font-weight: 400; }
#act-list > .act-day:first-child, #evt-history > .act-day:first-of-type { margin-top: 14px; }
.act-card { border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass-bg, var(--input-bg)); overflow: hidden; }
.act-ln { display: grid; grid-template-columns: 96px 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 14px; border-top: 1px solid var(--glass-border); cursor: pointer; font-size: 14px; }
.act-card > .act-ln:first-child { border-top: 0; }
.act-ln:hover, .act-ln.open { background: color-mix(in srgb, var(--gold-bright) 7%, transparent); }
.act-ln:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.act-t { color: var(--muted); font-size: 12.5px; padding-top: 4px; font-variant-numeric: tabular-nums; }
.act-who { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.act-s { padding-top: 3px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.act-ev { color: var(--gold-text); font-weight: 600; text-decoration: none; }
.act-ev:hover { text-decoration: underline; }
.act-n { display: inline-block; font-size: 11px; font-weight: 700; color: var(--gold-text); background: color-mix(in srgb, var(--gold-bright) 14%, transparent); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.act-mk { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; padding: 2px 7px; margin-top: 3px; white-space: nowrap; }
.act-mk-money { background: #e6efe6; color: #3f6b4a; }
.act-mk-price { background: #f6ecd8; color: #7a5a22; }
.act-mk-date { background: #e7ecf4; color: #3e5a80; }
.act-mk-remove { background: #f6e3dd; color: #9a3b25; }
.act-mk-staff { background: #ece6dc; color: #64564c; }
.act-mk-status { background: #ece7f3; color: #5d4a7a; }
.act-mk-auto { background: #efebe5; color: #8f8074; }
.act-drawer { padding: 0 14px 12px 148px; background: color-mix(in srgb, var(--gold-bright) 7%, transparent); }
.act-ba { border: 1px solid var(--glass-border); border-radius: 12px; background: var(--bg, #fff); overflow: hidden; font-size: 13px; }
.act-ba-r { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 7px 12px; border-top: 1px solid var(--glass-border); }
.act-ba-r:first-child { border-top: 0; }
.act-ba-one { grid-template-columns: 90px minmax(0, 1fr); }
.act-ba-h { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; background: color-mix(in srgb, var(--gold-bright) 6%, transparent); }
.act-ba s { color: #9a3b25; }
.act-ba i { font-style: normal; color: #3f6b4a; font-weight: 600; }
.act-ba-go { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--glass-border); }
.act-empty { margin-top: 18px; padding: 26px; text-align: center; color: var(--muted); border: 1px dashed var(--glass-border); border-radius: 16px; }
.act-empty svg { width: 16px; height: 16px; vertical-align: -3px; }
.act-more { text-align: center; margin: 16px 0 6px; }
@media (max-width: 600px) {
  .act-ln { grid-template-columns: 28px minmax(0, 1fr); }
  .act-t { grid-column: 2; grid-row: 2; padding-top: 0; }
  .act-who { grid-row: 1 / 3; }
  .act-mk { grid-column: 2; justify-self: start; }
  .act-drawer { padding-left: 14px; }
  .act-ba-r { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); }
  .act-auto { margin-left: 0; }
}