/* Nova safety portal: shared design kit, v2 "Liquid Glass" (see DESIGN.md).
   Two layers, as Apple's HIG describes them:
   - the content layer: solid grouped surfaces, never glass;
   - the Liquid Glass layer: sidebar, toolbar groups, brand capsule, live status, sheets. Nothing else.
   glass.js adds edge lensing in Chromium; theme.js handles light/dark. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --cell: #1C1C1E;
  --cell-2: #2C2C2E;
  --cell-3: #3A3A3C;
  --label: #FFFFFF;
  --label-2: rgba(235, 235, 245, 0.64);
  --label-3: rgba(235, 235, 245, 0.40);
  --separator: rgba(84, 84, 88, 0.60);
  --fill: rgba(120, 120, 128, 0.24);
  --fill-2: rgba(120, 120, 128, 0.32);

  --accent: #0A84FF;           /* tint, focus, selection */
  --accent-text: #409CFF;      /* blue text (increased-contrast variant) */
  --prominent: #0071E3;        /* fill behind white text on the one primary action */
  --badge: #E0262E;

  --green: #30D158;  --green-text: #30DB5B;  --green-bg: rgba(48, 209, 88, 0.16);
  --orange: #FF9F0A; --orange-text: #FFB340; --orange-bg: rgba(255, 159, 10, 0.16);
  --red: #FF453A;    --red-text: #FF6961;    --red-bg: rgba(255, 69, 58, 0.17);
  --purple: #BF5AF2; --purple-text: #DA8FFF; --purple-bg: rgba(191, 90, 242, 0.18);
  --gray: #8E8E93;   --gray-text: #AEAEB2;   --gray-bg: rgba(142, 142, 147, 0.18);

  /* Liquid Glass, regular variant */
  --glass: rgba(30, 30, 32, 0.46);
  --glass-thick: rgba(30, 30, 32, 0.80);
  --glass-hover: rgba(255, 255, 255, 0.08);
  --glass-press: rgba(255, 255, 255, 0.14);
  --glass-rim: linear-gradient(155deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.10) 30%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.28));
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%);
  --glass-lift: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 32px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.40);
  --lens-fill: rgba(255, 255, 255, 0.13);
  --dim: rgba(0, 0, 0, 0.52);
  --select-bg: #2C2C2E;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23AEAEB2%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F2F7;
  --cell: #FFFFFF;
  --cell-2: #F2F2F7;
  --cell-3: #E5E5EA;
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.78);
  --label-3: rgba(60, 60, 67, 0.42);
  --separator: rgba(60, 60, 67, 0.18);
  --fill: rgba(120, 120, 128, 0.12);
  --fill-2: rgba(120, 120, 128, 0.20);

  --accent: #007AFF;
  --accent-text: #0066CC;
  --prominent: #0071E3;
  --badge: #D70015;

  --green: #34C759;  --green-text: #1C7533;  --green-bg: rgba(52, 199, 89, 0.12);
  --orange: #FF9500; --orange-text: #B02E00; --orange-bg: rgba(255, 149, 0, 0.13);
  --red: #FF3B30;    --red-text: #C00013;    --red-bg: rgba(255, 59, 48, 0.10);
  --purple: #AF52DE; --purple-text: #7D3D9C; --purple-bg: rgba(175, 82, 222, 0.11);
  --gray: #8E8E93;   --gray-text: #58585D;   --gray-bg: rgba(142, 142, 147, 0.14);

  --glass: rgba(255, 255, 255, 0.48);
  --glass-thick: rgba(250, 250, 252, 0.86);
  --glass-hover: rgba(0, 0, 0, 0.05);
  --glass-press: rgba(0, 0, 0, 0.09);
  --glass-rim: linear-gradient(155deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5) 32%, rgba(0, 0, 0, 0.07) 68%, rgba(0, 0, 0, 0.14));
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%);
  --glass-lift: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 34px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.07);
  --lens-fill: rgba(255, 255, 255, 0.85);
  --dim: rgba(0, 0, 0, 0.26);
  --select-bg: #EEEEF0;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2358585D%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
}

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Concentric radii: floating objects inset 12 from the viewport */
  --edge: 12px;
  --r-bar: 24px;        /* 48 px toolbar capsule */
  --r-bar-item: 20px;   /* 40 px items, 4 px padding: 24 - 4 */
  --r-side: 26px;       /* sidebar */
  --r-side-row: 18px;   /* 8 px padding: 26 - 8 */
  --r-sheet: 30px;
  --r-sheet-well: 16px; /* 14 px padding: 30 - 14 */
  --r-section: 22px;    /* inset-grouped sections in the content layer */
  --r-control: 12px;    /* fields and small controls in content */
  --side-w: 264px;

  /* Aliases for names used before v2 */
  --surface: var(--cell); --raised: var(--cell-2); --line: var(--separator); --line-soft: var(--separator);
  --ink: var(--label); --ink-2: var(--label-2); --muted: var(--label-2); --on-ink: var(--cell);
  --c-111: var(--label); --c-fff: var(--cell); --c-999: var(--label-2); --c-888: var(--label-2); --c-E0E0E0: var(--separator);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--label);
  font-family: var(--font); font-size: 17px; line-height: 22px; letter-spacing: normal;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.i { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The logo is a black N on white. Shown uncropped: in light mode the white multiplies away; in dark
   mode it is inverted and the black screened away, so only the mark remains on any surface. */
img[alt="Nova Church"] { mix-blend-mode: multiply; }
:root[data-theme="dark"] img[alt="Nova Church"] { filter: invert(1); mix-blend-mode: screen; }

/* ── Liquid Glass ───────────────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.9);
  backdrop-filter: var(--lens, ) blur(14px) saturate(1.9);
  box-shadow: var(--glass-lift);
}
.glass::before, .glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
/* specular rim: a 1 px gradient edge, bright where light would catch it */
.glass::before {
  padding: 1px; background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass::after { background: var(--glass-sheen); }
.glass-thick { background: var(--glass-thick); }

/* One scroll edge effect per view, only where content scrolls under floating controls. */
.scroll-edge {
  position: fixed; top: 0; left: 0; right: 0; height: 88px; z-index: 20; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 82%, transparent), color-mix(in srgb, var(--bg) 40%, transparent) 55%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent); mask-image: linear-gradient(to bottom, #000 35%, transparent);
}

/* ── Toolbar: up to three groups, leading and trailing ──────────────────── */
.tb { position: fixed; z-index: 30; top: calc(var(--edge) + env(safe-area-inset-top, 0px)); right: calc(var(--edge) + env(safe-area-inset-right, 0px)); left: calc(var(--tb-left, var(--edge)) + env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.tb > *, .tb-trail > * { pointer-events: auto; }
.tb-trail { display: flex; align-items: center; gap: 10px; margin-left: auto; pointer-events: none; }
.tb-group { display: flex; align-items: center; gap: 2px; height: 48px; padding: 4px; border-radius: var(--r-bar); }
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; min-width: 40px; padding: 0 14px; border: 0; border-radius: var(--r-bar-item);
  background: transparent; color: var(--label); font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
.tb-btn.icon { width: 40px; padding: 0; }
.tb-btn:hover { background: var(--glass-hover); }
.tb-btn:active { background: var(--glass-press); transform: scale(0.96); }
.tb-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--badge); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
/* the single primary action: tinted glass */
.tb-prominent { height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-bar); background: color-mix(in srgb, var(--prominent) 92%, transparent); color: #fff; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tb-prominent.glass { background: color-mix(in srgb, var(--prominent) 92%, transparent); }
.tb-prominent:hover { background: var(--prominent); }
.tb-prominent:active { transform: scale(0.97); }
.tb-brand { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 14px; border-radius: var(--r-bar); }
.tb-brand img { display: block; height: 30px; width: auto; flex-shrink: 0; }
.tb-brand-title { display: block; font-size: 15px; font-weight: 600; line-height: 18px; }
.tb-brand-sub { display: block; font-size: 12px; line-height: 15px; color: var(--label-2); }
/* light/dark switch: show the icon and words for the mode you would switch to */
.when-light, :root[data-theme="light"] .when-dark { display: none; }
:root[data-theme="light"] .when-light { display: revert; }
:root[data-theme="light"] svg.when-light { display: block; }
.home-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 50%; }
.home-link:hover img { opacity: 0.85; }
a.tb-brand { color: inherit; text-decoration: none; border-radius: var(--r-bar); }
a.tb-prominent { text-decoration: none; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar { position: fixed; z-index: 25; top: var(--edge); bottom: var(--edge); left: var(--edge); width: var(--side-w); padding: 8px; border-radius: var(--r-side); display: flex; flex-direction: column; }
.side-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px; }
.side-head img { display: block; height: 34px; width: auto; margin: 0 4px; }
.side-title { font-size: 17px; font-weight: 700; line-height: 21px; }
.side-sub { font-size: 12px; line-height: 15px; color: var(--label-2); }
.side-section { padding: 10px 12px 6px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.side-list { position: relative; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; flex: 0 1 auto; scrollbar-width: none; }
.side-row {
  position: relative; z-index: 1; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-side-row); background: transparent;
  color: var(--label); font-size: 15px; font-weight: 500; line-height: 20px; text-align: left; width: 100%;
}
.side-row.no-icon { grid-template-columns: 1fr auto; }
.side-row:hover { background: var(--glass-hover); }
.side-row .i { color: var(--label-2); }
.side-row.active { color: var(--accent-text); font-weight: 600; }
.side-row.active .i { color: var(--accent-text); }
.side-row.active:hover { background: transparent; }
.side-count { font-size: 13px; font-weight: 500; color: var(--label-2); }
.side-row.active .side-count { color: var(--accent-text); }
.side-code { display: block; font-size: 12px; font-weight: 400; color: var(--label-2); line-height: 15px; }
.side-foot { margin-top: auto; padding-top: 8px; border-top: 0.5px solid var(--separator); display: flex; flex-direction: column; gap: 2px; }
a.side-row { color: inherit; text-decoration: none; }
/* the selection lens glides to the chosen row (glass.js positions it) */
.side-lens {
  position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 44px; border-radius: var(--r-side-row);
  background: var(--lens-fill); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform .5s cubic-bezier(.25, 1.35, .45, 1), height .3s ease; pointer-events: none;
}

/* ── Content-layer controls ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 7px 16px; border: 0; border-radius: 999px;
  background: var(--fill); color: var(--label); font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease; text-decoration: none;
}
.btn:hover { background: var(--fill-2); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn-prominent { background: var(--prominent); color: #fff; }
.btn-prominent:hover { background: color-mix(in srgb, var(--prominent) 88%, #000); }
.btn-destructive { color: var(--red-text); }
.btn-destructive-filled { background: var(--red-text); color: var(--cell); }
.btn-plain { background: transparent; color: var(--accent-text); padding-left: 10px; padding-right: 10px; }
.btn-plain:hover { background: var(--fill); }
.btn-icon { width: 36px; padding: 0; color: var(--label-2); background: transparent; }
.btn-icon:hover { background: var(--fill); color: var(--label); }
.btn-icon.danger:hover { color: var(--red-text); }
.btn-lg { min-height: 50px; padding: 12px 22px; font-size: 17px; }

.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: var(--fill); color: var(--label); font-size: 15px; font-weight: 500; white-space: nowrap; }
.chip:hover:not(:disabled) { background: var(--fill-2); }
/* toggled state: the look Apple reserves for it */
.chip.on, .chip[aria-pressed="true"] { background: var(--label); color: var(--bg); }
.chip:disabled { color: var(--label-3); cursor: default; }
.chip .n { font-weight: 700; }

.field-input, .search-field {
  width: 100%; min-height: 44px; padding: 11px 14px; border: 0; border-radius: var(--r-control);
  background: var(--fill); color: var(--label); font-size: 17px; line-height: 22px;
}
.field-input::placeholder, .search-field::placeholder { color: var(--label-3); }
.field-input:focus, .search-field:focus { outline: 2px solid var(--accent); outline-offset: 0; }
/* Dropdowns: solid backgrounds (a translucent select makes Chrome on Windows draw an unreadable list in dark mode),
   themed option lists, and a chevron rather than drawn triangles. Applies to every select in the portal. */
select { appearance: none; -webkit-appearance: none; background-color: var(--select-bg) !important; background-image: var(--select-chevron) !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px 16px !important; padding-right: 38px !important; color: var(--label); cursor: pointer; }
select option, select optgroup { background-color: var(--cell-2); color: var(--label); }
.search-wrap { position: relative; }
.search-wrap .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--label-2); pointer-events: none; }
.search-field { padding-left: 40px; border-radius: 22px; }

/* Status pills: colour plus a word, never colour alone */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.st-current { background: var(--green-bg); color: var(--green-text); }
.st-expiring { background: var(--orange-bg); color: var(--orange-text); }
.st-expired { background: var(--red-bg); color: var(--red-text); }
.st-pending { background: var(--purple-bg); color: var(--purple-text); }
.st-missing { background: var(--gray-bg); color: var(--gray-text); }

/* ── Sheets (modal tasks over a dimming layer) ──────────────────────────── */
.sheet-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--dim); }
.sheet { width: 100%; max-width: 640px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; border-radius: var(--r-sheet); overflow: hidden; animation: sheet-in .38s cubic-bezier(.2, 1.1, .35, 1); }
.sheet.glass { background: var(--glass-thick); }
.sheet-wide { max-width: 760px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 14px 12px 24px; flex-shrink: 0; }
.sheet-kicker { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--label-2); margin-bottom: 2px; }
.sheet-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: normal; }
.sheet-sub { font-size: 15px; line-height: 20px; color: var(--label-2); margin-top: 2px; }
.sheet-close { width: 36px; height: 36px; border: 0; border-radius: 18px; background: var(--fill); color: var(--label-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sheet-close:hover { color: var(--label); background: var(--fill-2); }
.sheet-body { flex: 1; overflow-y: auto; padding: 6px 24px 20px; overscroll-behavior: contain; }
.sheet-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 14px 14px 24px; flex-shrink: 0; border-top: 0.5px solid var(--separator); }
.sheet-foot .lead-actions { margin-right: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(0.985); } }

/* ── Form fields fit their column on every phone ─────────────────────────── */
/* A field may shrink to its column (grid and flex items otherwise refuse to go narrower than their content). */
input, select, textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
.form-grid > *, .grid-2 > *, .field { min-width: 0; }
/* iPhone Safari draws date and time fields at a fixed width that ignores the column, which made forms scroll
   sideways; there they take the column's width, keep their height and read from the left. Other browsers keep
   their own date pickers. */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 44px; }
  input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
}
/* and should anything ever be wider, the form and the page still never scroll sideways */
.sheet-body { overflow-x: hidden; }
body { overflow-x: clip; }

/* The beta site's label (added to every page by the Worker on beta.novachurch.com only) */
.beta-badge { position: fixed; z-index: 90; right: calc(var(--edge) + env(safe-area-inset-right, 0px)); bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); padding: 4px 10px; border-radius: 12px; background: var(--orange); color: #000; font-size: 12px; line-height: 16px; font-weight: 700; pointer-events: none; }
@media print { .beta-badge { display: none; } }

/* ── Adaptivity ─────────────────────────────────────────────────────────── */
/* Home-screen web app on a notched iPhone: page content clears the status bar and the rounded corners
   (the toolbar and sheets add the same insets themselves). Zero in an ordinary browser tab. */
html { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (max-width: 640px) {
  :root { --edge: 10px; }
  /* 16 px or more, or iPhone Safari zooms the page when a field is tapped */
  input, select, textarea { font-size: max(16px, 1em); }
  .sheet-overlay { padding: 10px 8px 8px; align-items: flex-end; }
  .sheet { max-height: calc(100vh - 18px); max-height: calc(100dvh - 18px); height: calc(100dvh - 18px); animation-name: sheet-up; }
  .sheet-head { padding: 18px 12px 10px 18px; }
  .sheet-body { padding: 4px 18px 18px; }
  .sheet-foot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 18px; }
  .sheet-overlay { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .tb-btn.collapse-label .lbl { display: none; }
  .tb-btn.collapse-label { position: relative; width: 40px; padding: 0; }
  /* an icon-only button wears its count on the icon's corner, inside the button */
  .tb-btn.collapse-label .tb-badge { position: absolute; top: -1px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; line-height: 16px; }
  /* the brand is just the logo on phones: a round 48 px button, never squeezed */
  .tb-brand { width: 48px; padding: 0; gap: 0; justify-content: center; flex-shrink: 0; }
  .tb-brand-title, .tb-brand-sub { display: none; }
  .tb-prominent.collapse-label .lbl { display: none; }
  .tb-prominent.collapse-label { width: 48px; padding: 0; justify-content: center; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
/* Small phones (iPhone SE and narrower): a tighter toolbar so every button fits */
@media (max-width: 400px) {
  /* beside a brand button there is room for the portal button's icon only (the label stays for screen readers) */
  .tb-brand ~ .tb-trail .portal-btn { width: 48px; padding: 0; justify-content: center; }
  .tb-brand ~ .tb-trail .portal-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tb, .tb-trail { gap: 6px; }
  .tb-group { padding: 3px; gap: 0; }
}

/* ── Accessibility settings ─────────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .glass, .sheet.glass, .tb-prominent.glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cell); }
  .tb-prominent.glass { background: var(--prominent); }
  .glass::after { display: none; }
  .scroll-edge { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(var(--bg) 60%, transparent); }
}
@media (prefers-contrast: more) {
  .glass, .sheet.glass { background: var(--cell); -webkit-backdrop-filter: none; backdrop-filter: none; outline: 1px solid var(--label-2); }
  .glass::before, .glass::after { display: none; }
  :root { --label-2: var(--label); --separator: var(--label-3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media print { .tb, .sidebar, .scroll-edge, #nova-theme-toggle { display: none !important; } }

/* Floating switch, only on pages without a toolbar (theme.js adds it) */
#nova-theme-toggle.floating { position: fixed; right: var(--edge); bottom: var(--edge); z-index: 40; width: 48px; height: 48px; border: 0; border-radius: 24px; color: var(--label); display: inline-flex; align-items: center; justify-content: center; }