/* =====================================================================
   Grow user dashboard · DS1 (2026-10-04): the Grow Hubs "Studio" design system + Light / Dark
   Kenny: "Review the design system for /hubs-app and redesign the UI of the user dashboard based on it. All of our
   internal dashboards will share the same design system." Source of truth: grow-hubs-app/site/studio.css (rounds 5-6p);
   same port recipe as the Lesson Builder (grow-builder-app/site/assets/studio.css, r2). Loaded after base.css + app.css
   (+ planning.css) on every page.
   <html data-mode="light|dark" class="lk-studio"> is set by the boot script (modeboot.html) before any CSS paints.
   Every colour is a Daybreak brand token (sycu-brand-guide tokens.css), an rgba() of a brand neutral (hairlines,
   shadows, veils), or a color-mix of two brand tokens PRECOMPUTED to static hex (WebKit crashes on chained color-mix
   custom properties in dark token blocks; recipes in ds1-studio-run/tools/mixes.json).
   Sections: 1 tokens  2 toggle + cross-fade  3 type  4 shell (header, menus, rail, mobile sheet, footer, toast)
   5 controls  6 people  7 home  8 age page  9 resource popup  10 Planning View  11 dark-mode specifics
   12 print (always paper)  13 reduced motion
   ===================================================================== */

/* ========== 1. tokens ========== (html:root / html[data-mode] outrank base.css + app.css :root) */
html:root {
  --r-panel: 18px; --r-card: 14px; --r-tile: 10px; --r-ctl: 9px; --r-pill: 10px; --r-sm: 10px; --r: 14px; --r-lg: 18px;
  --stripe-h: 2px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --teach-deep: #C83535;
}
html[data-mode="light"], html:not([data-mode]) {
  color-scheme: light;
  --canvas: #F4F5F7; --sf: #FFFFFF; --bg: #F6F7F9; --surface: #FFFFFF; --raise: #FFFFFF;
  --line: #E4E7EB; --line-2: #D3D8DE;
  --ink: #1F2328; --ink-2: #454C55; --ink-3: #5F6873; --ph: #5F6873; --trk: #767E88;
  --shd: 31,35,40;
  --hair: rgba(31,35,40,.08); --hair-2: rgba(31,35,40,.13);
  --e1: 0 0 0 1px rgba(31,35,40,.075), 0 1px 2px rgba(31,35,40,.05), 0 2px 6px -2px rgba(31,35,40,.05);
  --e2: 0 0 0 1px rgba(31,35,40,.09), 0 2px 4px rgba(31,35,40,.05), 0 14px 30px -12px rgba(31,35,40,.18);
  --e3: 0 0 0 1px rgba(31,35,40,.08), 0 8px 20px -6px rgba(31,35,40,.14), 0 28px 60px -18px rgba(31,35,40,.26);
  --e-dark: 0 0 0 1px rgba(31,35,40,.9), 0 18px 40px -22px rgba(31,35,40,.55);
  --shadow: var(--e1); --shadow-lg: var(--e3);
  --char: #434A50; --char-2: #2F3439; --char-3: #23272B; --hero: #23272B;
  --disc: #F0893C; --teach: #E84E4E; --env: #E4D353; --evt: #BED65A; --vol: #82D1DD; --fam: #F27A9E; --lead: #434A50;
  --disc-ink: #A94F0C; --teach-ink: #B41818; --env-ink: #635910; --evt-ink: #515E17; --vol-ink: #1D616C; --fam-ink: #AE1140; --lead-ink: #434A50;
  --disc-soft: #FDEEE3; --teach-soft: #FCE7E7; --env-soft: #FBF7DA; --evt-soft: #F2F8DF; --vol-soft: #E5F6F8; --fam-soft: #FDE9F0; --lead-soft: #ECEEF0;
  --games: #7F8CFF; --games-ink: #4650C8; --games-soft: #EEF0FF; --music: #D986FF; --music-ink: #8A2BB8; --music-soft: #F8EDFF;
  --acc: #BFE478; --acc-hover: #B2DB61; --acc-on: #1F2328; --acc-edge: #A6CC5C; --acc-lip: transparent; --acc-glow: rgba(109,148,30,.3);
  --acc-ink: #4B6D0B; --acc-ring: #5E8117; --acc-soft: #F5F8E9; --acc-ring-soft: rgba(94,129,23,.22);
  --own: #4B6D0B; --unread: #1D616C;
  --sel-bg: #23272B; --sel-ink: #FFFFFF;
  --float-bg: #23272B; --float-rim: rgba(255,255,255,.08);
  --hdr-bg: rgba(255,255,255,.86); --hdr-ink: #1F2328; --hdr-hover: #EEF0F2; --hdr-rim: rgba(31,35,40,.18);
  --hover: rgba(31,35,40,.05); --tab-off: rgba(31,35,40,.06); --tab-off-h: rgba(31,35,40,.1);
  --scrim-dlg: rgba(31,35,40,.5); --hl: #DCEBA4;
}
html[data-mode="dark"] {
  color-scheme: dark;
  /* the brand charcoal ramp (Hubs round 6d): canvas = Charcoal 3 one step deeper, cards = Charcoal 2, raised popovers above */
  --canvas: #1C1F22; --sf: #2F3439; --bg: #373C42; --surface: #2F3439; --raise: #33383E;
  --line: #3A4046; --line-2: #434A50;
  --ink: #F4F5F7; --ink-2: #D4D8DC; --ink-3: #BAC0C5; --ph: #BAC0C5; --trk: #7E858A;
  --shd: 0,0,0;
  --hair: rgba(255,255,255,.08); --hair-2: rgba(255,255,255,.14);
  --e1: 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -8px rgba(0,0,0,.6);
  --e2: 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.45), 0 18px 36px -14px rgba(0,0,0,.8);
  --e3: 0 0 0 1px rgba(255,255,255,.10), 0 12px 28px -8px rgba(0,0,0,.6), 0 32px 64px -24px rgba(0,0,0,.7);
  --e-dark: 0 0 0 1px rgba(255,255,255,.09), 0 18px 40px -22px rgba(0,0,0,.9);
  --shadow: var(--e1); --shadow-lg: var(--e3);
  --char: #434A50; --char-2: #2F3439; --char-3: #23272B; --hero: #23272B;
  /* fills stay the brand fills; text tones are the fills eased toward white (Hubs studio.css dark values, precomputed) */
  --disc: #F0893C; --teach: #E84E4E; --env: #E4D353; --evt: #BED65A; --vol: #82D1DD; --fam: #F27A9E; --lead: #BAC0C5;
  --disc-ink: #F4AA73; --teach-ink: #F19191; --env-ink: #E4D353; --evt-ink: #BED65A; --vol-ink: #82D1DD; --fam-ink: #F6A2BB; --lead-ink: #D4D8DC;
  --disc-soft: #4E4239; --teach-soft: #4D383C; --env-soft: #4C4D3D; --evt-soft: #464E3E; --vol-soft: #3C4D53; --fam-soft: #4E3F49; --lead-soft: #3E444A;
  --games: #7F8CFF; --games-ink: #A5AEFF; --games-soft: #3C4259; --music: #D986FF; --music-ink: #E1A1FF; --music-soft: #4A4159;
  --acc: #BFE478; --acc-hover: #B2DB61; --acc-on: #1F2328; --acc-edge: transparent; --acc-lip: transparent; --acc-glow: rgba(191,228,120,.18);
  --acc-ink: #BFE478; --acc-ring: #FFFFFF; --acc-soft: #434D42; --acc-ring-soft: rgba(255,255,255,.22);
  --own: #BFE478; --unread: #82D1DD;
  --sel-bg: #F4F5F7; --sel-ink: #1F2328;
  --float-bg: #434A50; --float-rim: rgba(255,255,255,.14);
  --hdr-bg: rgba(47,52,57,.86); --hdr-ink: #F4F5F7; --hdr-hover: #3A4046; --hdr-rim: rgba(255,255,255,.22);
  --hover: rgba(255,255,255,.06); --tab-off: rgba(255,255,255,.06); --tab-off-h: rgba(255,255,255,.1);
  --scrim-dlg: rgba(0,0,0,.62); --hl: #525E48;
}
/* strategy colours: --a / --a-ink / --a-soft come from base.css; Studio's text-on-fill pair: fill + dark ink, Teaching
   deep + white, Leadership charcoal + white (light) / Leadership grey + ink (dark) */
[data-theme="lead"] { --a: var(--lead); --a-ink: var(--lead-ink); --a-soft: var(--lead-soft); }
[data-theme] { --a-fill: var(--a); --a-on: #1F2328; }
[data-theme="teach"] { --a-fill: var(--teach-deep); --a-on: #FFFFFF; }
html:not([data-mode="dark"]) [data-theme="lead"] { --a-fill: #434A50; --a-on: #FFFFFF; }
html[data-mode="dark"] [data-theme="lead"] { --a-fill: #BAC0C5; --a-on: #1F2328; }
/* the hidden ?accent=orange demo hook keeps working (accent.js) */
html[data-accent="orange"] { --acc: var(--disc); --acc-hover: #F4AA73; --acc-ink: var(--disc-ink); --acc-ring: var(--disc-ink); --acc-soft: var(--disc-soft); --acc-edge: transparent; }
/* surfaces that stay charcoal in both modes: white focus rings (Studio rule) */
.hero, .help, .yb-offer, .upsell, .p-bar, .pp-board, .pv-canvas, .pv-dlg-bar, .toast, .pv-pres, .pv-bulk, .pv-pchip { --acc-ring: #FFFFFF; }

/* ========== 2. mode toggle (sun / moon) + cross-fade (Hubs section 2) ========== */
.ibtn { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-2);
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.ibtn:hover { background: var(--bg); color: var(--ink); }
.ibtn svg { width: 20px; height: 20px; }
.hdr-mode { overflow: hidden; }
.hdr-mode .mi { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; transition: transform .38s var(--ease), opacity .2s ease; }
html:not([data-mode="dark"]) .hdr-mode .mi-sun { opacity: 0; transform: rotate(-80deg) scale(.4); }
html[data-mode="dark"] .hdr-mode .mi-moon { opacity: 0; transform: rotate(80deg) scale(.4); }
html.mode-xfade, html.mode-xfade *, html.mode-xfade *::before, html.mode-xfade *::after {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, fill .22s ease, stroke .22s ease, box-shadow .22s ease, outline-color .22s ease !important; }

/* ========== 3. type: crisp and confident, never heavy ========== */
body, body.v2 { background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:is(h1, h2, h3, h4) { font-weight: 700; }
:is(b, strong) { font-weight: 650; }
a { color: var(--acc-ink); }
.greet h1 { font-weight: 700; letter-spacing: -.035em; }
.sec-head h2, .rs-head h2 { font-weight: 700; letter-spacing: -.022em; }
.hero-title { font-weight: 700; letter-spacing: -.042em; }
.bph h1 { font-weight: 700; letter-spacing: -.038em; }
/* small group labels: sentence case, calm (Hubs: uppercase tracked labels read "sporty") */
:is(.rail-h, .mm-col h3, .mm-mob-h, .dd-lab, .eyebrow-sm) { text-transform: none; letter-spacing: -.005em; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.draft { letter-spacing: .02em; font-weight: 700; text-transform: none; font-size: 12px; border-radius: 8px; }
:is(.tab-n, .rs-n, .st-c, .mi-p, .p-price) { font-variant-numeric: tabular-nums; }
.linkish { color: var(--ink); text-decoration-color: var(--line-2); }

/* ========== 4. shell ========== */
:focus-visible { outline: 2px solid var(--acc-ring); outline-offset: 2px; }
.gc-logo { --logo-ink: var(--ink); }
.gc-logo .rule { background: var(--line-2); }
/* header: translucent card surface + blur, 2px stripe (Hubs 4) */
.hdr { background: var(--hdr-bg); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); box-shadow: 0 1px 0 var(--hair); }
.hdr-stripe { height: var(--stripe-h); }
/* the dashboard's own nav, restyled as quiet Studio links in the logo ink; the Resources button (growdev: "Grow Tools")
   is the Hubs Grow-tools pill */
.hdr .hdr-link { height: 38px; padding: 0 13px; border-radius: 10px; color: var(--hdr-ink); font-weight: 600; font-size: 14px; }
.hdr .hdr-link:hover, .hdr .hdr-link[aria-expanded="true"] { background: var(--hdr-hover); color: var(--hdr-ink); }
.hdr .hdr-link[aria-current="page"] { font-weight: 650; }
.hdr .hdr-link[aria-current="page"]::after { left: 13px; right: 13px; bottom: -13px; height: 2px; background: var(--hdr-ink); }
.hdr #menuBtn { box-shadow: inset 0 0 0 1px var(--hdr-rim); margin: 0 4px; padding: 0 12px 0 14px; }
.hdr #menuBtn:hover, .hdr #menuBtn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--hdr-rim); }
.hdr .hdr-link svg { color: var(--hdr-ink); }
/* top-right: one ink for everything (Hubs 6n-6p): Get help pill, sun / moon, avatar + caret, burger */
.hdr .hdr-help { height: 38px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--hdr-ink); box-shadow: inset 0 0 0 1px var(--hdr-rim); }
.hdr .hdr-help:hover { background: var(--hdr-hover); color: var(--hdr-ink); box-shadow: inset 0 0 0 1px var(--hdr-rim); }
.hdr .hdr-mode, .hdr .hdr-burger { width: 40px; height: 40px; border-radius: 10px; background: none; color: var(--hdr-ink); }
.hdr .hdr-mode:hover, .hdr .hdr-burger:hover, .hdr .hdr-burger[aria-expanded="true"] { background: var(--hdr-hover); color: var(--hdr-ink); }
.hdr .hdr-burger[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--hdr-rim); }
.hdr .av-btn { border-radius: 12px; }
.hdr .av-btn:hover, .hdr .av-btn[aria-expanded="true"] { background: var(--hdr-hover); }
html:root .hdr .hdr-util :is(.hdr-help, .hdr-mode, .av-btn, .hdr-burger), html:root .hdr .hdr-util :is(.hdr-help, .hdr-mode, .av-btn, .hdr-burger) :is(svg, use, span:not(.av)) { color: #1F2328 !important; }
html:root[data-mode="dark"] .hdr .hdr-util :is(.hdr-help, .hdr-mode, .av-btn, .hdr-burger), html:root[data-mode="dark"] .hdr .hdr-util :is(.hdr-help, .hdr-mode, .av-btn, .hdr-burger) :is(svg, use, span:not(.av)) { color: #F4F5F7 !important; }
html:root .hdr .hdr-util svg { stroke: currentColor; }
/* the account circle in the header = the logo ink (Hubs 6p): solid #1F2328 + white initials; dark solid #F4F5F7 + ink */
html:root .hdr .av-me { background: #1F2328 !important; background-image: none !important; color: #FFFFFF !important; box-shadow: none !important; font-weight: 650; }
html:root[data-mode="dark"] .hdr .av-me { background: #F4F5F7 !important; background-image: none !important; color: #1F2328 !important; }
/* popovers + menus (Hubs .pop: raised surface, 14px) */
.am { background: var(--raise); border-radius: 14px; box-shadow: var(--e3); }
.am-plan { border-radius: 10px; background: var(--bg); }
.am-links a { border-radius: 8px; font-weight: 550; }
.am-links a:hover { background: var(--bg); }
.mm-in { background: var(--raise); border-radius: var(--r-panel); box-shadow: var(--e3); }
.mm-item { border-radius: 10px; }
.mm-item:hover, .mm-plain a:hover { background: var(--bg); }
.mm-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--a-fill, var(--bg)); color: var(--a-on, var(--ink)); box-shadow: none; }
.mm-ico.emo { background: var(--a-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.mm-item b { font-weight: 650; }
.mm-plain a { border-radius: 8px; font-weight: 550; }
.mm-help { background: var(--bg); }
.mm-help h3 { font-weight: 700; }
.mm-scrim { background: rgba(31,35,40,.32); }
.tool-tag.add { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border-radius: 7px; }
/* rail (Hubs rail link: 40px, 10px radius, active = card surface + e1) */
.rail-link { min-height: 40px; border-radius: 10px; font-weight: 600; font-size: 14.5px; }
.rail-link:hover { background: var(--hover); }
.rail-link[aria-current="page"] { background: var(--sf); box-shadow: var(--e1); }
.rail-link.dim > svg, .rail-link.dim > span:not(.rail-tag) { color: var(--ink-3); }
.rail-link > span:not(.rail-tag) { min-width: 0; }
.rail-add svg { width: 14px; height: 14px; }
.rail-tools { margin-top: 0; }
/* mobile Tools: the sheet's top row lists them (the rail's strip is the age groups only) */
@media (max-width: 999px) {
  .rail .rail-tools { display: none !important; }
  .rail ul { border-radius: 12px; padding: 3px; }
  .rail-link { border-radius: 9px; }
  /* phones / tablets: the age strip's current pill = the Studio selection (Hubs mobile sheet rule) */
  .rail-link[aria-current="page"], .rail-link.dim[aria-current="page"] { background: var(--sel-bg); color: var(--sel-ink); box-shadow: none; }
}
/* mobile sheet (Hubs .sheet-main: bordered tiles, current = selection fill) */
@media (max-width: 899px) {
  .mm { background: var(--sf); }
  .mm-mob { display: block; padding: 16px var(--gut) 4px; }
  .mm-mob-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mm-mob .mm-mob-main a { flex-direction: row; justify-content: center; min-height: 52px; border-radius: 12px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 14px; }
  .mm-mob .mm-mob-main a[aria-current="page"] { background: var(--sel-bg); color: var(--sel-ink); box-shadow: none; }
  .mm-mob-h { margin: 16px 2px 8px; }
  .mm-mob-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mm-mob .mm-mob-t { position: relative; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 10px; background: var(--sf);
    box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; font-size: 14px; text-align: left; }
  .mm-mob .mm-mob-t svg { width: 19px; height: 19px; flex: none; }
  .mm-mob .mm-mob-t[aria-current="page"] { background: var(--sel-bg); color: var(--sel-ink); box-shadow: none; }
  .mm-mob .mm-mob-t.dim { color: var(--ink-2); }
  .mm-mob .mm-mob-t .rail-tag { display: inline-flex; margin-left: auto; color: var(--ink-3); }
  .mm-mob .mm-mob-t .rail-tag svg { width: 14px; height: 14px; }
  .mm-help { border-radius: var(--r-card); }
}
@media (max-width: 380px) { .mm-mob-tools { grid-template-columns: minmax(0, 1fr); } }
/* footer, toast (Hubs: charcoal pill, 12px, rim) */
.ftr { background: var(--sf); }
.ftr a { font-weight: 550; }
.toast { border-radius: 12px; background: var(--float-bg); color: #FFFFFF; font-weight: 600; box-shadow: 0 0 0 1px var(--float-rim), var(--e3); }
.skip { border-radius: 10px; }

/* ========== 5. controls ========== */
.btn { border-radius: 10px; font-weight: 650; font-size: 14.5px; letter-spacing: -.005em; padding: 11px 18px; }
.btn-sm { padding: 8px 13px; font-size: 13.5px; border-radius: 9px; }
.btn-lg, .hero-act .btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-primary, html[data-accent="orange"] .btn-primary { background: var(--acc); color: var(--acc-on); box-shadow: inset 0 0 0 1px var(--acc-edge), 0 1px 2px rgba(var(--shd),.10); }
.btn-primary:hover, html[data-accent="orange"] .btn-primary:hover { background: var(--acc-hover); transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--acc-edge), 0 6px 14px -6px var(--acc-glow), 0 1px 2px rgba(var(--shd),.10); }
.btn-primary:active { transform: none; }
.btn-ghost { background: var(--sf); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(var(--shd),.05); }
.btn-ghost:hover { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-dark { background: var(--sel-bg); color: var(--sel-ink); }
.btn-dark:hover { background: #404448; color: #FFFFFF; }
html[data-mode="dark"] .btn-dark { background: #434A50; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
html[data-mode="dark"] .btn-dark:hover { background: #495057; color: #FFFFFF; }
/* white buttons on the charcoal bands stay white in both modes */
html:root :is(.yb-offer, .upsell) .btn-dark, .btn-white { background: #FFFFFF; color: #1F2328; box-shadow: none; }
html:root :is(.yb-offer, .upsell) .btn-dark:hover, .btn-white:hover { background: #FFFFFF; color: #1F2328; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.btn-light { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.sec-link { border-radius: 10px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); }
.sec-link:hover { background: var(--sf); box-shadow: inset 0 0 0 1px var(--ink-3); }
/* segmented control: a recessed track with a raised card selection (Hubs .seg) */
.seg { border-radius: 10px; padding: 3px; gap: 2px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { height: 34px; padding: 0 13px 0 11px; border-radius: 7px; font-weight: 600; font-size: 13.5px; }
.seg button:hover { background: var(--hover); }
.seg button[aria-checked="true"] { background: var(--sf); color: var(--ink); box-shadow: 0 0 0 1px var(--hair-2), 0 1px 2px rgba(var(--shd),.12); }
.seg-one { border-radius: 10px; font-weight: 600; }
/* dropdowns (bundle picker): a soft field, accent ring when open */
.dd-btn { border-radius: 12px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(var(--shd),.05); }
.dd-btn:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.dd-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--acc-ring), 0 0 0 3px var(--acc-ring-soft); }
.dd-e { border-radius: 9px; }
.dd-t b { font-weight: 650; }
.dd-list { background: var(--raise); border-radius: 14px; box-shadow: var(--e3); }
.dd-o { border-radius: 10px; }
.dd-list:focus-visible { outline: 2px solid var(--acc-ring); }
.dd-list:focus-visible .dd-o.act { box-shadow: inset 0 0 0 2px var(--acc-ring); }
/* the 8 category tabs: a card track; the active tab keeps its strategy fill + AA text (Kenny's standing rule) */
.tabs { border-radius: 12px; padding: 4px; }
.tabs button { border-radius: 9px; font-weight: 600; }
.tabs button:hover { background: var(--bg); }
.tab-n { border-radius: 6px; font-weight: 700; }
.tabs button[data-theme][aria-selected="true"] .tab-n { background: rgba(255,255,255,.5); color: #1F2328; }
.tabs button[data-theme="teach"][aria-selected="true"] .tab-n { background: rgba(0,0,0,.22); color: #FFFFFF; }
html:not([data-mode="dark"]) .tabs button[data-theme="lead"][aria-selected="true"] .tab-n { background: rgba(0,0,0,.22); color: #FFFFFF; }
html[data-mode="dark"] .tabs button[data-theme="lead"][aria-selected="true"] .tab-n { background: rgba(255,255,255,.55); color: #1F2328; }
.tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--sf); }
.tabs-bar.stuck { box-shadow: 0 1px 0 var(--hair), 0 10px 18px -16px rgba(var(--shd),.35); }
.rs-hint { background: var(--tab-off); border-radius: 8px; }
.rs-reset { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
.rs-n { border-radius: 7px; }
/* cards + tiles */
.rc-btn { border-radius: var(--r-card); }
.rc-btn:hover { box-shadow: var(--e2); transform: translateY(-2px); }
.rc-title { font-weight: 700; }
.rc-go { border-radius: 8px; font-weight: 650; }
.rc-flag { border-radius: 7px; }
html[data-mode="dark"] .rc-flag.own { background: #BFE478; color: #1F2328; }
.rc-drag { border-radius: 9px; color: #454C55; }
.rc-drag:hover { background: #FFFFFF; color: #1F2328; }
.res-item { border-radius: var(--r-card); }
.res-ico { border-radius: 10px; }
.res-item:hover .res-ico, .res-item:hover .res-ico[data-theme] { background: var(--a-fill); color: var(--a-on); }
.res-txt b { font-weight: 650; }
.empty { border-radius: var(--r-card); }
.banner { border-radius: var(--r-card); }
.ban-ico { border-radius: 10px; }
.mi-a li { border-radius: 10px; }
.mi-buy { border-radius: 8px; font-weight: 650; }
.mi-buy:hover { background: #404448; color: #FFFFFF; }
html[data-mode="dark"] .mi-buy:hover { background: #FFFFFF; color: #1F2328; }
.mi-cmp { border-radius: 10px; }
.own-bar { box-shadow: inset 0 0 0 1px var(--line); }

/* ========== 6. people: one shared slate mark for every initials avatar (Hubs 7); the header's own = logo ink (4) ========== */
.av { background: linear-gradient(145deg, #5F6873 0%, #434A50 100%); color: #FFFFFF; box-shadow: none; font-weight: 650; letter-spacing: .02em; }
html[data-mode="dark"] .av:not(.av-me) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); }

/* ========== 7. home ========== */
.hero { border-radius: var(--r-panel); }
.mybundle .hero { border-top-left-radius: 0; }
.agetabs button { border-radius: 12px 12px 0 0; background: var(--tab-off); font-weight: 600; }
.agetabs button:hover { background: var(--tab-off-h); }
.agetabs button[aria-selected="true"] { background: var(--hero); color: #FFFFFF; box-shadow: 0 2px 0 var(--hero); }
.hero-kicker { font-weight: 700; }
.hero-chips li { border-radius: 8px; font-weight: 600; }
.hs { border-radius: var(--r-tile); }
.hs-flag { border-radius: 7px; }
.hs[aria-busy="true"] { cursor: progress; }
.strat { border-radius: var(--r-panel); }
.st-n { font-weight: 700; }
.st:focus-visible { outline: 2px solid var(--acc-ring); outline-offset: -2px; }
.onb, .yb, .plan-promo { border-radius: var(--r-panel); }
.onb-steps li { border-radius: var(--r-card); }
.onb-x { border-radius: 8px; }
.onb-x:hover { background: var(--line); }
.yt-card { border-radius: var(--r-card); }
.yt-card b { font-weight: 650; }
.yt.picked .yt-card { box-shadow: inset 0 0 0 2px var(--ink), 0 10px 22px -12px rgba(var(--shd),.4); }
.yt-card:has(.yt-in:focus-visible) { outline: 2px solid var(--acc-ring); }
.yt-pv { border-radius: 8px; }
.yt-pv:hover { background: var(--line); }
.yb-renew, .yb-browse, .yb-offer { border-radius: var(--r-card); }
.yb-cal { border-radius: 10px; }
.yb-saved { font-weight: 650; }
.pp-board { border-radius: var(--r-card); }
.pp-key i, .pp-kick i { border-radius: 3px; }
.help { border-radius: var(--r-panel); }

/* ========== 8. age / bundle page ========== */
.bph { border-radius: var(--r-panel); --bph-r: var(--r-panel); }
.bph-meta li { border-radius: 8px; font-weight: 600; }
.upsell { border-radius: var(--r-card); }
.up-ico { border-radius: 10px; }

/* ========== 9. the resource popup (panel.js; DS1 ask A: the sales-page series dialog in Studio tokens) ========== */
.panel { background: var(--sf); }
.p-bar { background: var(--hero); color: #D4D8DC; padding: 8px 8px 12px 18px; box-shadow: none; }
.p-bar::after { height: 4px; }
.p-ctx > span { border-radius: 8px; background: rgba(255,255,255,.09); color: #FFFFFF; font-weight: 600; }
.p-ctx > .p-own { color: #BFE478; }
.p-ctx > .p-pre { color: #D4D8DC; }
.p-close { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: #FFFFFF; }
.p-close:hover { background: rgba(255,255,255,.24); }
.p-body > .p-media { aspect-ratio: 16 / 9; background: #1F2328; }
.p-media video { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.p-w1 { background: #000; }
/* the sales page's "Teaching Video Preview" oval + centered "Preview a teaching video from this series" button */
.p-vlbl { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--acc); color: #1F2328;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; pointer-events: none; transition: opacity .2s; }
.p-w1.playing .p-vlbl { opacity: 0; }
.p-vplay { position: absolute; inset: 0; z-index: 3; border: 0; margin: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); font: inherit; color: #1F2328; }
.p-vplay .pt { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 999px; background: rgba(255,255,255,.96);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; text-align: left; box-shadow: 0 12px 30px -10px rgba(0,0,0,.55); transition: transform .2s var(--ease), box-shadow .2s; }
.p-vplay .pt::before { content: ""; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231F2328'/%3E%3C/svg%3E") center / 24px no-repeat; }
.p-vplay .pt .br { display: none; }
.p-vplay:hover .pt { transform: scale(1.04); box-shadow: 0 16px 36px -10px rgba(0,0,0,.6); }
.p-vplay:focus-visible { outline: none; }
.p-vplay:focus-visible .pt { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.p-w1.started .p-vplay { display: none; }
@media (max-width: 520px) {
  .p-vplay .pt { font-size: 14px; padding: 8px 16px 8px 8px; gap: 10px; }
  .p-vplay .pt::before { width: 38px; height: 38px; background-size: 20px; }
  .p-vplay .pt .br { display: inline; }
}
.p-play-b { background: rgba(255,255,255,.96); color: #1F2328; }
.p-play-l { border-radius: 8px; color: #FFFFFF; }
.p-ov .p-media { border-radius: var(--r-card); }
.p-head { margin-top: 0; }
.p-kicker { font-weight: 700; }
.p-head h2 { font-weight: 700; letter-spacing: -.032em; font-size: clamp(26px, 3.4vw, 36px); }
.p-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.p-facts div { background: var(--bg); border-radius: 10px; padding: 8px 12px; }
.p-facts dt { font-size: 12px; font-weight: 650; color: var(--ink-3); }
.p-facts dd { margin: 2px 0 0; font-weight: 650; font-size: 14.5px; color: var(--ink); }
.p-vsw-b { border-radius: 8px; font-weight: 600; }
.p-lock { border-radius: 12px; }
.p-lock-ico { border-radius: 9px; }
.psec h3, .fold summary { font-weight: 700; }
.big li { border-radius: 12px; }
.big li::before, .panel[data-theme] .big li::before { background: var(--a-fill); color: var(--a-on); font-weight: 700; }
.mv, .weeks li { border-radius: 10px; }
.wk-n { font-weight: 650; }
.p-price { font-weight: 700; }

/* ========== 10. Planning View ========== */
.pv-head, .pv-side, .pv-first { border-radius: var(--r-panel); }
.pv-canvas { border-radius: var(--r-panel); }
.pv-sw, .pv-tb, .pv-zoom, .pv-lg, .pv-chip, .pv-ib { border-radius: 9px; }
.pv-tb, .pv-lg, .pv-chip, .pv-sw { box-shadow: inset 0 0 0 1px var(--line); }
.pv-tb[aria-pressed="true"], .pv-lg[aria-pressed="true"] { box-shadow: none; }
.pv-lg[aria-pressed="true"] .pv-lg-n { background: rgba(255,255,255,.5); color: #1F2328; }
html[data-mode="dark"] .pv-lg[data-theme="lead"][aria-pressed="true"] .pv-lg-n { background: rgba(255,255,255,.55); color: #1F2328; }
.pv-pchip-d { background: #82D1DD; box-shadow: 0 0 0 3px rgba(130,209,221,.25); }
.pv-mon-b { border-radius: 9px; font-weight: 650; }
.pv-cb { border-radius: 9px; }
.pv-menu { background: var(--raise); border-radius: 14px; }
.pv-dlg { background: var(--raise); border-radius: var(--r-panel); }
.pv-dlg::backdrop { background: rgba(31,35,40,.5); }
html[data-mode="dark"] .pv-dlg::backdrop { background: rgba(0,0,0,.62); }
.pv-dlg-bar { background: var(--hero); }
.pv-gf select, .pv-gf input, .pv-fl input, .pv-fl textarea, .pv-fl select { border-radius: var(--r-ctl); background: var(--sf); box-shadow: inset 0 0 0 1px var(--line-2); }
.pv-gf select:focus-visible, .pv-gf input:focus-visible, .pv-fl input:focus-visible, .pv-fl textarea:focus-visible, .pv-fl select:focus-visible { box-shadow: inset 0 0 0 1.5px var(--acc-ring), 0 0 0 3px var(--acc-ring-soft); }
.pv-ri { border-radius: 10px; }
.pv-toast { background: var(--float-bg); color: #FFFFFF; border-radius: 12px; box-shadow: 0 0 0 1px var(--float-rim), var(--e3); }
.pv-toast button { background: rgba(255,255,255,.14); color: #FFFFFF; border-radius: 8px; }
.pv-toast button:hover { background: rgba(255,255,255,.24); }

/* ========== 11. dark-mode specifics: charcoal bands get a visible rim on the deeper canvas ========== */
html[data-mode="dark"] :is(.hero, .help, .yb-offer, .upsell, .pp-board, .pv-canvas) { box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 18px 40px -24px rgba(0,0,0,.9); }
html[data-mode="dark"] .agetabs button[aria-selected="true"] { box-shadow: 0 2px 0 var(--hero), inset 1px 1px 0 rgba(255,255,255,.09), inset -1px 0 0 rgba(255,255,255,.09); }
html[data-mode="dark"] .plan-promo { box-shadow: var(--e1); }
html[data-mode="dark"] .panel { box-shadow: var(--e3); }
html[data-mode="dark"] .p-bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
html[data-mode="dark"] .hdr { box-shadow: 0 1px 0 rgba(255,255,255,.08); }
html[data-mode="dark"] .tabs-bar { background: var(--canvas); }
html[data-mode="dark"] .yt.pre .yt-emo { opacity: .7; }
html[data-mode="dark"] .rc.locked .rc-art img { opacity: .85; }
html[data-mode="dark"] .pv-mon-b { background: #33383E; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html[data-mode="dark"] .pv-mon-b:hover { background: #373C42; }
html[data-mode="dark"] .pv-col.now .pv-mon-b { box-shadow: inset 0 0 0 1.5px #BFE478; }
html[data-mode="dark"] .pv-dlg { box-shadow: var(--e3); }

/* ========== 12. print: always paper ========== */
@media print {
  html[data-mode="dark"] {
    color-scheme: light;
    --canvas: #FFFFFF; --sf: #FFFFFF; --bg: #F6F7F9; --surface: #FFFFFF; --raise: #FFFFFF; --line: #E4E7EB; --line-2: #D3D8DE;
    --ink: #1F2328; --ink-2: #454C55; --ink-3: #5F6873; --ph: #5F6873;
    --hair: rgba(31,35,40,.08); --hair-2: rgba(31,35,40,.13); --e1: none; --e2: none; --e3: none;
    --lead: #434A50; --lead-ink: #434A50; --lead-soft: #ECEEF0;
    --disc-ink: #A94F0C; --teach-ink: #B41818; --env-ink: #635910; --evt-ink: #515E17; --vol-ink: #1D616C; --fam-ink: #AE1140;
    --disc-soft: #FDEEE3; --teach-soft: #FCE7E7; --env-soft: #FBF7DA; --evt-soft: #F2F8DF; --vol-soft: #E5F6F8; --fam-soft: #FDE9F0;
    --games-ink: #4650C8; --games-soft: #EEF0FF; --music-ink: #8A2BB8; --music-soft: #F8EDFF;
    --acc-ink: #4B6D0B; --acc-ring: #5E8117; --acc-soft: #F5F8E9; --own: #4B6D0B;
    --sel-bg: #23272B; --sel-ink: #FFFFFF; --hdr-ink: #1F2328;
  }
  html[data-mode="dark"] [data-theme="lead"] { --a-fill: #434A50; --a-on: #FFFFFF; }
  .hdr-mode { display: none !important; }
}

/* ========== 13. reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  .hdr-mode .mi { transition: none; }
  .panel { transform: translate(-50%, -50%); }
}

/* phones: the sun / moon joins the top bar, so "Get help" (also in the menu sheet's "Need a hand?") leaves the bar
   below 480px, and the bar's gaps tighten (no horizontal overflow at 390 / 360) */
@media (max-width: 479px) {
  .hdr .hdr-help { display: none; }
  .hdr-util { gap: 2px; }
  .hdr .hdr-mode, .hdr .hdr-burger { width: 38px; height: 38px; }
}
/* Start here step numbers: a lifted graphite disc in dark (a near-white disc glares; Hubs "you" avatar rule) */
html[data-mode="dark"] .onb-n { background: #434A50; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
/* the promo's mini board + the Planning View season bars: Charcoal 2 strips (not near-black) so they read on the band */
.pp-sea > b, .pv-sea { background: #2F3439; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
/* the Resources sheet (position: fixed) lives inside the header on phones / tablets; a backdrop-filter on the header
   would make the header its containing block (a 0px-tall sheet), so below 900px the header is a solid card surface */
@media (max-width: 899px) {
  .hdr { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sf); }
}
/* phones: the three apps sit in the sheet's Tools list at the top, so the Resources column below doesn't repeat them */
@media (max-width: 899px) {
  .mm-col li:has(> [data-tool="lb"]), .mm-col li:has(> [data-tool="slides"]), .mm-col li:has(> [data-tool="hubs"]) { display: none; }
  .mm-mob-note { margin: 8px 2px 0; display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-3); }
  .mm-mob-note svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
}
@media (min-width: 900px) { .mm-mob-note { display: none; } }

/* ---- Grow Tools button = the Hubs header pill (Kenny 2026-10-04 #grow-dashboard: "styled like the one on /hubs-app/").
   Values copied from grow-hubs-app hubs.css .hdr-pill + studio.css r6p header-ink rules. ---- */
.hdr #menuBtn.hdr-pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin: 0 6px 0 4px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; /* = live /hubs-app/ Grow Tools pill: growdev growtools.css forces #growToolsBtn to 999px (Kenny 2026-10-04); do not change to 10px */
  background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; color: #1F2328;
  box-shadow: inset 0 0 0 1px rgba(31,35,40,.18); transition: background .12s, box-shadow .12s; }
.hdr #menuBtn.hdr-pill svg { width: 16px; height: 16px; flex: none; color: #1F2328; transform: none; }
.hdr #menuBtn.hdr-pill:hover, .hdr #menuBtn.hdr-pill[aria-expanded="true"] { background: #EEF0F2; color: #1F2328; box-shadow: inset 0 0 0 1px rgba(31,35,40,.32); }
.hdr #menuBtn.hdr-pill::after { content: none; }
html[data-mode="dark"] .hdr #menuBtn.hdr-pill, html[data-mode="dark"] .hdr #menuBtn.hdr-pill svg { color: #F4F5F7; }
html[data-mode="dark"] .hdr #menuBtn.hdr-pill { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
html[data-mode="dark"] .hdr #menuBtn.hdr-pill:hover, html[data-mode="dark"] .hdr #menuBtn.hdr-pill[aria-expanded="true"] { background: #3A4046; color: #FFFFFF; }
.hdr #menuBtn.hdr-pill:focus-visible { outline: 2px solid #5E8117; outline-offset: 2px; }
html[data-mode="dark"] .hdr #menuBtn.hdr-pill:focus-visible { outline-color: #FFFFFF; }
/* live growdev injects the universal "Grow Tools" pill (button.gtb, growdev growtools.js) into .hdr-util; on narrow
   phones the lockup says "Dashboard" alone while it's there, so the bar never overflows (390 / 360) */
@media (max-width: 479px) { html.gtb-on .hdr .gc-logo .w1 { display: none; } html.gtb-on .hdr-util { gap: 2px; } }

/* Kenny 2026-10-06 #hq: final Grow app icons in the dashboard's own tool lists (appicons.js). Rollback: APP_ICONS=false there. */
.appico { display: block; flex: none; border-radius: 22%; }
.appico-sm { width: 22px; height: 22px; border-radius: 6px; }
.mm-ico.appico-tile, .res-ico.appico-tile,
.res-item:hover .res-ico.appico-tile { background: none; box-shadow: none; padding: 0; overflow: hidden; }
.mm-ico.appico-tile .appico { width: 100%; height: 100%; }
.res-ico.appico-tile .appico { width: 100%; height: 100%; transition: transform .2s; }
.res-item:hover .res-ico.appico-tile .appico { transform: scale(1.06); }
.rail-link.dim .appico, .mm-mob-t.dim .appico { opacity: .55; filter: saturate(.6); }