/* ==========================================================================
   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 */
  --wheat-line:   oklch(0.553 0.119 67);   /* amber notice border (.change-notice) — the old #a0620a, so light is unchanged */
  --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 */
  --wheat-line:  oklch(0.700 0.120 71);            /* mid amber notice border — reads on the dark surface + 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);
    --wheat-line:  oklch(0.700 0.120 71);
    --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; }
/* Screen-reader-only utility (Bootstrap 5 pattern; Bootstrap is not loaded). */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ----- 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;
  /* quick 261013-qjv: the tenant platform name (up to 64 chars) truncates instead of widening the rail. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* 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-icons {
  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-icons { 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);
}

/* ----- Shared change notice --------------------------------------------- */
/* The amber "changed since signed / shared" notice (Phase 58; quick 261015-ldu). Six components show it: the BEO
   floor-plans card, the client share panel (change lines + stale response), the staff plans page badge, the plan
   editor banners, the public signing page and the public share page; quick 261015-mmh added the AI draft / change
   review banners (seat shortfall, stale base, Accept race). Defined globally for the same reason as the
   Shared inline dialog above: Blazor CSS isolation scopes styles per component, so one palette shared across
   components needs a global rule. Backed by the wheat tokens, so it follows light / dark (both the toggle and the
   OS default) like the rest of Terroir.
   Use it on plain page-rendered elements (p, span), never as a Mud component Class.
   Scoped rules on the same element keep layout only (margin, padding, font-size, display): they must NOT redeclare
   border-left, background or color, because a scoped selector carries the b-xxx attribute and outranks this bare
   global class, so the shared palette would silently lose. */
.change-notice {
  border-left: 4px solid var(--wheat-line);
  background: var(--wheat-tint);
  color: var(--wheat-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}