:root {
  /* --navy and --gold are the site's real brand colors, pulled from the
     live theme's CSS (body background-color and header background-color). */
  --navy: #02112c;
  --navy-alt: #0a1d3f;
  --card: #0d2140;
  --gold: #8b500e;
  --gold-light: #d9a34c;
  --text: #f4f6fb;
  --text-dim: #aab2c8;
  --border: #1c2d4a;
  --frost: #6fd6e0;
  /* Used on the Food/Drinks menu boxes so they read as distinct, framed
     cards against the navy background instead of blending into it. */
  --accent-border: rgba(217, 163, 76, 0.4);
}

* { box-sizing: border-box; }

/* Condensed bold display face for the header nav, chosen to echo the
   bold, tightly-set lettering in the header logo badge. Self-hosted
   (DejaVu Sans Condensed Bold, freely licensed — see
   /fonts/LICENSE_DEJAVU.txt) and subset to just the characters the nav
   uses, so the CSP can stay font-src-free (default-src 'self' covers it). */
@font-face {
  font-family: "CCS Nav";
  src: url("../fonts/nav-condensed-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* .photo-scroll etc. use display:flex, which (per the cascade) would
   otherwise beat the browser's default [hidden]{display:none} — so make
   that explicit here rather than relying on the UA stylesheet. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--navy);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: var(--gold-light); text-decoration: none; }
a:hover { text-decoration: underline; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* header */
.site-header {
  background: var(--gold);
  position: sticky; top: 0; z-index: 10;
}
.header-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1.5rem;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 60px; width: auto; display: block; flex-shrink: 0; }
/* mobile-only single logo, swapped in for the split pair below 1021px */
.brand-mobile { display: none; }
/* the logo, split down the middle, bookending the nav so the two
   figures read as if they're holding the nav links between them */
.brand-edge { display: block; flex-shrink: 0; }
.brand-edge-img { height: 78px; width: auto; display: block; }
.brand-edge-left { display: flex; }
.nav-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; flex: 1 1 auto; min-width: 0;
}
.site-nav > ul {
  list-style: none; display: flex; align-items: center; gap: 1.85rem; margin: 0; padding: 0;
}
.site-nav a,
.dropdown-toggle {
  font-family: "CCS Nav", "Arial Black", Impact, Arial, Helvetica, sans-serif;
}
.site-nav a {
  color: #fff; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.015em;
  text-transform: uppercase; opacity: 0.94;
  text-shadow: 0 1px 2px rgba(2, 17, 44, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.2);
  -webkit-text-stroke: 0.4px rgba(2, 17, 44, 0.3);
}
.site-nav a[aria-current="page"], .site-nav a:hover { opacity: 1; text-decoration: none; }
.nav-toggle {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 0.5rem; flex-shrink: 0;
}
.nav-toggle span { width: 22px; height: 2px; background: #fff; }

/* Dropdowns (Menu, About Us, Media). With a mouse they open on hover and
   close when the pointer leaves; on touch and keyboard the button opens
   them (.open is set by static/js/nav.js). */
.has-dropdown { position: relative; }
.dropdown-toggle {
  background: none; border: 0; cursor: pointer;
  color: #fff; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.015em;
  text-transform: uppercase; opacity: 0.94;
  text-shadow: 0 1px 2px rgba(2, 17, 44, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.2);
  -webkit-text-stroke: 0.4px rgba(2, 17, 44, 0.3);
  display: flex; align-items: center; gap: 0.3rem; padding: 0;
}
.dropdown-toggle:hover { opacity: 1; }
.chevron { font-size: 0.8rem; }
.dropdown-menu {
  list-style: none; margin: 0; padding: 0.5rem;
  position: absolute; top: calc(100% + 0.75rem); left: 0;
  background: var(--navy-alt); border: 1px solid var(--border); border-radius: 8px;
  min-width: 190px; display: none; flex-direction: column; z-index: 20;
}
.has-dropdown.open .dropdown-menu { display: block; }
@media (hover: hover) and (min-width: 1021px) {
  .has-dropdown:hover .dropdown-menu { display: block; }
  /* An invisible strip across the small gap between the button and its
     menu, so moving the pointer down into the menu doesn't count as
     leaving. It only exists while the dropdown is open. */
  .has-dropdown:hover::after,
  .has-dropdown.open::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.8rem;
  }
}
.dropdown-menu li a {
  display: block; padding: 0.5rem 0.6rem; border-radius: 6px;
  color: var(--text); opacity: 1; font-weight: 500;
}
.dropdown-menu li a:hover { background: var(--card); text-decoration: none; }

@media (max-width: 1020px) {
  .header-row { padding: 0.5rem 1.5rem; gap: 0.75rem; }
  .brand-mobile { display: flex; }
  .brand-edge { display: none; }
  .nav-wrap { flex: 0 0 auto; justify-content: flex-end; margin-left: auto; }
  .nav-toggle { display: flex; }
  /* The phone menu (Version 24): the header's own colour carried down, like
     the full-size menu bar, so it stands apart from the page; one full-width
     row per item with a line between, white bold type, the page you're on
     marked, and the Menu/Media lists in a darker band beneath their button.
     Each holiday theme sets --menu-bg and --menu-edge (themes.css). */
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--menu-bg, var(--gold));
    border-bottom: 4px solid var(--menu-edge, var(--gold-light));
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.6);
    max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
  .site-nav > ul > li { border-top: 1px solid rgba(255, 255, 255, 0.28); }
  .site-nav > ul > li:first-child { border-top: 0; }
  .site-nav > ul > li > a,
  .site-nav .dropdown-toggle {
    display: flex; align-items: center; width: 100%; min-height: 54px; padding: 0 1.5rem;
    font-size: 1.05rem; letter-spacing: 0.04em; opacity: 1; color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); -webkit-text-stroke: 0;
  }
  .site-nav .dropdown-toggle { justify-content: space-between; text-align: left; }
  .site-nav .chevron { font-size: 1.1rem; transition: transform 0.15s; }
  .has-dropdown.open > .dropdown-toggle .chevron { transform: rotate(180deg); }
  .site-nav > ul > li > a:active,
  .site-nav .dropdown-toggle:active { background: rgba(255, 255, 255, 0.14); }
  .site-nav a[aria-current="page"] { background: rgba(0, 0, 0, 0.22); box-shadow: inset 5px 0 0 var(--menu-edge, var(--gold-light)); }
  .dropdown-menu {
    position: static; display: none; min-width: 0; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: rgba(0, 0, 0, 0.34);
  }
  .has-dropdown.open .dropdown-menu { display: block; }
  .dropdown-menu li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .site-nav .dropdown-menu li a {
    display: flex; align-items: center; min-height: 50px; padding: 0 1.5rem 0 2.75rem; border-radius: 0;
    color: #fff; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }
  .site-nav .dropdown-menu li a:hover { background: none; }
  .site-nav .dropdown-menu li a:active { background: rgba(255, 255, 255, 0.14); }
}

@media (max-width: 480px) {
  .brand-logo { height: 50px; }
}

/* hero */
.hero {
  padding: 4rem 0 3rem;
  text-align: center;
}
/* The hero's text runs most of the way across a desktop screen (it
   used to sit in a 640px column, with wide empty margins beside it).
   On a phone every one of these is simply the width of the screen. */
.rainbow-art { width: min(520px, 80vw); height: auto; margin: 0 auto 1rem; display: block; }
.hero-title { width: min(900px, 92vw); height: auto; margin: 0 auto 1.5rem; display: block; }
.tagline {
  max-width: 960px; margin: 0 auto 1.5rem; color: var(--text-dim);
  font-size: 1.3rem; font-weight: 600; line-height: 1.5;
}
.hero-intro {
  max-width: 960px; margin: 0 auto 1.1rem; color: var(--text);
  font-size: 1.12rem; line-height: 1.6;
}
.hero-quote {
  max-width: 960px; margin: 0 auto 1.5rem; padding: 0; border: 0;
  font-size: 1.15rem; font-style: italic; color: var(--text);
}
.hero-quote cite {
  display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.85rem;
  font-weight: 700; letter-spacing: 0.04em; color: var(--gold-light);
}
.features-line { max-width: 960px; margin: 0 auto 1.5rem; color: var(--text-dim); font-size: 1.05rem; }
.age-badge {
  max-width: 960px; margin: 0 auto 1.75rem; color: var(--text-dim);
  font-size: 0.9rem; letter-spacing: 0.02em;
}
.age-badge-strict {
  display: inline-block; color: #ff5c5c; font-weight: 800;
  letter-spacing: 0.05em; margin-right: 0.4rem;
}
.hero-links { display: flex; gap: 1rem; justify-content: center; }
.btn {
  background: var(--gold); color: #fff; padding: 0.7rem 1.6rem;
  border-radius: 8px; font-weight: 700; text-decoration: none;
}
.btn:hover { text-decoration: none; opacity: 0.9; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* weekly + monthly event sections */
.wrap-cal { max-width: 1320px; }
.weekly { padding: 3rem 0 1rem; }
.monthly { padding: 2rem 0 5rem; }
.weekly h2, .monthly h2 { text-align: center; margin-bottom: 0.4rem; }
.section-sub { text-align: center; color: var(--text-dim); margin: 0 0 2rem; }

/* weekly calendar strip */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1rem;
}
.cal-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.cal-card-day {
  background: var(--gold); color: #fff; text-transform: uppercase;
  font-weight: 800; font-size: 0.7rem; letter-spacing: 0.08em;
  padding: 0.45rem 0.6rem; text-align: center;
}
.cal-card-image { aspect-ratio: 16 / 9; background: var(--navy-alt); }
.cal-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-card-body { padding: 0.9rem; display: flex; flex-direction: column; flex: 1; }
.cal-card-name { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.3rem; min-height: 2.3rem; }
.cal-card-meta { font-size: 0.72rem; color: var(--text); opacity: 0.8; margin-bottom: 0.5rem; }
.cal-card-desc {
  color: var(--text-dim); font-size: 0.76rem; margin: 0 0 0.6rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-card-extras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cal-card-extras li {
  font-size: 0.64rem; color: var(--text-dim); background: var(--navy-alt);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.5rem;
}
.cal-card-follow {
  display: block; margin-top: auto; padding-top: 0.7rem; font-size: 0.72rem; font-weight: 700;
}
.cal-card-placeholder { border-style: dashed; background: transparent; }
.cal-card-placeholder .cal-card-day { background: var(--navy-alt); color: var(--gold-light); }
.cal-card-placeholder .cal-card-body { justify-content: center; text-align: center; flex: 1; }
.cal-card-placeholder .cal-card-name { color: var(--gold-light); min-height: 0; }
.cal-card-placeholder .cal-card-desc {
  -webkit-line-clamp: unset; overflow: visible; font-size: 0.8rem;
}

@media (max-width: 1100px) { .cal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cal-grid { grid-template-columns: 1fr; } }

/* monthly feature cards */
.monthly-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.monthly-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
}
.monthly-card-image {
  position: relative; background: var(--navy-alt);
  max-height: 420px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.monthly-card-image img { width: auto; max-width: 100%; height: auto; max-height: 420px; display: block; }
.monthly-card-cadence {
  position: absolute; top: 0.75rem; left: 0.75rem; background: var(--gold); color: #fff;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 0.75rem; border-radius: 999px;
}
.monthly-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.monthly-card-name { font-weight: 700; font-size: 1.3rem; margin-bottom: 0.3rem; }
.monthly-card-meta { font-size: 0.9rem; opacity: 0.8; margin-bottom: 0.75rem; }
.monthly-card-desc { color: var(--text-dim); font-size: 0.95rem; margin: 0 0 0.85rem; }
.monthly-card-extras {
  list-style: none; margin: 0 0 0.85rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.monthly-card-extras li {
  font-size: 0.78rem; color: var(--text-dim); background: var(--navy-alt);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.65rem;
}
.monthly-card-follow {
  display: block; margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--border); font-size: 0.85rem; font-weight: 700;
}

/* events page (one-off / irregularly-dated specials) */
.events-page h1 { text-align: center; margin-bottom: 0.5rem; }
.events-page .section-sub { max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; }
.events-page .section-sub a { font-weight: 700; }
/* Special events as an album (home page and Events page): a strip of
   posters that scrolls sideways when there are many, like the photo
   albums. A few posters sit centred; choosing one opens .event-overlay. */
.event-album-hint { margin: 0 0 0.6rem; text-align: right; color: var(--text-dim); font-size: 0.85rem; }
.event-scroll {
  display: flex; gap: 1rem; justify-content: safe center;
  overflow-x: auto; overflow-y: hidden; padding: 0.25rem 0.25rem 0.9rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.event-scroll::-webkit-scrollbar { height: 8px; }
.event-scroll::-webkit-scrollbar-track { background: var(--navy-alt); border-radius: 999px; }
.event-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; }
.event-tile {
  flex: 0 0 260px; width: 260px; padding: 0; margin: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--card); color: var(--text); font: inherit;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.event-tile:hover, .event-tile:focus-visible { border-color: var(--gold-light); transform: translateY(-3px); }
.event-tile:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.event-tile-image { display: block; width: 100%; height: 260px; background: var(--navy-alt); }
.event-tile-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.event-tile-noimage {
  display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem;
  text-align: center; font-weight: 800; font-size: 1.2rem; color: var(--gold-light);
  background: linear-gradient(160deg, var(--card), var(--navy-alt));
}
.event-tile-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 1rem 0.95rem; }
.event-tile-name { font-weight: 700; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.event-tile-date { color: var(--gold-light); font-size: 0.86rem; font-weight: 600; }
.event-tile-more { color: var(--text-dim); font-weight: 400; }
.event-tile-cta { margin-top: 0.35rem; color: var(--text-dim); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.event-tile:hover .event-tile-cta { color: var(--gold-light); }

/* On the Events page the posters are larger, and larger still when
   there are only a few, so one or two events fill the space instead of
   sitting small in the middle of it. */
.event-scroll-large .event-tile { flex-basis: 340px; width: 340px; }
.event-scroll-large .event-tile-image { height: 340px; }
.event-scroll-large[data-count="3"] .event-tile { flex-basis: 400px; width: 400px; }
.event-scroll-large[data-count="3"] .event-tile-image { height: 400px; }
.event-scroll-large[data-count="1"] .event-tile, .event-scroll-large[data-count="2"] .event-tile { flex-basis: 520px; width: 520px; }
.event-scroll-large[data-count="1"] .event-tile-image, .event-scroll-large[data-count="2"] .event-tile-image { height: 520px; }
.event-scroll-large .event-tile-name { font-size: 1.2rem; }
.event-scroll-large .event-tile-date { font-size: 0.95rem; }
.event-scroll-large .event-tile-body { padding: 1rem 1.2rem 1.1rem; }

/* Home page weekly and monthly cards can be chosen too (they open the
   same floating box). */
[data-event-card] { cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
[data-event-card]:hover, [data-event-card]:focus-visible { border-color: var(--gold-light); transform: translateY(-3px); }
[data-event-card]:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* The floating box with one event's full details. Shares its arrows,
   close button and counter with the photo viewer (.lightbox-*). */
.event-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(2, 6, 16, 0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem 4.5rem;
}
.event-box-wrap { position: relative; width: min(100%, 940px); }
.event-box {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  max-height: calc(100vh - 7rem); overflow: hidden;
  background: var(--card); border: 2px solid var(--gold-light); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.event-box-noimage { width: min(100%, 560px); }
.event-box-noimage .event-box { grid-template-columns: minmax(0, 1fr); }
.event-box-image { background: #000; display: flex; align-items: center; justify-content: center; min-height: 0; }
.event-box-image img { display: block; max-width: 100%; max-height: calc(100vh - 7rem - 4px); width: auto; height: auto; object-fit: contain; }
.event-box-body { padding: 1.6rem 1.6rem 1.4rem; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.event-box-body h2 { margin: 0 0 0.2rem; }
/* A wide picture goes above the details instead of beside them. */
.event-box-wide { width: min(100%, 760px); }
.event-box-wide .event-box { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
.event-box-wide .event-box-image img { width: 100%; max-height: 52vh; }
.event-box-wide .event-box-body { overflow: visible; }
@media (max-width: 760px) {
  /* Narrow screens: poster above the details, the whole thing scrolls,
     and the arrows and counter sit in a row underneath the box. */
  .event-overlay {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "box box box" "prev count next";
    align-content: start; align-items: center; gap: 0.9rem 0.5rem; padding: 1.25rem 0.9rem; overflow-y: auto;
  }
  .event-box-wrap { grid-area: box; width: 100%; }
  .event-box { grid-template-columns: minmax(0, 1fr); max-height: none; overflow: hidden; }
  .event-box-image img { max-height: 55vh; }
  .event-box-body { overflow: visible; padding: 1.2rem 1.1rem 1.1rem; }
  .event-overlay .lightbox-nav { position: static; transform: none; }
  .event-overlay .lightbox-prev { grid-area: prev; }
  .event-overlay .lightbox-next { grid-area: next; }
  .event-overlay .lightbox-caption { grid-area: count; justify-self: center; margin: 0; }
  .event-overlay .lightbox-close { top: -10px; right: -6px; }
  .event-tile { flex-basis: 220px; width: 220px; }
  .event-tile-image { height: 220px; }
  /* Events page posters: as wide as the screen comfortably allows. */
  .event-scroll-large .event-tile, .event-scroll-large[data-count] .event-tile { flex-basis: min(82vw, 400px); width: min(82vw, 400px); }
  .event-scroll-large .event-tile-image, .event-scroll-large[data-count] .event-tile-image { height: min(82vw, 400px); }
}
@media (min-width: 761px) and (max-width: 1150px) {
  .event-scroll-large[data-count="2"] .event-tile, .event-scroll-large[data-count="3"] .event-tile { flex-basis: 340px; width: 340px; }
  .event-scroll-large[data-count="2"] .event-tile-image, .event-scroll-large[data-count="3"] .event-tile-image { height: 340px; }
}
.special-card-name { font-weight: 700; font-size: 1.3rem; margin-bottom: 0.2rem; }
.special-card-presented {
  color: var(--gold-light); font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.85rem;
}
.special-card-desc { color: var(--text-dim); font-size: 0.95rem; margin: 0 0 1rem; }
.special-card-dates {
  list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--border);
}
.special-card-dates li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.special-date { font-weight: 700; color: var(--gold-light); min-width: 170px; }
.special-time { color: var(--text-dim); font-size: 0.88rem; }
.special-note { color: var(--text-dim); font-size: 0.82rem; font-style: italic; }
.special-card-cover { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.75rem; }
.special-card-extras {
  list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.special-card-extras li {
  font-size: 0.78rem; color: var(--text-dim); background: var(--navy-alt);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.65rem;
}
/* "Add to your calendar", in the event box: one line per upcoming date. */
.event-cal { margin: 0.25rem 0 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.event-cal-title { margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--gold-light); }
.event-cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.event-cal-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; font-size: 0.9rem; }
.event-cal-day { font-weight: 600; }
.event-cal-links { display: inline-flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.event-cal-link { color: var(--frost); text-decoration: underline; text-underline-offset: 2px; padding: 0.15rem 0; }
.event-cal-link:hover { color: var(--text); }

.special-card-follow {
  display: block; margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--border); font-size: 0.85rem; font-weight: 700;
}

/* Events page: two sections, CC Slaughters' own events and Local PDX
   Events (static/js/local-events.js draws the second and runs its
   filters). */
.events-jump { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.75rem 0 0; }
.events-jump a {
  padding: 0.4rem 1rem; border: 1px solid var(--accent-border); border-radius: 999px;
  font-size: 0.85rem; font-weight: 700; color: var(--gold-light);
}
.events-jump a:hover { background: rgba(217, 163, 76, 0.12); text-decoration: none; }
.events-section { margin-top: 2.5rem; scroll-margin-top: 7rem; }
.events-section h2 { text-align: center; margin: 0 0 0.5rem; }
.events-eyebrow {
  margin: 0 0 0.25rem; text-align: center; color: var(--gold-light); font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.events-local { margin-top: 4.5rem; padding-top: 3rem; border-top: 1px solid var(--border); max-width: 1080px; }
.local-filters {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem 1rem;
  padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card);
}
.local-filter-wide { grid-column: span 2; }
.local-filter-full { grid-column: 1 / -1; }
.local-filter label, .local-filter-label {
  display: block; margin-bottom: 0.35rem; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-light);
}
.local-filter input, .local-filter select {
  width: 100%; background: var(--navy); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.55rem 0.65rem; font: inherit; color-scheme: dark;
}
.local-filter input:focus, .local-filter select:focus, .local-chip:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 1px; }
.local-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.local-chip {
  padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--navy);
  color: var(--text-dim); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.local-chip:hover { color: var(--text); border-color: var(--accent-border); }
.local-chip[aria-pressed="true"] { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); }
.local-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  min-height: 2.4rem; margin: 0.9rem 0 0.25rem; color: var(--text-dim); font-size: 0.9rem;
}
.local-summary .btn { padding: 0.35rem 0.85rem; font-size: 0.82rem; }
.local-day { margin-top: 1.6rem; }
.local-day-heading {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--text);
}
.local-day-tag {
  padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--gold-light); color: var(--navy);
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
.local-day-list {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.local-event {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.1rem;
  padding: 0.95rem 1.2rem; border-top: 1px solid var(--border); border-left: 4px solid var(--gold-light);
}
.local-event:first-child { border-top: 0; }
.local-event-time { color: var(--text); font-weight: 700; font-size: 0.92rem; padding-top: 0.1rem; }
.local-event-until { display: block; color: var(--text-dim); font-weight: 400; font-size: 0.8rem; }
.local-event-name { margin: 0; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.local-event-name a { color: var(--text); }
.local-event-name a:hover { color: var(--gold-light); }
.local-event-body p { margin: 0.2rem 0 0; }
.local-event-meta { color: var(--text-dim); font-size: 0.88rem; overflow-wrap: anywhere; }
.local-event-where { color: var(--text); }
.local-event-desc { color: var(--text-dim); font-size: 0.88rem; overflow-wrap: anywhere; }
.local-event-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin-top: 0.5rem !important; font-size: 0.8rem; color: var(--text-dim); }
.local-chip-static {
  padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--navy-alt); border: 1px solid var(--border);
  color: var(--gold-light); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.local-event-link { margin-left: auto; font-weight: 700; }
/* "Add to your calendar" under a local event (static/js/local-events.js). */
.local-event-cal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem; margin: 0.45rem 0 0 !important; font-size: 0.8rem; color: var(--text-dim); }
.local-event-cal a { color: var(--frost); text-decoration: underline; text-underline-offset: 2px; padding: 0.15rem 0; }
.local-event-cal a:hover { color: var(--text); }
@media (max-width: 520px) { .local-event-cal span { flex-basis: 100%; } }
.local-more { text-align: center; margin-top: 1.5rem; }
@media (max-width: 760px) {
  .local-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .local-event { grid-template-columns: minmax(0, 1fr); row-gap: 0.3rem; padding: 0.85rem 1rem; }
  .local-event-until { display: inline; margin-left: 0.4rem; }
}
@media (max-width: 420px) {
  .local-filters { grid-template-columns: minmax(0, 1fr); }
  .local-filter-wide { grid-column: auto; }
}

/* upcoming specials on the home page: the same album as the Events page */
.specials-teaser { padding: 1rem 0 5rem; }
.specials-teaser h2 { text-align: center; margin-bottom: 0.4rem; }
.specials-teaser .section-sub { margin-bottom: 1.5rem; }
.teaser-cta { text-align: center; margin-top: 1.25rem; }

/* generic pages */
.page { padding: 3rem 0 5rem; }
.page h1 { margin-bottom: 1.5rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.prose th, .prose td {
  text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border);
}
.prose th { color: var(--gold-light); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; }
.happy-hour-flyer {
  max-width: 320px; width: 100%; height: auto; display: block;
  margin: 0.5rem auto 1.5rem; border-radius: 12px; border: 1px solid var(--border);
}
.menu-video {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--accent-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); background: #000;
  /* Decorative only — no controls are rendered, and this belt-and-suspenders
     pointer-events:none (backed by JS in menu-video.js and the missing
     `controls` attribute) makes sure it can't be clicked, dragged, or
     right-clicked into a picture-in-picture / context menu. */
  pointer-events: none;
}

/* videos */
.video-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem; margin-top: 1.5rem;
}
.video-card { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: var(--card); }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* photos — each album is a contained, horizontally-scrollable strip so
   browsing a gallery never means scrolling the whole page */
.photo-album { margin: 1.5rem 0 2.5rem; }
.photo-album-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem;
}
.photo-album-head h2 { margin: 0; }
.photo-album-hint { color: var(--text-dim); font-size: 0.85rem; }
.photo-scroll {
  display: flex; gap: 0.75rem; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 0.85rem; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.photo-scroll .photo-thumb { flex: 0 0 auto; scroll-snap-align: start; }
.photo-scroll .photo-thumb img {
  width: 220px; height: 220px; object-fit: cover; border-radius: 8px; display: block;
}
.photo-scroll::-webkit-scrollbar { height: 8px; }
.photo-scroll::-webkit-scrollbar-track { background: var(--navy-alt); border-radius: 999px; }
.photo-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; }
.placeholder-note { color: var(--text-dim); font-style: italic; }
/* Privacy Policy and Text Message Terms, while text sign-up is switched
   off (layouts/shortcodes/texts-paused.html). */
.texts-paused { margin: 0 0 1.25rem; padding: 0.7rem 0.9rem; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--card); font-size: 0.95rem; }

@media (max-width: 560px) {
  .photo-scroll .photo-thumb img { width: 170px; height: 170px; }
}

/* photo lightbox — opens a clicked thumbnail in-page instead of a new tab */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2, 6, 16, 0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem; overflow: auto;
}
.lightbox-frame {
  position: relative; box-sizing: border-box;
  background: #000; padding: 14px; border: 3px solid var(--gold-light); border-radius: 6px;
  max-width: min(96vw, 1400px); max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
}
.lightbox-frame img {
  display: block; max-width: 100%; max-height: calc(90vh - 34px);
  width: auto; height: auto; object-fit: contain;
}
.lightbox-close {
  position: absolute; top: -16px; right: -16px; width: 34px; height: 34px;
  border-radius: 50%; background: #000; color: var(--gold-light); border: 2px solid var(--gold-light);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: var(--gold); color: #fff; }
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 101;
  width: 46px; height: 46px; border-radius: 50%;
  background: #000; color: var(--gold-light); border: 2px solid var(--gold-light);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover { background: var(--gold); color: #fff; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-caption {
  margin-top: 1rem; background: #fff; color: var(--navy);
  font-weight: 700; font-size: 0.9rem; padding: 0.5rem 1.25rem; border-radius: 999px;
}

@media (max-width: 560px) {
  .lightbox-nav { width: 36px; height: 36px; font-size: 1.2rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

/* drinks page */
.drinks-page .drinks-intro {
  max-width: 640px; margin: 0.5rem auto 2.5rem; text-align: center;
  color: var(--text-dim); font-size: 1.1rem; font-style: italic;
}
.drinks-page h2 { text-align: center; margin: 0 0 0.4rem; }
.drinks-page .section-sub { margin: 0 0 1.75rem; }
.drinks-page .section-eyebrow {
  display: block; text-align: center; color: var(--gold-light); font-weight: 800;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.5rem;
}

/* The ten cocktails sit in two even columns (five rows), so the last
   row is never a lone card. One column on a phone. */
.drink-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; margin: 0 0 3.5rem;
}
@media (max-width: 640px) {
  .drink-grid { grid-template-columns: minmax(0, 1fr); }
}
.drink-card {
  background: var(--card); border: 1px solid var(--accent-border);
  border-top: 3px solid var(--gold); border-radius: 14px;
  padding: 1.4rem 1.5rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.drink-card:hover {
  border-color: var(--gold-light); transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.drink-tag {
  display: block; font-weight: 800; font-size: 0.72rem; color: var(--gold-light);
  opacity: 0.75; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem;
}
.drink-tag.is-mocktail {
  display: inline-block; background: var(--gold); color: #fff; opacity: 1;
  font-size: 0.62rem; padding: 0.2rem 0.55rem; border-radius: 999px;
}
.drink-name { margin: 0 0 0.5rem; font-size: 1.15rem; }
.drink-desc { margin: 0; color: var(--text-dim); font-size: 0.92rem; }

.bars-banner {
  background: linear-gradient(160deg, var(--card), var(--navy-alt));
  border: 1px solid var(--accent-border); border-radius: 18px;
  padding: 2rem 2rem 2.25rem; text-align: center; margin: 0 0 3.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.bars-eyebrow {
  margin: 0 0 0.35rem; color: var(--gold-light); font-weight: 800; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.bars-banner h2 { margin: 0 0 0.5rem; }
.bars-intro { max-width: 560px; margin: 0 auto 1.75rem; color: var(--text-dim); }
.bars-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem; text-align: left;
}
.bar-card {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent-border);
  border-top: 3px solid var(--gold); border-radius: 12px; padding: 1.25rem 1.4rem;
}
.bar-card h3 { margin: 0 0 0.4rem; color: var(--gold-light); font-size: 1.05rem; }
.bar-card p { margin: 0; color: var(--text-dim); font-size: 0.92rem; }

.slushy-banner {
  background: linear-gradient(160deg, var(--navy-alt), var(--card));
  border: 1px solid var(--accent-border); border-radius: 18px;
  padding: 2rem 2rem 2.25rem; text-align: center; margin: 0 0 3.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.slushy-eyebrow {
  margin: 0 0 0.35rem; color: var(--frost); font-weight: 800; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.slushy-banner h2 { margin: 0 0 0.5rem; color: var(--text); }
.slushy-banner > p { max-width: 520px; margin: 0 auto 1.75rem; color: var(--text-dim); }
.slushy-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem; text-align: left;
}
.slushy-card {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent-border);
  border-top: 3px solid var(--frost); border-radius: 12px; padding: 1.25rem 1.4rem;
}
.slushy-card h3 { margin: 0 0 0.4rem; color: var(--frost); font-size: 1.05rem; }
.slushy-card p { margin: 0; color: var(--text-dim); font-size: 0.92rem; }

.mocktail-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem; margin: 0 0 3.5rem;
}
@media (max-width: 760px) {
  .mocktail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .mocktail-grid { grid-template-columns: minmax(0, 1fr); }
}
.mocktail-card {
  background: var(--card); border: 1px solid var(--accent-border);
  border-top: 3px solid var(--frost); border-radius: 12px;
  padding: 1.1rem 1.3rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.mocktail-card h3 { margin: 0 0 0.4rem; font-size: 1.02rem; color: var(--text); }
.mocktail-card p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }

.drinks-note { text-align: center; color: var(--text-dim); }

/* food page — two menus side by side. "Always Available" is the focus:
   it comes first, takes the wide column and carries the gold frame. The
   Beekies menu (the video is a scroll through the real menu board) sits
   beside it as a quieter panel, and drops underneath on smaller screens. */
.food-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 34%, 420px);
  gap: 2rem; align-items: start; margin: 0 0 2rem;
}
.food-page h2 { text-align: center; }

.available-banner {
  background: linear-gradient(160deg, var(--card), var(--navy-alt));
  border: 1px solid var(--gold); border-radius: 18px;
  padding: 2.5rem 2.25rem 2rem; text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.available-eyebrow, .beekies-eyebrow {
  margin: 0 0 0.35rem; color: var(--gold-light); font-weight: 800; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.available-banner h2 { margin: 0 0 0.6rem; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; }
.available-intro { max-width: 600px; margin: 0 auto 2rem; color: var(--text-dim); font-size: 1.05rem; }
.available-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem; text-align: left; margin: 0 0 1.75rem;
}
.available-card {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent-border);
  border-top: 3px solid var(--gold); border-radius: 12px; padding: 1rem 1.25rem;
}
.available-card h3 { margin: 0 0 0.35rem; font-size: 1.08rem; color: var(--text); }
.available-card p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }

.sauce-row { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.sauce-label {
  display: block; color: var(--gold-light); font-weight: 800; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.6rem;
}
.sauce-tags {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 0.5rem; justify-content: center;
}
.sauce-tags li {
  background: var(--navy-alt); border: 1px solid var(--accent-border); color: var(--text-dim);
  font-size: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 999px;
}
.available-note { margin: 1.5rem 0 0; color: var(--text-dim); font-style: italic; font-size: 0.92rem; }

.beekies-feature {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.75rem 1.5rem; text-align: center;
}
.beekies-feature h2 { margin: 0 0 0.35rem; font-size: 1.5rem; }
.beekies-sub { margin: 0 0 1.25rem; color: var(--text-dim); font-size: 0.92rem; }
.beekies-feature .menu-video { max-width: 100%; margin: 0 auto 1.1rem; }
.beekies-extra { margin: 0 0 1.1rem; color: var(--text); font-size: 0.95rem; }
.beekies-ig-link { display: inline-block; }

.food-allergen { text-align: center; color: var(--text-dim); font-size: 0.82rem; }

/* tablets and phones: one column, "Always Available" still first */
@media (max-width: 1020px) {
  .food-layout { grid-template-columns: 1fr; }
  .beekies-feature .menu-video { max-width: 440px; }
}
@media (max-width: 640px) {
  .available-banner { padding: 2rem 1.1rem 1.5rem; }
  .available-grid { grid-template-columns: 1fr; }
  .beekies-feature { padding: 1.5rem 1.1rem; }
}

/* Lists the owners manage from the dashboard (Food, Drinks, Queer PDX):
   static/js/managed-lists.js swaps the page's built-in copy for the
   current one. While it asks, the built-in copy is kept out of sight
   (never for long) so an old price doesn't flash first. */
.managed-loading { visibility: hidden; }
.food-managed { display: grid; gap: 2rem; min-width: 0; align-content: start; }
.menu-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.menu-card-head h3 { min-width: 0; }
.menu-price { color: var(--gold-light); font-weight: 800; white-space: nowrap; font-size: 0.98rem; }
.slushy-card .menu-price { color: var(--frost); }
.menu-section > .sauce-tags { margin: 0 0 3.5rem; }
.menu-section > .drinks-note { margin: -1.5rem 0 3.5rem; }
.menu-section:last-child > .drinks-note { margin: 1.5rem 0 0; }

/* Queer PDX — community/mission page */
.community-page .community-hero {
  background: linear-gradient(160deg, var(--card), var(--navy-alt));
  border: 1px solid var(--accent-border); border-radius: 18px;
  padding: 2.25rem 2rem 2.5rem; text-align: center; margin: 0 0 2.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.community-hero .community-eyebrow {
  margin: 0 0 0.35rem; color: var(--gold-light); font-weight: 800; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.community-hero h1 { margin: 0 0 1rem; }
.community-hero h3 {
  margin: 2rem 0 0.6rem; color: var(--gold-light); font-size: 1.15rem;
}
.community-hero p { max-width: 680px; margin: 0 auto 1rem; color: var(--text-dim); font-size: 1.02rem; }
.community-hero p:last-child { margin-bottom: 0; }
.community-hero p strong { color: var(--text); }
.community-quote {
  max-width: 560px; margin: 1.75rem auto; padding: 0.9rem 1.5rem;
  border-left: 3px solid var(--gold); text-align: left;
  font-size: 1.08rem; font-style: italic; color: var(--text);
}
.community-quote cite {
  display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.82rem;
  font-weight: 700; letter-spacing: 0.03em; color: var(--gold-light);
}

.community-eiq {
  background: rgba(111, 214, 224, 0.08); border: 1px solid rgba(111, 214, 224, 0.35);
  border-radius: 18px; padding: 1.75rem 2rem; text-align: center; margin: 0 0 3.5rem;
}
.community-eiq h2 { margin: 0 0 0.6rem; color: var(--frost); }
.community-eiq p { max-width: 620px; margin: 0 auto 1.25rem; color: var(--text-dim); }
.community-eiq .btn { background: var(--frost); color: var(--navy); }

/* jump nav — sticky pill row under the site header for quick category access */
.community-jumpnav {
  position: sticky; top: 86px; z-index: 5;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  background: var(--navy); padding: 0.85rem 0.5rem; margin: 0 0 2.5rem;
  border-bottom: 1px solid var(--border);
}
.community-jumpnav a {
  background: var(--card); border: 1px solid var(--accent-border); color: var(--text);
  font-weight: 700; font-size: 0.82rem; padding: 0.5rem 1.1rem; border-radius: 999px;
  text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease;
}
.community-jumpnav a:hover { border-color: var(--gold-light); color: var(--gold-light); text-decoration: none; }

.community-section { scroll-margin-top: 150px; }
.community-section .section-eyebrow {
  display: block; text-align: center; color: var(--gold-light); font-weight: 800;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.5rem;
}
.community-section h2 { text-align: center; margin: 0 0 0.4rem; }
.community-section > .section-sub { margin: 0 0 2rem; }

@media (max-width: 1020px) {
  .community-jumpnav { position: static; }
  .community-section { scroll-margin-top: 16px; }
}

.community-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem; margin: 0 0 3.5rem;
}
.community-card {
  background: var(--card); border: 1px solid var(--accent-border);
  border-top: 3px solid var(--gold); border-radius: 14px;
  padding: 1.5rem 1.6rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column;
}
.community-card-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--gold);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 0.9rem;
}
.community-card-logo {
  height: 68px; max-width: 210px;
  display: flex; align-items: center; justify-content: flex-start;
  margin-bottom: 1rem; flex-shrink: 0;
}
.community-card-logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}
.community-card h3 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.community-address { margin: 0 0 0.65rem; color: var(--text-dim); font-size: 0.82rem; }
.community-bio { margin: 0 0 1rem; color: var(--text-dim); font-size: 0.92rem; flex: 1; }
.community-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  padding-top: 0.9rem; border-top: 1px solid var(--border); margin-top: auto;
}
.community-contact { font-size: 0.82rem; color: var(--text-dim); }
.community-link {
  font-size: 0.85rem; font-weight: 700; color: var(--gold-light); text-decoration: none;
}
.community-link:hover { text-decoration: underline; }

.community-grid.is-neighbors .community-card { border-top-color: var(--frost); }
.community-grid.is-neighbors .community-card-icon { background: var(--frost); color: var(--navy); }
.community-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--frost); background: rgba(111, 214, 224, 0.12);
  border: 1px solid rgba(111, 214, 224, 0.35); border-radius: 999px;
  padding: 0.15rem 0.55rem; margin-bottom: 0.5rem;
}

/* the shortcut at the top of the page, straight to the directory */
.community-shortcut { text-align: center; margin: 0 0 1.75rem; }
#queer-businesses { scroll-margin-top: 110px; }
@media (max-width: 1020px) {
  #queer-businesses { scroll-margin-top: 16px; }
}

.community-outro { max-width: 640px; margin: 0 auto 1.5rem; text-align: center; color: var(--text-dim); }
.community-outro a { font-weight: 700; }

/* footer */
.site-footer { border-top: 1px solid var(--border); padding: 1.5rem 0 2rem; margin-top: 2rem; color: var(--text-dim); font-size: 0.9rem; }
.footer-row { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; }
.footer-address { margin: 0; font-size: 1rem; }
.footer-address a { color: var(--text); font-weight: 600; text-decoration: none; }
.footer-address a:hover { color: var(--gold-light); text-decoration: underline; }
.footer-address-pin { margin-right: 0.35rem; }
/* The links wrap onto a second line on a phone; each stays in one piece
   ("Google Maps & Reviews" never breaks in the middle). */
.footer-social { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }
.footer-social a { margin: 0 0.5rem; color: var(--text-dim); white-space: nowrap; }
.footer-social a:hover { color: var(--text); }
.footer-copy { margin: 0.5rem 0 0; }

/* contact hub: card grid linking to the five inquiry forms */
/* A quiet line under a page's main content ("Suggest an event",
   "Ask us to remove a photo"). */
.page-footnote { margin: 2.25rem 0 0; color: var(--text-dim); font-size: 0.92rem; text-align: center; }
.contact-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem; margin: 2.5rem 0 1rem;
}
.contact-card {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem; color: var(--text);
}
.contact-card:hover { border-color: var(--accent-border); text-decoration: none; }
.contact-card-title { font-weight: 700; font-size: 1.1rem; color: var(--gold-light); margin-bottom: 0.5rem; }
.contact-card-desc { color: var(--text-dim); font-size: 0.92rem; margin: 0; }

/* inquiry forms (security incident, lost & found, host an event, etc.) */
.wrap-narrow { max-width: 680px; }
.inquiry-back { margin-bottom: 1rem; font-size: 0.9rem; }
.inquiry-intro { color: var(--text-dim); margin-bottom: 0.5rem; }
.inquiry-routes-note { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 1.5rem; }
.inquiry-form { margin-top: 2rem; }
.field-row { margin-bottom: 1.25rem; }
.field-row label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.field-row .req { color: #ff5c5c; }
.field-help { color: var(--text-dim); font-size: 0.82rem; margin: 0.35rem 0 0; }
/* Per-field error shown right above an input (see static/js/forms.js
   and subscribe.js), e.g. "Please enter a valid email address." */
.field-error { color: var(--bad-fg, #ffb3b3); font-size: 0.88rem; font-weight: 600; margin: 0 0 0.4rem; }
.field-invalid, .field-invalid:focus { border-color: #ff5c5c !important; outline-color: #ff5c5c; }
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="date"],
.inquiry-form input[type="time"],
.inquiry-form input[type="number"],
.inquiry-form input[type="password"],
.inquiry-form input[type="search"],
.inquiry-form select,
.inquiry-form textarea {
  width: 100%; padding: 0.7rem 0.85rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--navy-alt); color: var(--text);
  font: inherit; font-size: 0.95rem;
}
.inquiry-form textarea { resize: vertical; min-height: 7rem; }
.inquiry-form input[type="file"] {
  padding: 0.55rem 0.6rem; color: var(--text-dim); font-size: 0.9rem;
}
.inquiry-form input[type="file"]::file-selector-button {
  background: var(--gold); color: #fff; border: 0; border-radius: 6px;
  padding: 0.5rem 0.9rem; font-weight: 700; margin-right: 0.75rem; cursor: pointer;
}
.inquiry-form input[type="file"]::file-selector-button:hover { opacity: 0.9; }
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  outline: 2px solid var(--gold-light); outline-offset: 1px;
}
/* Honeypot: visually off-screen for humans, still present in the DOM (and
   thus still reachable by unsophisticated bots that skip display:none) —
   see layouts/_default/inquiry.html and server/src/routes/contact.js. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.cf-turnstile { margin: 1.5rem 0; }
.inquiry-submit { border: 0; cursor: pointer; font-size: 1rem; }
.inquiry-submit:disabled { opacity: 0.6; cursor: default; }
.inquiry-status { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.92rem; }
.inquiry-status-success { background: rgba(76, 175, 100, 0.12); border: 1px solid rgba(76, 175, 100, 0.4); color: var(--ok-fg, #b7f0c4); }

/* about page ("Who We Are"): embedded news video + source link */
.about-news { margin: 2rem 0 3rem; }
.about-video-grid { margin: 0 0 1rem; }
.about-news-source { color: var(--text-dim); font-size: 0.9rem; word-break: break-word; }
.about-news-source a { color: var(--gold-light); }

/* about page: shared photo+bio card grid, used for both "Meet the
   Owners" (data/owners.yaml) and "Meet the Team" (data/staff.yaml) via
   layouts/partials/people-grid.html */
.people-heading { text-align: center; margin: 0 0 2rem; }
.people-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.75rem; max-width: 980px; margin: 0 auto 3rem;
}
.people-card { text-align: center; }

/* "Meet the Owners" gets its own framed panel so it visually reads as
   distinct from — not just the top row of — "Meet the Team" below it. */
.people-section-boxed {
  max-width: 1020px; margin: 0 auto 3rem; padding: 2.5rem 2rem 1rem;
  background: var(--card); border: 1px solid var(--accent-border);
  border-radius: 16px;
}
.people-section-boxed .people-grid { margin-bottom: 0.5rem; }

/* divider between "Meet the Owners" and "Meet the Team" */
.people-divider {
  max-width: 220px; margin: 0 auto 3rem; border: 0;
  border-top: 2px solid var(--accent-border);
}
.people-photo {
  width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 1rem; display: block; border: 2px solid var(--accent-border);
}
.people-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--gold-light);
  font-size: 2.5rem; font-weight: 700;
}
.people-name { font-weight: 700; color: var(--text); }
.people-role { color: var(--gold-light); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0.15rem 0 0.5rem; }
.people-bio { color: var(--text-dim); font-size: 0.9rem; margin: 0; }
.inquiry-status-error { background: rgba(255, 92, 92, 0.12); border: 1px solid rgba(255, 92, 92, 0.4); color: var(--bad-fg, #ffb3b3); }

/* hours page: two stacked, centred blocks in the same style: the
   opening hours (one panel, a cell per group of days), then the week's
   night-by-night happy hour schedule. */
.hours-block { max-width: 880px; margin: 2.25rem auto 0; }
.hours-block:first-of-type { margin-top: 0; }
.hours-block h2 { margin: 0 0 1rem; font-size: 1.6rem; line-height: 1.2; text-align: center; }
.hours-eyebrow {
  margin: 0 0 0.25rem; color: var(--gold-light); font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; text-align: center;
}
.hours-list {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--gold-light); border-radius: 14px;
}
.hours-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 1.15rem 1rem 1.25rem; text-align: center; border-left: 1px solid var(--border);
}
.hours-item:first-child { border-left: 0; }
.hours-days {
  color: var(--gold-light); font-size: 0.86rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.hours-time { color: var(--text); font-size: 1.45rem; font-weight: 800; white-space: nowrap; }
.hours-21plus {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.75rem;
  margin: 0.9rem 0 0; padding: 0.7rem 1rem; border-radius: 10px; text-align: center;
  background: rgba(217, 163, 76, 0.1); border: 1px solid var(--accent-border); font-size: 0.95rem;
}
.hours-more { max-width: 880px; margin: 1.5rem auto 0; text-align: center; color: var(--text-dim); font-size: 0.92rem; }
.hours-more p { margin: 0; }

/* The week, night by night: one row per day — the day and opening
   hours, what's on, and that day's happy hour. The coloured edge down
   the left runs through the pride rainbow, Monday to Sunday. */
.week-col h2 { margin-bottom: 0.3rem; }
.week-intro { margin: 0 0 1.1rem; color: var(--text-dim); font-size: 0.95rem; text-align: center; }
.week-list {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.week-day {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  column-gap: 1.25rem; row-gap: 0.5rem; align-items: center;
  padding: 0.9rem 1.25rem 0.9rem 1.3rem;
  border-top: 1px solid var(--border); border-left: 4px solid var(--day, var(--gold-light));
}
.week-day:first-child { border-top: 0; }
.week-day:nth-child(7n + 1) { --day: #e2468a; }
.week-day:nth-child(7n + 2) { --day: #e04545; }
.week-day:nth-child(7n + 3) { --day: #e58a2e; }
.week-day:nth-child(7n + 4) { --day: #e6d23c; }
.week-day:nth-child(7n + 5) { --day: #4caf58; }
.week-day:nth-child(7n + 6) { --day: #5a7df2; }
.week-day:nth-child(7n + 7) { --day: #b866e6; }
.week-day.is-today { background: rgba(217, 163, 76, 0.09); }
.week-when { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.week-name {
  color: var(--text); font-size: 0.86rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.week-open { color: var(--text-dim); font-size: 0.8rem; white-space: nowrap; }
.week-today {
  padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--gold-light); color: var(--navy);
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
.week-what p { margin: 0; }
.week-title { color: var(--text); font-weight: 700; line-height: 1.3; }
.week-note { color: var(--text-dim); font-size: 0.86rem; line-height: 1.45; margin-top: 0.1rem; }
.week-note-timed { display: grid; grid-template-columns: 5.1rem minmax(0, 1fr); column-gap: 0.5rem; }
.week-time { color: var(--text); font-weight: 600; white-space: nowrap; }
.week-happy {
  display: flex; flex-direction: column; align-items: center; margin: 0;
  padding: 0.4rem 0.75rem; border-radius: 10px; text-align: center; line-height: 1.25;
  background: rgba(217, 163, 76, 0.12); border: 1px solid var(--accent-border);
}
.week-happy-label {
  color: var(--gold-light); font-size: 0.64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.week-happy-time { color: var(--text); font-size: 1rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 640px) {
  /* Narrow screens: the opening hours become rows (days on the left,
     hours on the right), and in the schedule the day and happy hour
     share the top line with what's on underneath. */
  .hours-list { display: block; }
  .hours-item {
    flex-direction: row; justify-content: space-between; align-items: baseline; gap: 0.75rem;
    padding: 0.85rem 1rem; text-align: left; border-left: 0; border-top: 1px solid var(--border);
  }
  .hours-item:first-child { border-top: 0; }
  .hours-time { font-size: 1.1rem; }
  .week-day { grid-template-columns: minmax(0, 1fr) auto; padding: 0.85rem 1rem; }
  .week-what { grid-column: 1 / -1; grid-row: 2; }
  .week-happy { flex-direction: row; gap: 0.45rem; align-items: baseline; padding: 0.3rem 0.7rem; }
  .week-happy-time { font-size: 0.92rem; }
}
@media (max-width: 400px) {
  /* Very narrow phones: happy hour drops onto its own line under the day. */
  .week-day { grid-template-columns: minmax(0, 1fr); }
  .week-happy { grid-row: 2; justify-self: start; }
  .week-what { grid-row: 3; }
}

/* --------------------------------------------------------------------
   Mailing-list signup (footer, every page) — server/src/routes/public.js
   A single wide, shallow bar: the pitch on the left, the form in one
   row on the right. Stacks on narrow screens.
   -------------------------------------------------------------------- */
.subscribe-block {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 2rem;
  max-width: 1080px; margin: 0 auto 1.5rem; padding: 0.85rem 1.5rem;
  border: 1px solid var(--accent-border); border-radius: 12px;
  background: linear-gradient(160deg, var(--card), var(--navy-alt));
  text-align: left;
}
.subscribe-intro { flex: 1 1 19rem; min-width: 0; }
.subscribe-heading { margin: 0; color: var(--gold-light); font-size: 1.05rem; }
.subscribe-sub { color: var(--text-dim); font-size: 0.85rem; margin: 0.1rem 0 0; }
.subscribe-form {
  flex: 2 1 30rem; min-width: 0; margin: 0;
  display: flex; align-items: center; flex-wrap: wrap; column-gap: 0.9rem; row-gap: 0;
}
.subscribe-channels { display: flex; gap: 1rem; margin: 0.25rem 0; font-size: 0.88rem; }
.subscribe-channel-label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; white-space: nowrap; }
.subscribe-fields { flex: 1 1 13rem; display: flex; gap: 0.5rem; margin: 0.25rem 0; min-width: 0; }
.subscribe-fields input {
  flex: 1 1 9rem; min-width: 0; width: 100%; padding: 0.5rem 0.75rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 0.92rem;
}
.subscribe-form .subscribe-submit { padding: 0.5rem 1.2rem; margin: 0.25rem 0; cursor: pointer; font-size: 0.92rem; white-space: nowrap; }
/* The verification widget only appears when Cloudflare wants the visitor
   to do something (data-appearance="interaction-only" on the element).
   The rest of the time this row is empty and takes up no height. */
.subscribe-form .cf-turnstile { flex: 0 0 100%; margin: 0; display: flex; justify-content: flex-end; }
.subscribe-form .field-error { flex: 0 0 100%; order: -1; margin: 0; }
.subscribe-status { flex: 0 0 100%; margin: 0.4rem 0 0.15rem; padding: 0.5rem 0.8rem; border-radius: 8px; font-size: 0.86rem; }
@media (max-width: 640px) {
  .subscribe-block { padding: 0.85rem 1rem; }
  .subscribe-fields { flex-basis: 100%; }
  .subscribe-form .cf-turnstile { justify-content: flex-start; }
}
/* What texting needs, shown when "Text (SMS)" is ticked: date of birth
   and the agreement, full width under the row. The agreement's wording
   has to be readable right next to its tick box, so it is not shrunk to
   fine print. */
.subscribe-sms { flex: 0 0 100%; margin: 0.5rem 0 0.25rem; padding-top: 0.65rem; border-top: 1px solid var(--border); display: grid; gap: 0.6rem; }
/* With the texting block open, Sign Up sits under it, at the right. */
.subscribe-sms:not([hidden]) + .subscribe-submit { margin-left: auto; }
.subscribe-birth { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; font-size: 0.88rem; }
.subscribe-birth label { font-weight: 600; }
.subscribe-birth input {
  padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 0.92rem; color-scheme: dark;
}
.subscribe-birth-note { color: var(--text-dim); font-size: 0.82rem; }
.subscribe-consent { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.84rem; line-height: 1.45; color: var(--text); cursor: pointer; }
.subscribe-consent input { flex: 0 0 auto; margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; }
.subscribe-consent a { color: var(--gold-light); }
.subscribe-manage { flex: 0 0 100%; margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--text-dim); text-align: right; }
.subscribe-manage a { color: var(--gold-light); }
@media (max-width: 640px) {
  .subscribe-manage { text-align: left; }
}
.subscribe-status-success { background: rgba(76, 175, 100, 0.12); border: 1px solid rgba(76, 175, 100, 0.4); color: var(--ok-fg, #b7f0c4); }
.subscribe-status-error { background: rgba(255, 92, 92, 0.12); border: 1px solid rgba(255, 92, 92, 0.4); color: var(--bad-fg, #ffb3b3); }

/* --------------------------------------------------------------------
   /subscribe/manage/ — the link every confirmation/broadcast points to.
   -------------------------------------------------------------------- */
.manage-channel {
  border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem;
  margin-bottom: 1rem;
}
.manage-channel h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.manage-channel .btn { margin: 0.4rem 0.5rem 0 0; }
.manage-request-form { display: grid; gap: 0.6rem; max-width: 30rem; margin: 1.25rem 0 0.75rem; }
.manage-request-form label { font-weight: 600; }
.manage-request-form input[type="text"] {
  padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 1rem;
}
.manage-request-form .btn { justify-self: start; cursor: pointer; }
.manage-request-missing { padding: 0.6rem 0.85rem; border-radius: 8px; background: rgba(255, 92, 92, 0.12); border: 1px solid rgba(255, 92, 92, 0.4); color: var(--bad-fg, #ffb3b3); }

/* --------------------------------------------------------------------
   /admin/ — owner dashboard (login + events/picks/subscribers/broadcast)
   -------------------------------------------------------------------- */
.wrap-admin { max-width: 64rem; }
.admin-page [data-admin-login] .inquiry-form { max-width: 24rem; margin: 2rem auto 0; }
.admin-page [data-admin-login] .cf-turnstile { display: flex; justify-content: center; margin: 0.75rem 0; }
.admin-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin: 1.5rem 0 1rem; color: var(--text-dim); font-size: 0.9rem;
}
.admin-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-tab {
  padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font-size: 0.9rem; cursor: pointer;
}
.admin-tab:hover { color: var(--text); }
.admin-tab-active { background: var(--gold); border-color: var(--gold); color: var(--text); }
.admin-panel { padding-bottom: 2rem; }
.admin-form { margin-top: 1rem; }
.admin-form-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0 1.5rem;
}
.admin-form-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.admin-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.admin-list-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); flex-wrap: wrap;
}
.admin-list-row-actions { display: flex; gap: 0.5rem; }
.admin-list-row-actions .btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.admin-badge {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--navy-alt); color: var(--gold-light); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.admin-badge-draft { background: rgba(255, 92, 92, 0.15); color: var(--bad-fg, #ffb3b3); }
.admin-badge-wait { background: rgba(217, 163, 76, 0.25); color: var(--warn-fg, #ffe2ad); }
.admin-row-note { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
/* Local PDX Events tab: rows carry a few lines of detail, so the text
   takes the room and the buttons sit beside (or, when narrow, under) it. */
.admin-local-row { align-items: flex-start; flex-wrap: nowrap; }
.admin-local-row > div:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.admin-local-row .admin-list-row-actions { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; max-width: 16rem; }
.admin-local-row-removed > div:first-child { opacity: 0.6; }
.admin-source-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }
.admin-source-ok { color: var(--ok-fg, #b7f0c4); }
.admin-source-bad { color: var(--bad-fg, #ffb3b3); }
.admin-source-wait, .admin-source-when { color: var(--text-dim); }
.admin-panel[data-admin-panel="local"] > .section-sub,
.admin-panel[data-admin-panel="events"] > .section-sub { text-align: left; margin-bottom: 1.25rem; }
.admin-panel[data-admin-panel="local"] form.admin-mfa-card { margin-top: 1rem; }
.admin-old-picks { border-color: var(--accent-border); }
@media (max-width: 700px) {
  .admin-local-row { flex-wrap: wrap; }
  .admin-local-row > div:first-child { flex-basis: 100%; }
  /* max-width 100%: the buttons wrap onto more lines instead of pushing the page wider than a phone. */
  .admin-local-row .admin-list-row-actions { max-width: 100%; justify-content: flex-start; }
}
/* Queer PDX tab: suggestions from the website (Version 17). The visitor's
   text takes the room; where-to-add and the buttons sit beside it, or
   under it on a phone. */
.admin-community-card { margin-bottom: 1.5rem; }
.admin-community-row { align-items: flex-start; flex-wrap: nowrap; margin-top: 0.6rem; }
.admin-community-body { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.admin-community-text { margin: 0.35rem 0 0; white-space: pre-line; }
.admin-community-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }
.admin-community-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; flex-shrink: 0; width: 15rem; }
.admin-community-actions .btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.admin-community-where { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--text-dim); }
.admin-community-where select {
  width: 100%; background: var(--navy); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.45rem 0.5rem; font: inherit; font-size: 0.9rem; color-scheme: dark;
}
.admin-community-where select:focus { outline: 2px solid var(--gold-light); outline-offset: 1px; }
@media (max-width: 700px) {
  .admin-community-row { flex-wrap: wrap; }
  .admin-community-actions { width: 100%; }
}
.admin-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-stat {
  padding: 0.75rem 1.25rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); font-size: 0.9rem; color: var(--text-dim);
}
.admin-stat strong { color: var(--text); font-size: 1.2rem; display: block; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.88rem; }
.admin-table th, .admin-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); text-align: left; }
.admin-table th { color: var(--gold-light); font-weight: 600; }

/* Image upload field (events/picks "Image") — file input + preview
   thumbnail + remove button, replacing the old plain-text Image URL
   field. See static/js/admin.js's wireImageField(). */
.admin-image-field-body { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.admin-image-preview {
  width: 120px; height: 80px; border-radius: 6px; overflow: hidden; flex: 0 0 auto;
  background: var(--navy-alt); border: 1px solid var(--border);
}
.admin-image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-image-preview-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 0.75rem; text-align: center; padding: 0.25rem;
}
.admin-image-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-image-actions input[type="file"] { max-width: 260px; }
.admin-upload-hint { color: var(--text-dim); font-size: 0.8rem; margin: 0; }

/* Photo albums tab — each album's card holds its own upload control +
   thumbnail grid with per-photo delete. */
.admin-album-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 1rem;
  margin-bottom: 1rem; background: var(--card);
}
.admin-album-photos-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0; }
.admin-album-photo { position: relative; width: 96px; height: 96px; border-radius: 6px; overflow: hidden; }
.admin-album-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-album-photo .admin-album-photo-del {
  position: absolute; top: 2px; right: 2px; background: rgba(0, 0, 0, 0.7); color: #fff;
  border: none; border-radius: 4px; font-size: 0.8rem; line-height: 1; padding: 0.2rem 0.4rem; cursor: pointer;
}
.admin-album-photo .admin-album-photo-del:hover { background: rgba(0, 0, 0, 0.9); }

/* Subscribers tab — select-all / per-row checkbox column for bulk delete */
.admin-table td:first-child, .admin-table th:first-child { width: 2rem; text-align: center; }

@media (max-width: 760px) {
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-table { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------------------
   /admin/ — two-step verification (MFA): second login step, first-time
   enrollment, one-time recovery codes, and the Security tab. See
   static/js/admin.js and server/src/routes/mfa.js.
   ------------------------------------------------------------------ */
.admin-mfa { max-width: 44rem; margin: 2rem auto 0; }
.admin-mfa h3, .admin-mfa-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--gold-light); }
.admin-mfa-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
/* Security tab: the password box at the top is a card, not a form of its
   own; it borrows .inquiry-form only for the look of its box. */
.admin-sec-password-card { margin-top: 0; }
.admin-mfa-card p { margin: 0 0 0.75rem; }
.admin-mfa-card .inquiry-form { margin: 0; max-width: none; }
.admin-mfa-options { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.admin-mfa-options .admin-mfa-card { margin-bottom: 0; }
.admin-mfa-recovery summary { cursor: pointer; color: var(--text-dim); }
.admin-mfa-recovery[open] summary { margin-bottom: 0.75rem; }
.admin-mfa-restart { margin-top: 1rem; }
.admin-mfa-steps { margin: 0.75rem 0 0.5rem; padding-left: 1.25rem; }
.admin-mfa-qr {
  display: block; width: 200px; height: 200px; margin: 0.5rem 0 0.75rem;
  background: #fff; border-radius: 6px; image-rendering: pixelated;
}
.admin-mfa-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem; letter-spacing: 0.06em; word-break: break-all;
  background: var(--navy-alt); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5rem 0.75rem; user-select: all;
}
.admin-mfa-code-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1.5rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1rem 1rem 2.5rem; margin: 1rem 0;
}
.admin-mfa-code-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem; letter-spacing: 0.05em;
}

/* The Keys tab (static/js/admin-keys.js). */
.admin-panel[data-admin-panel="keys"] > .section-sub { text-align: left; max-width: 46rem; margin-left: 0; }
.admin-keys-rules { max-width: 46rem; margin: 0 0 1.5rem; padding-left: 1.2rem; color: var(--text-dim); font-size: 0.95rem; }
.admin-keys-rules li { margin: 0.2rem 0; }
.admin-keys-card { max-width: 46rem; }
.admin-keys-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-bottom: 0.5rem; }
.admin-keys-head h3 { margin: 0; }
.admin-keys-pill { font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.admin-keys-pill-on { color: var(--ok-fg, #b7f0c4); border-color: rgba(120, 220, 150, 0.45); background: rgba(120, 220, 150, 0.1); }
.admin-keys-pill-warn { color: var(--warn-fg, #ffe2ad); border-color: var(--accent-border); background: rgba(217, 163, 76, 0.15); }
.admin-keys-about { color: var(--text); }
.admin-keys-line { color: var(--text-dim); font-size: 0.92rem; }
.admin-keys-form { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.admin-keys-fields .field-row { margin-bottom: 0.9rem; }
/* The owner's email, for the browser's benefit only (see admin-keys.js). */
.admin-keys-who { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.admin-keys-form-title { font-weight: 700; margin-bottom: 0.25rem !important; }
.admin-keys-where { margin: 0 0 0.9rem !important; }
/* A key is drawn as dots while it is typed (where the browser can). */
.admin-keys-secret { -webkit-text-security: disc; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; }
.admin-keys-card > .inquiry-status { margin: 0.75rem 0 0; }
.admin-keys-pill-urgent { color: var(--bad-fg, #ffb3b3); border-color: rgba(255, 92, 92, 0.5); background: rgba(255, 92, 92, 0.15); }
/* The certificate card's "i" button: a hint on hover, the steps on press. */
.admin-keys-info {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto;
  background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.7rem 0.2rem 0.25rem;
  color: var(--text-dim); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.admin-keys-info:hover, .admin-keys-info[aria-expanded="true"] { color: var(--text); border-color: var(--accent-border); }
.admin-keys-info:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.admin-keys-info-icon {
  display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 1.5px solid var(--gold-light); color: var(--gold-light); font-weight: 700; font-style: italic; font-family: Georgia, "Times New Roman", serif; font-size: 0.85rem; line-height: 1;
}
.admin-keys-renew { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.admin-keys-steps { margin: 0 0 0.75rem; padding-left: 1.3rem; }
.admin-keys-steps li { margin: 0 0 0.6rem; }
.admin-keys-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
.admin-keys-cmd code {
  flex: 1 1 18rem; min-width: 0; overflow-wrap: anywhere; padding: 0.5rem 0.7rem; border-radius: 6px;
  background: var(--navy); border: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--frost);
}
.admin-keys-copy { padding: 0.35rem 0.9rem !important; }
.admin-keys-notes { margin: 0; padding-left: 1.2rem; color: var(--text-dim); font-size: 0.92rem; }
.admin-keys-notes li { margin: 0.25rem 0; }
.admin-keys-kept-sub { text-align: left !important; max-width: 46rem; margin-left: 0 !important; }
.admin-keys-kept { max-width: 46rem; margin: 0; }
.admin-keys-kept dt { font-weight: 700; color: var(--gold-light); margin-top: 0.9rem; }
.admin-keys-kept dd { margin: 0.2rem 0 0; color: var(--text-dim); font-size: 0.95rem; }
@media (max-width: 700px) {
  .admin-mfa-options { grid-template-columns: 1fr; }
  .admin-mfa-code-list { grid-template-columns: 1fr; }
}

/* --- Owner dashboard: Applications tab ------------------------------- */
.admin-tab-count {
  display: inline-block; min-width: 1.35rem; padding: 0 0.4rem; margin-left: 0.25rem;
  border-radius: 999px; background: #c0392b; color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center;
}
.admin-panel[data-admin-panel="applications"] .section-sub { text-align: left; margin-bottom: 1.25rem; }
.admin-section-heading { margin-top: 2.5rem; }
.admin-section-heading.admin-section-first { margin-top: 0.5rem; }
.admin-panel[data-admin-panel="local"] .admin-section-heading + .section-sub { text-align: left; margin-bottom: 1rem; }
.admin-filters {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem 1rem;
  padding: 1rem; margin-bottom: 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
}
.admin-filter-wide { grid-column: span 2; }
.admin-filter label {
  display: block; margin-bottom: 0.3rem; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-light);
}
.admin-filter input, .admin-filter select {
  width: 100%; background: var(--navy); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.5rem 0.6rem; font: inherit; color-scheme: dark;
}
.admin-filter input:focus, .admin-filter select:focus { outline: 2px solid var(--gold-light); outline-offset: 1px; }
.admin-filter-count { color: var(--text-dim); font-size: 0.9rem; margin-right: auto; }
.admin-cell-note { color: var(--text-dim); font-size: 0.8rem; white-space: nowrap; }
.admin-notice-state { margin: 0 0 1rem; color: var(--text-dim); }
.admin-notice-state.admin-notice-on { color: var(--ok-fg, #b7f0c4); font-weight: 600; }
.admin-panel[data-admin-panel="applications"] form.admin-mfa-card { max-width: 44rem; }
@media (max-width: 560px) {
  .admin-filter-wide { grid-column: auto; }
}
.admin-apps-table td:first-child, .admin-apps-table th:first-child { width: auto; text-align: left; }
.admin-apps-table .btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.admin-status { white-space: nowrap; }
.admin-status-new { background: rgba(192, 57, 43, 0.25); color: var(--bad-fg, #ffc9c2); }
.admin-status-reviewing { background: rgba(217, 163, 76, 0.2); color: var(--gold-light); }
.admin-status-interview_requested { background: rgba(111, 214, 224, 0.15); color: var(--frost); }
.admin-status-interview_scheduled { background: rgba(76, 175, 100, 0.18); color: var(--ok-fg, #b7f0c4); }
.admin-status-interviewed { background: rgba(111, 214, 224, 0.15); color: var(--frost); }
.admin-status-offer, .admin-status-hired { background: rgba(76, 175, 100, 0.3); color: var(--ok-fg, #d6f7de); }
.admin-status-declined, .admin-status-withdrawn { background: rgba(170, 178, 200, 0.15); color: var(--text-dim); }
.admin-app-name { margin: 1rem 0 0.25rem; }
.admin-app-name .admin-badge { font-size: 0.8rem; vertical-align: middle; }
.admin-app-meta { color: var(--text-dim); margin: 0 0 1.25rem; }
.admin-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.admin-app-card { max-width: none; }
.admin-app-grid form.admin-app-card { margin-top: 0; max-width: none; }
.admin-app-fields { margin: 0; }
.admin-app-fields dt {
  color: var(--gold-light); font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; margin-top: 0.75rem;
}
.admin-app-fields dt:first-child { margin-top: 0; }
.admin-app-fields dd { margin: 0.15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-app-history { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.admin-app-history li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.admin-app-history li:last-child { border-bottom: 0; }
.admin-app-history span { color: var(--text-dim); margin-right: 0.5rem; }
.admin-app-history em { color: var(--text-dim); }
/* Send Update: choosing Local PDX events (filters above a scrolling
   list of tick boxes), and the read-over of a server-written update. */
.admin-local-picker { margin-bottom: 1rem; }
.admin-local-choices { max-height: 19rem; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: rgba(0, 0, 0, 0.15); }
.admin-local-choice { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); font-weight: 400; cursor: pointer; }
.admin-local-choice:last-child { border-bottom: 0; }
.admin-local-choice input { margin-top: 0.25rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--gold-light); }
.admin-local-choice > span { min-width: 0; overflow-wrap: anywhere; }
.admin-local-choice .admin-row-note { display: block; }
.admin-local-choice .admin-badge { margin-left: 0.25rem; }
.admin-local-choice-picked { background: rgba(217, 163, 76, 0.1); }
.admin-check { display: flex; gap: 0.6rem; align-items: center; font-weight: 600; cursor: pointer; }
.admin-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--gold-light); }
.admin-written { margin-top: 1rem; padding: 0.85rem 1rem; border: 1px dashed var(--border); border-radius: 8px; }
.admin-written p { margin: 0 0 0.5rem; }
.admin-written pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.9rem; color: var(--text-dim); max-height: 22rem; overflow-y: auto; }
.admin-change-label { color: var(--text-dim); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
/* What a history line changed: "Guest count: 40 → 60", and for long
   text a fold-away Was / Now. Lines by the person who sent the request
   (through their emailed link) get a gold edge. */
.admin-app-history .admin-change { margin: 0.3rem 0 0 0; padding-left: 0.75rem; border-left: 2px solid var(--border); font-size: 0.86rem; overflow-wrap: anywhere; }
.admin-app-history details.admin-change summary { cursor: pointer; color: var(--gold-light); }
.admin-app-history .admin-change p { margin: 0.25rem 0; }
.admin-app-history .admin-change-label { color: var(--text-dim); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.admin-app-history .admin-change span { margin-right: 0; }
.admin-app-history li.admin-history-them { border-left: 3px solid var(--gold-light); padding-left: 0.6rem; }
.admin-app-danger { margin-top: 1.5rem; }
.admin-slot-day { margin: 1.25rem 0 0.25rem; font-size: 1rem; color: var(--gold-light); }
.admin-link-btn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--gold-light); cursor: pointer; text-decoration: underline;
}
@media (max-width: 760px) {
  .admin-app-grid { grid-template-columns: 1fr; }
}

/* --- Dashboard: Hosting, Send Update, Menus / Queer PDX, Users --------- */
.admin-panel[data-admin-panel="hosting"] .section-sub,
.admin-panel[data-admin-panel="menus"] .section-sub,
.admin-panel[data-admin-panel="queerpdx"] .section-sub,
.admin-panel[data-admin-panel="broadcast"] .section-sub,
.admin-panel[data-admin-panel="users"] .section-sub { text-align: left; margin-bottom: 1.25rem; }
.admin-panel[data-admin-panel="hosting"] form[data-hosting-form],
.admin-panel[data-admin-panel="users"] form.admin-mfa-card { max-width: 44rem; margin-top: 1rem; }
.admin-prewrap { white-space: pre-wrap; }

/* Hosting: request statuses, and "what's already on" for a date */
.admin-hosting-new { background: rgba(192, 57, 43, 0.25); color: var(--bad-fg, #ffc9c2); }
.admin-hosting-in_discussion { background: rgba(217, 163, 76, 0.2); color: var(--gold-light); }
.admin-hosting-date_held { background: rgba(111, 214, 224, 0.15); color: var(--frost); }
.admin-hosting-confirmed { background: rgba(76, 175, 100, 0.3); color: var(--ok-fg, #d6f7de); }
.admin-hosting-completed { background: rgba(76, 175, 100, 0.15); color: var(--ok-fg, #b7f0c4); }
.admin-hosting-declined, .admin-hosting-cancelled { background: rgba(170, 178, 200, 0.15); color: var(--text-dim); }
.admin-day { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.admin-day:first-of-type { padding-top: 0; }
.admin-day:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-day-title { margin: 0 0 0.35rem; }
.admin-day-list { list-style: none; margin: 0 0 0.6rem; padding: 0; font-size: 0.92rem; }
.admin-day-list li { padding: 0.15rem 0; overflow-wrap: anywhere; }
.admin-day-list .admin-cell-note { display: inline-block; min-width: 7.5rem; white-space: normal; }
.admin-day-taken { color: var(--warn-fg, #ffe2ad); font-weight: 600; }
.admin-day .btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.admin-hosting-edit { margin-top: 0.75rem; }
.admin-hosting-edit summary { cursor: pointer; color: var(--gold-light); font-size: 0.9rem; }
.admin-hosting-edit[open] summary { margin-bottom: 0.75rem; }

/* Send Update: when it goes out */
.admin-when { border: 0; padding: 0; margin: 0.5rem 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.admin-when legend {
  padding: 0; margin-bottom: 0.4rem; font-weight: 600; color: var(--text);
}
.admin-when label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.admin-when-options { margin: 0 0 1rem; }
.admin-inline { display: flex; align-items: center; gap: 0.6rem; }
.admin-inline input { width: 5.5rem; }
.admin-weekdays { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.admin-weekdays label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.admin-when-preview { margin: 0.75rem 0 0; color: var(--text-dim); font-size: 0.92rem; min-height: 2.6em; }
.admin-when-preview strong { color: var(--text); }
.admin-when-problem { color: var(--bad-fg, #ffb3b3); }
.admin-flyer-preview { width: 150px; height: 190px; }
.admin-flyer-preview img { width: 100%; height: 100%; object-fit: contain; }
.admin-flyer-field .admin-image-actions { flex: 1 1 16rem; min-width: 0; }
.admin-flyer-field .admin-image-actions .btn { align-self: flex-start; }

/* Menus / Queer PDX editor */
.admin-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; }
.admin-switch-btn {
  padding: 0.5rem 1.4rem; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font: inherit; font-weight: 700; cursor: pointer;
}
.admin-switch-btn:hover { color: var(--text); }
.admin-switch-on { background: var(--card); border-color: var(--gold-light); color: var(--text); }
.admin-switch .btn { margin-left: auto; padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.admin-ls-section { max-width: none; margin-top: 1.25rem; }
.admin-ls-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.admin-ls-head h3 { margin: 0; }
.admin-ls-head .admin-list-row-actions { flex-wrap: wrap; }
.admin-ls-item { flex-wrap: nowrap; align-items: center; background: rgba(255, 255, 255, 0.03); }
.admin-ls-item > div:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.admin-ls-item .admin-list-row-actions { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.admin-ls-move { min-width: 2.2rem; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.admin-ls-move:disabled { opacity: 0.35; cursor: default; }
.admin-ls-logo { float: left; width: 48px; height: 36px; object-fit: contain; margin: 0.1rem 0.75rem 0 0; }
.admin-ls-form { max-width: 44rem; border-color: var(--gold-light); }
.admin-ls-form .admin-image-preview img { object-fit: contain; }
@media (max-width: 700px) {
  .admin-ls-item { flex-wrap: wrap; }
  .admin-ls-item > div:first-child { flex-basis: 100%; }
  .admin-ls-item .admin-list-row-actions { justify-content: flex-start; }
}

/* Dashboard → Site Theme (static/js/admin-theme.js). */
.admin-panel[data-admin-panel="theme"] .section-sub { text-align: left; margin-bottom: 1rem; max-width: 60rem; }
.admin-theme-now { max-width: 60rem; border-left: 4px solid var(--gold-light); }
.admin-theme-now h3 { font-size: 1.2rem; }
.admin-theme-now .admin-form-actions { margin-top: 0.75rem; }
.admin-theme-apply { max-width: none; margin: 0; }
.admin-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.admin-theme-card {
  position: relative; display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  background: var(--card); border: 2px solid var(--border); border-radius: 10px;
}
.admin-theme-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.admin-theme-card img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.admin-theme-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; padding: 0.55rem 0.7rem; }
.admin-theme-name { font-weight: 700; margin-right: auto; }
.admin-theme-card a { font-size: 0.85rem; }
.admin-theme-card:hover { border-color: var(--accent-border); }
.admin-theme-card.is-chosen { border-color: var(--gold-light); box-shadow: 0 0 0 2px var(--gold-light); }
.admin-theme-card:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.admin-theme-on { background: rgba(92, 200, 120, 0.2); color: var(--ok-fg, #b8f0c6); }
.admin-theme-howlong input[type="date"] { margin-left: 0.4rem; width: auto; }
.admin-theme-form-title { margin: 0 0 0.75rem; font-size: 1.05rem; }
/* Theme and Repeats on one line, the two dates on the next. */
.admin-panel[data-admin-panel="theme"] .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; }
.admin-panel[data-admin-panel="theme"] .admin-form > .field-row { max-width: 44rem; }
.admin-theme-row .admin-list-row-actions { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
@media (max-width: 640px) {
  .admin-theme-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .admin-panel[data-admin-panel="theme"] .admin-form-grid { grid-template-columns: 1fr; }
  .admin-theme-row .admin-list-row-actions { justify-content: flex-start; }
}

/* Users */
.admin-role-owner { background: rgba(217, 163, 76, 0.25); color: var(--warn-fg, #ffe2ad); }
.admin-role-manager { background: rgba(111, 214, 224, 0.15); color: var(--frost); }
.admin-role-events { background: rgba(190, 140, 255, 0.18); color: var(--violet-fg, #e2ccff); }
.admin-role-hiring { background: rgba(76, 175, 100, 0.16); color: var(--ok-fg, #b7f0c4); }
/* Users tab: the roles, as tick boxes (a person can hold several), and
   the short guide to what each one opens. */
.admin-roles { border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem 1rem 0.6rem; margin: 0 0 1.25rem; min-width: 0; }
.admin-roles legend { font-weight: 600; padding: 0 0.4rem; }
.admin-role-option { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0; font-weight: 400; cursor: pointer; }
.admin-role-option input { margin-top: 0.25rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--gold-light); }
.admin-role-option > span { min-width: 0; }
.admin-role-option .admin-cell-note { white-space: normal; font-size: 0.85rem; }
.admin-role-option input:disabled + span { opacity: 0.6; }
.admin-role-guide ul { list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: 0.9rem; color: var(--text-dim); }
.admin-role-guide li { padding: 0.25rem 0; }
.admin-user-row { align-items: flex-start; flex-wrap: nowrap; }
.admin-user-row > div:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.admin-user-row .admin-list-row-actions { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; max-width: 22rem; }
.admin-user-confirm { max-width: 44rem; border-color: #ffb3b3; margin: 0; }
.admin-temp-password {
  border: 2px solid var(--gold-light); border-radius: 10px; background: var(--card);
  padding: 1rem 1.25rem; margin: 1rem 0; max-width: 44rem;
}
.admin-temp-password h3 { margin: 0 0 0.5rem; }
.admin-temp-code {
  display: inline-block; padding: 0.4rem 0.75rem; border-radius: 6px; background: var(--navy);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem;
  letter-spacing: 0.06em; color: var(--text); user-select: all; margin-right: 0.5rem;
}
/* Recycling Bin */
.admin-bin-row { align-items: flex-start; flex-wrap: nowrap; gap: 0.9rem; }
.admin-bin-what { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.admin-bin-row .admin-list-row-actions { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.admin-bin-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--navy); }
.admin-bin-soon { color: var(--bad-fg, #ffb3b3); font-weight: 600; }
@media (max-width: 700px) {
  .admin-bin-row { flex-wrap: wrap; }
  .admin-bin-what { flex-basis: calc(100% - 56px - 0.9rem); }
  .admin-bin-row .admin-list-row-actions { max-width: 100%; justify-content: flex-start; flex-basis: 100%; }
}
@media (max-width: 700px) {
  .admin-user-row { flex-wrap: wrap; }
  .admin-user-row > div:first-child { flex-basis: 100%; }
  .admin-user-row .admin-list-row-actions { max-width: 100%; justify-content: flex-start; }
}

/* --- Interview booking page (/interview/) ---------------------------- */
.interview-page .wrap { max-width: 720px; }
.interview-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.25rem 1.5rem; margin: 1.25rem 0;
}
.interview-card h2 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--gold-light); }
.interview-card p { margin: 0 0 0.6rem; }
.interview-when { font-size: 1.2rem; font-weight: 700; }
.interview-day { margin: 1.5rem 0 0.6rem; font-size: 1.05rem; }
.interview-slots { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.interview-slot {
  background: transparent; color: var(--text); border: 1px solid var(--accent-border);
  border-radius: 8px; padding: 0.7rem 1rem; font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.interview-slot small { display: block; font-weight: 400; color: var(--text-dim); }
.interview-slot:hover, .interview-slot:focus-visible { border-color: var(--gold-light); background: rgba(217, 163, 76, 0.12); }
.interview-slot[aria-pressed="true"] { background: var(--gold); border-color: var(--gold-light); }
.interview-slot[aria-pressed="true"] small { color: var(--text); }
.interview-confirm { margin-top: 1.5rem; }
.interview-note { color: var(--text-dim); font-size: 0.9rem; }

/* --- Careers page: the owners' "not currently hiring" notice ---------- */
.inquiry-notice {
  margin: 1.25rem 0 1.5rem; padding: 0.9rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--accent-border); border-left: 4px solid var(--gold-light);
  background: rgba(217, 163, 76, 0.1); color: var(--text); font-weight: 600; white-space: pre-line;
}

/* --------------------------------------------------------------------
   Home page: "a new chapter" (layouts/index.html, wording in
   content/_index.md). One framed box between the welcome and the week.
   -------------------------------------------------------------------- */
.new-chapter { padding: 2.5rem 0 0.5rem; }
.new-chapter-box {
  max-width: 820px; margin: 0 auto; padding: 1.6rem 1.75rem 1.5rem;
  border: 1px solid var(--accent-border); border-left: 5px solid var(--gold-light); border-radius: 12px;
  background: linear-gradient(160deg, var(--card), var(--navy-alt));
}
.new-chapter-box h2 { margin: 0 0 0.6rem; font-size: 1.5rem; line-height: 1.2; }
.new-chapter-text { margin: 0 0 1.1rem; color: var(--text); font-size: 1.02rem; line-height: 1.6; max-width: 62ch; }
.new-chapter-links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.new-chapter-press { color: var(--text-dim); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 2px; }
.new-chapter-press:hover { color: var(--text); }
.hero-links { flex-wrap: wrap; }
@media (max-width: 640px) {
  .new-chapter { padding-top: 1.75rem; }
  .new-chapter-box { padding: 1.25rem 1.1rem 1.2rem; }
  .new-chapter-box h2 { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------
   Plan Your Visit (layouts/_default/visit.html, content/visit.md)
   -------------------------------------------------------------------- */
.visit-intro { font-size: 1.1rem; margin: 0 0 0.5rem; }
.visit-welcome { color: var(--text-dim); margin: 0 0 2rem; max-width: 70ch; }
.visit-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0 0 2.5rem; }
.visit-fact {
  padding: 1.1rem 1.25rem; border: 1px solid var(--accent-border); border-radius: 12px;
  background: linear-gradient(160deg, var(--card), var(--navy-alt));
}
.visit-fact h2 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--gold-light); }
.visit-fact p { margin: 0 0 0.3rem; }
.visit-fact a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.visit-fact-small { color: var(--text-dim); font-size: 0.9rem; }
.visit-fact .visit-fact-small a { color: var(--gold-light); }
.visit-hours { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 0.2rem; }
.visit-hours li { display: flex; justify-content: space-between; gap: 1rem; }
.visit-hours li span:last-child { white-space: nowrap; font-weight: 600; }
/* Two columns that fill top to bottom (the groups are different
   lengths, so a grid would leave holes); one column on a phone. */
.visit-sections { columns: 2 24rem; column-gap: 3rem; }
.visit-section { break-inside: avoid; margin: 0 0 2.25rem; }
.visit-section h2 { margin: 0 0 0.9rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--gold); font-size: 1.3rem; }
.visit-list { margin: 0; display: grid; gap: 1.1rem; }
.visit-item dt { font-weight: 700; margin: 0 0 0.25rem; }
.visit-item dd { margin: 0; color: var(--text); line-height: 1.6; max-width: 65ch; }
.visit-item dd a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }

/* Footer: the small row of page links above the copyright line. */
.footer-links { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.25rem; font-size: 0.88rem; }
.footer-links a { color: var(--text-dim); white-space: nowrap; }
.footer-links a:hover { color: var(--text); }

/* Hours page: the pointer to Plan Your Visit under the opening hours. */
.hours-visit { margin: 0.9rem 0 0; font-size: 0.92rem; }
.hours-visit a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }

/* Dashboard → Visitors (static/js/admin-visitors.js). */
.admin-visitors-privacy { max-width: 60rem; margin: 0 0 1.25rem; padding: 0.8rem 1rem; border-left: 4px solid var(--frost); background: var(--card); border-radius: 6px; color: var(--text-dim); font-size: 0.92rem; }
.admin-visitors-privacy strong { color: var(--text); }
.admin-visitors-controls { max-width: 20rem; grid-template-columns: 1fr; }
.admin-visitors-empty { max-width: 46rem; }
.admin-visitors-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; max-width: 46rem; }
.admin-visitors-stat { margin-bottom: 0; }
.admin-visitors-stat p { margin: 0; }
.admin-visitors-stat-label { color: var(--text-dim); font-size: 0.9rem; }
.admin-visitors-stat-value { font-size: 2.2rem; font-weight: 700; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.admin-visitors-stat-compare { color: var(--text-dim); font-size: 0.88rem; min-height: 1.2em; }
.admin-visitors-note { margin: 0.6rem 0 0; }
.admin-visitors-plot { display: flex; gap: 0.5rem; align-items: stretch; }
.admin-visitors-axis { display: flex; flex-direction: column; justify-content: space-between; min-width: 2.2rem; text-align: right; color: var(--text-dim); font-size: 0.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.admin-visitors-svg { display: block; flex: 1; min-width: 0; width: 100%; height: 12rem; overflow: visible; touch-action: pan-y; }
.admin-visitors-grid-line { stroke: var(--border); stroke-width: 1; }
.admin-visitors-base { stroke: var(--text-dim); stroke-width: 1; }
.admin-visitors-bar { fill: var(--gold-light); }
.admin-visitors-hit { fill: transparent; }
.admin-visitors-day-on .admin-visitors-bar { fill: var(--frost); }
.admin-visitors-day-on .admin-visitors-hit { fill: rgba(255, 255, 255, 0.05); }
.admin-visitors-ends { display: flex; justify-content: space-between; margin: 0.3rem 0 0 2.7rem; color: var(--text-dim); font-size: 0.78rem; }
.admin-visitors-readout { margin: 0.5rem 0 0.75rem; color: var(--text); font-size: 0.92rem; min-height: 1.4em; }
.admin-visitors-details { margin: 0 0 1.5rem; }
.admin-visitors-details summary { cursor: pointer; color: var(--gold-light); font-size: 0.92rem; }
.admin-visitors-scroll { max-height: 22rem; overflow-y: auto; max-width: 30rem; }
.admin-visitors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.admin-visitors-grid .admin-mfa-card { margin-bottom: 0; min-width: 0; }
.admin-visitors-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; table-layout: fixed; }
.admin-visitors-table th, .admin-visitors-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; }
.admin-visitors-table th { color: var(--gold-light); font-weight: 600; }
.admin-visitors-table th:not(:first-child), .admin-visitors-num { width: 5.5rem; text-align: right !important; font-variant-numeric: tabular-nums; }
.admin-visitors-name { overflow-wrap: anywhere; }
.admin-visitors-none { color: var(--text-dim); font-style: italic; }
@media (max-width: 600px) {
  .admin-visitors-grid { grid-template-columns: 1fr; }
  .admin-visitors-svg { height: 9rem; }
  .admin-visitors-table th:not(:first-child), .admin-visitors-num { width: 4.2rem; }
}
/* --------------------------------------------------------------------
   Forms made on the dashboard's Forms tab: their public page
   (layouts/_default/custom-form.html, static/js/custom-form.js) and the
   tab itself (static/js/admin-forms.js).
   -------------------------------------------------------------------- */
.custom-form-intro p { margin: 0 0 0.75rem; }
[data-custom-title] { overflow-wrap: anywhere; }
.custom-choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.custom-choices legend { display: block; font-weight: 600; margin-bottom: 0.4rem; padding: 0; }
.field-row .custom-choice { font-weight: 400; margin: 0; display: flex; gap: 0.6rem; align-items: center; padding: 0.25rem 0; cursor: pointer; }
.custom-choice input { width: 1.05rem; height: 1.05rem; flex-shrink: 0; accent-color: var(--gold-light); }
.custom-choices.field-invalid { outline: 1px solid rgba(255, 92, 92, 0.6); outline-offset: 6px; border-radius: 4px; }
.admin-forms-sub { text-align: left; margin-bottom: 1rem; }
.admin-forms-inboxes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); margin-bottom: 1rem; }
.admin-forms-inbox { margin: 0; }
.admin-forms-address { font-weight: 600; overflow-wrap: anywhere; }
.admin-forms-address-missing { color: var(--bad-fg, #ffb3b3); }
.admin-forms-row { flex-wrap: wrap; }
.admin-forms-main { min-width: 0; flex: 1 1 20rem; }
.admin-forms-link { display: inline-block; }
.admin-forms-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 26rem; }
.admin-forms-row-area { flex: 1 1 100%; }
.admin-forms-row > .inquiry-status { flex: 1 1 100%; margin: 0.5rem 0 0; }
.admin-forms-editor { max-width: 52rem; margin-top: 1rem; }
.admin-forms-subheading { margin: 1.5rem 0 0.4rem; color: var(--gold-light); }
.admin-forms-questions { display: grid; gap: 0.9rem; margin: 0.75rem 0; }
.admin-forms-question { margin: 0; }
.admin-forms-question-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.admin-forms-question .admin-check { margin: 0.25rem 0 0.75rem; font-weight: 400; }
.admin-forms-cc { margin-top: 0.25rem; }
/* "Your password" under a "Back to the Usual" line or the On box: a little
   room, so its label doesn't sit right against the line above. */
.admin-forms-password { margin-top: 1rem; }
@media (max-width: 640px) {
  .admin-forms-actions { max-width: 100%; justify-content: flex-start; }
}

/* ====================================================================
   Queer PDX hub (Version 17)
   The hub (/queer-pdx/, layouts/queer-pdx/list.html) and its guide
   pages (layouts/queer-pdx/single.html). The lists on the guide pages
   are drawn by layouts/partials/pdx/list.html at build time and by
   static/js/managed-lists.js (drawGuide) from the live data, with the
   same markup. The directory keeps its .community-* styles above.
   ==================================================================== */
.pdx-page h1 { margin: 0 0 0.75rem; line-height: 1.15; }
.pdx-intro { font-size: 1.1rem; line-height: 1.6; margin: 0 0 2rem; max-width: 68ch; color: var(--text); }
.pdx-page a:focus-visible,
.pdx-faq-q:focus-visible {
  outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 4px;
}

/* Breadcrumb: Queer PDX / This page */
.pdx-crumbs { margin: 0 0 0.9rem; font-size: 0.88rem; }
.pdx-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0; }
.pdx-crumbs li { color: var(--text-dim); }
.pdx-crumbs li + li::before { content: "/"; content: "/" / ""; margin: 0 0.5rem; color: var(--border); color: #3a4d70; }
.pdx-crumbs a { font-weight: 600; }
.pdx-back { margin: 3rem 0 0; font-size: 0.92rem; }

/* --- Hub ----------------------------------------------------------- */
.pdx-hub-cards {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.1rem;
}
.pdx-hub-cards li { display: flex; }
/* Five guides: three across, then two wider ones, rather than leaving a hole. */
@media (min-width: 960px) {
  .pdx-hub-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pdx-hub-cards li { grid-column: span 2; }
  .pdx-hub-cards li:nth-child(4):nth-last-child(2),
  .pdx-hub-cards li:nth-child(5):last-child { grid-column: span 3; }
}
/* (The story box's "Our Commitment" line sat off-centre: its own margin
   rule above dropped the auto side margins.) */
.community-hero .community-eyebrow { margin-left: auto; margin-right: auto; }
.pdx-hub-card {
  flex: 1; display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.3rem 1.45rem 1.4rem; border-radius: 14px; color: var(--text);
  background: linear-gradient(160deg, var(--card), var(--navy-alt));
  border: 1px solid var(--accent-border); border-top: 3px solid var(--gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pdx-hub-card:hover { text-decoration: none; border-color: var(--gold-light); transform: translateY(-2px); }
.pdx-hub-card-title { font-size: 1.18rem; font-weight: 800; color: var(--gold-light); line-height: 1.3; }
.pdx-hub-card-arrow { display: inline-block; transition: transform 0.15s ease; }
.pdx-hub-card:hover .pdx-hub-card-arrow { transform: translateX(3px); }
.pdx-hub-card-desc { color: var(--text-dim); font-size: 0.94rem; line-height: 1.5; }

/* "Need support right now?" — calm, not alarming */
.pdx-support {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.4rem 1.5rem;
  margin: 0 0 3rem; padding: 1rem 1.4rem; border-radius: 12px;
  background: rgba(111, 214, 224, 0.07); border: 1px solid rgba(111, 214, 224, 0.3);
}
.pdx-support h2 { margin: 0; font-size: 1.02rem; color: var(--frost); }
.pdx-support p { margin: 0; color: var(--text); }
.pdx-support a[href^="tel:"] { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pdx-support-more a { font-weight: 700; white-space: nowrap; }
@media (max-width: 860px) {
  .pdx-support { grid-template-columns: 1fr; }
  .pdx-support-more a { white-space: normal; }
}

/* "Know a group or resource we should list?" */
.pdx-suggest {
  margin: 3rem 0 0; padding: 1.75rem 2rem; text-align: center; border-radius: 18px;
  background: linear-gradient(160deg, var(--card), var(--navy-alt)); border: 1px solid var(--accent-border);
}
.pdx-suggest h2 { margin: 0 0 0.5rem; font-size: 1.4rem; }
.pdx-suggest p { max-width: 560px; margin: 0 auto 1.25rem; color: var(--text-dim); }
.pdx-suggest .btn { display: inline-block; }
.pdx-hub .community-eiq { margin-bottom: 0; }

/* --- Guide pages: shared ------------------------------------------- */
.pdx-jumpnav { position: static; justify-content: flex-start; padding: 0 0 1.5rem; margin: 0 0 2.5rem; }
.pdx-jumpnav a { white-space: normal; }
.pdx-section { margin: 0 0 3.5rem; scroll-margin-top: 110px; }
.pdx-section > h2 {
  margin: 0 0 0.75rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--gold);
  font-size: 1.5rem; line-height: 1.25;
}
.pdx-section > .section-eyebrow {
  margin: 0 0 0.35rem; color: var(--gold-light); font-weight: 800; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pdx-section > .section-sub { text-align: left; max-width: 68ch; margin: 0 0 1.5rem; }
.pdx-note { margin: 1.25rem 0 0; color: var(--text-dim); font-size: 0.82rem; font-style: italic; max-width: 75ch; }
.pdx-text p { margin: 0 0 0.75rem; }
.pdx-text p:last-child { margin-bottom: 0; }
.pdx-text a { text-decoration: underline; text-underline-offset: 2px; }
.pdx-more { margin: 0.9rem 0 0; }
.pdx-card-where { margin: 0 0 0.5rem; color: var(--text-dim); font-size: 0.84rem; }
.pdx-page h3, .pdx-page h4 { overflow-wrap: break-word; }
.pdx-text, .pdx-card-contact, .pdx-crisis-contact { overflow-wrap: anywhere; }
@media (max-width: 1020px) { .pdx-section { scroll-margin-top: 90px; } }

/* "If you're in immediate danger…" at the top of Resources & Support */
.pdx-urgent {
  margin: 0 0 2.25rem; padding: 1.1rem 1.4rem; max-width: 820px; border-radius: 12px;
  background: linear-gradient(160deg, var(--card), var(--navy-alt));
  border: 1px solid rgba(111, 214, 224, 0.35); border-left: 5px solid var(--frost);
}
.pdx-urgent p { margin: 0; font-size: 1.06rem; line-height: 1.6; }
.pdx-urgent a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pdx-urgent a strong { color: var(--frost); font-size: 1.12em; }

/* --- faq: an accordion ---------------------------------------------- */
/* On a wide screen the question groups sit two across (everything else
   still runs the full width). Opening a question only grows its own row. */
@media (min-width: 960px) {
  .pdx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; align-items: start; }
  .pdx-list > * { grid-column: 1 / -1; }
  .pdx-list > .pdx-section-faq { grid-column: auto; }
}
.pdx-faq { border-top: 1px solid var(--border); }
.pdx-faq-item { border-bottom: 1px solid var(--border); }
.pdx-faq-q {
  list-style: none; cursor: pointer; position: relative;
  padding: 0.95rem 2.5rem 0.95rem 0.25rem; font-weight: 700; font-size: 1.04rem; line-height: 1.4;
}
.pdx-faq-q::-webkit-details-marker { display: none; }
.pdx-faq-q::after {
  content: ""; position: absolute; right: 0.6rem; top: 50%;
  width: 0.55rem; height: 0.55rem; margin-top: -0.4rem;
  border-right: 2px solid var(--gold-light); border-bottom: 2px solid var(--gold-light);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.pdx-faq-item[open] > .pdx-faq-q::after { transform: rotate(-135deg); margin-top: -0.1rem; }
.pdx-faq-q:hover { color: var(--gold-light); }
.pdx-faq-a { padding: 0 0.25rem 1.25rem; max-width: 72ch; color: var(--text); line-height: 1.65; }

/* --- itinerary: two days side by side ------------------------------- */
.pdx-itinerary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1.5rem; align-items: start; }
.pdx-day {
  padding: 1.4rem 1.5rem 0.6rem; border-radius: 14px;
  background: linear-gradient(160deg, var(--card), var(--navy-alt)); border: 1px solid var(--accent-border);
}
.pdx-day-title {
  margin: 0 0 1.1rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--navy); background: var(--gold-light); display: inline-block;
  padding: 0.2rem 0.75rem; border-radius: 999px;
}
.pdx-stops { list-style: none; margin: 0; padding: 0; }
.pdx-stop { position: relative; padding: 0 0 1.4rem 1.5rem; border-left: 2px solid var(--border); margin-left: 0.4rem; }
.pdx-stop:last-child { border-left-color: transparent; }
.pdx-stop::before {
  content: ""; position: absolute; left: -7px; top: 0.3rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 0 3px var(--card);
}
.pdx-stop-when { margin: 0 0 0.15rem; color: var(--gold-light); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.pdx-stop-name { margin: 0 0 0.15rem; font-size: 1.08rem; }
.pdx-stop-where { margin: 0 0 0.45rem; color: var(--text-dim); font-size: 0.84rem; }
.pdx-stop .pdx-text { color: var(--text-dim); font-size: 0.93rem; }
.pdx-stop .pdx-more { margin-top: 0.5rem; }

/* --- cards: resources, groups, dates -------------------------------- */
.pdx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.pdx-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.35rem 1.45rem; border-radius: 14px; background: var(--card);
  border: 1px solid var(--accent-border); border-top: 3px solid var(--gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.pdx-card > * { align-self: stretch; }
.pdx-card > .community-tag { align-self: flex-start; }
.pdx-card h3 { margin: 0 0 0.35rem; font-size: 1.12rem; line-height: 1.3; }
.pdx-card-contact { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 500; color: var(--text); }
.pdx-card .pdx-text { color: var(--text-dim); font-size: 0.93rem; }
.pdx-card .pdx-more { margin-top: auto; padding-top: 0.9rem; }
.pdx-card-when {
  margin: 0 0 0.7rem; padding-left: 0.7rem; border-left: 2px solid var(--frost);
  color: var(--frost); font-size: 0.86rem; font-weight: 600; line-height: 1.45;
}
.pdx-section-dates .pdx-card { border-top-color: var(--frost); }

/* --- crisis: the highlighted box ------------------------------------ */
.pdx-section-crisis {
  padding: 1.6rem 1.75rem 1.75rem; border-radius: 18px;
  background: rgba(111, 214, 224, 0.06); border: 1px solid rgba(111, 214, 224, 0.35);
}
.pdx-section-crisis > h2 { border-bottom-color: var(--frost); }
.pdx-crisis-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.pdx-crisis-item { padding: 1.1rem 1.25rem; border-radius: 12px; background: var(--navy); border: 1px solid var(--border); }
.pdx-crisis-item h3 { margin: 0 0 0.4rem; font-size: 1.08rem; }
.pdx-crisis-contact { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 600; color: var(--frost); line-height: 1.5; }
.pdx-crisis-item .pdx-text { color: var(--text-dim); font-size: 0.92rem; }

/* --- story ---------------------------------------------------------- */
.pdx-story { max-width: 72ch; }
.pdx-story-part + .pdx-story-part { margin-top: 2rem; }
.pdx-story-part h3 { margin: 0 0 0.5rem; font-size: 1.22rem; color: var(--gold-light); }
.pdx-story-part .pdx-text { font-size: 1.04rem; line-height: 1.75; }
.pdx-story-part .pdx-text p { margin-bottom: 1rem; }

/* --- timeline: years down the left, a line through the dots --------- */
.pdx-timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 860px; }
.pdx-timeline::before {
  content: ""; position: absolute; top: 0.6rem; bottom: 0.6rem; left: calc(5rem + 0.9rem - 1px);
  width: 2px; background: var(--border);
}
.pdx-timeline-item {
  position: relative; display: grid; grid-template-columns: 5rem 1fr; column-gap: 1.8rem;
  padding: 0 0 1.35rem;
}
.pdx-timeline-item::before {
  content: ""; position: absolute; left: calc(5rem + 0.9rem - 6px); top: 0.45rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 0 4px var(--navy);
}
.pdx-timeline-year { margin: 0; grid-column: 1; text-align: right; font-weight: 800; color: var(--gold-light); font-variant-numeric: tabular-nums; line-height: 1.6; }
.pdx-timeline-item > .pdx-text,
.pdx-timeline-item > .pdx-more { grid-column: 2; }
.pdx-timeline-item .pdx-text { color: var(--text); line-height: 1.6; }
@media (max-width: 640px) {
  .pdx-timeline::before { left: 5px; }
  .pdx-timeline-item { grid-template-columns: 1fr; padding-left: 1.75rem; }
  .pdx-timeline-item::before { left: 0; top: 0.4rem; }
  .pdx-timeline-year { text-align: left; }
  .pdx-timeline-item > .pdx-text, .pdx-timeline-item > .pdx-more { grid-column: 1; }
}

/* --- tour: numbered stops along a route ----------------------------- */
.pdx-tour { list-style: none; margin: 0; padding: 0; counter-reset: pdx-stop; max-width: 860px; }
.pdx-tour-stop { counter-increment: pdx-stop; position: relative; padding: 0 0 1.75rem 3.4rem; }
.pdx-tour-stop::before {
  content: counter(pdx-stop); position: absolute; left: 0; top: 0;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #fff; font-weight: 800; border: 2px solid var(--gold-light);
}
.pdx-tour-stop::after {
  content: ""; position: absolute; left: calc(1.15rem - 1px); top: 2.6rem; bottom: 0.3rem;
  border-left: 2px dashed #3a4d70;
}
.pdx-tour-stop:last-child::after { display: none; }
.pdx-tour-stop h3 { margin: 0.25rem 0 0.2rem; font-size: 1.12rem; }
.pdx-tour-stop .pdx-text { color: var(--text); line-height: 1.65; }

/* Web-address boxes on the forms (Suggest a Group's link, and Suggest an
   Event's) were left out of the shared input styles above and showed as
   plain white browser boxes. */
.inquiry-form input[type="url"] {
  width: 100%; padding: 0.7rem 0.85rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--navy-alt); color: var(--text);
  font: inherit; font-size: 0.95rem;
}
/* (focus: the shared .inquiry-form input:focus ring above already applies) */

/* Smaller jump links on a phone, so ten of them don't fill the screen. */
@media (max-width: 640px) {
  .pdx-jumpnav { gap: 0.45rem; }
  .pdx-jumpnav a { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
}

/* Header: Queer PDX is the last dropdown; its menu opens leftwards so it
   never runs off the right edge. */
@media (min-width: 1021px) {
  .site-nav > ul > .has-dropdown:last-child .dropdown-menu { left: auto; right: 0; }
  .site-nav > ul > .has-dropdown:last-child .dropdown-menu a { white-space: nowrap; }
}

@media (max-width: 640px) {
  .pdx-intro { font-size: 1.02rem; }
  .pdx-section > h2 { font-size: 1.3rem; }
  .pdx-section-crisis { padding: 1.2rem 1rem 1.25rem; margin-left: -0.25rem; margin-right: -0.25rem; }
  .pdx-day { padding: 1.2rem 1.1rem 0.4rem; }
  .pdx-suggest { padding: 1.4rem 1.1rem; }
  .pdx-urgent { padding: 1rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pdx-hub-card, .pdx-hub-card-arrow, .pdx-faq-q::after { transition: none; }
  .pdx-hub-card:hover, .pdx-hub-card:hover .pdx-hub-card-arrow { transform: none; }
}

/* ===================================================================
   Version 18: reviews (home and About), the phone menu (/order/),
   tickets (/tickets/), and their dashboard tabs.
   =================================================================== */

/* "What People Are Saying": real reviews, quote first. On a phone they
   scroll sideways one card at a time; wider, they sit in a row. */
.reviews { padding: 3rem 0 1rem; }
.reviews h2 { margin: 0 0 1.25rem; }
.reviews-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr);
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem;
}
.review-card {
  margin: 0; scroll-snap-align: start; display: flex; flex-direction: column;
  padding: 1.25rem 1.25rem 1rem; border-radius: 10px; background: var(--card);
  border-left: 3px solid var(--gold-light);
}
.review-stars { margin: 0 0 0.5rem; color: var(--gold-light); letter-spacing: 0.12em; font-size: 1rem; }
.review-quote { margin: 0 0 1rem; flex: 1; font-size: 1.02rem; line-height: 1.55; }
.review-quote p { margin: 0 0 0.6rem; }
.review-quote p:first-child::before { content: "\201C"; }
.review-quote p:last-child::after { content: "\201D"; }
.review-by { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.9rem; }
.review-author { font-weight: 700; }
.review-source { color: var(--text-dim); }
a.review-source { text-decoration: underline; text-underline-offset: 2px; }
.reviews-leave { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1.5rem 0 0; color: var(--text-dim); }
@media (min-width: 900px) {
  .reviews-list { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

/* --- The phone menu, /order/ ------------------------------------------
   Used standing in a dark bar, one-handed: big targets, high contrast,
   the order button always at the bottom of the screen. */
.om { max-width: 40rem; margin: 0 auto; padding: 0 1rem 7rem; }
.om-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 0 0.6rem; flex-wrap: wrap; }
.om-brand { display: flex; align-items: center; gap: 0.55rem; color: var(--text); font-family: "CCS Nav", "Arial Black", Impact, Arial, sans-serif; letter-spacing: 0.04em; font-size: 1.05rem; }
.om-brand img { width: 40px; height: 40px; border-radius: 50%; }
.om-state { margin: 0; font-size: 0.85rem; color: var(--text-dim); }
.om-state-open { color: var(--ok-fg, #b7f0c4); }
.om-state-open::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #5fd38a; margin-right: 0.4rem; vertical-align: 0.05em; }
.om-switch {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;
  padding: 0.6rem 0; background: var(--navy);
}
.om-switch-btn {
  font: inherit; font-weight: 700; font-size: 1rem; padding: 0.7rem; border-radius: 999px; cursor: pointer;
  background: var(--navy-alt); color: var(--text-dim); border: 1px solid var(--border);
}
.om-switch-on { background: var(--gold-light); color: var(--navy); border-color: var(--gold-light); }
.om-switch-btn:focus-visible, .om-add:focus-visible, .om-qty-btn:focus-visible, .om-bar-btn:focus-visible { outline: 3px solid var(--frost); outline-offset: 2px; }
.om-pickup { margin: 0.3rem 0 0.4rem; padding: 0.7rem 0.9rem; border-radius: 8px; background: rgba(217, 163, 76, 0.12); border: 1px solid var(--accent-border); font-weight: 600; }
.om-last { display: inline-block; margin: 0.3rem 0 0.6rem; text-decoration: underline; text-underline-offset: 3px; }
.om-hint { margin: 0.8rem 0 0; color: var(--text-dim); }
.om-section { padding: 1.6rem 0 0.6rem; }
.om-eyebrow { margin: 0 0 0.2rem; color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; }
.om-section-title { margin: 0 0 0.4rem; font-size: 1.45rem; }
.om-intro { margin: 0 0 0.6rem; color: var(--text-dim); color: color-mix(in srgb, var(--text) 80%, transparent); font-size: 0.95rem; line-height: 1.5; }
.om-note { margin: 0.6rem 0 0.8rem; color: var(--text-dim); font-size: 0.85rem; font-style: italic; }
/* Each dish on its own raised card (Version 25), so items stand apart at a glance on any theme. */
.om-items { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.om-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 0.9rem 0.95rem; border-radius: 12px;
  background: var(--card, var(--navy-alt));
  border: 1px solid var(--border); border-left: 4px solid var(--gold-light);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.om-item-text { min-width: 0; }
.om-item-name { margin: 0; font-weight: 700; font-size: 1.05rem; }
.om-item-label { margin-left: 0.5rem; font-weight: 600; font-size: 0.75rem; color: var(--gold-light); }
.om-item-desc { margin: 0.3rem 0 0; color: var(--text-dim); color: color-mix(in srgb, var(--text) 86%, transparent); font-size: 0.92rem; line-height: 1.45; }
.om-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex-shrink: 0; }
.om-price { margin: 0; font-weight: 800; color: var(--gold-light); font-size: 1.05rem; }
.om-add {
  font: inherit; font-weight: 700; min-width: 4.5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; cursor: pointer;
  background: var(--gold-light); color: var(--navy); border: 0;
}
.om-out { margin: 0; color: var(--bad-fg, #ffb3b3); font-size: 0.85rem; font-weight: 700; }
.om-item-out .om-item-name, .om-item-out .om-item-desc { opacity: 0.55; }
.om-tags { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.om-tags li { padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--navy-alt); border: 1px solid var(--border); font-size: 0.9rem; }
.om-fine { margin: 1.5rem 0 0; color: var(--text-dim); font-size: 0.8rem; }

.om-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--navy) 35%); }
.om-bar-btn {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; max-width: 38rem; margin: 0 auto; min-height: 3.3rem; padding: 0 1.1rem;
  border: 0; border-radius: 999px; background: var(--gold-light); color: var(--navy); font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.om-bar-count { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--navy); color: var(--gold-light); font-size: 0.9rem; }
.om-bar-total { margin-left: auto; }

.om-sheet {
  width: 100%; max-width: 40rem; max-height: 92vh; margin: auto auto 0; padding: 0; border: 0; border-radius: 16px 16px 0 0;
  background: var(--navy-alt); color: var(--text); overflow: auto;
}
.om-sheet::backdrop { background: rgba(0, 0, 0, 0.65); }
.om-sheet-body { padding: 1.3rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); }
.om-sheet h2 { margin: 0 0 0.3rem; font-size: 1.4rem; }
.om-sheet-desc { margin: 0 0 0.6rem; color: var(--text-dim); }
.om-choice { border: 0; margin: 0.8rem 0 0; padding: 0; }
.om-choice legend { font-weight: 700; margin-bottom: 0.4rem; }
.om-option { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0.4rem 0.4rem 0; padding: 0.55rem 0.85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--navy); cursor: pointer; }
.om-option:has(input:checked) { border-color: var(--gold-light); background: rgba(217, 163, 76, 0.16); }
.om-option input { accent-color: var(--gold-light); margin: 0; }
.om-qty { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0.4rem; }
.om-qty-btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--border); background: var(--navy); color: var(--text); font: inherit; font-size: 1.3rem; cursor: pointer; }
.om-qty-n { min-width: 1.5rem; text-align: center; font-weight: 800; font-size: 1.15rem; }
.om-qty-small { margin: 0; gap: 0.4rem; }
.om-qty-small .om-qty-btn { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
.om-sheet-error { margin: 0.6rem 0 0; color: var(--bad-fg, #ffb3b3); font-weight: 600; }
.om-sheet-actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.om-sheet-actions .btn { min-height: 2.9rem; }
.om-lines { list-style: none; margin: 0.6rem 0; padding: 0; }
.om-line { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.om-line-name { margin: 0; font-weight: 700; }
.om-line-choices { margin: 0.15rem 0 0; color: var(--text-dim); font-size: 0.88rem; }
.om-line-note { color: var(--text-dim); font-style: italic; }
.om-total { margin: 0.4rem 0 0.8rem; font-weight: 700; }
.om-label-note { font-weight: 400; color: var(--text-dim); font-size: 0.85rem; }
.om-pay { margin: 0.4rem 0 0; color: var(--text-dim); font-size: 0.9rem; }

.om-status { padding: 1.5rem 0 0; text-align: center; }
.om-status-eyebrow { margin: 0; color: var(--gold-light); font-weight: 700; letter-spacing: 0.1em; font-size: 0.85rem; }
.om-status-number { margin: 0; font-size: clamp(4rem, 22vw, 7rem); line-height: 1; font-family: "CCS Nav", "Arial Black", Impact, Arial, sans-serif; }
.om-status-for { margin: 0.4rem 0 1.2rem; font-size: 1.1rem; }
.om-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0 0 1rem; padding: 0; counter-reset: none; }
.om-steps li { padding: 0.6rem 0.3rem; border-radius: 8px; background: var(--navy-alt); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.85rem; font-weight: 600; }
.om-steps .om-step-done { color: var(--text); border-color: var(--accent-border); }
.om-steps .om-step-now { color: var(--navy); background: var(--gold-light); border-color: var(--gold-light); }
.om-status-now { margin: 0 0 0.4rem; font-size: 1.2rem; font-weight: 700; }
.om-status-ready { color: var(--ok-fg, #b7f0c4); font-size: 1.5rem; }
.om-status-where { margin: 0 0 1rem; color: var(--text-dim); }
.om-status .om-lines { text-align: left; }
.om-status .om-total { text-align: left; }
.om-status-keep { margin: 1rem 0 0; color: var(--text-dim); font-size: 0.85rem; }
.om-status .om-sheet-actions { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .om-status-ready { animation: om-pulse 1.6s ease-in-out 3; }
  @keyframes om-pulse { 50% { opacity: 0.55; } }
}

/* --- Tickets (/tickets/ and a guest's ticket) ------------------------ */
.tickets-sub { text-align: left; }
.tickets-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
.ticket-night { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 10px; background: var(--card); border: 1px solid var(--border); flex-wrap: wrap; }
.ticket-night-text { min-width: 0; flex: 1 1 16rem; }
.ticket-night-date { margin: 0; color: var(--gold-light); font-weight: 700; font-size: 0.9rem; }
.ticket-night-name { margin: 0.15rem 0 0.25rem; font-size: 1.3rem; }
.ticket-night-price, .ticket-night-note { margin: 0; color: var(--text-dim); font-size: 0.92rem; }
.ticket-night-side { display: flex; align-items: center; gap: 0.8rem; }
.ticket-night-left { margin: 0; color: var(--warn-fg, #ffe2ad); font-weight: 700; font-size: 0.9rem; }
.ticket-night-out { margin: 0; color: var(--bad-fg, #ffb3b3); font-weight: 700; }
.tickets-form { margin-top: 1rem; }
.tickets-form-when { color: var(--text-dim); }

.ticket { max-width: 26rem; margin: 1rem auto 0; padding: 1.5rem 1.4rem; border-radius: 14px; background: var(--card); border: 1px solid var(--accent-border); text-align: center; }
.ticket-eyebrow { margin: 0; color: var(--gold-light); font-weight: 700; letter-spacing: 0.1em; font-size: 0.8rem; }
.ticket-event { margin: 0.3rem 0 0.2rem; font-size: 1.7rem; line-height: 1.15; }
.ticket-when { margin: 0 0 1rem; color: var(--text-dim); }
.ticket-qr { display: block; width: min(260px, 80vw); height: auto; margin: 0 auto 0.8rem; padding: 10px; background: #fff; border-radius: 10px; }
.ticket-state { margin: 0 0 1rem; font-weight: 700; }
.ticket-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin: 0 0 0.8rem; text-align: left; }
.ticket-facts dt { color: var(--text-dim); font-size: 0.8rem; }
.ticket-facts dd { margin: 0; font-weight: 700; }
.ticket-code { letter-spacing: 0.15em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ticket-note { color: var(--text-dim); font-size: 0.9rem; }
.ticket-fine { color: var(--text-dim); font-size: 0.82rem; }
.ticket .admin-form-actions { justify-content: center; }
.ticket-void { opacity: 0.75; border-color: var(--border); }

/* "Tickets on Sale" strip (home and Events pages). */
.tickets-strip { padding: 1.5rem 0 0.5rem; }
.tickets-strip h2 { margin: 0 0 0.8rem; font-size: 1.3rem; }
.tickets-strip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; }
.tickets-strip-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "when cta" "name cta"; align-items: center; gap: 0.1rem 0.8rem; padding: 0.8rem 1rem; border-radius: 10px; background: var(--card); border: 1px solid var(--accent-border); color: var(--text); }
.tickets-strip-item:hover, .tickets-strip-item:focus-visible { border-color: var(--gold-light); }
.tickets-strip-when { grid-area: when; color: var(--gold-light); font-size: 0.85rem; font-weight: 700; }
.tickets-strip-name { grid-area: name; font-weight: 700; }
.tickets-strip-cta { grid-area: cta; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--gold-light); color: var(--navy); font-weight: 800; font-size: 0.85rem; }

/* --- Dashboard: Orders, Tickets and Reviews tabs (Version 18) --------- */
.admin-tab-count:empty { display: none; }
.admin-badge-live { background: rgba(76, 175, 100, 0.2); color: var(--ok-fg, #b7f0c4); }
.admin-orders-settings { margin-bottom: 1.25rem; }
.admin-orders-sound { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-dim); font-size: 0.9rem; }
.admin-orders-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.admin-orders-col h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.admin-order { margin: 0 0 0.75rem; padding: 0.85rem 0.95rem; border-radius: 10px; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--border); }
.admin-order-new { border-left-color: #ff8a65; }
.admin-order-preparing { border-left-color: var(--gold-light); }
.admin-order-ready { border-left-color: #5fd38a; }
.admin-order header { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.admin-order-number { font-size: 1.5rem; font-weight: 800; }
.admin-order-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.admin-order-when { margin-left: auto; color: var(--text-dim); font-size: 0.82rem; }
.admin-order-items { list-style: none; margin: 0.5rem 0; padding: 0; }
.admin-order-items li { padding: 0.25rem 0; border-top: 1px solid var(--border); }
.admin-order-items li:first-child { border-top: 0; }
.admin-order-items span { display: block; color: var(--text-dim); font-size: 0.88rem; }
.admin-order-note { margin: 0.3rem 0; padding: 0.4rem 0.6rem; border-radius: 6px; background: rgba(217, 163, 76, 0.12); font-size: 0.9rem; overflow-wrap: anywhere; }
.admin-order-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.admin-order-actions .btn { padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.admin-orders-done { margin: 1rem 0; }
.admin-orders-done summary { cursor: pointer; color: var(--text-dim); }
.admin-orders-setup { margin-top: 1.25rem; }
.admin-orders-setup > summary { cursor: pointer; list-style: revert; }
.admin-orders-setup > summary h3 { display: inline; }
.admin-orders-section { padding: 1rem 0; border-top: 1px solid var(--border); }
.admin-orders-section h4 { margin: 0 0 0.5rem; }
.admin-choice-row { display: grid; grid-template-columns: 10rem 12rem 1fr auto; gap: 0.5rem; margin: 0 0 0.5rem; }
.admin-choice-row input, .admin-choice-row select {
  background: var(--navy); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.55rem; font: inherit; color-scheme: dark; min-width: 0;
}
.admin-choice-row input[hidden] { display: none; }
.admin-orders-items { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.admin-orders-items li { padding: 0.3rem 0; }
.admin-orders-items label { display: inline-flex; gap: 0.3rem; align-items: center; margin-right: 0.5rem; color: var(--text-dim); font-size: 0.88rem; }
.admin-orders-qr { margin-top: 1.25rem; }
.admin-orders-qr img { display: block; width: 220px; height: 220px; padding: 10px; background: #fff; border-radius: 10px; margin: 0.5rem 0; }
@media (max-width: 900px) {
  .admin-orders-board { grid-template-columns: 1fr; }
  .admin-choice-row { grid-template-columns: 1fr 1fr; }
}
@media print {
  body.admin-printing-qr * { visibility: hidden; }
  body.admin-printing-qr [data-orders-qr-card], body.admin-printing-qr [data-orders-qr-card] * { visibility: visible; }
  body.admin-printing-qr [data-orders-qr-card] { position: absolute; left: 0; top: 0; width: 100%; text-align: center; background: #fff; color: #000; border: 0; }
  body.admin-printing-qr [data-orders-qr-card] .admin-form-actions { display: none; }
  body.admin-printing-qr [data-orders-qr-card] img { width: 9cm; height: 9cm; margin: 1cm auto; }
}

.admin-checkin { margin-bottom: 1.5rem; }
.admin-checkin-result { margin: 0 0 0.75rem; padding: 1rem 1.1rem; border-radius: 10px; border: 2px solid var(--border); }
.admin-checkin-result p { margin: 0.2rem 0; }
.admin-checkin-heading { font-size: 1.5rem; font-weight: 800; }
.admin-checkin-ok { background: rgba(76, 175, 100, 0.16); border-color: #5fd38a; }
.admin-checkin-ok .admin-checkin-heading { color: var(--ok-fg, #b7f0c4); }
.admin-checkin-warn { background: rgba(217, 163, 76, 0.18); border-color: var(--gold-light); }
.admin-checkin-warn .admin-checkin-heading { color: var(--warn-fg, #ffe2ad); }
.admin-checkin-bad { background: rgba(255, 92, 92, 0.14); border-color: #ff5c5c; }
.admin-checkin-bad .admin-checkin-heading { color: var(--bad-fg, #ffb3b3); }
.admin-guests { margin-top: 1.5rem; }
.admin-guests .admin-filter { max-width: 24rem; margin: 0.6rem 0; }

.admin-review-quote { margin: 0 0 0.3rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
/* Text boxes in the order sheet and the Orders tab's settings (outside the usual form styles). */
.om-sheet input[type="text"], .admin-orders-settings input[type="text"] {
  width: 100%; box-sizing: border-box; background: var(--navy); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.7rem 0.8rem; font: inherit; font-size: 1rem; color-scheme: dark;
}
.om-sheet input[type="text"]:focus, .admin-orders-settings input[type="text"]:focus { outline: 2px solid var(--gold-light); outline-offset: 1px; }
.om-sheet .field-row, .admin-orders-settings .field-row { margin: 0.9rem 0 0; }
.om-sheet .field-row label, .admin-orders-settings .field-row label { display: block; margin-bottom: 0.35rem; font-weight: 700; }
.admin-orders-settings input[type="text"] { max-width: 32rem; }
.om-steps .om-step-done::before { content: "✓ "; color: var(--ok-fg, #b7f0c4); }

/* Version 18 settings: the phone menu's off message, ordering-closed note, menu note, contact boxes. */
.om-off { margin: 3rem 0; padding: 1.5rem 1.25rem; border-radius: 12px; background: var(--card); border: 1px solid var(--border); text-align: center; }
.om-off p { margin: 0 0 1.25rem; font-size: 1.1rem; line-height: 1.5; white-space: pre-line; }
.om-closed, .om-menu-note { margin: 0.4rem 0; padding: 0.7rem 0.9rem; border-radius: 8px; background: var(--navy-alt); border: 1px solid var(--border); white-space: pre-line; line-height: 1.5; }
.om-closed { border-color: rgba(255, 92, 92, 0.4); }
.om-contact { margin: 1rem 0 0; padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; }
.om-contact legend { padding: 0 0.3rem; font-weight: 700; }
.om-consent { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-dim); line-height: 1.45; }
.om-consent input { margin-top: 0.2rem; accent-color: var(--gold-light); }
.om-sheet input[type="email"], .om-sheet input[type="tel"] {
  width: 100%; box-sizing: border-box; background: var(--navy); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.7rem 0.8rem; font: inherit; font-size: 1rem; color-scheme: dark;
}

/* Dashboard settings for the phone menu, tickets and reviews (Version 18). */
.admin-settings-form h4 { margin: 1.5rem 0 0.5rem; font-size: 1rem; color: var(--gold-light); }
.admin-settings-form .field-row { margin-bottom: 0.9rem; }
.admin-settings-form textarea { min-height: 3.2rem; }
.admin-orders-more > summary, .admin-ticket-settings > summary, .admin-ticket-terms > summary { cursor: pointer; list-style: revert; }
.admin-orders-more > summary h3, .admin-ticket-settings > summary h3, .admin-ticket-terms > summary h3 { display: inline; }
.admin-orders-more, .admin-ticket-settings, .admin-ticket-terms { margin: 1.25rem 0; }
.admin-pay-methods { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 0.8rem; }
.admin-pay-methods label { display: inline-flex; gap: 0.4rem; align-items: center; font-weight: 400; margin: 0; }
.admin-online-pay { margin: 0 0 0.5rem; padding: 0.7rem 0.9rem; border-radius: 8px; background: var(--navy); border: 1px dashed var(--border); color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; }
.admin-msg { margin: 0 0 1rem; padding: 0.8rem 0.9rem 0.2rem; border: 1px solid var(--border); border-radius: 10px; }
.admin-msg legend { padding: 0 0.3rem; }
.admin-msg legend label { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0; }
.admin-msg code, .admin-settings-form code { font-size: 0.85em; color: var(--gold-light); }
.admin-orders-link { margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.admin-orders-link .btn { padding: 0.3rem 0.7rem; font-size: 0.82rem; margin-left: 0.4rem; }
.admin-orders-qr-row { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.admin-orders-qr-row img { width: 180px; height: 180px; margin: 0; }
.admin-review-settings { margin-bottom: 1.5rem; }
.admin-orders-link [data-orders-state] { margin-left: 0.4rem; }
.admin-events-group { margin: 1.5rem 0 0.25rem; font-size: 1.1rem; }

/* About page: "More About CC's" boxes (Version 19), same look as the Queer PDX hub's. */
.about-more { margin: 2.5rem 0 0.5rem; }
.about-more h2 { margin: 0 0 1rem; }

/* Version 19: ticket dates that repeat (dashboard Tickets form), a repeat
   as one entry on the list, and choosing a date on the Tickets page. */
.admin-ticket-when { border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 1rem 0.4rem; margin: 0 0 1rem; }
.admin-ticket-when > legend { padding: 0 0.4rem; font-weight: 600; }
.admin-weekdays { border: 0; padding: 0; margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; }
.admin-weekdays legend { float: left; margin-right: 0.6rem; font-weight: 600; }
.admin-weekdays label, .admin-repeat-end label { display: inline-flex; gap: 0.35rem; align-items: center; font-weight: 400; margin: 0; }
.admin-inline-fields { display: flex; gap: 0.5rem; align-items: center; }
.admin-inline-fields input { width: 5rem; }
.admin-repeat-end { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; margin: 0 0 0.8rem; }
.admin-repeat-end-label { font-weight: 600; }
.admin-repeat-end input[type="number"] { width: 4.5rem; }
.admin-repeat-preview { margin: 0 0 0.6rem; }
.admin-repeat-preview:empty { display: none; }
.admin-date-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0.6rem 0; }
.admin-date-chips li { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.2rem 0.15rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; }
.admin-date-chips .btn { padding: 0.1rem 0.5rem; min-height: 0; }
.admin-repeat-several { margin: 0 0 0.6rem; }
.admin-ticket-series > summary { list-style: none; cursor: pointer; }
.admin-ticket-series > summary::-webkit-details-marker { display: none; }
.admin-ticket-series > summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.admin-ticket-series[open] .admin-series-toggle { border-color: var(--gold-light); }
.admin-series-dates { margin: 0 0 0.8rem 1.25rem; padding-left: 0.8rem; border-left: 2px solid var(--accent-border); }
.ticket-series .ticket-night-side { flex-wrap: wrap; }
.ticket-series-label { font-weight: 600; }
.ticket-series-date { min-width: 12rem; }
@media (max-width: 600px) {
  .admin-series-dates { margin-left: 0.25rem; }
  .ticket-series .ticket-night-side, .ticket-series-date { width: 100%; }
}
.admin-span-all { grid-column: 1 / -1; }

/* An event's box: Get Tickets, or what it says when there's nothing to buy (Version 19). */
.event-tix { margin: 1rem 0 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.event-tix .event-tix-btn { display: inline-block; margin: 0 0 0.7rem; }
.event-tix-info { margin: 0; color: var(--text-dim); font-size: 0.92rem; }
.event-tix-note { margin: 0; color: var(--gold-light); }

/* Phone wallets on the ticket page (Version 19). */
.ticket-wallets { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1rem 0 0.5rem; }
.btn-wallet { background: #000; color: #fff; border-color: #000; }
.btn-wallet:hover, .btn-wallet:focus-visible { background: #1a1a1a; color: #fff; }
.ticket-wallet-status { flex-basis: 100%; text-align: center; margin: 0; }
.ticket-wallet-status:empty { display: none; }
.admin-door-night { margin: 0 0 1.5rem; }
.admin-door-night h3 { margin: 0 0 0.2rem; }

/* Scanning tickets in the Door tab (Version 19). */
.admin-scan-view { position: relative; margin: 0.6rem 0; max-width: 480px; border-radius: 12px; overflow: hidden; background: #000; }
.admin-scan-view video { display: block; width: 100%; height: auto; max-height: 55vh; object-fit: cover; }
.admin-scan-frame { position: absolute; inset: 18%; border: 3px solid var(--gold-light); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28); pointer-events: none; }
.admin-checkin-result { font-size: 1.1rem; }

/* "Had a great night at CC's?" (Version 20): asking guests for a review. */
.review-invite { padding: 2.5rem 0 3rem; }
.review-invite-card { max-width: 46rem; margin: 0 auto; padding: 1.75rem 1.5rem 1.5rem; border: 1px solid var(--accent-border); border-top: 3px solid var(--gold-light); border-radius: 12px; background: var(--card); text-align: center; }
.review-invite-card h2 { margin: 0 0 0.75rem; }
.review-invite-text p { margin: 0 auto 0.75rem; max-width: 38rem; color: var(--text-dim); line-height: 1.6; }
.review-invite-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.8rem; margin: 1.25rem 0 1rem; }
.review-invite-private { margin: 0; font-size: 0.92rem; color: var(--text-dim); }
.review-invite-private a { color: var(--gold-light); }
@media (max-width: 600px) { .review-invite-links .btn { flex: 1 1 100%; } }

/* The 21+ agreement on the Tickets form (Version 20). */
.tickets-agreement { border: 1px solid var(--accent-border); border-radius: 10px; padding: 0.9rem 1rem 1rem; margin: 0 0 1.25rem; }
.tickets-agreement > legend { padding: 0 0.4rem; font-weight: 700; }
.tickets-terms { max-height: 15rem; overflow-y: auto; padding: 0.75rem 0.9rem; margin: 0.25rem 0 1rem; background: var(--navy); border: 1px solid var(--border); border-radius: 8px; font-size: 0.92rem; line-height: 1.55; }
.tickets-terms:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.tickets-terms p { margin: 0 0 0.7rem; color: var(--text-dim); }
.tickets-terms-title { margin: 0 0 0.6rem; font-size: 1rem; }
.tickets-agree { align-items: flex-start; }

/* A signed 21+ agreement, opened from the guest list (Version 20). */
.admin-signature-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; }
.admin-signature-facts > div { display: contents; }
.admin-signature-facts dt { font-weight: 600; color: var(--text-dim); }
.admin-signature-facts dd { margin: 0; overflow-wrap: anywhere; }
.admin-signature-terms { border-top: 1px solid var(--border); padding-top: 0.75rem; font-size: 0.92rem; }
.admin-signature-terms p { margin: 0 0 0.6rem; }
@media print {
  body.admin-printing-signature * { visibility: hidden !important; }
  body.admin-printing-signature [data-signature], body.admin-printing-signature [data-signature] * { visibility: visible !important; color: #000 !important; background: #fff !important; }
  body.admin-printing-signature [data-signature] { position: absolute; left: 0; top: 0; width: 100%; border: 0 !important; }
  body.admin-printing-signature [data-signature] .admin-form-actions { display: none !important; }
}

/* =====================================================================
   Search (Version 21)
   ---------------------------------------------------------------------
   The magnifier in the header, the search page (/search/), the Queer PDX
   hub's search box, and "Find on this page" (page-find.js).
   ===================================================================== */
.header-search {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; color: #fff;
  filter: drop-shadow(0 1px 2px rgba(2, 17, 44, 0.55));
}
.header-search:hover, .header-search[aria-current="page"] { background: rgba(2, 17, 44, 0.25); }
.header-search:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.site-search-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; }
.site-search-form > label { flex-basis: 100%; font-weight: 700; }
.site-search-form input[type="search"], .page-find input[type="search"] {
  flex: 1 1 16rem; min-width: 0; padding: 0.75rem 0.95rem; border-radius: 8px;
  border: 1px solid var(--accent-border); background: var(--navy-alt); color: var(--text); font: inherit; font-size: 1rem;
}
.site-search-form input[type="search"]:focus, .page-find input[type="search"]:focus { outline: 2px solid var(--gold-light); outline-offset: 1px; }
.site-search-form .btn { border: 0; cursor: pointer; font-size: 1rem; padding: 0.75rem 1.4rem; }
.site-search-row { display: flex; gap: 0.6rem; flex: 1 1 100%; flex-wrap: wrap; }
.site-search-scope { margin: -0.25rem 0 0.75rem; color: var(--text-dim); font-size: 0.92rem; }
.site-search-status { min-height: 1.5em; color: var(--text-dim); margin: 0.25rem 0 1rem; }
.site-search-group { margin: 0 0 2rem; }
.site-search-group h2 {
  font-size: 0.95rem; color: var(--gold-light); margin: 0 0 0.6rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.site-search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-search-result {
  padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
}
.site-search-result:hover { border-color: var(--accent-border); }
.site-search-result-title { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.site-search-result-title:hover { color: var(--gold-light); }
.site-search-result-where { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--frost); }
.site-search-result-text { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--text-dim); overflow-wrap: anywhere; }
.site-search-result mark, .site-search-tip mark { background: rgba(217, 163, 76, 0.32); color: inherit; border-radius: 3px; padding: 0 0.1em; }
.site-search-more, .site-search-tip { color: var(--text-dim); font-size: 0.9rem; margin: 0.6rem 0 0; }
.site-search-suggest h2 { font-size: 0.95rem; color: var(--text-dim); margin: 1.5rem 0 0.6rem; }
.site-search-quick { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.site-search-quick a {
  display: inline-block; padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--text); font-size: 0.92rem;
}
.site-search-quick a:hover { border-color: var(--accent-border); text-decoration: none; }

/* The Queer PDX hub's search box */
.pdx-search {
  margin: 1.25rem 0 1.75rem; padding: 1rem 1.15rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--accent-border);
}

/* Find on this page */
.page-find {
  margin: 0.5rem 0 1.5rem; padding: 0.9rem 1.1rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--accent-border);
}
.page-find > label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.page-find-row { display: flex; gap: 0.5rem; }
.page-find-clear { flex-shrink: 0; cursor: pointer; font: inherit; padding: 0.6rem 1rem; }
.page-find-status { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--text-dim); min-height: 0; }
.page-find-status:empty { display: none; }
.page-find-hidden { display: none !important; }
.community-jumpnav a.page-find-dim { opacity: 0.35; }
::highlight(page-find) { background-color: rgba(217, 163, 76, 0.45); color: inherit; }
.notfound-page .wrap { max-width: 44rem; text-align: center; }
.notfound-sub { margin-bottom: 1.5rem; }
.notfound-search { justify-content: center; }
.notfound-page .site-search-quick { justify-content: center; }

/* Version 23: the phone menu with Clover: an item's own choices with prices, paying online, the pickup code. */
.om-choice-rule { display: inline-block; margin-left: 0.5rem; font-weight: 500; font-size: 0.85rem; color: var(--text-dim); }
.om-option-price { color: var(--gold-light); font-size: 0.85rem; font-weight: 600; }
.om-option:has(input:disabled:not(:checked)) { opacity: 0.45; cursor: not-allowed; }
.om-at-bar { margin: 0; color: var(--text-dim); font-size: 0.8rem; font-weight: 600; text-align: right; max-width: 6.5rem; }
.om-line-price { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--gold-light); font-weight: 600; }
.om-pickup-code { margin: 1rem 0 0.4rem; padding: 0; text-align: center; }
.om-pickup-code img { display: block; width: min(220px, 70vw); height: auto; margin: 0 auto; padding: 10px; background: #ffffff; border-radius: 10px; }
.om-pickup-code figcaption { margin-top: 0.55rem; color: var(--text-dim); font-size: 0.9rem; }

/* Version 23: the Orders tab with Clover: kitchen duty, pickup, payment and print badges, the Clover cards. */
.admin-kitchen-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin: 0 0 1.25rem; align-items: start; }
.admin-kitchen-strip .admin-mfa-card { margin: 0; }
.admin-duty-who { margin: 0 0 0.4rem; font-weight: 700; font-size: 1.05rem; }
.admin-pickup-number { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.admin-pickup-number input { width: 6.5rem; background: var(--navy); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.55rem; font: inherit; color-scheme: dark; }
.admin-pickup-result { margin-top: 0.8rem; padding: 0.85rem 0.95rem; border-radius: 10px; border: 2px solid var(--border); }
.admin-pickup-head { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 800; }
.admin-pickup-good { border-color: #5fd38a; background: rgba(76, 175, 100, 0.12); }
.admin-pickup-warn { border-color: var(--gold-light); background: rgba(217, 163, 76, 0.12); }
.admin-pickup-bad { border-color: #ff6b6b; background: rgba(255, 92, 92, 0.12); }
.admin-pickup-warning { margin: 0.4rem 0 0; font-weight: 700; color: var(--warn-fg, #ffe2ad); }
.admin-order-badges { margin: 0.35rem 0 0; }
.admin-badge-paid { background: rgba(76, 175, 100, 0.2); color: var(--ok-fg, #b7f0c4); }
.admin-badge-bar { background: rgba(120, 160, 255, 0.18); color: var(--text); }
.admin-order-print-failed { color: var(--bad-fg, #ffb3b3); font-weight: 700; }
.admin-order-alert { box-shadow: 0 0 0 2px rgba(255, 92, 92, 0.55); }
.admin-order-contact { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.admin-order-contact input[type="email"], .admin-order-contact input[type="tel"], .admin-order-contact input[type="text"] { display: block; width: 100%; margin-top: 0.25rem; }
.admin-orders-waiting { border-top: 1px dashed var(--border); padding-top: 0.6rem; }
.admin-clover > summary, .admin-clover-menu > summary, .admin-tablets > summary { cursor: pointer; list-style: revert; }
.admin-clover > summary h3, .admin-clover-menu > summary h3, .admin-tablets > summary h3 { display: inline; }
.admin-clover-rows { display: grid; gap: 0.6rem; margin: 0.6rem 0; }
.admin-clover-row { padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.admin-clover-row-linked { border-left: 4px solid #5fd38a; }
.admin-clover-row p { margin: 0.2rem 0; }
.admin-clover-tick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.admin-clover-do { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.admin-clover-do select { background: var(--navy); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.5rem; font: inherit; color-scheme: dark; max-width: 100%; }
.admin-clover-do select[hidden] { display: none; }
@media (min-width: 1500px) { .admin-clover-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------
   The performer release, /performer-release/ (Version 26). Phone first:
   three numbered steps, the release in a scrolling box, each agreement a
   large tappable row, and a white signing pad that doesn't scroll the page
   while a finger draws on it.
   --------------------------------------------------------------------- */
.release-form { margin-top: 0.5rem; }
.release-step { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1rem 0.6rem; margin: 0 0 1.1rem; background: var(--card, var(--navy-alt)); }
.release-step > legend { display: flex; align-items: center; gap: 0.55rem; padding: 0 0.4rem; font-weight: 800; font-size: 1.1rem; }
.release-step-n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--gold-light); color: var(--navy); font-size: 0.95rem; }
.release-credit { border: 0; margin: 0 0 1rem; padding: 0; }
.release-credit > legend { font-weight: 600; margin-bottom: 0.45rem; padding: 0; }
.release-choices { display: flex; flex-wrap: wrap; }
.release-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; align-items: end; }
.release-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.release-terms { max-height: 22rem; background: var(--navy); }
.release-terms-title { margin: 0 0 0.7rem; font-size: 1.05rem; color: var(--text); }
.release-terms p { color: var(--text); color: color-mix(in srgb, var(--text) 86%, transparent); }
.release-agreements { display: grid; gap: 0.5rem; margin: 0 0 0.6rem; }
.release-agree {
  margin: 0; padding: 0.75rem 0.85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--navy);
  font-size: 0.95rem; color: var(--text); cursor: pointer; gap: 0.7rem;
}
.release-agree input { width: 1.35rem; height: 1.35rem; flex: none; margin-top: 0.05rem; }
.release-agree:has(input:checked) { border-color: var(--gold-light); background: rgba(217, 163, 76, 0.12); }
.release-sign-help { margin: 0 0 0.5rem; color: var(--text-dim); }
.release-pad {
  position: relative; height: 190px; border-radius: 10px; overflow: hidden;
  background: #ffffff; border: 2px solid var(--gold-light);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.release-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.release-pad-line { position: absolute; left: 2.2rem; right: 1rem; bottom: 2.6rem; border-bottom: 2px solid #c9ced8; pointer-events: none; }
.release-pad-x { position: absolute; left: 0.8rem; bottom: 2.3rem; color: #8a93a6; font-size: 1.5rem; line-height: 1; pointer-events: none; }
.release-pad-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa3b5; font-size: 1.1rem; pointer-events: none; }
.release-pad-actions { margin: 0.5rem 0 0.9rem; text-align: right; }
.release-send { width: 100%; min-height: 3.2rem; font-size: 1.1rem; }
.release-done { text-align: center; padding: 2rem 0 1rem; outline: none; scroll-margin-top: 6rem; }
.release-done-mark { margin: 0 auto 0.6rem; width: 4.2rem; height: 4.2rem; display: grid; place-items: center; border-radius: 50%; background: #2a8c4a; color: #fff; font-size: 2.2rem; }
.release-done h2 { margin: 0 0 0.6rem; }
.release-done-show { margin-top: 1.2rem; font-weight: 700; color: var(--gold-light); }
@media (max-width: 420px) {
  .release-step { padding: 0.9rem 0.8rem 0.5rem; }
  .release-pair { grid-template-columns: 1fr; }
  .release-pad { height: 170px; }
}

/* Dashboard: Performer Releases (Version 26) */
.admin-release-terms-card > summary h3 { display: inline; }
.admin-release-qr { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.admin-release-qr svg { width: 168px; height: 168px; background: #fff; padding: 6px; border-radius: 8px; }
.admin-release-qr-text { flex: 1; min-width: 14rem; }
.admin-release-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.admin-release-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.admin-release-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; justify-content: space-between; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--navy); }
.admin-release-who { display: grid; min-width: 0; }
.admin-release-who strong { overflow-wrap: anywhere; }
.admin-release-meta { color: var(--text-dim); font-size: 0.88rem; }
.admin-release-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-release-detail { margin-top: 0.6rem; padding: 0.9rem; border: 1px solid var(--accent-border); border-radius: 10px; }
.admin-release-detail dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.35rem 1rem; margin: 0 0 0.8rem; }
.admin-release-detail dt { font-weight: 700; color: var(--text-dim); }
.admin-release-detail dd { margin: 0; overflow-wrap: anywhere; }
.admin-release-sig { display: block; max-width: 320px; width: 100%; background: #fff; border-radius: 6px; padding: 4px; }
.admin-release-agreed { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.admin-release-agreed li { margin: 0 0 0.3rem; }
.admin-release-agreed li::marker { content: "✓  "; color: #5fd38a; }
@media (max-width: 560px) { .admin-release-detail dl { grid-template-columns: 1fr; } }

/* Version 26: drinks on the phone menu and the boards */
.admin-orders-drinks > summary h3 { display: inline; }
.admin-drinks-switch { display: block; margin: 0.4rem 0 0.8rem; font-weight: 600; }
.admin-drinks-list h4 { margin: 0.9rem 0 0.3rem; }
.admin-badge-drink { background: #0d5c66; color: #e7fbfd; }

/* =====================================================================
   Version 26: My Time and Team Time (static/js/admin-time.js)
   ===================================================================== */
.tc-clock { border-left: 4px solid var(--border); }
.tc-clock.tc-on { border-left-color: #2f9e5b; }
.tc-clock.tc-break { border-left-color: var(--gold-light); }
.tc-clock-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; }
.tc-state { font-size: 1.35rem; font-weight: 700; margin: 0; }
.tc-since { margin: 0.15rem 0 0; color: var(--text-dim); }
.tc-timer { font-size: 2rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.tc-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.9rem 0 0.4rem; }
.tc-buttons .btn { min-height: 3rem; padding: 0.7rem 1.4rem; font-size: 1.05rem; }
.tc-btn-in { background: #2f9e5b; color: #fff; }
.tc-btn-out { background: #a83a3a; color: #fff; }
.tc-tablet-only { margin: 0; font-weight: 600; }
.tc-week-nav { align-items: center; flex-wrap: wrap; }
[data-admin-panel="mytime"] .sec-head, [data-admin-panel="teamtime"] .sec-head { flex-wrap: wrap; }
[data-admin-panel="mytime"] .sec-head h2, [data-admin-panel="teamtime"] .sec-head h2 { margin-right: auto; }
.tc-sub { font-size: 0.85rem; font-weight: 400; color: var(--text-dim); }
.tc-myweek { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.tc-day { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.2rem 0.8rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--navy); }
.tc-day.tc-today { border-color: var(--gold-light); }
.tc-day-name { font-weight: 700; grid-row: span 4; }
.tc-day-off { color: var(--text-dim); }
.tc-shift { font-variant-numeric: tabular-nums; }
.tc-totals { font-weight: 600; margin: 0 0 0.5rem; }
.tc-table-wrap { overflow-x: auto; }
.tc-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.tc-table th, .tc-table td { text-align: left; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tc-table th { color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.tc-table td:not([colspan]) { white-space: nowrap; }
.tc-table .tc-empty { color: var(--text-dim); }
.tc-flagged td { border-bottom: 0; }
.tc-flag-row td { color: var(--gold-light); font-size: 0.85rem; padding-top: 0; }
.tc-row-actions { white-space: nowrap; }
.tc-row-actions .btn { padding: 0.25rem 0.6rem; font-size: 0.82rem; margin: 0 0.25rem 0.25rem 0; }
.tc-request-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.tc-form h3 { margin-top: 0; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0 0.8rem; }
.tc-requests, .tt-reqs, .tt-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.tc-requests li, .tt-reqs li, .tt-list li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: center; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--navy); }
.tt-reqs li { display: grid; }
.tt-reqs li .admin-form-actions { margin: 0.3rem 0 0; }
.tt-reqs li input[type="text"] { flex: 1 1 12rem; min-width: 0; padding: 0.5rem 0.7rem; border-radius: 6px; border: 1px solid var(--accent-border); background: var(--navy-alt); color: var(--text); font: inherit; }
.tc-req-status { color: var(--text-dim); }
.tc-req-pending { border-left: 4px solid var(--gold-light) !important; }
.tc-req-approved { border-left: 4px solid #2f9e5b !important; }
.tc-req-denied { border-left: 4px solid #a83a3a !important; }
.tt-list li.admin-row-note { border-style: dashed; }
.tt-warn { color: var(--gold-light); }
li.tt-warn { border-color: var(--gold-light) !important; }
.tt-off span:last-child { color: var(--text-dim); }

.tt-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--border); margin: 0 0 1rem; }
.tt-tab { font: inherit; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--text-dim); padding: 0.6rem 0.9rem; cursor: pointer; }
.tt-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--gold-light); font-weight: 600; }
.tt-tab:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
.tt-pane > .role-tiles { margin-bottom: 1rem; }

.tt-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tt-bars li { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; gap: 0.7rem; align-items: center; }
.tt-bar-track { height: 0.75rem; border-radius: 6px; background: var(--navy); border: 1px solid var(--border); overflow: hidden; }
.tt-bar-fill { display: block; height: 100%; background: #2f9e5b; }
.tt-near .tt-bar-fill { background: var(--gold-light); }
.tt-over .tt-bar-fill { background: #c25050; }
.tt-bar-n { font-variant-numeric: tabular-nums; font-size: 0.88rem; white-space: nowrap; }

.tt-sched-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; align-items: center; }
.tt-sched-head .admin-upload-hint { flex-basis: 100%; margin: 0; }
.tt-grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.tt-grid { border-collapse: collapse; width: 100%; min-width: 52rem; table-layout: fixed; font-size: 0.86rem; }
.tt-grid th, .tt-grid td { border: 1px solid var(--border); padding: 0.35rem; vertical-align: top; }
.tt-grid thead th { background: var(--navy); font-weight: 600; text-align: center; white-space: nowrap; }
.tt-grid .tt-who { width: 9rem; text-align: left; position: sticky; left: 0; background: var(--navy); z-index: 1; }
.tt-grid .tt-today { background: rgba(212, 175, 55, 0.08); }
.tt-grid thead th.tt-today { color: var(--gold-light); }
.tt-cell { min-height: 3.5rem; }
.tt-chip { display: grid; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--navy-alt); border: 1px solid var(--accent-border); border-left: 3px solid var(--gold-light); border-radius: 6px; padding: 0.25rem 0.4rem; margin: 0 0 0.25rem; cursor: pointer; }
.tt-chip.tt-draft { background: transparent; border-style: dashed; border-left-width: 1px; }
.tt-chip:hover, .tt-chip:focus-visible { border-color: var(--gold-light); outline: none; }
.tt-chip-time { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-chip-label { font-size: 0.78rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-add { width: 100%; font: inherit; background: none; border: 1px dashed transparent; border-radius: 6px; color: var(--text-dim); cursor: pointer; padding: 0.1rem; }
.tt-cell:hover .tt-add, .tt-add:focus-visible { border-color: var(--border); color: var(--text); outline: none; }
.tt-off-key { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 4px; background: #5a3a6e; color: #f1e6f8; margin: 0 0 0.25rem; }
.tt-off-key.tt-off-pending { background: transparent; border: 1px dashed #b48bcb; color: inherit; }
.tt-shift-form { margin-top: 1rem; border: 1px solid var(--gold-light); border-radius: 10px; padding: 1rem; }

.tt-person { border: 1px solid var(--border); border-radius: 10px; margin: 0 0 0.6rem; background: var(--navy); }
.tt-person > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; padding: 0.7rem 0.9rem; cursor: pointer; }
.tt-person[open] > summary { border-bottom: 1px solid var(--border); }
.tt-person > .tc-table-wrap, .tt-person > .btn, .tt-person > .tt-inline { margin: 0.5rem 0.9rem 0.8rem; }
.tt-inline h4 { margin: 0 0 0.5rem; }
.tt-history { border-top: 1px dashed var(--border); padding-top: 0.6rem; }
.tt-policy { border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem; margin: 0 0 0.8rem; }
.tt-checks { display: grid; gap: 0.35rem; margin: 0.3rem 0 0.7rem; }
.tt-checks label { font-weight: 400; }

@media (max-width: 600px) {
  .tc-week-nav { width: 100%; }
  .tc-week-nav [data-tc-week-label], .tc-week-nav [data-tt-week-label] { flex: 1 1 100%; order: -1; }
  .tc-day { grid-template-columns: 1fr; }
  .tc-day-name { grid-row: auto; }
  .tc-timer { font-size: 1.6rem; }
  .tc-buttons .btn { flex: 1 1 100%; }
  .tt-bars li { grid-template-columns: 1fr auto; }
  .tt-bar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* Printing a schedule: only that part, black on white, landscape. */
@media print {
  @page { size: landscape; margin: 12mm; }
  body.tc-printing * { visibility: hidden !important; }
  body.tc-printing .tc-print-target, body.tc-printing .tc-print-target * { visibility: visible !important; color: #000 !important; background: #fff !important; border-color: #888 !important; }
  body.tc-printing .tc-print-target { position: absolute; left: 0; top: 0; width: 100%; overflow: visible !important; border: 0 !important; }
  body.tc-printing .tc-print-target::before { content: attr(data-print-heading); display: block; font: 700 16pt/1.3 system-ui, sans-serif; margin: 0 0 8pt; visibility: visible; color: #000; }
  body.tc-printing .tt-grid { min-width: 0; font-size: 9pt; }
  body.tc-printing .tt-add { display: none !important; }
  body.tc-printing .tt-chip { border-style: solid !important; break-inside: avoid; }
  body.tc-printing .tt-grid .tt-who { position: static; }
  body.tc-printing .tc-day { break-inside: avoid; }
}

/* Version 27: the backup copy at Cloudflare (deploy/failover/src/worker.js
   adds the notice to every page it serves while the bar's server is offline). */
.failover-banner { position: sticky; top: 0; z-index: 1000; padding: 0.6rem 1rem; background: #f3c969; color: #1b1300; font-weight: 600; text-align: center; font-size: 0.95rem; line-height: 1.4; }
.failover-offline { max-width: 34rem; margin: 18vh auto 0; padding: 0 1rem; text-align: center; }
.failover-offline h1 { margin-bottom: 0.75rem; }

/* Version 27: My Time's requests as separate cards */
.tc-requests-card .sec-head { gap: 0.6rem 1rem; }
.tc-requests-empty { margin: 0.4rem 0 0; }
.tc-form-card { max-width: 46rem; }
.tc-form-card h2 { margin-top: 0; }
.tc-choice { border: 0; padding: 0; margin: 0 0 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.tc-choice legend { font-weight: 600; margin-bottom: 0.4rem; padding: 0; }
.tc-choice label { font-weight: 400; display: inline-flex; gap: 0.45rem; align-items: center; cursor: pointer; }
.tc-now { margin: -0.2rem 0 0.8rem; padding: 0.55rem 0.75rem; border-radius: 8px; background: var(--navy); border: 1px solid var(--border); font-size: 0.9rem; }
.tc-requests .tc-req { display: grid; gap: 0.2rem; justify-items: start; }
.tc-req-top { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tc-req-kind { font-size: 0.75rem; font-weight: 600; color: var(--text-dim); }
.tc-req-badge { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; }
.tc-req-badge-pending { background: rgba(217, 163, 76, 0.22); color: var(--warn-fg, #b07a1c); }
.tc-req-badge-approved { background: rgba(47, 158, 91, 0.16); color: #2f9e5b; }
.tc-req-badge-denied { background: rgba(194, 80, 80, 0.16); color: #c25050; }
.tc-req-badge-cancelled { background: var(--navy); color: var(--text-dim); border: 1px solid var(--border); }
.tc-req-answer { font-size: 0.88rem; }
.tc-requests .tc-req .btn { margin-top: 0.3rem; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.tc-form-card > .admin-upload-hint { margin: -0.25rem 0 1rem; }