/* Inter (SIL Open Font License), the typeface Glide uses; bundled so it works offline. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}

/* Copied from the EPGSA Convention app (2026-10-18); roster additions are at the end.
   Theme colors: the built-in Roster Light and Roster Dark themes (= EPGSA Light / Dark); themes.js has every theme
   (app.js THEME_ELEMENTS maps its element names to these variables). */
:root {
  color-scheme: light;
  --bar: #984700;           /* Top Bar */
  --bar-ink: #ffffff;       /* Top Bar Text */
  --banner: #6a3200;        /* Banner (behind the picture) */
  --accent: #ab5100;        /* Accent: buttons, times, active tab */
  --on-accent: #ffffff;     /* Button Text */
  --accent-ink: #984700;    /* Accent Text: links, labels */
  --accent-soft: #ffdbc8;   /* Accent Background: chips, highlight boxes */
  --accent-line: #ffdbc8;   /* Accent Border */
  --bg: #fffcfa;            /* Page Background */
  --surface: #ffffff;       /* Card Background: cards, panels, menus, bottom tabs */
  --bg-2: #f6e5dd;          /* Subtle Background: search box, chips, tiles */
  --ink: #221a15;           /* Text */
  --ink-2: #52443c;         /* Spotlight Text */
  --muted: #76665d;         /* Secondary Text */
  --line: #f0dfd7;          /* Lines */
  --icon-dim: #d7c2b8;      /* Faint Icons: arrows, empty stars */
  --star: #e3a008;          /* Star */
  --star-soft: #fff8e6;     /* Star Background */
  --badge: #e0482b;         /* Alert Badge */
  --error: #ba1a1a;         /* Error Text */
  --address: #f6e5dd;       /* Address Box */
  --address-line: #d7c2b8;  /* Address Box Border */
  --warn-bg: #fff4d6;
  --warn-line: #f0d48a;
  --radius: 12px;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html[data-mode="dark"] {
  color-scheme: dark;
  --bar: #723520;
  --bar-ink: #ffdbcf;
  --banner: #53281a;
  --accent: #ffb59c;
  --on-accent: #55200c;
  --accent-ink: #ffb59c;
  --accent-soft: #5d4036;
  --accent-line: #53433f;
  --bg: #1a110f;
  --surface: #271d1a;
  --bg-2: #322825;
  --ink: #f1dfd9;
  --ink-2: #d8c2bb;
  --muted: #a08d87;
  --line: #53433f;
  --icon-dim: #71625d;
  --star: #f5b82e;
  --star-soft: #3a2f12;
  --badge: #ef5a3c;
  --error: #ffb4ab;
  --address: #3d322f;
  --address-line: #53433f;
  --warn-bg: #3d3214;
  --warn-line: #6b5620;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: calc(var(--nav-h) + var(--safe-b));
}
body.sheet-open { overflow: hidden; }
a { color: var(--accent-ink); }
img { max-width: 100%; }
h2 { font-size: 1.4rem; margin: 0; line-height: 1.2; }
h3 { margin: 0; }
.ic { flex: none; }
/* Secondary text: the theme's Secondary Text; dark themes lift it partway toward Text so it stays readable
   but still quieter than the main text (Dan). Icons keep the plain Secondary Text color. */
:root { --muted-text: var(--muted); }
html[data-mode="dark"] { --muted-text: color-mix(in srgb, var(--muted) 60%, var(--ink)); }
.muted { color: var(--muted-text); }
.hint { color: var(--muted-text); font-size: 0.9rem; margin: 10px 0; }
.empty { color: var(--muted-text); padding: 8px 0; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--bar); color: var(--bar-ink);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--bar-ink); text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.brand img { border-radius: 7px; }
.topnav { display: none; margin-left: auto; gap: 4px; }
#appTitle { display: none; }
.status-top {
  margin-left: auto; display: flex; align-items: center; gap: 2px;
  font-size: 0.78rem; color: color-mix(in srgb, var(--bar-ink) 85%, transparent); white-space: nowrap;
}
.status-top .pill { background: transparent; border-color: color-mix(in srgb, var(--bar-ink) 50%, transparent); color: var(--bar-ink); padding: 0 8px; margin-right: 4px; }
.status-top .icon-btn { color: var(--bar-ink); }

@media (max-width: 899px) {
  .topbar { padding: 2px 6px 2px 12px; padding-top: calc(2px + env(safe-area-inset-top, 0px)); gap: 8px; min-height: 40px; }
  .brand img { width: 24px; height: 24px; border-radius: 6px; }
  .brand { min-width: 0; font-size: 1rem; gap: 8px; }
  .status-top .icon-btn.small { width: 32px; height: 32px; }
  #pageTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .status.has-extras { display: flex; }
  .status:not(.has-extras) { display: none; }
  .status .st-compact { display: none; }
}
.title-short { display: none; }
@media (max-width: 599px) { .title-long { display: none; } .title-short { display: inline; } }
@media (min-width: 900px) {
  #appTitle { display: inline; }
  #pageTitle, .status-top { display: none; }
}

.nav-item {
  display: flex; align-items: center; gap: 8px;
  color: var(--bar-ink); text-decoration: none; font-weight: 600;
  padding: 8px 12px; border-radius: 10px; opacity: 0.85;
}
.nav-item.active { background: color-mix(in srgb, var(--bar-ink) 22%, transparent); opacity: 1; border-radius: 999px; }
.topnav .nav-item { opacity: 0.75; }
.topnav .nav-item.active { opacity: 1; }
/* Light themes: a stronger pill for the selected item (Dan, v144; dark themes have their own below) */
.topnav .nav-item.active, .nav-more > .nav-item.active { background: color-mix(in srgb, var(--bar-ink) 32%, transparent); }
/* Dark themes: other top bar items in the (neutral) Text color, not the tinted Top Bar Text of Material themes */
html[data-mode="dark"] .topnav .nav-item:not(.active) { color: var(--ink); opacity: 0.85; }
/* ...and the selected one plain white in a white-tinted pill, so it stands out in every dark theme */
html[data-mode="dark"] .topnav .nav-item.active { color: #fff; background: color-mix(in srgb, #fff 20%, transparent); }

/* bottom nav (phones) */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(6, 1fr);
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--surface); border-top: 1px solid var(--line);
}
.bottomnav .nav-item {
  flex-direction: column; justify-content: center; gap: 2px;
  color: var(--muted); font-size: 0.7rem; padding: 6px 0; border-radius: 0; opacity: 1;
  min-width: 0;
}
.bottomnav .nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottomnav .nav-item.active { color: var(--accent); background: none; }
.bottomnav .nav-item .nav-ic { display: flex; max-width: none; padding: 3px 18px; margin: -3px 0; border-radius: 999px; }
/* The active tab's icon sits in a pill (Material 3 style): Accent Border in light themes, the button color in
   dark themes, where the other tabs are a little brighter than Secondary Text so they don't look switched off. */
.bottomnav .nav-item.active { font-weight: 700; }
.bottomnav .nav-item.active .nav-ic { background: color-mix(in srgb, var(--accent-line) 86%, var(--accent)); }
html[data-mode="dark"] .bottomnav .nav-item.active .nav-ic { background: var(--accent); color: var(--on-accent); }
html[data-mode="dark"] .bottomnav .nav-item:not(.active) { color: color-mix(in srgb, var(--muted) 60%, var(--ink)); }
/* Selected-tab "pop" (animateNav): a ghost pill behind the tabs grows into place, then the real pill shows */
.topnav { position: relative; }
.topnav .nav-item, .bottomnav .nav-item { position: relative; z-index: 1; }
.nav-ghost { position: absolute; z-index: 0; pointer-events: none; }
.topnav .nav-item.nav-ghosted, html[data-mode="dark"] .topnav .nav-item.nav-ghosted, .nav-more > .nav-item.nav-ghosted,
.bottomnav .nav-item.nav-ghosted .nav-ic, html[data-mode="dark"] .bottomnav .nav-item.nav-ghosted .nav-ic { background: transparent; }

@media (min-width: 900px) {
  .topnav { display: flex; }
  .bottomnav { display: none; }
  body { padding-bottom: 24px; }
}

/* ---------- banner + status ---------- */
.banner {
  background: var(--banner) center / cover no-repeat;
  color: #fff;
  padding: 18px 16px 16px;
  min-height: 84px;
  display: flex; align-items: flex-end;
}
.banner-text { font-size: 1.05rem; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.banner-text font[size="+1"] { font-size: 1.35em; }
/* Desktop: "Schedule updated" sits at the right of the banner instead of its own row */
.banner-status { display: none; }
@media (min-width: 900px) {
  .banner { gap: 16px; }
  .banner-status {
    display: flex; align-items: center; gap: 6px 10px; margin-left: auto; flex: none;
    font-size: 0.9rem; color: rgba(255,255,255,0.9); text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  .banner-status .icon-btn { color: #fff; }
  .banner-status .pill { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.5); color: #fff; }
  .status:not(.has-extras) { display: none; }
  .status .st-compact { display: none; }
}
@media (max-width: 899px) {
  .banner { padding: 14px 16px; min-height: 80px; }
  .banner-text { font-size: 1rem; line-height: 1.3; }
  .banner-text font[size="+1"] { font-size: 1.4em; }
}

.status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 6px 16px; min-height: 36px;
  font-size: 0.85rem; color: var(--muted-text);
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.status:empty { display: none; }
.st-compact { display: inline-flex; align-items: center; gap: 6px 12px; }
.pill { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; color: var(--ink); }
.pill.warn { background: var(--warn-bg); border-color: var(--warn-line); }

/* ---------- layout ---------- */
main { display: block; max-width: 1100px; margin: 0 auto; padding: 16px; outline: none; }
.section { margin: 8px 0 28px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.section-head h2 { min-width: 0; }
.section-head .btn, .btn.compact { white-space: nowrap; flex: none; min-height: 38px; padding: 6px 15px; border-radius: 10px; font-size: 0.9rem; }
.button-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
/* Info page: Resources heading at the left, Volunteer Schedule button at the right (app.js fitInfoRow). */
.info-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.info-actions > .btn { margin-left: auto; }
.info-actions .btn.compact { padding-left: 12px; padding-right: 12px; }
.info-actions .short-label, .info-actions.short .long-label, .info-actions.tiny .link-arrow, .vol-btn .tiny-arrow { display: none; }
.info-actions.tiny .tiny-arrow { display: inline-flex; margin: 0 -6px 0 -4px; }
.info-actions.tiny .btn.compact { padding-left: 9px; padding-right: 8px; gap: 4px; }   /* so the chevron costs no width (Dan's phone) */
/* The volunteer buttons (Info, event details): the people icon in the theme color, so they stand out a little */
.vol-btn > .ic { color: var(--accent); }
html[data-mode="dark"] .vol-btn > .ic { color: var(--accent-ink); }
.info-actions.short .short-label { display: inline; }
.docs-head { margin-bottom: 8px; }
.docs-head h2 { font-size: 1.15rem; }
.card.docs { padding: 0; overflow: hidden; }
.doc-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--bg-2); }
.doc-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
html[data-mode="dark"] .doc-ic { color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 16%, transparent); }
.doc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-title { font-weight: 650; }
.doc-sub { color: var(--muted-text); font-size: 0.88rem; }
html[data-mode="dark"] .doc-sub { color: var(--ink-2); }   /* Secondary Text was too dim in dark themes */
.doc-row > .ic:last-child { flex: none; color: var(--icon-dim); }

/* Annual Reports page (Reports tab): a box per report, like the GSB report pages */
/* Title; then the subtitle (level with the top of the button) | PDF button; then Expand/Collapse All right above the
   reports. */
.reports-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title title' 'sub pdf' 'tools tools';
  gap: 4px 16px; margin-bottom: 14px; }
.reports-title { grid-area: title; font-size: 1.45rem; line-height: 1.2; margin: 4px 0; text-wrap: balance; }
.reports-sub { grid-area: sub; align-self: start; margin: 0; color: var(--muted-text); font-weight: 500; line-height: 1.35; }
html[data-mode="dark"] .reports-sub { color: var(--ink-2); }
.reports-pdf { grid-area: pdf; justify-self: end; }
.reports-tools { grid-area: tools; display: flex; gap: 18px; justify-content: flex-end; margin-top: 6px; font-size: 0.9rem; }
/* One Expand All / Collapse All button: chevron right (closed) turns down (all open), like the report headers */
.reports-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 8px; border: 0;
  border-radius: 999px; background: none; font: inherit; font-weight: 600; color: var(--accent-ink); cursor: pointer;
  transition: background-color 0.15s; }
.reports-toggle .ic { transform: rotate(-90deg); transition: transform 0.2s; }
.reports-toggle.on .ic { transform: none; }
.reports-toggle:active { background: var(--accent-soft); }
@media (hover: hover) { .reports-toggle:hover { background: var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .reports-toggle .ic { transition: none; } }
@media (max-width: 599px) {
  .reports-title { font-size: 1.3rem; text-wrap: wrap; }
  .reports-sub { font-size: 0.92rem; }
}
details.report { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; }
details.report > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-weight: 650; font-size: 1.05rem; background: var(--bg-2); border-radius: calc(var(--radius) - 1px); }
details.report > summary::-webkit-details-marker { display: none; }
details.report > summary .ic { margin-left: auto; flex: none; color: var(--muted); transition: transform 0.15s; }
/* Light themes: closed headers halfway between the tile color and the card (the Material tile tint was too strong) */
html:not([data-mode="dark"]) details.report:not([open]) > summary { background: color-mix(in srgb, var(--bg-2) 50%, var(--surface)); }
/* The open report: highlighted header that stays in view (below the top bar) while reading */
details.report[open] > summary { position: sticky; top: var(--topbar-h, 0px); z-index: 2; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--accent-soft); color: var(--accent-ink); border-bottom: 1px solid var(--accent-line); }
details.report[open] > summary .ic { transform: rotate(180deg); color: var(--accent-ink); }
.report-body { padding: 4px 16px 16px; line-height: 1.6; overflow-wrap: anywhere; }
.report-body p { margin: 12px 0; }
.report-body h4 { font-size: 1rem; margin: 18px 0 4px; }
.report-body ul, .report-body ol { margin: 8px 0; padding-left: 22px; }
.report-body li { margin: 4px 0; }
.report-body a { color: var(--accent-ink); }
.report-body table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 0.92rem; display: block; overflow-x: auto; }
.report-body td, .report-body th { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
/* Roster page (Info, v155): officers, then District | DCM | ADCM like the poster board. Phones: one table in one box
   (the second half's header hidden); wider screens: two boxes side by side. */
.roster-title { font-size: 1.45rem; line-height: 1.2; margin: 4px 0; text-wrap: balance; }
.roster-sub { margin: 0 0 6px; color: var(--muted-text); font-weight: 500; }
.roster-head { font-size: 1.05rem; margin: 18px 0 8px; }
.card.roster-officers { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; padding: 12px 16px; margin: 0; }
.roster-off-col, .roster-off-col > div { display: contents; }   /* phones: one list, names lined up */
.roster-officers dt { color: var(--muted-text); }
.roster-officers dd { margin: 0; font-weight: 600; }
html[data-mode="dark"] .roster-sub, html[data-mode="dark"] .roster-officers dt { color: var(--ink-2); }
.roster-districts { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); margin-bottom: 18px; }
.roster-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }   /* fixed: both halves' columns line up */
.roster-num { width: 4.6em; }
.roster-table th, .roster-table td { text-align: left; padding: 6px 10px; border-top: 1px solid var(--line); font-weight: 400; }
.roster-table thead th { border-top: 0; background: var(--accent-soft); color: var(--ink); font-size: 0.85rem; font-weight: 700; }
.roster-table tbody th { text-align: center; font-weight: 700; }
.roster-table td { overflow-wrap: anywhere; }
.roster-table tr.alt > * { background: color-mix(in srgb, var(--bg-2) 50%, var(--surface)); }
.roster-box + .roster-box thead { display: none; }
.vacant { color: var(--muted); }
@media (min-width: 700px) {
  /* the second half starts where the second district table does (same 1fr 1fr / 16px gap; the card's own side
     padding moves into each half) */
  .card.roster-officers { grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 12px 0; }
  .roster-off-col { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-content: start; padding: 0 10px; }   /* text lines up with the tables' "District" */
  .roster-districts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; border: 0; border-radius: 0; overflow: visible; background: none; }
  .roster-box { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
  .roster-box + .roster-box thead { display: table-header-group; }
}
.btn-arrow { font-size: 1.05em; line-height: 1; }
@media (max-width: 420px) { h2 { font-size: 1.25rem; } .section-head .btn { padding: 4px 12px; } }
/* Full-size desktop screens: smaller type, closer to Glide */
@media (min-width: 900px) {
  html { font-size: 14px; }
  body { font-size: 15px; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 16px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  border-radius: 10px; font: inherit; font-weight: 650; font-size: 0.95rem;
  text-decoration: none; cursor: pointer;
}
.btn.outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn:active { transform: translateY(1px); }
/* Hover (mouse only, so phones don't keep a stuck hover): a light state layer over buttons and rows, like Material 3;
   filled buttons also lift a little; tiles and linked maps lift. Press: icon buttons shrink a touch. */
.btn, .icon-btn, .star, .session, .menu-item, .tag, .tile, .lang-toggle, .jump, .room-row, .check, .seg,
details.report > summary, .filter-group > summary, .map-fig a, a.detail-map {
  transition: background-color 0.15s, box-shadow 0.15s, translate 0.15s, scale 0.1s;
}
.map-fig a, a.detail-map { display: block; border-radius: 8px; }
@media (hover: hover) {
  .btn:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.18), inset 0 0 0 100vmax color-mix(in srgb, var(--on-accent) 10%, transparent); }
  .btn.outline:hover { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--ink) 6%, transparent); }
  .icon-btn:hover, .star:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  /* Only menu rows that do something when tapped (links, buttons); rows holding a control (Text, Reminders,
     Language) leave the hover to the control */
  .session:hover, a.menu-item:hover, button.menu-item:hover, .room-row:hover, .check:hover { background: color-mix(in srgb, var(--bg-2) 60%, var(--surface)); }
  /* Event cards: the whole cell (as tall as its row neighbor in two columns) gets the hover */
  .session-wrap:has(> .session:hover) { background: color-mix(in srgb, var(--bg-2) 60%, var(--surface)); }
  .session-wrap > .session:hover { background: transparent; }
  .tag:hover { background: var(--accent-soft); }
  .tile:hover, .map-fig a:hover, a.detail-map:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.14); translate: 0 -2px; }
  .jump:hover { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--accent-ink) 8%, transparent); }
  .lang-toggle.inline:hover { background: var(--accent-soft); }
  .lang-toggle.on-banner:hover { background: rgba(0,0,0,0.42); }
  .seg:not(.on):hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  /* Report and filter headers: a light layer, and the chevron takes the accent color */
  details.report > summary:hover, .filter-group > summary:hover { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 6%, transparent); }
  details.report > summary:hover .ic, .filter-group > summary:hover .ic { color: var(--accent-ink); }
  .filter-group > summary, .check { border-radius: 8px; }
}
/* Desktop tabs: hover only. Never on the selected tab, during its pop, or while pressed, so a click shows just the pop
   (v147's tab hover flickered with it). No transition, so the pill doesn't fade against the pop. */
@media (hover: hover) and (min-width: 900px) {
  .topnav .nav-item:not(.active):not(.nav-ghosted):not(:active):hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); border-radius: 999px; }
}
.icon-btn:active, .star:active { scale: 0.92; }
/* Touch: no browser tap highlight (a flat box over whatever was tapped, Dan); presses show these instead.
   Tabs show only their pop. */
html { -webkit-tap-highlight-color: transparent; }
.btn:active { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--on-accent) 14%, transparent); }
.btn.outline:active { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--ink) 9%, transparent); }
a.menu-item:active, button.menu-item:active, .doc-row:active, .more-item:active, .tag:active { background: var(--bg-2); }
.tile:active { scale: 0.97; }
.text-link:active, .link-btn:active, .lang-toggle:active { opacity: 0.6; }
.badge { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 7px; font-size: 0.8rem; }
.link-btn { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--accent-ink); font-weight: 600; cursor: pointer; text-decoration: underline; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; cursor: pointer; text-decoration: none;
}
.icon-btn.small { width: 34px; height: 34px; }
.icon-btn.spinning .ic { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; }
.card-plain { margin-bottom: 8px; }

/* ---------- search + toolbar ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar .btn { flex: none; }
.search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border-radius: 10px; padding: 0 12px; min-height: 44px; color: var(--muted-text);
}
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); padding: 10px 0; outline: none; }

/* ---------- sessions ---------- */
.day-group { margin-bottom: 22px; }
.day-title { font-size: 1.2rem; margin: 8px 0 6px; }
/* Sections of a list (days; volunteer types; the admin site's setting groups) are divided by a tinted band across the
   page, like the More menu's groups (Dan, 2026-10-18). The band replaces the gap below the section above it. */
:root { --band: var(--bg-2); }
.day-group:has(+ .day-group) { margin-bottom: 0; }
.day-group + .day-group, .vol-section + .vol-section { border-top: 8px solid var(--band); margin: 0 -16px; padding-inline: 16px; padding-top: 12px; }
.vol-section:has(+ .vol-section) { margin-bottom: 0; padding-bottom: 12px; }
/* No divider under the last row when a band follows (Dan): the last item, and in two columns the left one of the
   last row too. The divider is on the grid cell (.session-wrap in the app, button.session in the admin site). */
.day-group:has(+ .day-group) .session-grid > :last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .day-group:has(+ .day-group) .session-grid > :nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .sheet .day-group:has(+ .day-group) .session-grid > :nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }   /* panels: one column */
}
.session-grid { display: grid; grid-template-columns: 1fr; column-gap: 24px; }
@media (min-width: 760px) { .session-grid { grid-template-columns: 1fr 1fr; } }
.sheet .session-grid { grid-template-columns: 1fr; }
/* Home on desktop: Spotlight and Category share a column about 2/3 of the page wide */
@media (min-width: 900px) {
  .home-section { max-width: 67%; }
  .home-section .tiles { grid-template-columns: repeat(3, 1fr); }
}
.session {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.session:active { background: var(--bg-2); }
.session-main { flex: 1; min-width: 0; }
.when { color: var(--accent); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.title { font-weight: 650; margin-top: 2px; }
.details { color: var(--muted-text); font-size: 0.95rem; white-space: pre-line; margin-top: 2px; }
/* Dark themes: the third line (chair, topic, details) uses the brighter Spotlight Text; Secondary Text was too dim there. */
html[data-mode="dark"] .details { color: var(--ink-2); }
.chev { color: var(--icon-dim); display: flex; }
.session.compact { padding: 10px 4px; }
.session.compact .title { font-weight: 450; color: var(--ink-2); }

/* ---------- category tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* Category tiles: 2 across on phones and tablets, 3 across on desktop */
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.after-tiles { margin-top: 20px; }
.rich p { margin: 0 0 1em; }
.rich .rich-gap { border: 0; height: 0; margin: 0 0 1em; }
/* Info text: a link on its own line is an outlined button, external-link icon on the right (linkButtons) */
.rich .rich-btn .btn { gap: 10px; color: var(--ink); font-weight: 650; text-align: left; }
.rich .rich-btn .btn .ic { color: var(--muted); flex: none; }
.rich .rich-btn .btn:hover { text-decoration: none; }
.tile { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.tile-img { aspect-ratio: 3 / 2; background: var(--bg-2); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-label { padding: 8px 10px 10px; font-size: 0.8rem; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.02em; }

/* ---------- maps ---------- */
.maps { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .maps { grid-template-columns: 1fr 1fr; } }
.map-fig { margin: 0; }
.map-fig img { width: 100%; display: block; border-radius: 8px; }
.zoom { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; background: #fff; cursor: zoom-in; }
.zoom img { display: block; width: 100%; }
.zoom.zoomed { cursor: zoom-out; }
.zoom.zoomed img { width: 250%; max-width: none; }

/* ---------- info ---------- */
.rich { line-height: 1.6; }
.rich a { font-weight: 500; color: var(--accent); text-decoration: none; }
.address { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--address); border: 0; border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.address-text { flex: 1; white-space: pre-line; min-width: 180px; line-height: 1.4; }
.btn.directions { background: var(--surface); color: var(--ink); border-color: var(--address-line); border-radius: 12px; }
.btn.directions .ic { color: var(--muted); }
.area-map { display: block; width: 100%; height: 320px; border: 0; border-radius: 16px; background: var(--bg-2); margin-bottom: 18px; }
.area-map.offline { height: auto; padding: 18px; display: flex; align-items: center; gap: 8px; color: var(--muted-text); }

/* ---------- volunteers ---------- */
.jump-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-bottom: 14px; }
.jump {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  min-width: 0; min-height: 58px; padding: 8px 4px; border-radius: 10px; background: var(--accent-soft);
  color: var(--accent-ink); font-weight: 500; font-size: 0.75rem; text-decoration: none;
}
/* One line, as in Glide (the arrow never drops to its own line). */
.jump span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* rooms on a level / room panel */
.sheet-map { margin-bottom: 14px; border: 1px solid var(--line); }
.room-list { display: flex; flex-direction: column; }
.room-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.room-thumb { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--bg-2); flex: none; }
.room-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.room-name { font-weight: 650; }
.room-notes { color: var(--muted-text); font-size: 0.9rem; }
.room-notes-head { color: var(--accent); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; margin: -4px 0 12px; }
/* Desktop: Info and Volunteer Schedule use the same 2/3-width column as Home;
   volunteer time slots sit two across. */
@media (min-width: 900px) {
  .page-col { max-width: 67%; }
  .page-col .vol-slots { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* English / Español switch */
.lang-toggle {
  font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  color: var(--bar-ink); background: transparent; border: 1px solid color-mix(in srgb, var(--bar-ink) 55%, transparent);
  border-radius: 999px; padding: 4px 12px; margin-left: 6px; white-space: nowrap;
}
.lang-toggle:hover { background: color-mix(in srgb, var(--bar-ink) 14%, transparent); }
.lang-toggle.inline { color: var(--accent-ink); border-color: var(--line); background: var(--surface); margin-left: 8px; }
.topnav { align-items: center; }

/* Desktop "More" drop-down */
.nav-more { position: relative; }
.nav-more > .nav-item { background: none; border: 0; font: inherit; cursor: pointer; }
.nav-more > .nav-item.active { background: color-mix(in srgb, var(--bar-ink) 32%, transparent); }
.more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px;
  background: var(--surface); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.22); padding: 6px;
}
.more-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.more-item:hover, .more-item.active { background: var(--bg-2); }
.more-item .ic { color: var(--muted); }

.vol-head { display: flex; align-items: center; gap: 10px; }
.vol-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: var(--on-accent); flex: none; }
.filter-empty { color: var(--muted-text); font-size: 0.9rem; margin: 4px 2px 8px; }
/* Filter panels: collapsible groups (open by default) with a line between groups, not between rows */
.filter-group { border-bottom: 1px solid var(--line); }
.filter-group > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 12px 2px; }
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary .ic { margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.filter-group[open] > summary .ic { transform: rotate(180deg); }
.filter-options { padding-bottom: 8px; }
.vol-section { border-top: 1px solid var(--line); padding-top: 16px; scroll-margin-top: 80px; }
.vol-section h2 { margin-bottom: 8px; }
.vol-slot { padding: 8px 0; }
.vol-time { font-weight: 650; }
.vol-names { margin: 4px 0 0; padding: 0; list-style: none; }
.vol-names li { color: var(--accent-ink); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; padding: 2px 0; }

/* ---------- about / more ---------- */
.about { display: flex; gap: 16px; align-items: flex-start; }
.about img { border-radius: 14px; flex: none; }
.about p { margin: 6px 0 0; color: var(--muted-text); }
.facts { display: grid; grid-template-columns: fit-content(38%) 1fr; gap: 8px 14px; align-items: center; margin: 0 0 18px; }
.facts dt { color: var(--muted-text); }
.facts dd { margin: 0; min-width: 0; }
.facts dd a { word-break: break-all; }
/* About: Share App button with the QR code to its right, button level with the QR top (under Check for Updates) */
.share-row { display: flex; align-items: flex-start; gap: 20px; margin: 4px 0 20px; }
.share-link { min-width: 0; }
.share-link a { word-break: break-all; }
.about-qr { display: block; flex: none; width: 150px; max-width: 45%; height: auto; margin: 0; padding: 8px; background: #fff; border-radius: 12px; }
.about-sub { font-size: 1rem; margin: 6px 0 10px; color: var(--ink-2); }
.about-options .past-row { padding: 14px 12px; }
/* Developer Options sit a little apart from Options (Dan, v170) */
#devOptions { margin-top: 32px; }
.menu-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; max-width: 560px; }
.menu-item { display: flex; align-items: center; gap: 14px; padding: 16px; color: inherit; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.menu-item:last-child { border-bottom: 0; }
.menu-item span { flex: 1; }
.menu-item .ic:first-child { color: var(--accent); }
.empty-state { text-align: center; max-width: 520px; margin: 24px auto; }
.empty-state p { color: var(--muted-text); }

/* ---------- sheet (detail panel) ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,0.35); }
.sheet {
  position: fixed; z-index: 31; left: 0; right: 0; bottom: 0;
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
  animation: slide-in 0.34s cubic-bezier(0.05, 0.7, 0.1, 1);
}
/* Panels slide all the way in (up on phones, from the right on desktop) and back out when closed (app.js hidePanel);
   the backdrop fades. Keyframes use the translate property so they stack on a panel's own transform. */
.sheet.closing, .more-sheet.closing, .install-prompt.closing { animation: slide-out 0.2s cubic-bezier(0.3, 0, 0.8, 0.15) forwards; }
.sheet-backdrop { animation: fade-in 0.25s ease-out; }
.sheet-backdrop.closing { animation: fade-out 0.2s ease-in forwards; }
@keyframes slide-in { from { translate: 0 100%; } }
@keyframes slide-out { to { translate: 0 100%; } }
@keyframes slide-in-right { from { translate: calc(100% + 24px) 0; } }
@keyframes slide-out-right { to { translate: calc(100% + 24px) 0; } }
@keyframes rise-in { from { translate: 0 calc(100% + 48px); } }
@keyframes drop-out { to { translate: 0 calc(100% + 48px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { flex: 1; display: flex; align-items: center; gap: 4px; font-size: 1.15rem; min-width: 0; }
.sheet-head h2 span { overflow-wrap: anywhere; }
.sheet-head .back { margin-left: -10px; }
.sheet-body { container-type: inline-size; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; padding-bottom: calc(24px + var(--safe-b)); }
@media (min-width: 900px) {
  .sheet { left: auto; top: 12px; right: 12px; bottom: 12px; width: min(400px, 60vw); max-height: none; border-radius: 16px; animation-name: slide-in-right; }
  .sheet.closing, .more-sheet.closing { animation-name: slide-out-right; }
}
.sheet-hero { width: 100%; max-width: 560px; border-radius: var(--radius); display: block; margin-bottom: 14px; }
.chips { display: grid; gap: 10px; }
.chip { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); white-space: pre-line; }
.chip.accent { background: var(--accent-soft); }
.chip .ic { margin-top: 2px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag { font-size: 0.85rem; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--accent-ink); font-weight: 600; }
.room-img { display: block; width: 100%; margin-top: 16px; border-radius: 8px; border: 1px solid var(--line); }
.detail-tiles { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-map { display: block; }
.detail-map .room-img { border: 0; margin-top: 20px; }
/* Second line of a detail chip (the room's level), in the secondary text style */
.chip-sub { display: block; color: var(--muted-text); font-size: 0.92rem; }
/* Event details: Add to My Schedule and Volunteer Info, stacked at the width of the wider one */
.detail-buttons { display: inline-grid; gap: 10px; margin-top: 12px; max-width: 100%; }
/* Wide panels (tablets): side by side, Volunteer Info at the right (Dan, v154) */
@container (min-width: 620px) {
  .detail-buttons { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
  .detail-buttons > .btn + .btn { margin-left: auto; }
}
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 2px; color: var(--accent); font-weight: 650; text-decoration: none; }
.filter-head { font-size: 1rem; font-weight: 700; margin: 0; }
.check { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }

/* ---------- alerts ---------- */
.bell { position: relative; color: var(--bar-ink); }
.topnav .bell { width: 40px; height: 40px; margin-left: 4px; }
.bell-badge {
  position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--badge); color: #fff; font-size: 0.68rem; font-weight: 700;
  line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bar);
}
.push-box { background: var(--accent-soft); border-color: var(--accent-line); padding: 12px 14px; font-size: 0.95rem; }
.push-box p { margin: 0 0 10px; }
.push-box p:last-child { margin-bottom: 0; }
.push-box .btn { min-height: 40px; }
.push-on { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; color: var(--accent-ink); font-weight: 600; }
.push-on .link-btn { margin-left: auto; }
.push-error { color: var(--error); margin: 10px 0 0 !important; }
.alert-list { display: flex; flex-direction: column; }
.alert-item { padding: 12px 2px; border-bottom: 1px solid var(--line); }
.alert-msg { white-space: pre-line; margin-top: 2px; }
.alert-item .text-link { min-height: 36px; }

.toast {
  position: fixed; z-index: 35; left: 12px; right: 12px; top: calc(48px + env(safe-area-inset-top, 0px));
  max-width: 480px; margin: 0 auto; display: flex; align-items: flex-start; gap: 4px;
  background: var(--surface); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.25); border-left: 5px solid var(--accent);
  animation: drop 0.2s ease-out;
}
@keyframes drop { from { transform: translateY(-16px); opacity: 0; } }
.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.toast-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin: -14px 0 4px 40px; }
.toast-push.toast-dismiss { margin-left: auto; color: var(--muted-text); font-weight: 500; }   /* read: clears the bell badge (v173) */
.toast-push { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 4px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.toast-push:hover { text-decoration: underline; text-underline-offset: 2px; }
.toast-main { flex: 1; min-width: 0; display: flex; gap: 10px; padding: 12px 4px 12px 14px; color: var(--ink); text-decoration: none; }
.toast-main .ic { color: var(--accent); margin-top: 2px; }
.toast-main > span { min-width: 0; display: flex; flex-direction: column; }
.toast-msg { color: var(--muted-text); font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.toast .icon-btn { margin: 4px 4px 0 0; color: var(--muted); }
@media (min-width: 900px) { .toast { top: 72px; left: auto; right: 24px; } }

/* ---------- install prompt ---------- */
.install-backdrop { z-index: 40; }
.install-prompt {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0;
  background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  padding: 20px 20px calc(20px + var(--safe-b)); animation: slide-in 0.34s cubic-bezier(0.05, 0.7, 0.1, 1);
}
.install-prompt p { margin: 12px 0; color: var(--muted-text); }
.ip-head { display: flex; align-items: center; gap: 14px; }
.ip-head img { border-radius: 13px; flex: none; }
.ip-steps { margin: 0 0 16px; padding-left: 22px; line-height: 1.5; }
.ip-steps li { margin: 6px 0; }
.inline-ic { display: inline-flex; vertical-align: -3px; color: #007aff; }
.ip-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ip-actions .btn { flex: 1; }
@media (min-width: 600px) {
  .install-prompt { left: 50%; right: auto; bottom: 24px; width: 440px; transform: translateX(-50%); border-radius: 18px; animation-name: rise-in; }
  .install-prompt.closing { animation-name: drop-out; }
}
.alert-tools { display: flex; justify-content: flex-end; margin: -4px 0 0; }
.alert-item { position: relative; padding-right: 40px; }
.alert-x { position: absolute; top: 6px; right: -6px; color: var(--muted); }
button.menu-item { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.menu-item .lang-toggle { flex: none; margin: 0; }
/* Phones/tablets: language switch in the banner's bottom-right corner, beside the shorter date line */
.banner { position: relative; }
.banner-lang { display: none; }
@media (max-width: 899px) {
  .banner-lang { display: block; position: absolute; bottom: 14px; right: 12px; }
}
@media (max-width: 359px) {   /* very narrow phones: keep the text clear of it */
  .banner-text { padding-right: 84px; }
}
.lang-toggle.on-banner { margin: 0; font-size: 0.8rem; padding: 3px 11px; color: #fff; background: rgba(0,0,0,0.28); border-color: rgba(255,255,255,0.7); }

/* ---------- text size (More / About): --ts is set by the app ----------
   Only the page content and panels grow; the top bar, banner and bottom tabs keep their size. */
main, .sheet-head, .sheet-body { zoom: var(--ts, 1); }

/* ---------- favorites (stars) ---------- */
/* The card fills its grid cell, so in two columns the dividers of side-by-side cards line up (Dan); the divider is on
   the cell, the content stays at the top. Layout: see "Event cards" below. */
.session-wrap { position: relative; border-bottom: 1px solid var(--line); }
.session-wrap > .session { border-bottom: 0; }
.star {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent;
  color: var(--icon-dim); cursor: pointer; padding: 0;
}
.star.on { color: var(--star); }
.star:active { background: var(--bg-2); }
.session-wrap > .star { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); }
.vol-names li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vol-names .star { width: 36px; height: 36px; margin: -6px 0; }
.detail-buttons .fav-btn.on .ic { color: var(--star); }

/* ---------- More menu (phones): slides up above the bottom tabs ---------- */
.more-backdrop { z-index: 18; }
.more-sheet {
  position: fixed; z-index: 19; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b));
  background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
  padding: 8px 8px 4px; animation: slide-in 0.34s cubic-bezier(0.05, 0.7, 0.1, 1); overflow-y: auto;
  /* As tall as the screen allows, leaving a strip of page above it (tap to close) */
  max-height: calc(100vh - var(--nav-h) - var(--safe-b) - 48px);
  max-height: calc(100dvh - var(--nav-h) - var(--safe-b) - 48px);
}
.more-sheet .menu-list { border: 0; max-width: none; }
.more-sheet .menu-item { padding: 14px 12px; }
/* Desktop: the More menu slides in from the right, below the top bar, like the detail panels */
@media (min-width: 900px) {
  .more-sheet {
    left: auto; right: 12px; top: 72px; bottom: auto; width: 400px; max-height: calc(100vh - 96px);
    border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); animation-name: slide-in-right;
  }
  .more-backdrop { top: 60px; }
}
.bottomnav button.nav-item { background: none; border: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* More: groups of menu items with space between */
.menu-list + .menu-list { margin-top: 14px; }
.more-sheet .menu-list + .menu-list { margin: 0 -8px; padding: 0 8px; border-top: 8px solid var(--bg-2); border-radius: 0; }
/* Light themes: section breaks halfway between the tile color and the panel (Dan, v146: too tinted) */
html:not([data-mode="dark"]) .more-sheet .menu-list + .menu-list { border-top-color: color-mix(in srgb, var(--bg-2) 50%, var(--surface)); }
/* Program: star toggle (show only starred events) */
.btn.star-filter { padding: 8px 11px; color: var(--icon-dim); }
.btn.star-filter.on { color: var(--star); border-color: var(--star); background: var(--star-soft); }
/* Phones: Filter shows just its icon so the search box has room */
@media (max-width: 599px) {
  .toolbar .btn-label { display: none; }
  .toolbar .btn.outline { padding: 8px 11px; }
}
/* Event cards (Dan, v183): the time | room line and the name run the full width (long names wrap less); the star and
   the arrow sit on the line right below the name (the details' first line). A card without details has them beside
   the name. Built as a grid: the card (.session-wrap) has the columns text | star | arrow, the link inside it uses
   the same rows and columns (subgrid) and its text lines are placed in them directly (session-main makes no box), so
   the star (outside the link) and the arrow (inside it) can share a row with a given line, whatever wraps above it.
   The star and arrow don't make their line taller (negative margins down to the line's height). */
.session-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 40px 22px; grid-template-rows: auto auto auto auto; align-content: start;
  --line-h: calc(0.95rem * 1.45); }   /* the details line */
.session-wrap > .session { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 0; }
.session-wrap .session-main { display: contents; }
.session-wrap .session-main > * { grid-column: 1 / -1; }
.session-wrap .when { grid-row: 1; }
.session-wrap .title { grid-row: 2; }
.session-wrap .details { grid-row: 3; grid-column: 1; padding-right: 8px; }
.session-wrap .chev, .session-wrap > .star { grid-row: 3; align-self: start; }
.session-wrap .chev { grid-column: 3; justify-content: flex-end; margin-block: calc((var(--line-h) - 20px) / 2); margin-top: calc((var(--line-h) - 20px) / 2 + 2px); }   /* + the 2px above the line */
.session-wrap > .star { grid-column: 2; position: static; transform: none; width: 40px; height: 40px; border-radius: 10px;
  margin-block: calc((var(--line-h) - 40px) / 2); margin-top: calc((var(--line-h) - 40px) / 2 + 2px); font-size: inherit; }   /* (font-size: --line-h may be in em; a button has its own 13px) */
/* No details: beside the name, which then leaves room for them */
.session-wrap:not(:has(.details)) { --line-h: calc(1em * 1.45); }
.session-wrap:not(:has(.details)) .title { grid-column: 1; padding-right: 8px; }
.session-wrap:not(:has(.details)) .chev, .session-wrap:not(:has(.details)) > .star { grid-row: 2; }
/* Text size slider (More menu, About) */
.ts-label { white-space: nowrap; }
.ts-value { margin-left: 4px; font-size: 0.9em; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ts-a { font-weight: 700; font-size: 13px; line-height: 1; color: var(--ink); flex: none; }
.ts-a.big { font-size: 22px; }
.ts-track { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ts-track input { flex: 1; min-width: 60px; width: auto; margin: 0; height: 32px; accent-color: var(--accent); cursor: pointer; }
.menu-item.ts-row span { flex: none; }      /* not the menu's stretched label */
.menu-item.ts-row .ts-track { flex: 1; margin-left: 6px; }
/* Theme picker (More menu): the Theme row opens a grid of swatches (app.js themeGrid). */
/* Past Events (More menu): Auto | Show | Hide */
.past-row { align-items: flex-start; }
.past-row > .ic { margin-top: 5px; }
.past-main { flex: 1; min-width: 0; }
.past-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.seg-group { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); }
.seg { border: 0; background: none; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.seg.on { background: var(--accent); color: var(--on-accent); }
/* Three-choice switches (Past Events): a little tighter so the row stays on one line with large phone text */
.seg-group .seg:first-child:nth-last-child(3), .seg-group .seg:first-child:nth-last-child(3) ~ .seg { padding: 5px 9px; }
.past-note { margin-top: 6px; color: var(--muted-text); font-size: 0.85rem; font-weight: 500; }
.past-note.remind-error { color: var(--error); }
/* My Schedule: "Add to Calendar" under the search bar, on the right */
.cal-row { display: flex; justify-content: flex-end; margin: -6px 0 2px; }
.cal-link { background: none; border: 0; font: inherit; cursor: pointer; font-size: 0.95rem; }
/* Past events, when shown: faded, with an "Ended" tag after the time */
.session.ended .session-main, .session-wrap .session.ended .session-main > *, .vol-slot.ended { opacity: 0.6; }
.ended-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--bg-2); color: var(--muted-text); font-size: 0.72rem; font-weight: 700; vertical-align: 1px; }
/* Events under way: a solid "Now" tag (button colors) after the time */
.now-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-size: 0.72rem; font-weight: 700; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.theme-row .theme-current { flex: 1; text-align: right; color: var(--ink-2); font-weight: 500; font-size: 0.9rem; min-width: 0;
  line-height: 1.2; }
.theme-row .ic:last-child { flex: none; color: var(--icon-dim); transition: transform 0.15s; }
.theme-row[aria-expanded="true"] .ic:last-child { transform: rotate(90deg); }
.theme-grid { padding: 4px 12px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.theme-auto { justify-self: start; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.theme-auto.on { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink); display: inline-flex; align-items: center;
  gap: 7px; padding-left: 7px; }
/* Same check badge as a chosen swatch: Auto checks itself and the theme it picked. */
.theme-auto-check { width: 19px; height: 19px; border-radius: 50%; background: var(--accent-ink); color: var(--surface);
  font-size: 12px; font-weight: 800; line-height: 19px; text-align: center; flex: none; }
.theme-group-name { display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 6px; }
/* Six to a row across the panel's width, whatever the text size. */
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 2px; }
/* gap 7px: a little room below the chosen swatch's outer ring before the name */
.swatch { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 2px 0; background: none;
  border: 0; cursor: pointer; font: inherit; color: var(--ink); }
/* The swatch: the theme's button color (app.js brightens dark ones so they show) ringed by its top bar color, then a
   thin outer ring that tells light from dark (white for a light theme, dark for a dark one) and a hairline so it shows
   on any panel. The chosen theme gets a thick ring in the accent color and a check mark. */
.swatch-chip { --sw-edge: #ffffff; position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--sw-accent);
  box-shadow: inset 0 0 0 5px var(--sw-bar), 0 0 0 2.5px var(--sw-edge), 0 0 0 3.5px color-mix(in srgb, var(--ink) 35%, transparent); }
.swatch-chip.dark { --sw-edge: #3a3a3a; }
html[data-mode="dark"] .swatch-chip.dark { --sw-edge: #000000; }
.swatch-name { font-size: 0.85rem; line-height: 1.15; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.swatch.on .swatch-chip { box-shadow: inset 0 0 0 5px var(--sw-bar), 0 0 0 2.5px var(--sw-edge), 0 0 0 4.5px var(--surface),
  0 0 0 7.5px var(--accent-ink); }
.swatch.on .swatch-chip::after { content: "\2713"; position: absolute; top: -8px; right: -9px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--accent-ink); color: var(--surface); font-size: 12px; font-weight: 800; line-height: 19px;
  text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.swatch.on .swatch-name { color: var(--ink); font-weight: 800; }
/* A row with fewer than six swatches (EPGSA: Light, Material, Dark) has room beside each, so names stay on one line,
   centered and running a little into the gaps if wider than their column. */
.swatch.short-row { overflow: visible; }
.swatch.short-row .swatch-name { white-space: nowrap; overflow-wrap: normal; max-width: none; }
.swatch:hover .swatch-chip, .theme-auto:hover { filter: brightness(1.1); }
/* Text links: underline on hover (mouse) so they read as links */
.rich a:hover, .text-link:hover, .facts dd a:hover, .toast-main:hover strong { text-decoration: underline; text-underline-offset: 2px; }
/* Dark themes: text and icons in the accent color (event time and room, Info links, "View Event" links, the
   active tab, More menu icons, alert icons, the text size slider and checkboxes) use Accent Text, which dark
   themes make brighter; the Accent itself stays the button color. */
html[data-mode="dark"] .when, html[data-mode="dark"] .rich a, html[data-mode="dark"] .room-notes-head,
html[data-mode="dark"] .text-link, html[data-mode="dark"] .bottomnav .nav-item.active,
html[data-mode="dark"] .menu-item .ic:first-child, html[data-mode="dark"] .toast-main .ic { color: var(--accent-ink); }
html[data-mode="dark"] .ts-track input, html[data-mode="dark"] .check input { accent-color: var(--accent-ink); }

/* Reduce motion: panels just appear (and hidePanel hides them at once) */
@media (prefers-reduced-motion: reduce) {
  .sheet, .more-sheet, .install-prompt, .sheet-backdrop { animation: none; }
}
/* Developer Options (v167): the App Version is tapped 5 times to show them, so no text selection there */
#appVersion { -webkit-user-select: none; user-select: none; }
/* Each tap on the App Version pulses it (v172), so you can tell the tap registered */
#appVersion { display: inline-block; transform-origin: left center; }
#appVersion.tapped { animation: version-tap 0.3s ease-out; }
@keyframes version-tap { 40% { transform: scale(0.88); color: var(--accent-ink); } }
/* Snackbar (Developer Options taps): a short message above the bottom tabs that fades away by itself */
.snack {
  position: fixed; z-index: 40; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); width: max-content; max-width: min(440px, calc(100% - 32px));
  padding: 12px 18px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 0.92rem; font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); pointer-events: none;
  opacity: 0; transform: translate(-50%, 12px); transition: opacity 0.2s, transform 0.2s;
}
.snack.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .snack { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { #appVersion.tapped { animation: none; } .snack { transition: opacity 0.2s; transform: translate(-50%, 0); } }
/* Developer Options: Device Name (v174) */
.dev-name { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 40px; padding: 8px 12px; font: inherit;
  color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.dev-name::placeholder { color: var(--muted-text); }
.dev-name:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
/* Filter panels (v176, Dan): Clear All / Done always in view at the bottom; the filter list scrolls above them.
   On desktop (full-height panel) they sit at the panel's bottom even when the list is short. */
.sheet-body:has(> .sheet-filter) { flex: 1; display: flex; flex-direction: column; }
.sheet-filter { flex: 1 0 auto; display: flex; flex-direction: column; }
.sheet-filter .sheet-actions {
  position: sticky; bottom: calc(-24px - var(--safe-b)); z-index: 1; margin: auto -16px calc(-24px - var(--safe-b));
  padding: 12px 16px calc(12px + var(--safe-b)); background: var(--surface); border-top: 1px solid var(--line);
}
.sheet-filter > .filter-group:last-of-type { border-bottom: 0; }   /* the buttons' top line takes its place */

/* =====================================================================================================================
   Area 59 Roster additions
   ===================================================================================================================== */

/* signed out: no tabs; the sign-in screen sits on the Glide app's autumn picture */
.roster.signed-out .topnav, .roster.signed-out .bottomnav, .roster.signed-out .status-top, .roster.signed-out .topbar { display: none; }
.roster.signed-out { padding-bottom: 24px; min-height: 100vh; min-height: 100dvh;
  background: #5a1f0a url("icons/signin.jpg") center / cover no-repeat fixed; }
.signin { max-width: 420px; margin: 0 auto; padding-top: max(24px, 6vh); }
.signin-head { text-align: center; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.45); margin-bottom: 20px; }
.signin-head img { border-radius: 22px; box-shadow: 0 6px 24px rgba(0,0,0,0.3); }
.signin-head h1 { font-size: 1.7rem; margin: 14px 0 4px; }
.signin-head p { margin: 0; font-size: 1.05rem; }
.signin-card { box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.signin-card > p:first-child { margin-top: 0; }
.signin .btn { width: 100%; }
.a-or { display: flex; align-items: center; gap: 10px; color: var(--muted-text); font-size: 0.9rem; margin: 18px 0; }
.a-or::before, .a-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Google's button is a light page in a frame: the same color scheme keeps it see-through in dark themes */
.a-google { display: flex; justify-content: center; min-height: 44px; color-scheme: light; }
.a-field { display: block; margin-bottom: 16px; }
.a-label { display: block; font-size: 0.9rem; font-weight: 650; margin-bottom: 5px; }
.a-input { display: block; width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; font: inherit; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--muted) 45%, var(--surface)); background: var(--surface); }
.a-input:focus { outline: 2px solid var(--accent-ink); outline-offset: -1px; border-color: transparent; }
.a-code { font-size: 1.6rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.a-error { background: color-mix(in srgb, var(--error) 14%, var(--surface)); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 0.95rem; }
.a-loading { display: flex; justify-content: center; padding: 48px 0; }
.a-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--bg-2); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.a-spinner.small { width: 18px; height: 18px; border-width: 2.5px; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; flex: none; }
.btn.waiting { gap: 10px; }
.btn:disabled { opacity: 0.85; cursor: default; }
.a-wait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--accent-ink); }
.snack.bad { background: var(--error); color: var(--surface); }

/* top bar: Offline / Updated and refresh at the end on desktop, as in the admin site */
.top-status { display: flex; align-items: center; gap: 4px; margin-left: 4px; font-size: 0.85rem; white-space: nowrap; color: var(--bar-ink); }
.top-status .icon-btn { color: var(--bar-ink); }
@media (max-width: 1099px) { .top-status .st-time { display: none; } }
.top-status .pill, .status-top button.pill { background: transparent; border-color: color-mix(in srgb, var(--bar-ink) 50%, transparent); color: var(--bar-ink); padding: 0 8px; font: inherit; cursor: pointer; }
.roster .bottomnav button.nav-item { line-height: inherit; }
/* A light top bar (Roster Classic, like Glide's white bar): a line under it, and the selected tab in the accent */
html[data-bar="light"] .topbar { border-bottom: 1px solid var(--line); }
html[data-bar="light"] .topnav .nav-item.active, html[data-bar="light"] .nav-more > .nav-item.active { background: var(--accent-soft); color: var(--accent-ink); }
/* six bottom tabs: the icon pill a little narrower (the labels are the EPGSA app's size; short names: A59, Service) */
.bottomnav .nav-item .nav-ic { padding: 3px 14px; }

/* roster lists: Glide's dense contact rows (role label in the accent color, bold name, email, phone), with the EPGSA
   app's dividers, group bands and hover/press effects; star and arrow at the right */
.roster-group .day-title { font-size: 1.1rem; }
/* the star sits just left of the arrow, centered on the row (as the EPGSA cards had it) */
.person-wrap { position: relative; border-bottom: 1px solid var(--line); }
.person { display: flex; align-items: flex-start; gap: 12px; padding: 9px 2px 9px 4px; color: inherit; text-decoration: none; min-width: 0; }
.person-wrap:has(> .star) .person-main { padding-right: 40px; }
.person-main { flex: 1; min-width: 0; }
.p-role { color: var(--accent); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.p-name { font-weight: 650; margin-top: 2px; overflow-wrap: anywhere; }
.p-line { color: var(--muted-text); font-size: 0.95rem; overflow-wrap: anywhere; line-height: 1.35; }
html[data-mode="dark"] .p-role { color: var(--accent-ink); }
html[data-mode="dark"] .p-line { color: var(--ink-2); }
.person.vacant .p-name { color: var(--muted-text); font-weight: 500; font-style: italic; }
.person .chev { align-self: center; }
.person-wrap > .star { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.person-wrap > .star:active { transform: translateY(-50%) scale(0.92); scale: none; }
.day-group:has(+ .day-group) .session-grid > .person-wrap:last-child { border-bottom: 0; }
@media (min-width: 760px) { .day-group:has(+ .day-group) .session-grid > .person-wrap:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
@media (hover: hover) {
  .person-wrap:has(> .person:hover) { background: color-mix(in srgb, var(--bg-2) 60%, var(--surface)); }
  .c-btn:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent)); }
  .chip-link:hover { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--accent-ink) 8%, transparent); }
}
.person:active { background: var(--bg-2); }
.new-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--badge); color: #fff; font-size: 0.68rem;
  font-weight: 700; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.avatar { flex: none; display: inline-flex; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--bg-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.small { width: 42px; height: 42px; margin-top: 2px; }
.avatar.large { width: 84px; height: 84px; }
.avatar.profile-ic { align-items: center; justify-content: center; color: var(--accent); background: var(--accent-soft); width: 64px; height: 64px; }
html[data-mode="dark"] .avatar.profile-ic { color: var(--accent-ink); }

/* person details */
.p-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.p-head-text { min-width: 0; }
.p-where { color: var(--accent); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
html[data-mode="dark"] .p-where { color: var(--accent-ink); }
.p-big { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 2px 0; overflow-wrap: anywhere; }
.p-role-big { color: var(--ink-2); font-weight: 500; }
.sheet .detail-buttons { margin: 0 0 14px; }
.c-card { padding: 4px 6px 4px 14px; }
.c-row { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); }
.c-row:last-child { border-bottom: 0; }
.c-ic { color: var(--muted); display: flex; }
.c-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
a.c-text { color: var(--accent-ink); text-decoration: none; }
.c-btn { color: var(--accent); background: var(--accent-soft); border-radius: 50%; width: 42px; height: 42px; flex: none; }
html[data-mode="dark"] .c-btn { color: var(--accent-ink); }
.c-btn + .c-btn { margin-left: -4px; }
.p-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
.p-actions .btn { min-height: 40px; font-size: 0.9rem; }
.pic-btn { cursor: pointer; }
.sheet .text-link { margin-top: 4px; }

/* Service Calendar */
.cal-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-ink); font-weight: 650; font-size: 0.92rem; text-decoration: none; }
.event-list { display: grid; gap: 10px; padding-bottom: 4px; }
@media (min-width: 760px) { .event-list { grid-template-columns: 1fr 1fr; } }
.event-card { display: flex; align-items: center; gap: 8px; padding: 12px 10px 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit; text-decoration: none; transition: background-color 0.15s, box-shadow 0.15s; }
@media (hover: hover) { .event-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.1); } }
.event-card:active { background: var(--bg-2); }
.ev-main { flex: 1; min-width: 0; }
.ev-title { font-weight: 650; margin-top: 4px; }
.ev-loc { color: var(--ink-2); font-size: 0.92rem; }
.ev-when { color: var(--muted-text); font-size: 0.88rem; margin-top: 2px; }
.att-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
/* the Glide sheet's colors: Expected purple, Suggested blue, Optional green, others (Officers Only) brown */
.att-tag.expected { background: #ede3fb; color: #5b2a9e; }
.att-tag.suggested { background: #dceafd; color: #1f5aa6; }
.att-tag.optional { background: #dcf3e2; color: #1d6b37; }
.att-tag.other { background: #f1e6dc; color: #6e4a2c; }
html[data-mode="dark"] .att-tag.expected { background: #3d2a5c; color: #dcc8ff; }
html[data-mode="dark"] .att-tag.suggested { background: #1f3552; color: #bcd6ff; }
html[data-mode="dark"] .att-tag.optional { background: #1f3d29; color: #b6e8c4; }
html[data-mode="dark"] .att-tag.other { background: #45342a; color: #ecd2bf; }
.ev-address a { color: var(--accent-ink); overflow-wrap: anywhere; }
.ev-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.ev-address { margin-top: 14px; }
.ev-notes { white-space: pre-line; }

/* Profile, About */
.profile-list .menu-item span { font-weight: 550; }
.freq-card p:first-child { margin-top: 0; }
.about h2 { overflow-wrap: anywhere; }

/* "Panel 77" in small text under the title (top bar; sign-in screen) */
#appTitle, #pageTitle { line-height: 1.15; min-width: 0; }
.t-main, .t-panel { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-panel { font-size: 0.78rem; font-weight: 600; opacity: 0.88; letter-spacing: 0.02em; margin-top: 1px; }
@media (min-width: 900px) { .roster #appTitle { display: block; } }
.signin-head h1 { margin-bottom: 0; }
.signin-panel { font-size: 1rem; font-weight: 600; opacity: 0.92; margin-bottom: 6px; }
/* Bottom tabs sized by their labels (not six equal columns), so "Committees" fits on a narrow phone (Dan's ~366px) */
.roster:not(.admin) .bottomnav { display: flex; }
.roster:not(.admin) .bottomnav .nav-item { flex: 1 1 auto; min-width: 0; }
@media (max-width: 340px) { .bottomnav .nav-item .nav-ic { padding: 3px 10px; } }