/* ============================================================================
   SPOTLESS 2026 REFRESH — loaded LAST (after app.css + app-aurora.css).
   Purpose: calmer, clearer, easier to navigate. Overrides only; no markup renames.
   References: Material 3 navigation bar (active indicator pill, 80dp bar),
   Apple HIG tab bars (≥44pt targets, icon + label), WCAG 2.2 SC 2.5.8 target size,
   SC 2.4.11 focus not obscured, NN/g "Basic patterns for mobile navigation".
   ============================================================================ */

/* ── 1 · Bottom navigation: flat, full-width, one active pill ─────────────────
   Was: a floating rounded rail of glossy 3D "jewel" tiles, every tab a different colour
   (blue / violet / green / gold / pink) — five competing colours, and the selected tab was
   told apart only by saturation. Now: neutral icons, the selected tab gets the brand-blue
   pill + filled icon + bold label (three cues, not colour alone — WCAG 1.4.1). */
nav.tabbar, html[data-theme="dark"] nav.tabbar, html.au-lite nav.tabbar{
  left:0; right:0; bottom:0; margin:0; padding:0 0 var(--safe-b);
  background:var(--surface); border-top:1px solid var(--line); border-radius:0;
  box-shadow:0 -4px 18px rgba(19,38,62,.07);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-theme="dark"] nav.tabbar, html[data-theme="dark"].au-lite nav.tabbar{ background:#0F1830; border-top-color:rgba(255,255,255,.08); box-shadow:0 -6px 22px rgba(0,0,0,.4); }
.tabbar .rail, html.au-lite .tabbar .rail, html[data-theme="light"] .tabbar .rail,
html[data-theme="dark"] .tabbar .rail, html[data-theme="dark"].au-lite .tabbar .rail{
  max-width:560px; margin:0 auto; padding:6px 4px 4px; background:transparent; border:0; border-radius:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; position:static; inset:auto; width:auto;
}
nav.tabbar .tab{
  min-height:64px; padding:4px 2px 6px; gap:4px; color:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:none;
}
nav.tabbar .tab::before{ display:none; }
nav.tabbar .tab .ic{
  width:26px; height:26px; box-sizing:content-box; padding:5px 18px; border-radius:18px;
  color:inherit; transition:background-color var(--t-fast) var(--e-std), color var(--t-fast) var(--e-std);
  transform:none;
}
nav.tabbar .tab .ic .duo{ opacity:0; }
nav.tabbar .tab-label{ font-size:12.5px; font-weight:700; color:inherit; letter-spacing:0; }
nav.tabbar .tab[aria-selected="true"]{ color:var(--action); }
nav.tabbar .tab[aria-selected="true"] .ic{ background:#DCEBFA; color:var(--action); }
nav.tabbar .tab[aria-selected="true"] .ic .duo{ opacity:1; }
nav.tabbar .tab[aria-selected="true"] .tab-label{ font-weight:800; color:var(--action); }
html[data-theme="dark"] nav.tabbar .tab{ color:#9FB3CC; }
html[data-theme="dark"] nav.tabbar .tab[aria-selected="true"],
html[data-theme="dark"] nav.tabbar .tab[aria-selected="true"] .tab-label{ color:#CFE4FF; }
html[data-theme="dark"] nav.tabbar .tab[aria-selected="true"] .ic{ background:rgba(95,165,235,.26); color:#CFE4FF; }
nav.tabbar .tab .badge{ top:2px; inset-inline-start:calc(50% + 8px); }
nav.tabbar .tab .live-dot{ top:4px; inset-inline-start:calc(50% + 14px); }
nav.tabbar .tab:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; border-radius:14px; }
/* SC 2.4.11 — a focused control is never hidden under the fixed bar */
html{ scroll-padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px); }

/* ── 2 · Top bar: sits flush, no floating card ─────────────────────────────── */
header.topbar{ margin:0; border-radius:0; border:0; border-bottom:1px solid var(--line); }
html[data-theme="dark"] header.topbar{ border-bottom-color:rgba(255,255,255,.08); }

/* ── 3 · Me hub: tiles instead of a 20-row list ─────────────────────────────── */
.hub-find{ position:relative; margin:4px 0 6px; }
.hub-find .input{ padding-inline-start:44px; min-height:50px; border-radius:14px; }
.hub-find__ic{ position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--ink-2); display:flex; pointer-events:none; }
.hub-none{ text-align:center; padding:18px 8px; }
.hub{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:340px){ .hub{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hub__tile{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px;
  min-height:104px; padding:14px 6px 12px; border-radius:18px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--e-1);
  font:inherit; color:var(--ink); text-align:center;
  transition:transform var(--t-fast) var(--e-std), box-shadow var(--t-fast) var(--e-std);
}
.hub__tile:active{ transform:scale(.96); }
.hub__tile:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.hub__ic{ width:48px; height:48px; border-radius:15px; display:flex; align-items:center; justify-content:center; flex:none; }
.hub__ic .ic{ width:26px; height:26px; color:#fff; }
.hub__lbl{ font-size:13.5px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.hub__badge{
  position:absolute; top:8px; inset-inline-end:8px; min-width:22px; height:22px; padding:0 6px;
  border-radius:11px; background:var(--danger); color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--surface);
}
html[data-theme="dark"] .hub__tile{ background:rgba(22,34,54,.92); border-color:rgba(255,255,255,.08); color:#EAF2FC; }

/* Settings rows that hold a control wrap instead of clipping it off-screen
   (the Auto/Light/Dark switch was cut at 390px wide). */
#me-menu .menu__row:has(.mini-seg){ flex-wrap:wrap; row-gap:8px; padding-block:8px; }
#me-menu .menu__row .mini-seg{ margin-inline-start:auto; }

/* Me hero with no score yet: it sits on the blue gradient, so its text must be light
   (the name + hint were dark ink on dark blue — about 1.6:1). */
#me-hero .hero--empty{ color:#fff; border:0; }
#me-hero .hero--empty .muted{ color:rgba(255,255,255,.86); margin:4px 0 0; }

/* ── 4 · Clock: a long site name must not turn the big button into a 3-line block ── */
#clock-body .btn--xl, #home-state .btn--xl{ line-height:1.2; }
.btn .btn__site{ display:block; font-size:14px; font-weight:700; opacity:.92; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* per-tab colours retired: inactive tabs are all the same neutral ink (the ids beat the class rules) */
nav.tabbar #tab-home:not([aria-selected="true"]), nav.tabbar #tab-schedule:not([aria-selected="true"]),
nav.tabbar #tab-clock:not([aria-selected="true"]), nav.tabbar #tab-photos:not([aria-selected="true"]),
nav.tabbar #tab-me:not([aria-selected="true"]){ color:var(--ink-2); }
html[data-theme="dark"] nav.tabbar #tab-home:not([aria-selected="true"]), html[data-theme="dark"] nav.tabbar #tab-schedule:not([aria-selected="true"]),
html[data-theme="dark"] nav.tabbar #tab-clock:not([aria-selected="true"]), html[data-theme="dark"] nav.tabbar #tab-photos:not([aria-selected="true"]),
html[data-theme="dark"] nav.tabbar #tab-me:not([aria-selected="true"]){ color:#9FB3CC; }
#me-hero{ margin-bottom:14px; }

/* Login: the language picker comes FIRST — a cleaner who cannot read the English welcome
   must be able to switch before anything else (NN/g: put language selection where it is found
   without reading the page). */
#login-screen .login__lang--top{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0 0 18px; }
#login-screen .login__lang--top .select{ width:auto; min-width:150px; min-height:44px; }
/* The login plate was min-height:100dvh PLUS a 14vh top margin — taller than the screen, so the
   Sign in button sat below the fold on small phones and the centred content left a dead band on
   top. Size it to its content instead. */
#login-screen .login{ min-height:0; margin-top:max(20px, 7vh); margin-bottom:24px; justify-content:flex-start; padding-bottom:28px; }
#login-screen.active{ min-height:100dvh; }   /* the photo backdrop fills the screen now the plate no longer does */