/* pages/trainer/skin-shell.css — ember re-skin: ground, shell, sidebar, header chrome. Loads after the planner page styles, as trainer.css always did.
   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. */
/* trainer.css — the ember re-skin of the trainer (2026-08 mockup set).
   Loads after style.css and planner.css in app.html only.

   Strategy: rather than restyling every component, the shared tokens are
   REMAPPED inside body.shellui to the planner's --pl-* set (tokens.css), so
   every existing component — session cards, grade bar, tables, dialogs —
   inherits the ember palette in both themes for free. What follows is only
   the layout (sidebar + header shell) and the geometry the mockups changed.

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

body.shellui{
  --bg:var(--pl-base);
  --panel:var(--pl-surface);
  --panel2:var(--pl-card);
  --line:var(--pl-line);
  --line2:color-mix(in srgb, var(--pl-ink) 20%, transparent);
  --ink:var(--pl-ink);
  --dim:color-mix(in srgb, var(--pl-mute) 55%, var(--pl-ink));
  --mute:var(--pl-mute);
  --accent:var(--pl-accent);
  --accent2:var(--pl-accent);
  --accent-soft:color-mix(in srgb, var(--pl-accent) 10%, transparent);
  --good:var(--pl-good);
  --bad:var(--pl-danger);
  --hover:color-mix(in srgb, var(--pl-ink) 5%, transparent);
  --card:var(--pl-card);
}

/* ---- ground: the landing's atmosphere, in the trainer's own register ----
   Same layered gradient + fixed grid + corner glows the landing and planner
   wear, so the three surfaces read as one product. No backdrop-filter on
   panels here either — see planner.css for why (the empty-backdrop bug). */
body.shellui{
  min-height:100vh;
  background:
    radial-gradient(1100px circle at 12% -8%, color-mix(in srgb, var(--pl-accent) 12%, transparent), transparent 50%),
    radial-gradient(900px circle at 92% 6%, color-mix(in srgb, var(--pl-accent) 6%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--pl-base) 90%, var(--pl-surface)) 0%, var(--pl-base) 42%, var(--pl-base) 100%);
  color:var(--pl-ink);
  /* One display voice (decision 0015, closed 2026-09-03): the body speaks the
     kit's hand face, and --display follows it so the wordmark and every
     digit that reads var(--display) come along. Devanagari falls through
     to its own stack inside --play-display. */
  font-family:var(--play-display);
  --display:var(--play-display);
  position:relative;
  isolation:isolate;
  height:100vh;
  overflow:hidden;
}
body.shellui::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  opacity:.3;
  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;
}

/* ---- shell: full-height sidebar + content column ---- */
.shellui .shell{height:100vh;display:flex;align-items:stretch}
.shellui .side{
  width:256px;flex:none;height:100vh;top:0;position:static;
  border-right:1px solid var(--pl-line);
  background:color-mix(in srgb, var(--pl-surface) 88%, transparent);
  padding:28px 20px 20px;
  display:flex;flex-direction:column;overflow-y:auto;
}
.shellcol{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh}
.shellui main{
  flex:1;overflow-y:auto;max-width:none;width:auto;margin:0;
  padding:0 clamp(24px, 4vw, 48px) 64px;min-width:0;
}
.shellui main>*{max-width:1100px;margin-left:auto;margin-right:auto}
/* The zoom and confirm backdrops render INSIDE main (app.js concatenates
   them into app.innerHTML), so the clamp above capped a position:fixed;
   inset:0 overlay at 1100px and left click-through gutters either side of
   it at wide viewports (#177). An overlay sizes against the viewport. */
.shellui main>.zoom{max-width:none;margin:0}
/* The top gap is margin on the first child, not padding on the scroller:
   position:sticky pins to the scrollport, so scroller padding-top opens a
   band above every stuck header that unstuck rows scroll through (#163).
   Margin scrolls away with the content. Narrow layouts re-pad main itself
   and reset this — skin-responsive.css. */
.shellui main>:first-child{margin-top:40px}
.shellui .foot{
  flex:none;border-top:1px solid var(--pl-line);
  background:color-mix(in srgb, var(--pl-surface) 88%, transparent);
  padding:8px 24px;font-size:12px;color:var(--pl-mute);
}

/* ---- sidebar ---- */
.sbrand{display:flex;align-items:center;gap:12px;margin-bottom:36px;padding:0 4px}
/* The brand itself is components/brand.css (#147). */
.shellui .tabs{gap:4px}
.shellui .tabs button{
  display:flex;align-items:center;gap:12px;
  border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:600;
  color:var(--pl-mute);border-right:2px solid transparent;
}
.shellui .tabs button .ic{width:17px;height:17px;flex:none}
.shellui .tabs button:hover{background:var(--hover);color:var(--pl-ink)}
.shellui .tabs button.active{
  background:color-mix(in srgb, var(--pl-accent) 10%, transparent);
  color:var(--pl-accent);border-right-color:var(--pl-accent);
  border-radius:10px 4px 4px 10px;font-weight:700;
}
.shellui .goalcard{
  border:1px solid var(--pl-line);border-radius:14px;
  background:color-mix(in srgb, var(--pl-card) 80%, transparent);
}
/* Library and Quiz are their own places: the sidebar there carries their
   context, not the session area's nav and daily goal (app.js toggles
   .subview). Desktop only — under 900px that nav is the bottom tab bar and
   must stay, and the goal card is already hidden there by style.css. */
@media(min-width:900px){
  body.shellui.subview .tabs,
  body.shellui.subview .goalcard{display:none}
  /* The 24px that used to sit here filled the space the hidden rail left. The
     playful skin (0015 v2) un-hides the rail and every page loading this sheet
     loads that one too — enforced in arcade-brand.test.js — so the state this
     padding compensated for has never shipped, while the padding itself did:
     it put 10px under a rail that was still there, in exactly the two rooms
     that set .subview, and selecting between them and any other room slid the
     whole column (bhassa-feedback#15). Removed at the source rather than
     answered with a counter-override in the playful skin: that is the same
     cascade fight the header stand-in brand caused, and arcade-brand.test.js
     rejected it there for the same reason. */
  /* Quiz has no sidebar context at all, so the rail goes rather than stand
     empty, and the quiz gets the window. Strictly desktop: below 900px this
     same element is the bottom tab bar and removing it would leave no way
     out of the view. The brand moves to the header on the same condition,
     so collapsing the rail never costs the way back to the introduction. */
  body.shellui.noside .side{display:none}
}

/* ---- header ---- */
.shellui .topbar{
  position:static;flex:none;height:72px;padding:0 24px;
  display:flex;align-items:center;gap:18px;
  background:color-mix(in srgb, var(--pl-base) 75%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--pl-line);z-index:20;
}
/* .viewtabs itself is defined in planner.css — the one stylesheet both this
   page and the planner load, so the two headers wear the same component.
   Only the trainer's own margin differs. */
.shellui .viewtabs{margin-left:0}
.shellui .headctl{margin-left:auto}
/* The controls themselves are components/headctl.css — one rule set this page
   and the planner both wear (#151). */

/* The Devanagari no-uppercase rule for these controls moved to
   components/headctl.css with them — it now covers the planner too (#151). */