/* pages/planner/header.css — planner page ground, brand and header controls (the view tabs themselves are components/viewtabs.css).
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
/* planner.css — the mockup direction (2026-08 set): ember-orange on neutral
   black/white, rounded cards, one setup flow (level → intensity → journey
   hero) and one dashboard (roadmap card + finish ring + plan management).

   Everything new is scoped under .plannerpage because app.html loads this
   file too (historical: the old Plan-tab shared block). The dialog / .klist /
   .chk / .btn.danger blocks near the bottom are kept byte-compatible for that
   reason — the trainer's dialogs wear them.

   Colours are tokens only (decision 0008): the --pl-* set in tokens.css plus
   translucent inks mixed from tokens with color-mix, never literals. */

/* ---- page ground ------------------------------------------------------
   The same atmospheric treatment the landing wears, in the planner's own
   ember palette: a layered gradient ground, a fixed grid, and corner glows.
   It is pitched a few points cooler than the landing's — that page is a
   pitch and this one is a tool someone stares at while doing arithmetic
   about their own free time.

   Every rule here is scoped to .plannerpage on purpose: app.html loads this
   stylesheet for its dialogs, and an unscoped body rule would repaint the
   trainer. */
body.plannerpage{
  min-height:100vh;
  background:
    radial-gradient(1100px circle at 12% -8%, color-mix(in srgb, var(--pl-accent) 14%, transparent), transparent 50%),
    radial-gradient(900px circle at 92% 6%, color-mix(in srgb, var(--accent2) 9%, transparent), transparent 44%),
    radial-gradient(800px circle at 50% -6%, color-mix(in srgb, var(--pl-card) 60%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--pl-base) 88%, var(--pl-surface)) 0%, var(--pl-base) 42%, var(--pl-base) 100%);
  background-attachment:fixed;
  color:var(--pl-ink);
  font-family:var(--play-display);
  --display:var(--play-display);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  position:relative;
  isolation:isolate;
}
body.plannerpage::before,
body.plannerpage::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
body.plannerpage::before{
  opacity:.32;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--pl-line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--pl-line) 55%, transparent) 1px, transparent 1px);
  background-size:120px 120px;
}
body.plannerpage::after{
  background:
    radial-gradient(700px circle at 0% 100%, color-mix(in srgb, var(--pl-accent) 12%, transparent), transparent 60%),
    radial-gradient(700px circle at 100% 100%, color-mix(in srgb, var(--accent2) 9%, transparent), transparent 62%);
}
.plannerpage [hidden]{display:none!important}
.plannerpage main{padding:32px 32px 64px}
.plannerpage .wrap{max-width:1024px;margin:0 auto}
.plannerpage :is(button,a,select,input,summary):focus-visible{
  outline:2px solid var(--pl-accent);outline-offset:2px;border-radius:4px;
}

/* ---- header ---- */
/* Opaque, not translucent-and-blurred. The blurred version composited its
   backdrop against the viewport base rather than the page ground, so the bar
   rendered as a light grey slab in both themes — which mattered little while
   it held only controls, and a great deal now that the page title is in it. */
.plannerpage .topbar{
  background:var(--pl-base);
  border-bottom:1px solid color-mix(in srgb, var(--pl-ink) 7%, transparent);
  padding:14px 32px;position:sticky;top:0;z-index:50;
}
/* The page title sits in the topbar and the controls sit at its end — one
   header line, not two stacked ones. */
.plannerpage .topbar{display:flex;align-items:center;gap:16px}
.plannerpage .topbar .pagetitle{
  margin:0;font-family:var(--play-display);font-size:1.5rem;font-weight:700;
  letter-spacing:-.01em;white-space:nowrap;min-width:0;
}
.plannerpage .brand{display:flex;align-items:center;gap:12px;margin-bottom:0;margin-left:auto}
/* The logo and wordmark are components/brand.css (#147); .brand above still
   lays them out. */
.plannerpage .brand .sub{
  font-size:10px;color:var(--pl-mute);text-transform:uppercase;letter-spacing:.18em;
}
/* The theme toggle, language picker and account button are components/headctl.css
   now — one rule set this page and the trainer both wear (#151). */