/* Fonts must be imported before any other rule — a CSS @import that follows a
   rule is ignored by browsers. EB Garamond carries the brand's display voice;
   Inter handles dense UI (agenda times, rosters) where a book serif costs
   legibility. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

/* The Counterfactual — Attendee App Design System */

/* CSS Custom Properties — palette shared with the thecounterfactual.co site.
   House rules from that brand: no pure white, no pure black; ochre is the one
   warm accent and is used sparingly. */
:root {
  /* ── Source palette ──────────────────────────────────────────────────────
     Cream, dark and mist are taken from the event site's own stylesheet.
     --ink stays the wordmark's green-black rather than the site's #1E2B30 so
     body copy and the lockup share one tone; --slate is repointed to the
     wordmark's secondary fill so accents use a real brand colour. */
  --bone: #F4F2EC;             /* warm off-white — page background */
  --paper: #EDEAE0;            /* slightly deeper surface / panels */
  --ink: #1E2C23;              /* near-black-green — body + headings (wordmark fill) */
  --ink-soft: #41504A;         /* muted text: descriptors, secondary lines */
  --slate: #365358;            /* slate teal — accents, rules (wordmark fill) */
  --slate-2: #365358;          /* wordmark secondary fill */
  --mist: #8FA3AC;             /* misted blue-grey — labels, faint lines */
  --ochre: #AC8B47;            /* muted ochre — used sparingly */

  /* ── Semantic aliases ──────────────────────────────────────────────────
     The rest of the stylesheet (and agenda/groups/attendees.css) references
     these older names. Repointing them here re-skins the whole app. */
  --brand-blue: #365358;       /* slate — primary accent */
  --brand-pink: #AC8B47;       /* ochre */
  --brand-coral: #8FA3AC;      /* mist */

  /* Primary Colors */
  --primary-blue: #365358;
  --primary-dark: #1E2C23;     /* ink — dark ground, theme-color */
  --primary-accent: #AC8B47;

  /* Secondary Colors */
  --coral: #8FA3AC;
  --electric-blue: #365358;
  --sunshine: #AC8B47;
  --purple-pop: #365358;

  /* ── Ground: dark ──────────────────────────────────────────────────────
     Every attendee page now sits on the illustration under a dark scrim, so
     these semantic aliases describe type and surfaces on a DARK ground. The
     raw palette above is unchanged — only these aliases flip, which re-skins
     the ~108 rules across style/agenda/attendees/groups.css in one move.
     (print-dinner.html carries its own inline <style> and stays light; the
     admin CMS imports src/app/globals.css and is untouched.) */

  /* Text Colors */
  --text-primary: #F4F2EC;
  --text-secondary: rgba(244, 242, 236, 0.78);
  --text-muted: #8FA3AC;

  /* Backgrounds — translucent glass over the artwork, not opaque panels */
  --bg-white: rgba(30, 43, 48, 0.50);
  --bg-light: rgba(30, 43, 48, 0.38);
  --bg-accent: rgba(244, 242, 236, 0.10);
  --bg-coral-light: rgba(172, 139, 71, 0.18);
  --bg-teal-light: rgba(244, 242, 236, 0.06);

  /* Borders & Dividers */
  --border-color: rgba(244, 242, 236, 0.30);
  --border-light: rgba(244, 242, 236, 0.16);

  /* Status Colors */
  --success: #00d084;
  --warning: #ff9500;
  --error: #ff3333;

  /* Typography Scale */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Instrument Serif', 'EB Garamond', Georgia, Cambria, serif;
  --tracking-label: 0.22em;    /* uppercase labels, per brand */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Spacing System */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows — tinted with ink rather than pure black, per brand */
  --shadow-sm: 0 1px 3px rgba(30, 44, 35, 0.10);
  --shadow-md: 0 4px 12px rgba(30, 44, 35, 0.10);
  --shadow-lg: 0 10px 25px rgba(30, 44, 35, 0.15);
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
}

/* Link Styles */
a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:visited {
  color: var(--primary-blue);
}

a:hover {
  color: var(--primary-accent);
}

a:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

body {
  font-family: var(--font-primary) !important;
  line-height: var(--leading-normal);
  color: var(--text-primary) !important;
  /* The illustration carries every page, under a scrim tinted with the event
     site's dark (#1E2B30) rather than pure black. Fixed so it stays put while
     long pages (the agenda) scroll over it; the ink underneath covers any gap. */
  background:
    linear-gradient(180deg, rgba(30, 43, 48, 0.72) 0%, rgba(30, 43, 48, 0.80) 100%),
    url('/design/tcf_cover.jpg') center center / cover no-repeat fixed,
    var(--primary-dark) !important;
  background:
    linear-gradient(180deg, rgba(30, 43, 48, 0.72) 0%, rgba(30, 43, 48, 0.80) 100%),
    image-set(
      url('/design/tcf_cover.webp') type('image/webp'),
      url('/design/tcf_cover.jpg') type('image/jpeg')
    ) center center / cover no-repeat fixed,
    var(--primary-dark) !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-size: var(--text-sm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Enable modern OpenType: contextual alternates + tabular figures for aligned numbers in agenda times */
  font-feature-settings: "cv11", "ss01", "ss03", "tnum";
  position: relative;
}


/* Container — a centring column, not a card. The cream panel it used to paint
   is gone on every page: content now sits directly on the illustration, which
   is what makes the inner pages read like the landing. */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg);
  min-height: 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .container {
    padding: var(--space-2xl) var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: var(--space-3xl) var(--space-2xl);
  }
}

/* Hero — base treatment (inner pages: compact brand bar). A light paper
   panel on every device. The cover art lives in the body bg on tablet+
   where it's visible around the floating container; on mobile, the
   container is full-bleed so the brand moment is just the wordmark. */
.hero {
  /* No panel: the reversed wordmark sits straight on the artwork, so inner
     pages open the same way the landing does — just more compactly. */
  background: none;
  color: var(--bone);
  border: none;
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.hero > * {
  position: relative;
  z-index: 2;
}

.hero .logo-badge {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
}

.hero .logo-badge img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.hero .summit-info {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: var(--font-medium);
}

/* Hero — landing variant (home page: brand moment) */
.hero--landing {
  /* Spacious internal padding so the brand moment breathes.
     The hero's *bottom* margin is the tighter dial (see .hero base above),
     which controls the gap to the nav cards below — not this padding. */
  padding: var(--space-2xl) var(--space-lg);
  gap: var(--space-md);
  min-height: 300px;
  /* The brand moment is the artwork, not a beige panel. The cover fills the
     hero under a cream scrim — light enough that the illustration reads,
     opaque enough that the dark wordmark holds against its mid-tone wedges.
     This is also the only place the art appears on mobile, where the body
     background stays solid ink. */
  background:
    linear-gradient(180deg, rgba(244, 242, 236, 0.58), rgba(244, 242, 236, 0.80)),
    url('/design/tcf_cover.jpg') center 42% / cover no-repeat;
  background:
    linear-gradient(180deg, rgba(244, 242, 236, 0.58), rgba(244, 242, 236, 0.80)),
    image-set(
      url('/design/tcf_cover.webp') type('image/webp'),
      url('/design/tcf_cover.jpg') type('image/jpeg')
    ) center 42% / cover no-repeat;
  border-color: var(--border-color);
}

@media (min-width: 768px) {
  .hero--landing {
    padding: var(--space-3xl) var(--space-lg);
    gap: var(--space-lg);
    min-height: 440px;
  }
}

.hero--landing .logo-badge {
  max-width: 340px;
}

.hero--landing .summit-info {
  margin-top: var(--space-sm);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
}

.hero--landing .venue-link {
  display: inline-block;
  margin-top: calc(-1 * var(--space-sm) / 2);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* Slate rather than mist: this now sits over the illustration, and mist is
     too close in value to the scrimmed artwork to stay legible. */
  color: var(--slate) !important;
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: var(--font-medium);
}

.hero--landing .venue-link:hover {
  color: var(--ochre) !important;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  margin: 0;
  line-height: var(--leading-tight);
}

/* Page Headers (Non-Hero) */
.page-header {
  margin-bottom: var(--space-2xl);
}

.page-header h1 {
  color: var(--text-primary);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  font-feature-settings: "ss01", "cv11";
}

/* Page subtitle as a tracked label rather than a large lede line — matches the
   uppercase metadata convention used on the landing and the event site. */
.page-header .lead {
  color: var(--mist);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  background: none;
  padding: 0;
  border: none;
  margin: 0 0 var(--space-xl);
}

/* Breadcrumb Navigation */
nav[aria-label="breadcrumb"] ul {
  list-style: none;
  display: flex;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg) 0;
  padding: 0;
  font-size: var(--text-xs);
}

nav[aria-label="breadcrumb"] li {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

nav[aria-label="breadcrumb"] li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-sm);
  color: var(--text-muted);
}

nav[aria-label="breadcrumb"] a {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: var(--font-semibold);
  transition: color 0.2s ease;
}

nav[aria-label="breadcrumb"] a:hover {
  color: var(--primary-dark);
}

nav[aria-label="breadcrumb"] a:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Navigation Grid */
.main-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: var(--space-2xl) 0;
}

@media (min-width: 768px) {
  .main-nav {
    /* auto-fit rather than a fixed 3 columns: a hidden card (see the feature
       switches) then closes up instead of leaving an empty track. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
  }
}

.nav-card {
  text-decoration: none !important;
  color: var(--text-primary) !important;
  display: block;
  transition: all 0.2s ease;
  width: 100%;
}

.nav-card:visited,
.nav-card:link {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

/* :focus-visible, not :focus — a mouse click left the ochre ring stuck on the
   card. This keeps it for keyboard navigation, where it's the only affordance. */
.nav-card:focus-visible {
  outline: 2px solid var(--sunshine);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

.nav-card article {
  background: linear-gradient(180deg, var(--slate), var(--primary-dark)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  /* No height:100%. It stretched every card to the tallest one and dumped the
     leftover space after the last line, which read as heavy bottom padding.
     The cards' descriptions are a matched length, so they sit level anyway. */
  color: white !important;
}

.nav-card:hover article {
  border-color: rgba(172, 139, 71, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.nav-card header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: none !important;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
  border-radius: 0;
}

.nav-card .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--sunshine);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-card h2,
.nav-card:visited h2,
.nav-card:link h2 {
  color: white !important;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
}

.nav-card:hover h2 {
  color: var(--sunshine) !important;
}

.nav-card:hover .icon {
  transform: scale(1.08);
}

.nav-card p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Agenda Styles */
.agenda-day {
  margin-bottom: var(--space-2xl);
}

.agenda-day h2 {
  background: var(--brand-blue);
  color: white;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 15px rgba(0, 49, 147, 0.3);
}

.agenda-item {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.agenda-item:hover {
  box-shadow: var(--shadow-md);
}

.agenda-item.group-activity {
  border-left: 4px solid var(--brand-coral);
  background: var(--bg-accent);
}

.agenda-time {
  color: var(--brand-pink);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  margin-bottom: var(--space-xs);
}

.agenda-title {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  margin: var(--space-sm) 0;
  line-height: var(--leading-tight);
}

.agenda-location {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin: var(--space-xs) 0;
}

.agenda-description {
  color: var(--text-secondary);
  margin-top: var(--space-sm);
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
}

/* Search Styles */
.search-container {
  margin: var(--space-2xl) 0;
}

.search-input {
  width: 100%;
  padding: var(--space-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  transition: all 0.2s ease;
  background: var(--bg-white);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-suggestions {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-top: var(--space-sm);
  box-shadow: var(--shadow-md);
  max-height: 300px;
  overflow-y: auto;
}

.search-suggestion {
  padding: var(--space-lg);
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
}

.search-suggestion:last-child {
  border-bottom: none;
}

.search-suggestion:hover {
  background-color: var(--bg-light);
}

.search-suggestion:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
  background-color: var(--bg-accent);
}

/* Confirmation Card */
.confirmation-card {
  background: var(--bg-accent);
  border: 2px solid var(--brand-coral);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  margin: var(--space-2xl) 0;
  box-shadow: 0 10px 30px rgba(203, 213, 0, 0.15);
}

.confirmation-card h3 {
  margin: 0 0 var(--space-lg) 0;
  color: var(--brand-blue);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}

.confirmation-card .selected-name {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: var(--space-xl) 0;
  color: var(--text-primary);
}

.confirmation-card nav {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

/* Group Cards */
.group-card {
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--brand-blue);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  background: white;
  transition: all 0.2s ease;
}

.group-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.group-card h3,
.group-card h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-sm) 0;
  line-height: var(--leading-tight);
  color: var(--brand-blue);
}

.group-card .group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-sm);
}

.group-card .members {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: inherit;
}

/* Room/Table badge — designed to catch the eye first */
.group-card .group-card-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.group-card .group-card-top .group-card-header {
  flex: 1 1 auto;
  min-width: 0;
}

.group-card .group-room-badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sunshine);
  color: var(--purple-pop);
  border-radius: 14px;
  padding: 0.55rem 0.9rem 0.65rem;
  min-width: 4.5rem;
  box-shadow: 0 6px 18px rgba(74, 45, 128, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  text-align: center;
  line-height: 1;
}

.group-card .group-room-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.2rem;
}

.group-card .group-room-number {
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

@media (max-width: 480px) {
  .group-card .group-room-badge {
    min-width: 3.8rem;
    padding: 0.45rem 0.75rem 0.55rem;
  }
  .group-card .group-room-number { font-size: 1.7rem; }
}

/* Group Color Variants - Bright & Spicy */
.group-blue {
  background: #e6f3ff;
  color: #0052cc;
  border-color: var(--primary-blue);
  box-shadow: 0 2px 10px rgba(0, 102, 255, 0.15);
}

.group-green {
  background: #e6fff2;
  color: #006b3f;
  border-color: var(--success);
  box-shadow: 0 2px 10px rgba(0, 208, 132, 0.15);
}

.group-purple {
  background: #f3e6ff;
  color: #6b1fb8;
  border-color: #9f4fff;
  box-shadow: 0 2px 10px rgba(159, 79, 255, 0.15);
}

.group-red {
  background: #ffe6e6;
  color: #cc0000;
  border-color: var(--coral);
  box-shadow: 0 2px 10px rgba(255, 107, 107, 0.15);
}

.group-yellow {
  background: #fff8e6;
  color: #b8860b;
  border-color: var(--sunshine);
  box-shadow: 0 2px 10px rgba(255, 230, 109, 0.15);
}

.group-orange {
  background: #fff0e6;
  color: #cc4400;
  border-color: var(--brand-coral);
  box-shadow: 0 2px 10px rgba(203, 213, 0, 0.15);
}

.group-teal {
  background: #e6fffc;
  color: #006b63;
  border-color: var(--electric-blue);
  box-shadow: 0 2px 10px rgba(78, 205, 196, 0.15);
}

.group-pink {
  background: #ffe6f5;
  color: #b8005c;
  border-color: #ff4da6;
  box-shadow: 0 2px 10px rgba(255, 77, 166, 0.15);
}

.group-indigo {
  background: #ece6ff;
  color: #4c1d95;
  border-color: #7c3aed;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.15);
}

.group-cyan {
  background: #e6fffe;
  color: #065f5c;
  border-color: #00bcd4;
  box-shadow: 0 2px 10px rgba(0, 188, 212, 0.15);
}

.group-gray {
  background: #f5f5f5;
  color: #404040;
  border-color: #808080;
  box-shadow: 0 2px 10px rgba(128, 128, 128, 0.15);
}

.group-slate {
  background: #f1f5f9;
  color: #334155;
  border-color: #64748b;
  box-shadow: 0 2px 10px rgba(100, 116, 139, 0.15);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--brand-coral);
  color: var(--primary-dark);
  border: 2px solid transparent;
  /* Shadow tinted with the button's own mist, not the previous event's lime. */
  box-shadow: 0 4px 15px rgba(143, 163, 172, 0.35);
  font-weight: var(--font-semibold);
}

.btn-primary:hover {
  background: var(--brand-pink);
  color: var(--bone);
  transform: translateY(-2px);
  /* Ochre-tinted to match the hover ground; was the old event's pink. */
  box-shadow: 0 6px 25px rgba(172, 139, 71, 0.35);
}

.btn-secondary {
  background: var(--bg-light);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-white);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

button, .btn {
  background: var(--brand-coral);
  color: var(--primary-dark);
  border: none;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: 'Inter', var(--font-primary);
  box-shadow: 0 4px 15px rgba(203, 213, 0, 0.3);
}

button:hover, .btn:hover {
  background: var(--brand-pink);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(233, 70, 125, 0.4);
}

button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Secondary button - fix blue on blue contrast issue */
button.secondary,
[role="button"].secondary,
a[role="button"].secondary {
  background: var(--bone) !important;
  color: var(--ink) !important;
  border: 2px solid var(--border-color) !important;
}

button.secondary:hover,
[role="button"].secondary:hover,
a[role="button"].secondary:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--mist) !important;
  box-shadow: 0 2px 6px rgba(30, 44, 35, 0.10);
}

/* Back to Home link - consistent styling across all pages */
.back-link {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-color);
}

.back-link:hover {
  background: var(--bone);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--ink);
}

/* Form Elements */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-weight: var(--font-medium);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.form-input {
  width: 100%;
  padding: var(--space-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  transition: all 0.2s ease;
  background: var(--bg-white);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Instructions */
.instructions {
  margin: var(--space-2xl) 0;
  text-align: center;
}

.instructions details {
  background: var(--bg-light);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  margin: var(--space-lg) auto;
  max-width: 600px;
  text-align: left;
}

.instructions summary {
  font-weight: var(--font-semibold);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.instructions ol {
  margin: var(--space-lg) 0 0;
  padding-left: var(--space-xl);
}

.instructions li {
  margin: var(--space-sm) 0;
  line-height: var(--leading-relaxed);
}

/* Install Prompt */
.install-prompt {
  position: fixed;
  bottom: var(--space-lg);
  left: var(--space-lg);
  right: var(--space-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.install-prompt p {
  margin: 0;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.install-prompt button {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-xs);
  min-height: 36px;
}

/* Loading and Status States */
.loading {
  text-align: center;
  padding: var(--space-3xl);
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

.error {
  background: #fef2f2;
  color: var(--error);
  border: 1px solid #fecaca;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
  font-weight: var(--font-medium);
}

.success {
  background: #f0fdf4;
  color: var(--success);
  border: 1px solid #bbf7d0;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
  font-weight: var(--font-medium);
}

/* Offline Indicator */
.offline {
  filter: grayscale(100%);
}

.offline::before {
  content: "Offline Mode";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--warning);
  color: white;
  text-align: center;
  padding: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  z-index: 1000;
}

/* Responsive Design - Tablet */
@media (min-width: 768px) {
  .hero h1 {
    font-size: var(--text-2xl);
  }
}

/* Responsive Design - Desktop */
@media (min-width: 1024px) {
  .hero--landing {
    padding: var(--space-3xl) var(--space-2xl);
  }

  .hero h1 {
    font-size: var(--text-3xl);
  }

  .main-nav {
    gap: var(--space-2xl);
  }

  .page-header h1 {
    font-size: calc(var(--text-3xl) + 0.25rem);
  }
}


/* Footer */
footer {
  text-align: left;
  margin-top: var(--space-2xl);
}

/* Focus Styles for Better Accessibility */
*:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --border-color: var(--ink);
    --text-secondary: var(--ink);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   Landing page — full-bleed treatment (index.html only, via body.landing)
   Mirrors the event site's opening screen: the illustration runs edge to edge
   and carries the page, darkened enough for reversed type, with the wordmark,
   tagline and nav cards floating directly on it. The inner pages keep the
   light card treatment, so all of this is scoped under body.landing.
   ══════════════════════════════════════════════════════════════════════════ */

body.landing {
  /* Scrim tinted with the event site's dark (#1E2B30), not pure black; it
     deepens toward the foot so the nav cards hold against the bright lake. */
  background:
    linear-gradient(180deg, rgba(30, 43, 48, 0.50) 0%, rgba(30, 43, 48, 0.66) 52%, rgba(30, 43, 48, 0.82) 100%),
    url('/design/tcf_cover.jpg') center center / cover no-repeat !important;
  background:
    linear-gradient(180deg, rgba(30, 43, 48, 0.50) 0%, rgba(30, 43, 48, 0.66) 52%, rgba(30, 43, 48, 0.82) 100%),
    image-set(
      url('/design/tcf_cover.webp') type('image/webp'),
      url('/design/tcf_cover.jpg') type('image/jpeg')
    ) center center / cover no-repeat !important;
}

/* No card, no blur, no cream — the container is just a centring column. */
body.landing .container {
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 auto !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg);
}

/* The hero is now type over artwork rather than a panel of its own. */
body.landing .hero--landing {
  background: none !important;
  border: none !important;
  box-shadow: none;
  border-radius: 0;
  min-height: 0;
  padding: 0 0 var(--space-2xl);
  margin-bottom: 0;
  gap: var(--space-lg);
  overflow: visible;
}

body.landing .hero--landing .logo-badge {
  max-width: 300px;
}

body.landing .hero-tagline {
  /* Instrument Serif is the event site's display face; loaded for this one
     element rather than swapping the app-wide --font-display. */
  font-family: 'Instrument Serif', var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 3.4vw, 1.95rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--bone);
  max-width: 24ch;
  margin: var(--space-md) auto 0;
  text-align: center;
  text-wrap: balance;
}

body.landing .hero--landing .summit-info {
  color: var(--mist);
  margin-top: var(--space-lg);
}

body.landing .hero--landing .venue-link {
  color: var(--mist) !important;
}

body.landing .hero--landing .venue-link:hover {
  color: var(--ochre) !important;
}

/* Nav cards: outlined glass so the illustration reads through, echoing the
   event site's outlined "request an invitation" button. Deep enough to read as
   real objects sitting on the artwork — at a lighter fill they receded into it
   and stopped looking tappable. */
body.landing .nav-card article {
  background: rgba(30, 43, 48, 0.50) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid rgba(244, 242, 236, 0.44) !important;
  /* Lifts the card off the illustration so the edge doesn't merge with a
     light wedge of the artwork behind it. */
  box-shadow: 0 10px 30px rgba(30, 43, 48, 0.38);
  position: relative;
}

/* Ochre hairline along the top edge — the one warm accent, carrying the eye
   across the row of three. */
body.landing .nav-card article::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-xl);
  right: var(--space-xl);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ochre), transparent);
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* Directional affordance: these are destinations, not captions. */
body.landing .nav-card header::after {
  content: "→";
  margin-left: auto;
  color: var(--ochre);
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.landing .nav-card h2 {
  font-size: var(--text-xl) !important;
}

body.landing .nav-card:hover article {
  background: rgba(30, 43, 48, 0.62) !important;
  border-color: rgba(172, 139, 71, 0.75) !important;
  box-shadow: 0 16px 40px rgba(30, 43, 48, 0.46);
  transform: translateY(-3px);
}

body.landing .nav-card:hover article::before {
  opacity: 1;
}

body.landing .nav-card:hover header::after {
  transform: translateX(4px);
  opacity: 1;
}

body.landing .nav-card p {
  color: rgba(244, 242, 236, 0.88) !important;
}

body.landing .main-nav {
  margin: 0;
}

@media (min-width: 768px) {
  body.landing .container {
    padding: var(--space-3xl) var(--space-2xl);
  }
  body.landing .hero--landing {
    padding-bottom: var(--space-3xl);
  }
  body.landing .hero--landing .logo-badge {
    max-width: 340px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Dark-ground primitives — shared by the inner pages
   Prefixed with `body` so they outrank the same class names in agenda.css /
   attendees.css / groups.css, which load after this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* Compact brand bar: the reversed wordmark, no panel. */
.hero:not(.hero--landing) {
  padding: var(--space-lg) 0 var(--space-md);
  margin-bottom: var(--space-lg);
  min-height: 0;
  gap: var(--space-sm);
  border-radius: 0;
}

.hero:not(.hero--landing) .logo-badge {
  max-width: 150px;
}

/* Page titles pick up the display serif, matching the landing's tagline. */
body .page-header h1,
body .agenda-intro-text h1,
body h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bone);
}

body h2,
body h3 {
  color: var(--bone);
}

/* Eyebrow/label convention: uppercase, tracked, mist. */
body .subtitle,
body .lead,
body .agenda-meta,
body .search-count,
body .group-card-eyebrow,
body .group-meta-label {
  color: var(--mist);
}

/* Back link + secondary actions as outlined chips, echoing the event site's
   outlined "request an invitation" button rather than a white pill. */
body .back-link,
body .breadcrumb .back-link {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 0;
  color: var(--bone);
  padding: 0.55rem 1.1rem;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: var(--font-medium);
  box-shadow: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

body .back-link:hover,
body .breadcrumb .back-link:hover {
  background: rgba(244, 242, 236, 0.06);
  border-color: var(--ochre);
  color: var(--ochre);
}

/* Inputs on dark glass. */
body input[type="text"],
body input[type="search"],
body .search-input,
body select,
body textarea {
  background: rgba(30, 43, 48, 0.42) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--bone) !important;
  box-shadow: none !important;
}

body input::placeholder,
body textarea::placeholder {
  color: rgba(143, 163, 172, 0.85) !important;
}

body input[type="text"]:focus,
body input[type="search"]:focus,
body .search-input:focus {
  border-color: var(--ochre) !important;
  outline: none;
}

/* Status blocks. */
body .loading,
body .instructions,
body .no-results,
body .scroll-loader p {
  color: var(--text-secondary);
  text-align: center;
}

body .error,
body .success {
  background: rgba(30, 43, 48, 0.46);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--bone);
  padding: var(--space-lg);
}

body .error {
  border-color: rgba(255, 51, 51, 0.45);
}

/* Breadcrumb trail. */
body .breadcrumb,
body nav[aria-label="breadcrumb"] {
  margin-bottom: var(--space-xl);
}

body nav[aria-label="breadcrumb"] a {
  color: var(--mist);
}

body nav[aria-label="breadcrumb"] a:hover {
  color: var(--ochre);
}

/* ── Feature switches (see public/js/features.js) ─────────────────────────── */

/* My Groups off: hide its home-screen card. Done in CSS off a class set on
   <html> in the head, so the card never paints before being removed. */
.feature-my-groups-off .nav-card--my-groups {
  display: none;
}

/* ── Attendee roster unlock screen ────────────────────────────────────────── */

.unlock {
  max-width: 26rem;
  margin: 0 auto;
  text-align: center;
}

.unlock h1 {
  /* Owns the gap to the form now that the helper line beneath it is gone. */
  margin: 0 0 var(--space-2xl);
}

/* Glass panel, matching the nav cards and roster cards. */
.unlock-form {
  background: rgba(30, 43, 48, 0.50);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid rgba(244, 242, 236, 0.44);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(30, 43, 48, 0.38);
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}

.unlock-label {
  color: var(--mist);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--font-medium);
  margin: 0;
}

.unlock-form input[type="password"] {
  background: rgba(30, 43, 48, 0.42) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--bone) !important;
  font-size: 1rem !important;
  padding: 0.8rem 0.9rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0.08em;
}

.unlock-form input[type="password"]:focus {
  border-color: var(--ochre) !important;
  outline: none;
}

/* Outlined ochre, like the other primary actions. */
.unlock-submit {
  margin: var(--space-sm) 0 0 !important;
  background: transparent !important;
  border: 1px solid rgba(172, 139, 71, 0.6) !important;
  border-radius: 0 !important;
  color: var(--ochre) !important;
  font-family: var(--font-primary) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: var(--font-medium);
  padding: 0.8rem 1.2rem !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.unlock-submit:hover:not(:disabled) {
  background: rgba(172, 139, 71, 0.14) !important;
  border-color: var(--ochre) !important;
}

.unlock-submit:disabled {
  opacity: 0.55;
  cursor: default;
}

.unlock-error {
  margin: 0;
  color: #F0A8A8;
  font-size: 0.78rem;
}

.unlock .back-link {
  margin-top: var(--space-2xl);
}