/* ───────────────────────────────────────────────────────────────
   Spectrum Steps v5.0 — base layer
   Tokens from the official logo, the page shell and navigation.
   Loaded after v41-base.css; overrides its dark palette by redefining
   the same custom properties, so v4.1 rules adopt the new look.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Spectrum Steps logo palette */
  --md-navy:      #2553A6;   /* "Spectrum" */
  --md-navy-deep: #1B3F82;
  --md-blue:      #4E7FD8;   /* "p", bottom step */
  --md-sky:       #8CBBF6;   /* "s" — light fill, dark text on top */
  --md-sky-deep:  #2553A6;
  --md-coral:     #FF8A6B;   /* "S", top step */
  --md-coral-deep:#C2492C;
  --md-mint:      #6FD1CC;   /* teal "t", second step (lightened fill) */
  --md-mint-deep: #1E8A86;
  --md-lavender:  #B4B2EC;   /* "e", third step */
  --md-lav-deep:  #5F5BB8;
  --md-sun:       #FDC56B;   /* sun */
  --md-sun-deep:  #D98E12;
  --md-ink:       #22324D;   /* text: deep navy-slate */
  --md-ink-soft:  #4D5D78;
  --md-paper:     #F5F8FD;   /* cool, sky-tinted page */
  --md-card:      #FFFFFF;
  --md-line:      #DCE4F1;

  /* Remap the v4.1 variables to the light palette */
  --bg-from:  var(--md-paper);
  --bg-to:    #EAF2FA;
  --bg-deep:  #E3EDF8;
  --card-bg:  var(--md-card);
  --card-bg-2:#F6F9FD;
  --soft:     #E8F1FB;
  --trim:     var(--md-line);
  --trim-2:   #C5D3E2;
  --text:     var(--md-ink);
  --muted:    #5B6B7F;          /* 5.3:1 on white */
  --white:    #ffffff;
  --shadow:   rgba(46, 58, 75, 0.10);
  --shadow2:  rgba(46, 58, 75, 0.16);
  --accent-ink: #1E2A3A;
  --accent-text: var(--md-ink);  /* text never uses pastel fills */

  --sec-morning: var(--md-sun);
  --sec-midday:  var(--md-mint);
  --sec-evening: var(--md-lavender);
  --sec-reflect: var(--md-coral);

  /* Classic v4.1 tile palette, lightened for the light background */
  --t0: #FFF1B0; --t0b: #E0B428;
  --t1: #CDF1DC; --t1b: #3FA36F;
  --t2: #D3E8FA; --t2b: #3E8DD3;
  --t3: #FFD9D4; --t3b: #D9675A;
  --t4: #E8DBFA; --t4b: #8E66CF;
  --t5: #FFE3C7; --t5b: #D9853A;

  /* Shape & type scale (1.25 modular) */
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 30px; --r-tile: 18px;
  --fs-0: 0.8rem; --fs-1: 1rem; --fs-2: 1.25rem; --fs-3: 1.563rem; --fs-4: 1.953rem; --fs-5: 2.441rem;
  --font-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rail-w: 104px;
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--md-blue);
}

/* Time-of-day accents keep the v4.1 identity, as fills (never as text) */
body.theme-morning { --accent: var(--md-sun);      --accent2: #FFF4C2; --accent-deep: var(--md-sun-deep); }
body.theme-midday  { --accent: var(--md-mint);     --accent2: #DDF5EA; --accent-deep: var(--md-mint-deep); }
body.theme-evening { --accent: var(--md-lavender); --accent2: #ECE3FA; --accent-deep: var(--md-lav-deep); }
body.theme-reflect { --accent: var(--md-coral);    --accent2: #FFE3DF; --accent-deep: var(--md-coral-deep); }

html { -webkit-text-size-adjust: 100%; }
/* The hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }
body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.5;
}
/* Replace v4.1 illustrated night/dusk scenes with a calm paper background.
   Parent-uploaded backgrounds (body.has-custom-bg) still win. */
body:not(.has-custom-bg),
body.theme-morning:not(.has-custom-bg),
body.theme-midday:not(.has-custom-bg),
body.theme-evening:not(.has-custom-bg),
body.theme-reflect:not(.has-custom-bg) {
  background: var(--md-paper);
  background-attachment: scroll;
}
body::before { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 10px; }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--focus);
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--md-ink); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ══════════ Navigation rail (tablet / desktop) ══════════ */
#topbar {
  position: fixed; inset: 0 auto 0 0; z-index: 100;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 14px 10px;
  background: var(--md-card);
  border-right: 1px solid var(--md-line);
  border-bottom: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  overflow-y: auto;
}
#app-logo { display: flex; justify-content: center; padding: 2px 0 10px; text-shadow: none; }
#app-logo-img { width: 56px; height: 56px; object-fit: contain; }
#app-logo-text { display: none; font-family: var(--font-display); color: var(--md-ink); }
#time-tabs { flex: 0 0 auto; flex-direction: column; gap: 4px; overflow: visible; }
.time-tab, #topbar-right .icon-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; height: auto; padding: 8px 4px;
  border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--md-ink-soft);
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 800;
  box-shadow: none; backdrop-filter: none; transform: none;
}
.time-tab .tt-icon, .icon-btn .nb-icon { font-size: 1.55rem; line-height: 1.1; }
.time-tab.has-branding .tt-icon img { width: 34px; height: 34px; object-fit: contain; }
.time-tab:hover, #topbar-right .icon-btn:hover { background: var(--soft); color: var(--md-ink); transform: none; border-color: transparent; }
.time-tab.active {
  background: var(--accent2); color: var(--md-ink);
  border: 0; box-shadow: inset 0 0 0 2px var(--accent);
}
.time-tab[data-section="home"].active { background: #E5EEFC; box-shadow: inset 0 0 0 2px var(--md-blue); }
#topbar-right {
  margin-top: auto; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--md-line); padding-top: 8px;
}
#nav-profile { border-top: 1px solid var(--md-line); padding-top: 8px; }

#app-main, #home-screen, #exercise-screen, #finish-screen, #calendar-screen { outline: none; }
#app-main { margin-left: var(--rail-w); min-height: 100vh; }
#app-main > div { max-width: 1040px; margin-left: auto; margin-right: auto; }

/* ══════════ Phones: rail becomes a bottom bar ══════════ */
@media (max-width: 760px) {
  :root { --rail-w: 0px; }
  #topbar {
    inset: auto 0 0 0; width: auto; height: auto;
    flex-direction: row; align-items: center; gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--md-line);
    overflow-x: auto; overflow-y: hidden;
  }
  #app-logo { display: none; }
  #time-tabs { flex-direction: row; gap: 2px; }
  #topbar-right { flex-direction: row; margin: 0; border-top: 0; padding: 0; border-left: 1px solid var(--md-line); padding-left: 2px; }
  #nav-profile { display: none; }
  .time-tab, #topbar-right .icon-btn { width: 64px; flex: 0 0 64px; font-size: 0.7rem; padding: 6px 2px; }
  .time-tab .tt-icon, .icon-btn .nb-icon { font-size: 1.35rem; }
  #app-main { margin-left: 0; padding-bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  #confetti-wrap { display: none !important; }
}