/* ==========================================================================
   Events workspace — design system: "Terroir"
   Ported from design/mockups/styles.css for the live Blazor app.
   Editorial wine-country UI. Warm paper, pine green, oxblood, wheat gold.
   Type: Fraunces (display) + Space Grotesk (UI/body).
   Sets the app's base look; the UI component library follows these tokens via
   its own token remap (mud-terroir.css).
   ========================================================================== */

/* ----- Tokens ----------------------------------------------------------- */
:root {
  /* Paper & ink (warm, tinted — never pure black/white) */
  --paper:        oklch(0.968 0.013 92);
  --paper-deep:   oklch(0.942 0.016 88);
  --surface:      oklch(0.992 0.006 96);
  --surface-2:    oklch(0.978 0.010 92);
  --ink:          oklch(0.255 0.020 152);
  --ink-2:        oklch(0.405 0.022 150);
  --ink-3:        oklch(0.560 0.020 140);
  --line:         oklch(0.886 0.013 110);
  --line-soft:    oklch(0.918 0.011 102);

  /* Brand — pine green (the app's primary). Per-tenant accent overrides --pine* in app.css. */
  --pine:         oklch(0.405 0.066 158);
  --pine-deep:    oklch(0.318 0.052 161);
  --pine-deeper:  oklch(0.268 0.044 162);
  --pine-bright:  oklch(0.560 0.108 154);
  --pine-tint:    oklch(0.945 0.030 150);

  /* Accents — wine & wheat */
  --wine:         oklch(0.430 0.140 22);
  --wine-tint:    oklch(0.940 0.040 28);
  --wheat:        oklch(0.800 0.108 79);
  --wheat-deep:   oklch(0.700 0.120 71);
  --wheat-tint:   oklch(0.948 0.045 86);
  --wheat-ink:    oklch(0.430 0.130 62);   /* dark amber — accessible text on wheat-tint bg */
  --sky:          oklch(0.620 0.060 230);
  --sky-tint:     oklch(0.938 0.042 228);  /* contracted chip bg (light) */
  --sky-deep:     oklch(0.345 0.088 232);  /* contracted chip text (light) */
  --rail-plaque-bg:   oklch(0.972 0.012 92 / 0.98);
  --rail-plaque-line: oklch(0.780 0.060 82 / 0.28);
  /* Overlay scrim — warm pine-tinted dark at 45% for modal backdrops. */
  --scrim:        oklch(0.18 0.03 160 / 0.45);

  /* On-color text */
  --on-pine:      oklch(0.962 0.020 96);
  --on-pine-dim:  oklch(0.840 0.030 120);

  /* Radii — crisp, editorial (modest) */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Shadows — low & warm-tinted, never generic gray */
  --sh-1: 0 1px 2px oklch(0.30 0.04 150 / 0.07), 0 1px 1px oklch(0.30 0.04 150 / 0.04);
  --sh-2: 0 2px 4px oklch(0.30 0.04 150 / 0.06), 0 8px 22px oklch(0.30 0.04 150 / 0.08);
  --sh-3: 0 24px 60px oklch(0.28 0.05 150 / 0.16), 0 4px 12px oklch(0.28 0.05 150 / 0.10);
  --sh-rail: 1px 0 0 oklch(0.22 0.04 162 / 0.5);

  /* Fluid type scale */
  --t--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.74rem);
  --t--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.84rem);
  --t-0:  clamp(0.92rem, 0.89rem + 0.16vw, 0.98rem);
  --t-1:  clamp(1.06rem, 1.00rem + 0.30vw, 1.20rem);
  --t-2:  clamp(1.30rem, 1.18rem + 0.55vw, 1.62rem);
  --t-3:  clamp(1.72rem, 1.50rem + 1.00vw, 2.30rem);
  --t-4:  clamp(2.30rem, 1.85rem + 2.10vw, 3.40rem);
  --t-5:  clamp(3.00rem, 2.20rem + 3.60vw, 5.00rem);

  /* Fluid spacing */
  --sp-1: clamp(0.45rem, 0.4rem + 0.2vw, 0.6rem);
  --sp-2: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  --sp-3: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  --sp-4: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem);
  --sp-5: clamp(2.4rem, 1.9rem + 2.2vw, 4rem);

  --rail-w: 264px;
  --bottom-nav-h: 3.5rem;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Semantic helpers (overridden in dark) */
  --pine-solid:  var(--pine);
  --topbar-bg:   color-mix(in oklch, var(--paper) 82%, transparent);
  --weekend-tint: oklch(0.97 0.02 90 / 0.5);
  color-scheme: light;
}

/* ----- Dark theme -------------------------------------------------------
   Warm, pine-tinted charcoal — never flat black. Respects the OS setting by
   default; an explicit [data-theme] choice (toggle) always wins.            */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:       oklch(0.205 0.014 158);
  --paper-deep:  oklch(0.172 0.013 160);
  --surface:     oklch(0.246 0.016 158);
  --surface-2:   oklch(0.290 0.018 156);
  --ink:         oklch(0.930 0.012 96);
  --ink-2:       oklch(0.800 0.016 110);
  --ink-3:       oklch(0.642 0.018 122);
  --line:        oklch(0.340 0.018 156);
  --line-soft:   oklch(0.300 0.016 158);
  --pine:        oklch(0.770 0.110 152);
  --pine-bright: oklch(0.800 0.120 150);
  --pine-tint:   oklch(0.500 0.075 156 / 0.22);
  --pine-solid:  oklch(0.530 0.090 154);
  --wine:        oklch(0.640 0.150 26);
  --wine-tint:   oklch(0.560 0.140 26 / 0.22);
  --wheat-deep:  oklch(0.830 0.110 78);
  --wheat-tint:  oklch(0.620 0.110 78 / 0.20);
  --wheat-ink:   var(--wheat-deep);                /* light amber in dark — accessible on dark wheat-tint */
  --sky-tint:    oklch(0.300 0.055 228);
  --sky-deep:    oklch(0.760 0.080 232);
  --rail-plaque-bg:   oklch(0.950 0.015 92 / 0.98);
  --rail-plaque-line: oklch(0.740 0.070 82 / 0.22);
  --on-pine-dim: oklch(0.820 0.030 120);
  --topbar-bg:   color-mix(in oklch, var(--paper) 80%, transparent);
  --weekend-tint: oklch(0.30 0.03 156 / 0.45);
  --sh-1: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 1px oklch(0 0 0 / 0.22);
  --sh-2: 0 2px 4px oklch(0 0 0 / 0.28), 0 10px 26px oklch(0 0 0 / 0.40);
  --sh-3: 0 24px 60px oklch(0 0 0 / 0.55), 0 4px 12px oklch(0 0 0 / 0.40);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:       oklch(0.205 0.014 158);
    --paper-deep:  oklch(0.172 0.013 160);
    --surface:     oklch(0.246 0.016 158);
    --surface-2:   oklch(0.290 0.018 156);
    --ink:         oklch(0.930 0.012 96);
    --ink-2:       oklch(0.800 0.016 110);
    --ink-3:       oklch(0.642 0.018 122);
    --line:        oklch(0.340 0.018 156);
    --line-soft:   oklch(0.300 0.016 158);
    --pine:        oklch(0.770 0.110 152);
    --pine-bright: oklch(0.800 0.120 150);
    --pine-tint:   oklch(0.500 0.075 156 / 0.22);
    --pine-solid:  oklch(0.530 0.090 154);
    --wine:        oklch(0.640 0.150 26);
    --wine-tint:   oklch(0.560 0.140 26 / 0.22);
    --wheat-deep:  oklch(0.830 0.110 78);
    --wheat-tint:  oklch(0.620 0.110 78 / 0.20);
    --wheat-ink:   var(--wheat-deep);
    --sky-tint:    oklch(0.300 0.055 228);
    --sky-deep:    oklch(0.760 0.080 232);
    --on-pine-dim: oklch(0.820 0.030 120);
    --topbar-bg:   color-mix(in oklch, var(--paper) 80%, transparent);
    --weekend-tint: oklch(0.30 0.03 156 / 0.45);
    --sh-1: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 1px oklch(0 0 0 / 0.22);
    --sh-2: 0 2px 4px oklch(0 0 0 / 0.28), 0 10px 26px oklch(0 0 0 / 0.40);
    --sh-3: 0 24px 60px oklch(0 0 0 / 0.55), 0 4px 12px oklch(0 0 0 / 0.40);
  }
}

/* ----- Reset (targeted — no Bootstrap on this app; avoid nuking component library styles) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; }
body {
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  overflow-x: clip;
  background-image:
    radial-gradient(120% 90% at 100% 0%, oklch(0.93 0.03 96 / 0.6), transparent 60%),
    radial-gradient(120% 80% at 0% 100%, oklch(0.94 0.022 150 / 0.5), transparent 55%);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(120% 90% at 100% 0%, oklch(0.28 0.035 156 / 0.55), transparent 60%),
    radial-gradient(120% 80% at 0% 100%, oklch(0.24 0.030 150 / 0.5), transparent 55%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-image:
      radial-gradient(120% 90% at 100% 0%, oklch(0.28 0.035 156 / 0.55), transparent 60%),
      radial-gradient(120% 80% at 0% 100%, oklch(0.24 0.030 150 / 0.5), transparent 55%);
  }
}
.tr-heading { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -0.012em; font-optical-sizing: auto; }
::selection { background: var(--wheat); color: var(--ink); }

/* ----- Helpers ---------------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.serif { font-family: var(--serif); }
.muted { color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums; }
.xhair { color: var(--pine-bright); flex: none; }

/* ----- App shell -------------------------------------------------------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }

/* Sidebar — off-canvas drawer on mobile, fixed column on desktop */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: 78%; max-width: 320px;
  height: 100vh; display: flex; flex-direction: column;
  padding: var(--sp-3) 0;
  background:
    linear-gradient(176deg, var(--pine-deep), var(--pine-deeper) 70%, oklch(0.23 0.04 164));
  color: var(--on-pine);
  box-shadow: var(--sh-2);
  overflow: hidden;
  transform: translateX(-104%);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.rail.is-open { transform: none; }
.scrim {
  position: fixed; inset: 0; z-index: 39; background: oklch(0.18 0.03 160 / 0.5);
  backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.scrim.is-open { opacity: 1; visibility: visible; }
.rail::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.10;
  background-image: repeating-linear-gradient(122deg, transparent 0 26px, oklch(0.9 0.05 150 / 0.5) 26px 27px);
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 75%, transparent);
}
.brand { display: flex; align-items: center; gap: 0.7rem; padding: 0 var(--sp-3) var(--sp-3); position: relative; }
.brand__mark {
  width: 38px; height: 38px; flex: none; color: var(--wheat);
  display: grid; place-items: center;
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__name { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand__name--logo { align-items: center; }
.brand__wordmark-shell {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 0.34rem 0.52rem;
  border: 1px solid var(--rail-plaque-line);
  border-radius: var(--r-sm);
  background: var(--rail-plaque-bg);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.14), 0 8px 18px oklch(0 0 0 / 0.16);
}
.brand__wordmark {
  display: block; height: 1.625rem; width: auto;
  max-width: min(12rem, 100%); object-fit: contain; object-position: left center;
}
.brand__word {
  font-family: var(--serif); font-weight: 600; font-size: 1.32rem;
  letter-spacing: 0.01em; color: var(--on-pine);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch;
}
.brand__sub {
  font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  text-decoration: none;
  color: var(--on-pine-dim); margin-top: 0.42rem; font-weight: 500;
}

/* Iconography — the app marks icons up as <span class="material-icons">name</span>.
   The "Material Symbols" webfont is loaded by the app, but no `.material-icons`
   selector is defined against it, so without this rule the spans inherit the
   UI sans and render their ligature NAME as literal text. Back them with that already-
   loaded font (no extra request) and enable ligatures so the names resolve to glyphs. */
.material-icons {
  font-family: "Material Symbols", "Material Icons";
  font-weight: 400; font-style: normal;
  font-size: 1.25rem; line-height: 1; letter-spacing: normal;
  text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

.nav { display: flex; flex-direction: column; gap: 1px; padding: var(--sp-2) 0.7rem; position: relative; flex: 1; overflow-y: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav__label {
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: oklch(0.72 0.04 130 / 0.75); padding: var(--sp-3) 0.85rem 0.5rem; font-weight: 600;
}
.nav__item {
  display: flex; align-items: center; gap: 0.72rem;
  padding: 0.6rem 0.85rem; border-radius: var(--r-sm); border: 1px solid transparent;
  text-decoration: none;
  color: var(--on-pine-dim); font-size: var(--t--1); font-weight: 500;
  position: relative; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.nav__item svg { width: 19px; height: 19px; flex: none; opacity: 0.85; }
.nav__item .material-icons { font-size: 20px; opacity: 0.85; }
.nav__item:hover {
  background: oklch(0.9 0.05 150 / 0.08);
  border-color: oklch(0.90 0.05 86 / 0.14);
  color: var(--on-pine);
}
.nav__item.is-active,
.nav__item.active {
  background: linear-gradient(180deg, oklch(0.94 0.05 140 / 0.14), oklch(0.90 0.05 140 / 0.10));
  border-color: oklch(0.84 0.06 82 / 0.26);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08);
  color: var(--on-pine);
}
.nav__item.is-active svg,
.nav__item.is-active .material-icons,
.nav__item.active svg,
.nav__item.active .material-icons { color: var(--wheat); opacity: 1; }
.nav__item .count {
  margin-left: auto; font-size: 0.68rem; font-weight: 600; color: var(--on-pine);
  background: oklch(0.9 0.05 140 / 0.16); padding: 0.05rem 0.42rem; border-radius: var(--r-pill);
}

.rail__foot { margin-top: auto; padding: var(--sp-3) var(--sp-3) 0; position: relative; }
.openchip {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--t--2);
  color: var(--on-pine); letter-spacing: 0.04em;
  padding: 0.45rem 0.7rem; border-radius: var(--r-pill);
  background: oklch(0.9 0.05 150 / 0.10); border: 1px solid oklch(0.9 0.05 150 / 0.14);
}
.openchip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pine-bright); box-shadow: 0 0 0 3px oklch(0.7 0.15 150 / 0.28); }
.who { display: flex; align-items: center; gap: 0.65rem; margin-top: var(--sp-3); }
.who:hover .who__name { text-decoration: underline; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600;
  color: var(--pine-deeper); background: linear-gradient(150deg, var(--wheat), var(--wheat-deep));
}
.who__name { font-size: var(--t--1); font-weight: 600; color: var(--on-pine); line-height: 1.2; }
.who__role { font-size: 0.66rem; color: var(--on-pine-dim); letter-spacing: 0.04em; }
.rail__signout {
  margin-top: var(--sp-2); display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--t--2); color: var(--on-pine-dim); background: none; border: 0; padding: 0.3rem 0;
}
.rail__signout:hover { color: var(--on-pine); }

/* Footer actions row — sign out / sign in on the left, theme toggle on the right.
   The theme toggle moved here from the (now hidden) topbar, so it wears the pine rail
   palette instead of the light .icon-btn surface. */
.rail__foot-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.rail__theme {
  width: 36px; height: 36px; flex: none;
  background: oklch(0.9 0.05 150 / 0.10);
  border: 1px solid oklch(0.9 0.05 150 / 0.16);
  color: var(--on-pine-dim);
}
.rail__theme:hover { color: var(--on-pine); background: oklch(0.9 0.05 150 / 0.18); border-color: oklch(0.9 0.05 150 / 0.28); }

/* Topbar user-info block — hidden on mobile, shown on desktop */
.topbar__userinfo { display: none; align-items: center; gap: var(--sp-2); }
.topbar__who { display: flex; align-items: center; gap: 0.6rem; }
.topbar__who-text { display: flex; flex-direction: column; align-items: flex-end; }
.topbar__who-name { font-size: var(--t--1); font-weight: 600; color: var(--ink); line-height: 1.2; }
.topbar__who-role { font-size: 0.66rem; color: var(--ink-3); letter-spacing: 0.04em; }
/* Smaller avatar variant for the topbar */
.avatar--sm { width: 30px; height: 30px; font-size: 0.72rem; }
/* Theme toggle palette override when inside the topbar (light surface, not pine) */
.topbar .rail__theme {
  background: var(--surface); border-color: var(--line); color: var(--ink-2);
}
.topbar .rail__theme:hover { border-color: var(--pine); color: var(--pine); background: var(--surface); }
/* Update topbar comment to reflect new role */
/* Topbar: burger-only on mobile; user info + sign out + theme on desktop (≥940px). */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}
.burger { display: grid; }
.crumbs { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t--1); color: var(--ink-3); }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs .sep { opacity: 0.5; }
.topbar__spacer { flex: 1; }
/* Brand name in topbar (desktop-only) */
.topbar__brand { display: none; text-decoration: none; align-items: center; }
.topbar__brand-word {
  font-family: var(--serif); font-weight: 600; font-size: 1.15rem;
  letter-spacing: 0.01em; color: var(--ink); white-space: nowrap;
}
.topbar__brand-wordmark-shell {
  border-color: var(--line); background: var(--surface);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.10), 0 4px 10px oklch(0 0 0 / 0.10);
}

/* Main column */
.main { min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }

.search {
  display: none; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.85rem; min-width: 230px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--ink-3); font-size: var(--t--1);
}
.search svg { width: 16px; height: 16px; }
.search input { border: 0; background: none; outline: none; color: var(--ink); width: 100%; font: inherit; }
.search kbd {
  font-family: var(--sans); font-size: 0.66rem; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0.05rem 0.32rem; background: var(--paper);
}

.page { padding: var(--sp-3); padding-bottom: calc(var(--bottom-nav-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px)); max-width: 1280px; width: 100%; overflow-x: clip; }

/* ----- Bottom nav (mobile only — hidden ≥ 940 px) ----------------------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 38;
  display: flex; align-items: stretch;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 var(--sp-2) env(safe-area-inset-bottom, 0px);
  background: linear-gradient(176deg, var(--pine-deep), var(--pine-deeper) 70%, oklch(0.23 0.04 164));
  border-top: 1px solid oklch(0.36 0.07 160 / 0.6);
  box-shadow: 0 -2px 12px oklch(0.18 0.04 160 / 0.28);
}
.bottom-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.18rem; padding: 0 var(--sp-2);
  color: var(--on-pine-dim);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav__item .material-icons { font-size: 1.375rem; }
.bottom-nav__label { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; line-height: 1; }
.bottom-nav__item.active { color: var(--wheat); }
.bottom-nav__item:hover { color: var(--on-pine); background: oklch(1 0 0 / 0.06); }

/* ----- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem; border-radius: var(--r-sm);
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent; white-space: nowrap;
  text-decoration: none;
  transition: transform .15s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover,
.btn:focus { text-decoration: none; }
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--brand-contrast); box-shadow: var(--sh-1); }
.btn--primary:hover { background: var(--pine-deep); box-shadow: var(--sh-2); }
.btn--wine { background: var(--wine); color: oklch(0.97 0.02 30); box-shadow: var(--sh-1); }
.btn--wine:hover { filter: brightness(1.06); }
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--pine); color: var(--pine); background: var(--pine-tint); }
.btn--text { padding: 0.5rem 0.4rem; color: var(--ink-2); background: none; }
.btn--text:hover { color: var(--pine); }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  transition: border-color .18s, color .18s, background .18s;
}
.icon-btn:hover { border-color: var(--pine); color: var(--pine); }
.icon-btn svg { width: 18px; height: 18px; }
/* Theme toggle — shows the current mode (sun in light, moon in dark) */
.theme-toggle .i-moon { display: none; }
.theme-toggle.is-dark .i-sun { display: none; }
.theme-toggle.is-dark .i-moon { display: block; }

/* ----- Legacy scaffold bridge (bootstrap-era surfaces still in use) ------- */
.text-muted,
.form-text { color: var(--ink-3) !important; }

.text-danger { color: var(--wine) !important; }

.alert {
  padding: 0.72rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--sh-1);
}
.alert-danger {
  color: var(--wine);
  background: var(--wine-tint);
  border-color: oklch(0.43 0.14 22 / 0.18);
}
.alert-success {
  color: var(--pine);
  background: var(--pine-tint);
  border-color: oklch(0.405 0.066 158 / 0.18);
}
.alert-warning {
  color: var(--wheat-deep);
  background: var(--wheat-tint);
  border-color: oklch(0.70 0.12 71 / 0.22);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.card-body { padding: var(--sp-3); }

.form-label {
  font-family: var(--sans);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.36rem;
}

.form-control,
.form-select {
  width: 100%;
  min-height: 2.35rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: none;
}
.form-control::placeholder { color: var(--ink-3); opacity: 1; }
.form-control:focus,
.form-select:focus {
  border-color: var(--pine);
  outline: none;
  box-shadow: 0 0 0 3px oklch(from var(--pine) l c h / 0.2);
}

.form-check-input {
  border: 1px solid var(--line);
  background: var(--surface);
}
.form-check-input:focus {
  border-color: var(--pine);
  box-shadow: 0 0 0 3px oklch(from var(--pine) l c h / 0.2);
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

.input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
.btn-primary:hover,
.btn-primary:focus {
  background: color-mix(in oklch, var(--brand) 80%, black);
  border-color: color-mix(in oklch, var(--brand) 80%, black);
  color: var(--brand-contrast);
}

.btn-outline-secondary {
  color: var(--ink-2);
  border-color: var(--line);
  background: var(--surface);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--pine);
  border-color: var(--pine);
  background: var(--pine-tint);
}

.btn-link {
  color: var(--ink-2);
  text-decoration: none;
}
.btn-link:hover {
  color: var(--pine);
  text-decoration: none;
}

/* ----- Pills & tags ----------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--t--2); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.24rem 0.62rem; border-radius: var(--r-pill);
  border: 1px solid transparent; line-height: 1.4;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--confirmed { color: var(--pine); background: var(--pine-tint); border-color: oklch(0.405 0.066 158 / 0.18); }
.pill--tentative { color: var(--wheat-deep); background: var(--wheat-tint); border-color: oklch(0.70 0.12 71 / 0.22); }
.pill--inquiry   { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }
.pill--wine      { color: var(--wine); background: var(--wine-tint); border-color: oklch(0.43 0.14 22 / 0.18); }
.pill--done      { color: var(--ink-3); background: var(--paper-deep); border-color: var(--line-soft); }

.tag {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t--2);
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-soft);
  padding: 0.22rem 0.55rem; border-radius: var(--r-xs); font-weight: 500;
}

/* ----- Generic surfaces ------------------------------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.panel__head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.panel__head h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-1); }
.panel__head .btn--text { margin-left: auto; }
.panel__body { padding: 0 var(--sp-3) var(--sp-3); }
.section-rule {
  display: flex; align-items: center; gap: 0.85rem; margin: 0 0 var(--sp-3);
}
.section-rule h2 { font-family: var(--serif); font-weight: 500; font-size: var(--t-2); }
.section-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Page header — shared chrome for a page title + actions */
.page-head { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.page-head__titles { min-width: 0; }
.page-head h1 { font-family: var(--serif); font-weight: 500; font-size: var(--t-3); letter-spacing: -0.012em; }
.page-head p { color: var(--ink-2); margin-top: 0.4rem; max-width: 60ch; }
.page-head__actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* Empty state — shared honest "nothing here yet" panel */
.empty-state {
  text-align: center; padding: var(--sp-5) var(--sp-3);
  border: 1px dashed var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-2);
}
.empty-state h2 { font-family: var(--serif); font-weight: 500; font-size: var(--t-2); color: var(--ink); margin-bottom: 0.5rem; }
.empty-state p { max-width: 48ch; margin-inline: auto; }
.empty-state .btn { margin-top: var(--sp-3); }

/* ----- Tables ----------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
.table thead th {
  text-align: left; font-weight: 600; color: var(--ink-3);
  font-size: var(--t--2); letter-spacing: 0.10em; text-transform: uppercase;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line);
}
.table tbody td { padding: 0.9rem 0.9rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr { transition: background .14s ease; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.cell-strong { font-weight: 600; color: var(--ink); }
.cell-sub { color: var(--ink-3); font-size: var(--t--2); }

/* ----- Timeline (run of show / today) ----------------------------------- */
.timeline { display: flex; flex-direction: column; }
.tl {
  display: grid; grid-template-columns: 78px 1fr; gap: var(--sp-3);
  padding: var(--sp-2) 0; position: relative;
}
.tl__time { font-family: var(--serif); font-size: var(--t-1); color: var(--ink); text-align: right; padding-top: 0.1rem; font-variant-numeric: tabular-nums; }
.tl__time small { display: block; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.15rem; }
.tl__body { border-left: 2px solid var(--line); padding: 0 0 var(--sp-2) var(--sp-3); position: relative; }
.tl__body::before {
  content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--pine);
}
.tl.is-wine .tl__body::before { border-color: var(--wine); }
.tl.is-wheat .tl__body::before { border-color: var(--wheat-deep); }
.tl__title { font-weight: 600; }
.tl__meta { color: var(--ink-3); font-size: var(--t--1); margin-top: 0.15rem; }

/* ----- Stat figures (editorial, not boxy hero template) ------------------ */
.figs { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.fig { display: flex; flex-direction: column; gap: 0.2rem; }
.fig__n { font-family: var(--serif); font-size: var(--t-3); font-weight: 500; line-height: 0.9; letter-spacing: -0.02em; }
.fig__n .unit { font-size: 0.45em; color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
.fig__l { font-size: var(--t--1); color: var(--ink-2); }
.fig__d { font-size: var(--t--2); }
.up { color: var(--pine); } .down { color: var(--wine); }

/* ----- Event cards (varied, not identical grid) ------------------------- */
.event-card {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.event-card:hover { border-color: var(--pine); box-shadow: var(--sh-2); transform: translateY(-1px); }
.datechip {
  width: 64px; height: 64px; border-radius: var(--r-sm); display: grid; place-content: center; text-align: center;
  background: var(--pine-tint); border: 1px solid oklch(0.405 0.066 158 / 0.15); color: var(--pine);
}
.datechip .d { font-family: var(--serif); font-size: 1.5rem; line-height: 1; font-weight: 600; }

/* ── Phase 14 — Recurring events ─────────────────────────────────────────── */

/* Series badge: warm wheat pill used wherever a recurring event is flagged */
.series-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  background: var(--wheat-tint); color: var(--wheat-deep);
  border: 1px solid var(--line-soft);
  font-size: 0.75rem; font-weight: 500; line-height: 1.4;
  white-space: nowrap;
}
.series-badge .material-symbols-rounded {
  font-size: 0.9rem; line-height: 1; vertical-align: middle;
}
/* Compact inline badge variant used in grid title cells */
.series-badge--sm {
  padding: 0.05rem 0.3rem; font-size: 0.7rem;
}
.series-badge--sm .material-symbols-rounded { font-size: 0.8rem; }

/* Wrapper to space the badge below the duplicate-alert if both show */
.series-badge-container { display: flex; align-items: center; gap: 0.5rem; }

/* Recurrence sub-form panel (indented, tinted surface) */
.recurrence-form {
  padding: 1rem 1.25rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
}

/* Narrow number input for occurrence count */
.recurrence-count-input { max-width: 5rem; }
.datechip .m { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.2rem; }
.event-card.wine .datechip { background: var(--wine-tint); border-color: oklch(0.43 0.14 22 / 0.15); color: var(--wine); }
.event-card.wheat .datechip { background: var(--wheat-tint); border-color: oklch(0.70 0.12 71 / 0.2); color: var(--wheat-deep); }
.ec__title { font-family: var(--serif); font-size: var(--t-1); font-weight: 600; }
.ec__meta { color: var(--ink-3); font-size: var(--t--1); margin-top: 0.2rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.ec__meta span { display: inline-flex; align-items: center; gap: 0.32rem; }
.ec__meta svg { width: 14px; height: 14px; opacity: 0.7; }
.ec__right { text-align: right; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.7rem; grid-column: 2; flex-wrap: wrap; }

/* utility layout */
.grid { display: grid; gap: var(--sp-3); }
.flex { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.wrap { flex-wrap: wrap; }
.gap2 { gap: var(--sp-2); } .gap3 { gap: var(--sp-3); }
.center { align-items: center; }

/* ----- Responsive (mobile-first: enhance upward) ------------------------ */
@media (min-width: 940px) {
  /* Extend rail color to full document height via app background column */
  .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); background-image: linear-gradient(to right, oklch(0.23 0.04 164) var(--rail-w), transparent var(--rail-w)); }
  /* Topbar height token — used by sticky page elements (e.g. filter bars) to clear the topbar */
  :root { --topbar-h: calc(38px + 2 * var(--sp-2)); --nav-h: var(--topbar-h); }
  .rail {
    position: sticky; inset: auto; top: 0; align-self: start; z-index: 1;
    width: auto; max-width: none; transform: none; transition: none;
    box-shadow: var(--sh-rail); height: 100dvh;
  }
  .scrim { display: none; }
  .burger { display: none; }
  .bottom-nav { display: none; }
  .search { display: flex; }
  /* Topbar is visible on desktop — shows brand name, user info, sign out, and theme toggle */
  .topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
  .topbar__brand { display: flex; }
  /* Rail on desktop: show SVG mark + "Events" sub inline; hide brand word/wordmark */
  .brand .brand__name { display: flex; flex-direction: row; align-items: center; }
  .brand .brand__word,
  .brand .brand__wordmark-shell { display: none; }
  .brand .brand__sub { margin-top: 0; }
  .topbar__userinfo { display: flex; }
  /* Rail foot (user info + sign out in the drawer) is mobile-only */
  .rail__foot { display: none; }
  .page { padding: var(--sp-4); }
  .mobile-nav { display: none; }
  .figs { gap: var(--sp-4) var(--sp-5); }
  .fig__n { font-size: var(--t-4); }
  .event-card { grid-template-columns: 64px 1fr auto; }
  .event-card .ec__right { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: flex-end; flex-wrap: nowrap; gap: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ----- Entrance motion -------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.rise-1 { animation-delay: .04s; } .rise-2 { animation-delay: .10s; }
.rise-3 { animation-delay: .16s; } .rise-4 { animation-delay: .22s; }
.rise-5 { animation-delay: .28s; } .rise-6 { animation-delay: .34s; }

/* ----- iOS Safari mobile background fix --------------------------------- */
/* `background-attachment: fixed` doesn't compose correctly during scroll on iOS Safari
   and causes the paper-grain gradient to repaint every frame, producing a jarring
   "sticky background" visual. Switch to scroll on touch viewports — no grain
   loss, just correct behavior. */
@media (max-width: 939px) {
  body { background-attachment: scroll; }
}

/* ----- Shared inline dialog / overlay ----------------------------------- */
/* Backdrop + dialog shell reused by Events/Edit.razor AND Events/Index.razor
   for the double-booking conflict, delete-confirm, and recurring-event prompts.
   Defined globally so both components share one rule set — Blazor CSS isolation
   scopes styles per-component, so markup shared across components needs a global
   declaration (not a scoped .razor.css) to render correctly everywhere. */
.event-conflict-backdrop {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3);
  background: var(--scrim);
}
.event-conflict-dialog {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  max-width: 480px; width: 100%;
  box-shadow: var(--sh-3);
}
.event-conflict-heading {
  font-family: var(--serif);
  font-size: var(--t-2); font-weight: 600;
  line-height: 1.2; color: var(--wine);
  margin: 0 0 var(--sp-2);
}
.event-conflict-body {
  font-size: var(--t-0); line-height: 1.5;
  color: var(--ink-2); margin: 0;
}
/* Action row — wraps gracefully on narrow viewports so three-button rows
   never clip off the edge of the dialog. The dialog is padded by var(--sp-4) on
   each side, so on very small phones the effective content width can fall below
   the space needed for three side-by-side buttons; flex-wrap lets them reflow. */
.event-conflict-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-3);
}