/* ============================================================
   SAQ CROS – PWA Stylesheet
   Singapore Aquatics Competition Results One Stop (Swimming)
   ============================================================ */

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
  /* Tell the browser to render native controls (select popups, scrollbars)
     in the matching scheme; overridden to `dark` in the dark-mode block. */
  color-scheme: light;

  --color-primary:      #003b6f;   /* SAQ deep blue */
  --color-primary-dark: #002a52;
  --color-primary-light: #1a5fa0;
  --color-accent:       #00a8e8;   /* pool water blue */
  --color-accent-dark:  #0080b3;
  --color-accent-light: #33c3f0;
  --color-success:      #10b981;   /* emerald */
  --color-warning:      #f59e0b;   /* amber */
  --color-bg:           #f4f7fb;
  --color-bg-alt:       #eef3f8;
  --color-surface:      #ffffff;
  --color-border:       #d6e2ef;
  --color-border-light: #e8eef7;
  --color-text:         #1a2a3a;
  --color-text-muted:   #607080;
  --color-active-bg:    #e8f4fd;
  --color-active-text:  #003b6f;

  --sidebar-width:      300px;
  --sidebar-width-mobile: 300px;
  --header-height:      60px;
  --tab-bar-height:     40px;

  /* Safe-area insets (notch / home indicator). Fall back to 0 off-device. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  /* Combined offset from the top of the viewport to the content area. */
  --top-offset:  calc(var(--header-height) + var(--tab-bar-height) + var(--safe-top));

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;

  --shadow-sm: 0 1px 4px rgba(0, 59, 111, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 59, 111, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 59, 111, 0.16);
  --shadow-xl: 0 12px 48px rgba(0, 59, 111, 0.18);

  --transition: 220ms ease;
  --transition-slow: 320ms ease;
}

/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Ensure the HTML `hidden` attribute always wins over display rules */
[hidden] { display: none !important; }

html { height: 100%; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  height: 100%;
  height: 100dvh; /* dynamic viewport — survives mobile URL-bar collapse */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.sidebar-resizing,
body.sidebar-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* ── Header ──────────────────────────────────────────────────── */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--header-height) + var(--safe-top));
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Pad under the status bar / notch on standalone + landscape devices. */
  padding: var(--safe-top) max(16px, var(--safe-right)) 0 max(16px, var(--safe-left));
  z-index: 100;
  box-shadow: var(--shadow-lg);
}

.menu-btn {
  display: none;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: all var(--transition);
}
.menu-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.05);
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--transition);
}
.menu-icon { position: relative; }
.menu-icon::before { content: ''; position: absolute; top: -6px; }
.menu-icon::after  { content: ''; position: absolute; top:  6px; }

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.header-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}

.header-title h1 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.header-subtitle {
  font-size: 0.72rem;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.install-btn {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 168, 232, 0.35);
}
.install-btn:hover {
  background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);
  box-shadow: 0 4px 14px rgba(0, 168, 232, 0.45);
  transform: translateY(-2px);
}

/* ── Layout ──────────────────────────────────────────────────── */
.layout {
  display: flex;
  margin-top: var(--top-offset);
  height: calc(100vh - var(--header-height) - var(--tab-bar-height) - var(--safe-top));
  height: calc(100dvh - var(--header-height) - var(--tab-bar-height) - var(--safe-top));
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 2px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition-slow);
}

.sidebar-resizer {
  width: 10px;
  flex-shrink: 0;
  position: relative;
  cursor: col-resize;
  background: transparent;
  transition: background-color var(--transition);
}

.sidebar-resizer::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 59, 111, 0.12), rgba(0, 168, 232, 0.5), rgba(0, 59, 111, 0.12));
  opacity: 0.55;
  transition: all var(--transition);
}

.sidebar-resizer:hover,
.sidebar-resizer:focus-visible {
  background: rgba(0, 168, 232, 0.08);
  outline: none;
}

.sidebar-resizer:hover::before,
.sidebar-resizer:focus-visible::before {
  opacity: 1;
  width: 5px;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border-light);
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-surface) 100%);
}

.sidebar-header h2 {
  font-size: 0.9rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  position: relative;
}

.filter-field.has-filter select {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, rgba(0, 168, 232, 0.08), rgba(0, 168, 232, 0.02));
  font-weight: 600;
}

.filter-field.has-filter::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: filter-pulse 1.5s ease-in-out infinite;
}

@keyframes filter-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.filter-field select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  outline: none;
  background: var(--color-surface);
  color: var(--color-text);
  transition: all var(--transition);
  font-weight: 500;
}

.filter-field select:hover {
  border-color: var(--color-accent-light);
  background: linear-gradient(135deg, rgba(0, 168, 232, 0.02), rgba(0, 168, 232, 0.01));
}

.filter-field select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(0, 168, 232, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-wrap input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  outline: none;
  background: var(--color-surface);
  color: var(--color-text);
  transition: all var(--transition);
  font-weight: 500;
}
.search-wrap input:hover {
  border-color: var(--color-accent-light);
  background: linear-gradient(135deg, rgba(0, 168, 232, 0.02), rgba(0, 168, 232, 0.01));
}
.search-wrap input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(0, 168, 232, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-preview {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-accent) 10%, var(--color-primary-light) 90%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  display: flex;
  gap: 6px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 168, 232, 0.2);
  animation: search-preview-enter 0.2s ease-out;
}

.search-preview .preview-count {
  min-width: 1.2em;
  text-align: center;
}

.athlete-gate-panel {
  margin-top: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.04));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.athlete-gate-message {
  font-size: 0.74rem;
  color: #8b4f00;
  font-weight: 600;
  line-height: 1.3;
}

.athlete-gate-btn {
  border: 1px solid #e2a63c;
  border-radius: var(--radius-sm);
  background: #fff3d4;
  color: #7a4a00;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  transition: all var(--transition);
}

.athlete-gate-btn:hover {
  background: #ffe8b3;
  border-color: #cc8c13;
}

.athlete-gate-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.favorites-panel {
  margin-top: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  background: linear-gradient(180deg, rgba(0, 168, 232, 0.06), rgba(0, 59, 111, 0.02));
}

.favorites-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.favorites-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-primary);
}

.clear-favorites-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  transition: all var(--transition);
}

.clear-favorites-btn:hover {
  border-color: var(--color-accent);
  background: rgba(0, 168, 232, 0.08);
}

.clear-favorites-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.2);
}

.favorites-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.favorite-athlete-chip {
  border: 1px solid rgba(0, 59, 111, 0.15);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all var(--transition);
}

.favorite-athlete-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 168, 232, 0.18);
}

.favorite-athlete-chip:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.2);
}

@keyframes search-preview-enter {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.refresh-results-btn {
  width: 100%;
  border: 1px solid var(--color-accent);
  background: linear-gradient(135deg, rgba(0, 168, 232, 0.15), rgba(0, 168, 232, 0.05));
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.refresh-results-btn:hover {
  background: linear-gradient(135deg, rgba(0, 168, 232, 0.2), rgba(0, 168, 232, 0.08));
  transform: translateY(-1px);
}

.refresh-results-btn:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.refresh-results-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.25);
}

.clear-filters-btn {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.clear-filters-btn:hover {
  border-color: var(--color-accent);
  background: rgba(0, 168, 232, 0.08);
}

.clear-filters-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.25);
}

.refresh-status {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.refresh-status.is-error {
  color: #c0392b;
}

.meet-list-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.meet-list {
  list-style: none;
}

.meet-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 16px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: center;
  font-weight: 500;
}

/* Truncation footer at the end of a capped result list */
.meet-list-more {
  padding: 14px 16px;
  gap: 6px;
  font-size: 0.78rem;
  border-top: 1px solid var(--color-border-light);
  margin-top: 4px;
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-right-color: var(--color-accent-light);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  50% { border-right-color: var(--color-accent); }
  100% { transform: rotate(360deg); border-right-color: var(--color-accent-light); }
}

/* Meet group header */
.meet-group-label {
  padding: 10px 16px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 168, 232, 0.04) 50%, transparent 100%);
  color: var(--color-accent);
  margin-top: 8px;
}

/* Meet item */
.meet-item {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  transition: all var(--transition-slow);
  margin: 4px 8px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
}
.meet-item:hover {
  background: var(--color-surface);
  border-color: var(--color-accent-light);
  box-shadow: 0 2px 12px rgba(0, 168, 232, 0.15);
  transform: translateY(-1px);
}
.meet-item.active {
  background: linear-gradient(135deg, var(--color-active-bg) 0%, rgba(0, 168, 232, 0.05) 100%);
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0, 168, 232, 0.25), inset 0 0 0 1px rgba(0, 168, 232, 0.1);
}

.meet-item-btn {
  flex: 1;
  background: none;
  border: none;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: color var(--transition);
}
.meet-item.active .meet-item-btn { color: var(--color-accent); font-weight: 600; }

.athlete-star-btn {
  align-self: center;
  width: 34px;
  height: 34px;
  margin: 0 8px 0 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
}

.athlete-star-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  box-shadow: 0 2px 8px rgba(0, 168, 232, 0.2);
}

.athlete-star-btn.active {
  color: #d48a00;
  border-color: #f2b23f;
  background: linear-gradient(135deg, #fff7dc, #ffefb9);
}

.athlete-star-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.2);
}

.meet-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.meet-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.meet-meta-secondary {
  font-size: 0.72rem;
  opacity: 0.9;
}

/* ── Main content ────────────────────────────────────────────── */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
}

/* Welcome screen */
.welcome {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.welcome-inner {
  text-align: center;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--color-surface);
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 4px 24px rgba(0, 59, 111, 0.12);
}

.welcome-logo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 168, 232, 0.25);
  opacity: 1;
  transition: transform var(--transition);
}

.welcome:hover .welcome-logo {
  transform: scale(1.05);
}

.welcome-inner h2 {
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.welcome-inner p {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-weight: 500;
}

.welcome-seo-intro {
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(0, 59, 111, 0.03), rgba(0, 168, 232, 0.02));
  padding: 10px 12px;
}

.welcome-seo-intro h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.welcome-seo-intro p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.welcome-tldr {
  width: 100%;
  text-align: center;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(0, 168, 232, 0.04), rgba(0, 59, 111, 0.02));
  padding: 12px;
}

.welcome-tldr h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.welcome-tldr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tldr-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
}

.tldr-card h4 {
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-primary);
}

.tldr-card ul {
  margin: 0;
  list-style-position: outside;
  padding-left: 1.2em;
  text-align: left;
}

.tldr-card li {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.tldr-card li:last-child {
  margin-bottom: 0;
}

.tldr-card-muted h4 {
  color: #8b4f00;
}

@media (max-width: 700px) {
  .welcome-tldr-grid {
    grid-template-columns: 1fr;
  }
}

.muted { font-size: 0.82rem; opacity: 0.85; }

.human-check-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 20, 40, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 18px;
}

.human-check-dialog {
  width: min(420px, 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  padding: 18px;
  text-align: center;
}

.human-check-dialog h3 {
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.human-check-dialog p {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.turnstile-widget-wrap {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.human-check-cancel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.human-check-cancel:hover {
  border-color: var(--color-accent);
  background: rgba(0, 168, 232, 0.08);
}

.legal-link-wrap {
  position: fixed;
  right: max(12px, var(--safe-right));
  bottom: calc(10px + var(--safe-bottom));
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-version {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.legal-link-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 4px 6px;
}

.legal-link-btn:hover,
.legal-link-btn:focus-visible {
  color: var(--color-primary);
}

.legal-notice-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 20, 40, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220;
  padding: 16px;
}

.legal-notice-dialog {
  width: min(640px, 100%);
  max-height: min(78vh, 680px);
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
}

.legal-notice-dialog h3 {
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--color-border-light);
}

.legal-notice-content {
  padding: 12px 16px;
  overflow-y: auto;
}

.legal-notice-content p {
  margin: 0 0 10px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.legal-notice-content h4 {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 14px 0 8px;
}

.legal-notice-content ul {
  margin: 0;
  padding-left: 18px;
}

.legal-notice-content li {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.legal-notice-content li:last-child {
  margin-bottom: 0;
}

.legal-notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--color-border-light);
}

.legal-notice-close {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.legal-notice-close:hover,
.legal-notice-close:focus-visible {
  border-color: var(--color-accent);
  background: rgba(0, 168, 232, 0.08);
}

/* iframe toolbar */
.iframe-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--color-surface);
}

.iframe-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
  border-bottom: 2px solid var(--color-border-light);
  gap: 12px;
  flex-shrink: 0;
}

.iframe-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.open-new-btn {
  font-size: 0.8rem;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  border: 1px solid transparent;
}
.open-new-btn:hover {
  color: var(--color-accent-dark);
  border-color: var(--color-accent-light);
  background: rgba(0, 168, 232, 0.05);
}

.result-frame {
  flex: 1;
  border: none;
  width: 100%;
  background: #fff;
}

/* ── Toast ───────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(20px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #fff;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-xl), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  z-index: 200;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ── Responsive – compact/tablet/mobile ─────────────────────── */
@media (max-width: 900px) {
  .menu-btn { display: flex; }

  .welcome {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }

  .welcome-inner {
    width: min(420px, 100%);
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar {
    position: fixed;
    top: var(--top-offset);
    left: 0;
    bottom: 0;
    z-index: 90;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    width: min(var(--sidebar-width-mobile), 82vw);
  }

  /* Let the scrollable meet list clear the home indicator. */
  .meet-list-wrap {
    padding-bottom: calc(8px + var(--safe-bottom));
  }

  .sidebar-resizer {
    display: none;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .header-subtitle { display: none; }

  .legal-link-wrap {
    right: 10px;
    bottom: 8px;
  }

  .legal-link-btn {
    font-size: 0.72rem;
  }
}

/* ── Overlay (mobile sidebar backdrop) ──────────────────────── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,59,111,0.3) 100%);
  z-index: 80;
  transition: opacity var(--transition-slow);
}
.overlay.visible { display: block; }

/* ── Scrollbar (WebKit) ──────────────────────────────────────── */
.meet-list-wrap::-webkit-scrollbar { width: 6px; }
.meet-list-wrap::-webkit-scrollbar-track { background: transparent; }
.meet-list-wrap::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

/* ======================== Tab Bar ======================== */
.tab-bar {
  position: fixed;
  top: calc(var(--header-height) + var(--safe-top));
  left: 0;
  right: 0;
  height: var(--tab-bar-height);
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border-light);
  display: flex;
  align-items: stretch;
  z-index: 99;
  padding: 0 max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
  gap: 4px;
  box-shadow: var(--shadow-sm);
}

.tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  margin-bottom: -2px;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

/* ======================== Rankings Panel ======================== */
.rankings-panel {
  position: fixed;
  top: var(--top-offset);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.overview-tldr {
  margin: 10px auto 0;
  padding: 10px 12px;
  text-align: left;
  flex-shrink: 0;
  max-width: 920px;
}

.overview-tldr h3 {
  margin-bottom: 6px;
}

.overview-tldr .welcome-tldr-grid {
  gap: 8px;
}

.overview-tldr .tldr-card {
  text-align: left;
}

.overview-tldr-reason {
  margin: 0 0 8px;
  font-size: 0.77rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.rankings-filters {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  padding: 12px 16px 8px;
  flex-shrink: 0;
}

.rankings-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.rankings-filters-row .filter-field {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 240px;
}

.rankings-filters-row .filter-field.filter-year {
  flex: 0 0 120px;
  min-width: 108px;
  max-width: 132px;
}

.rankings-filters-row .filter-field select,
.rankings-filters-row .filter-field input[type="search"] {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.rankings-filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.rankings-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rankings-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rk-action-btn,
.rk-clear-btn {
  width: auto;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.rk-action-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.rk-action-btn:hover {
  border-color: var(--color-accent);
  background: rgba(0, 168, 232, 0.08);
}

.rk-action-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.25);
}

.rk-result-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.rk-fuzzy-hint {
  margin: 0 16px 8px;
  padding: 8px 12px;
  background: rgba(0, 168, 232, 0.08);
  border: 1px solid rgba(0, 168, 232, 0.3);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.rk-fuzzy-hint[hidden] { display: none; }
.rk-fuzzy-hint-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rk-fuzzy-chip {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.rk-fuzzy-chip:hover { opacity: 0.85; }

.rankings-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 0 16px 8px;
}

.rankings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
  min-width: 640px;
}

.rankings-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-bottom: 2px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
  z-index: 2;
}

.rankings-table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.rankings-table thead th.sortable:hover { color: var(--color-primary); }

.rankings-table tbody tr.rk-row {
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition);
}
.rankings-table tbody tr.rk-row:hover { background: var(--color-active-bg); }

.rankings-table tbody td {
  padding: 7px 10px;
  vertical-align: middle;
  color: var(--color-text);
}

.rk-name-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.83rem;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.rk-name-btn:hover {
  color: var(--color-accent-dark);
  text-decoration-style: solid;
}

.rk-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-text);
}
.rk-no-time {
  color: var(--color-text-muted);
  font-weight: 400;
}

.rk-place-cell {
  text-align: center;
  white-space: nowrap;
  width: 1%;
}
.rk-medal {
  font-size: 1.15rem;
  line-height: 1;
  cursor: default;
}
.rk-place-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text);
}
.rk-no-place {
  color: var(--color-text-muted);
  font-weight: 400;
}

.rk-result-link {
  color: var(--color-accent-dark);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.rk-result-link:hover { text-decoration: underline; }

.rankings-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.rankings-empty > #rankingsEmptyMessage {
  display: block;
  margin-bottom: 6px;
}

.rankings-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.rankings-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 16px calc(14px + var(--safe-bottom));
  flex-shrink: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
}

.rk-page-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition);
}
.rk-page-btn:hover:not(:disabled) {
  background: var(--color-active-bg);
  border-color: var(--color-accent);
}
.rk-page-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.rk-page-btn:disabled {
  color: var(--color-text-muted);
  cursor: default;
  opacity: 0.5;
}
.rk-page-ellipsis {
  padding: 4px 6px;
  color: var(--color-text-muted);
  font-size: 0.83rem;
}

@media (max-width: 900px) {
  .rankings-filters-row .filter-field { max-width: none; }
  .tab-btn { font-size: 0.8rem; padding: 0 12px; }
  .rankings-filter-meta { align-items: flex-start; flex-direction: column; }
  .rankings-meta-left { width: 100%; }
  .rankings-actions { justify-content: flex-start; }
}

/* ── Touch / coarse-pointer ergonomics ───────────────────────────
   Two device-agnostic guarantees for touchscreens:
   1. Form controls render at >= 16px so iOS Safari does not zoom in
      on focus (a control under 16px triggers an automatic page zoom).
   2. Interactive targets meet the ~44px minimum touch-target size. */
@media (pointer: coarse) {
  .filter-field select,
  .search-wrap input,
  #rkNameFilter,
  .rankings-filters-row .filter-field select,
  .rankings-filters-row .filter-field input[type="search"] {
    font-size: 16px;
    min-height: 44px;
  }

  .athlete-star-btn {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }

  .menu-btn { padding: 11px; }

  .refresh-results-btn,
  .clear-filters-btn,
  .athlete-gate-btn,
  .rk-action-btn,
  .rk-clear-btn,
  .legal-notice-close,
  .human-check-cancel {
    min-height: 44px;
  }

  .rk-page-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
  }

  .tab-btn { padding: 0 18px; }
}

/* ── Overview: responsive card layout on phones ───────────────────
   Below 720px an 11-column grid is unusable, so each result row
   collapses into a labeled card. Column-header sorting is replaced
   by the always-reachable #rkSortSelect control. */
.rk-sort-mobile { display: none; }

/* Filter disclosure: on wide screens every filter shows inline and the toggle
   is hidden, so the row is identical to before. On phones the six refinement
   fields are hidden and revealed by toggling .filters-open on the row. */
.rk-filters-toggle { display: none; }

@media (max-width: 720px) {
  .rk-sort-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }

  /* Collapse the six refinement filters behind a "More filters" toggle so the
     two data-loading fields (Year, Name) and the results stay above the fold. */
  .rk-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 100%;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
  }
  .rk-filters-toggle:hover {
    border-color: var(--color-accent);
    background: rgba(0, 168, 232, 0.08);
  }
  .rk-filters-toggle:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.25);
  }
  .rk-filters-toggle-caret {
    font-size: 0.7rem;
    transition: transform var(--transition);
  }
  .rk-filters-toggle[aria-expanded="true"] .rk-filters-toggle-caret {
    transform: rotate(180deg);
  }
  .rk-filters-toggle-count {
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
  }

  /* The six refinement fields are hidden until the toggle is opened. */
  .rk-secondary-field { display: none; }
  .rankings-filters-row.filters-open .rk-secondary-field { display: flex; }
  .rk-sort-mobile label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }
  .rk-sort-mobile select {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 16px;
  }
  .rk-sort-dir-btn {
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 12px;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
  }
  .rk-sort-dir-btn:hover {
    border-color: var(--color-accent);
    background: rgba(0, 168, 232, 0.08);
  }

  .rankings-table-wrap {
    overflow-x: hidden;
    padding: 0 12px calc(8px + var(--safe-bottom));
  }

  .rankings-table {
    min-width: 0;
    display: block;
  }

  /* Hide the column headers visually; sorting moves to #rkSortSelect. */
  .rankings-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .rankings-table tbody { display: block; }

  .rankings-table tbody tr.rk-row {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 10px 12px;
    margin: 10px 0;
  }
  .rankings-table tbody tr.rk-row:hover { background: var(--color-surface); }

  .rankings-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    text-align: right;
  }
  .rankings-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    text-align: left;
  }

  /* Athlete name becomes the card's title row. */
  .rankings-table tbody td[data-label="Name"] {
    justify-content: flex-start;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 6px;
    margin-bottom: 4px;
  }
  .rankings-table tbody td[data-label="Name"]::before { display: none; }
  .rk-name-btn { font-size: 0.95rem; }

  .rk-place-cell { width: auto; }
}

/* ── Dark mode ─────────────────────────────────────────────────────
   Honour the OS/browser colour scheme. The design is fully tokenised,
   so the bulk of dark mode is a palette swap; a few components that put
   white text on a brand-gradient background get targeted overrides. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-primary:       #5aa6e0;
    --color-primary-dark:  #4690cc;
    --color-primary-light: #82c0ef;
    --color-accent:        #36bdf2;
    --color-accent-dark:   #6fd0f7; /* lighter so hover text stays legible */
    --color-accent-light:  #8ad9f8;
    --color-success:       #34d399;
    --color-warning:       #fbbf24;
    --color-bg:            #0e1620;
    --color-bg-alt:        #131e29;
    --color-surface:       #1a2632;
    --color-border:        #30404f;
    --color-border-light:  #243341;
    --color-text:          #e7eef5;
    --color-text-muted:    #9db0c1;
    --color-active-bg:     #16324a;
    --color-active-text:   #82c0ef;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.55);
  }

  /* Keep brand surfaces dark with white text (token reuse would invert them). */
  .app-header { background: linear-gradient(135deg, #06243f 0%, #0e3a63 100%); }
  .toast { background: linear-gradient(135deg, #0c3a63 0%, #1a5fa0 100%); }
  .search-preview { background: linear-gradient(135deg, #0c3a63 10%, #1a5fa0 90%); }
  .rk-page-btn.active {
    background: #1a5fa0;
    border-color: #1a5fa0;
    color: #fff;
  }

  /* Amber/brown accents that would vanish on a dark background. */
  .athlete-gate-message { color: #f1c88a; }
  .athlete-gate-btn {
    background: #2f2611;
    border-color: #7a5a1e;
    color: #f3cf93;
  }
  .athlete-gate-btn:hover { background: #3c3115; border-color: #9c7626; }
  .tldr-card-muted h4 { color: #e0a96a; }
  .refresh-status.is-error { color: #ff9b8a; }
}

/* ── Reduced motion ───────────────────────────────────────────────
   Disable non-essential animation/transition for users who request it
   (also stops the always-on filter pulse from burning battery). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Forced colors / Windows High Contrast ────────────────────────
   Gradient-clipped text renders transparent (invisible) in forced-colors
   mode; restore a solid colour. Box-shadow focus rings are also dropped,
   so provide a real outline for keyboard focus. */
@media (forced-colors: active) {
  .sidebar-header h2,
  .welcome-inner h2,
  .iframe-title {
    -webkit-text-fill-color: currentColor;
    background: none;
    color: CanvasText;
  }

  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}