/* ================================================================
   Koala Grove — main.css
   Screen layout and component styles.
   All design tokens map to CSS custom properties from theme-tokens.json.
   ================================================================ */

/* ================================================================
   Design Tokens
   ─────────────────────────────────────────────────────────────────
   TOKEN MAP — updating the Webflow style guide?
     1. Change the "Webflow core" values below.
     2. App-specific semantic tokens automatically inherit the new
        palette because they reference core tokens where possible.
     3. Month theme colours (hero / chip theming) live in their own
        section below and are intentionally outside the system.
   ================================================================ */
:root {

  /* ════════════════════════════════════════════════════════════════
     §1  WEBFLOW CORE TOKENS
         Direct 1-to-1 mappings to Webflow variable collections.
         Site ID: 69d1c97610671687d50c0304

         INTENTIONAL DEVIATIONS FROM WEBFLOW STYLE GUIDE:
         ─────────────────────────────────────────────────
         Container width : 1180px (vs Webflow default 1280px)
           → Narrower shell improves readability for the long-form
             monthly guide content; cards sit closer together.

         Nav height      : 52px  (vs Webflow spec 4rem / 64px)
           → Reduced to minimise vertical space consumed by the
             sticky topnav on the compact monthly-guide layout.

         Card BG (--paper): #fafaf6 (vs Webflow Card Primary = BG Primary)
           → Slightly lighter than --bg so cards visually lift off
             the radial-gradient page canvas.

         Main breakpoint : 980px (vs Webflow 991px for tablet)
           → Legacy value; component-level @media rules now use
             the Webflow breakpoints (991 / 767 / 478) where
             possible. 980px retained for the sidebar collapse.
     ════════════════════════════════════════════════════════════════ */

  /* Core Neutral Color ───────────────────────────────────────────
     Collection: Colors / Core Neutral Color                       */
  --bg:                  #f0efe7;   /* Neutral Primary  (BG Primary)      */
  --surface:             #ebeae1;   /* Neutral Secondary (BG Secondary)   */
  --ink:                 #20310b;   /* Neutral Inverse   (Text Primary)   */

  /* Text Secondary ── warm alpha tint, not a flat grey ──────────
     Collection: Colors / Core Color Tint / Neutral Inverse A60   */
  --muted:               rgba(32, 49, 11, 0.6);

  /* Card surface ── lighter than --bg so cards lift off the page ─
     Not a direct Webflow token; closest is Card Primary BG.      */
  --paper:               #fafaf6;

  /* Border / Line ── Webflow Border Primary                       */
  --line:                rgba(32, 49, 11, 0.14);

  /* Neutral Inverse alpha tints ─────────────────────────────────
     Collection: Colors / Core Color Tint / Neutral Inverse       */
  --ink-a06:             rgba(32, 49, 11, 0.06);   /* A06 — subtle fill  */
  --ink-a10:             rgba(32, 49, 11, 0.1);    /* A10                */
  --ink-a20:             rgba(32, 49, 11, 0.2);    /* A20                */
  --ink-a30:             rgba(32, 49, 11, 0.3);    /* A30                */
  --ink-a50:             rgba(32, 49, 11, 0.5);    /* A50                */

  /* Accent palette ───────────────────────────────────────────────
     Collection: Colors / Core Accent Color                       */
  --accent:              #66d97e;   /* Accent Primary                    */
  --accent-hover:        #97e5a7;   /* Accent Primary Hover              */
  --accent-text:         #1c3203;   /* Text On Accent Primary            */
  --accent-pink:         #ffbfd6;   /* Accent Secondary                  */
  --accent-pink-hover:   #fffcfd;   /* Accent Secondary Hover            */
  --accent-lime:         #defe52;   /* Accent Tertiary                   */
  --accent-lime-hover:   #eafe8f;   /* Accent Tertiary Hover             */

  /* Radius scale ─────────────────────────────────────────────────
     Collection: Sizes / Radius                                   */
  --radius-sm:           0.25rem;   /* SM Radius                         */
  --radius-xs:           0.25rem;   /* SM Radius (alias)                 */
  --radius-md:           0.5rem;    /* MD Radius — Tag, Input, Button    */
  --radius:              0.75rem;   /* LG Radius — Card                  */
  --radius-lg:           0.75rem;   /* LG Radius (alias)                 */
  --radius-xl:           1rem;      /* XL Radius — Hero                  */
  --radius-pill:         100rem;    /* Round                             */

  /* Typography ───────────────────────────────────────────────────
     Collection: Typography                                        */
  --text-2xs:            0.68rem;   /* micro labels, badge text          */
  --text-xs:             0.75rem;   /* captions, TOC dividers, chips     */
  --text-sm:             0.88rem;   /* body small                        */
  --text-base:           1rem;      /* body base                         */
  --text-lg:             1.13rem;   /* body large                        */
  --text-xl:             1.5rem;    /* body xl                           */
  --lh-base:             1.6;       /* base line-height                  */

  /* Shadow ───────────────────────────────────────────────────────
     Layered shadow: tight edge shadow + mid diffuse + ambient    */
  --shadow:              0 1px 2px rgba(32, 49, 11, 0.04),
                         0 4px 12px rgba(32, 49, 11, 0.06),
                         0 12px 32px rgba(32, 49, 11, 0.05);
  --shadow-hover:        0 2px 4px rgba(32, 49, 11, 0.05),
                         0 8px 20px rgba(32, 49, 11, 0.08),
                         0 20px 44px rgba(32, 49, 11, 0.07);
  --shadow-elevated:     0 6px 24px rgba(32, 49, 11, 0.09);

  /* Semantic colour aliases — derived from Neutral Inverse alpha tints */
  --ink-soft:            rgba(32, 49, 11, 0.75);  /* Neutral Inverse A75 */
  --bg-alt:              #f7f5ef;                  /* warm subtle alt BG  */

  /* Spacing scale ────────────────────────────────────────────────
     Collection: Sizes / Spacing — Webflow Design System
     Usage: prefer these tokens over raw px/rem in new rules.     */
  --space-025:  0.25rem;   /* 4px   — 0.25x */
  --space-05:   0.5rem;    /* 8px   — 0.5x  */
  --space-075:  0.75rem;   /* 12px  — 0.75x */
  --space-1:    1rem;      /* 16px  — 1x    */
  --space-125:  1.25rem;   /* 20px  — 1.25x */
  --space-15:   1.5rem;    /* 24px  — 1.5x  */
  --space-175:  1.75rem;   /* 28px  — 1.75x */
  --space-2:    2rem;      /* 32px  — 2x    */
  --space-3:    3rem;      /* 48px  — 3x    */
  --space-4:    4rem;      /* 64px  — 4x    */
  --space-5:    5rem;      /* 80px  — 5x    */
  --space-6:    6rem;      /* 96px  — 6x    */
  --space-7:    7rem;      /* 112px — 7x    */
  --space-8:    8rem;      /* 128px — 8x    */

  /* Semantic gap tokens ──────────────────────────────────────────
     Collection: Sizes / Gap — Webflow Design System               */
  --gap-xxs:  var(--space-05);    /* 0.5rem  — 8px  */
  --gap-xs:   var(--space-1);     /* 1rem    — 16px */
  --gap-sm:   var(--space-2);     /* 2rem    — 32px */
  --gap-md:   var(--space-3);     /* 3rem    — 48px */
  --gap-lg:   var(--space-4);     /* 4rem    — 64px */
  --gap-xl:   var(--space-5);     /* 5rem    — 80px */
  --gap-xxl:  var(--space-6);     /* 6rem    — 96px */

  /* ════════════════════════════════════════════════════════════════
     §2  LEGACY ALIAS TOKENS
         Kept for backward compatibility; map to Webflow equivalents.
         Prefer the §1 tokens in new rules when adding new CSS.

         DO NOT REMOVE these tokens — they are in active use:
           --sage-dark       → link color, active states, brand text
                               (30+ rules — equals Text Accent On Primary)
           --sage-dark-hover → hover state for all --sage-dark links
           --mist            → hover background on nav/card elements
           --butter          → seasonal callout backgrounds (July)
           --sage            → progress indicators, decorative accents
     ════════════════════════════════════════════════════════════════ */
  --mist:                var(--ink-a06);  /* was rgba(32,49,11,0.06)      */
  --sage:                #88a691;         /* ≈ Neutral Inverse A35        */
  --sage-dark:           #4fb264;         /* Text Accent On Primary        */
  --sage-dark-hover:     rgba(79, 178, 100, 0.6); /* Text Accent On Primary Hover */
  --blush:               var(--accent-pink);
  --butter:              #f2df9d;         /* ≈ Accent Tertiary tint       */
  --white:               #ffffff;         /* pure white — use sparingly   */

  /* ════════════════════════════════════════════════════════════════
     §3  APP-SPECIFIC SEMANTIC TOKENS
         Extend the Webflow palette for Koala Grove's domain.
         These are NOT in the Webflow style guide but are derived
         from it — change the core tokens above and these adapt.
     ════════════════════════════════════════════════════════════════ */

  /* Progress level palette — Exploring / Growing / Flying ────────
     Three-tier skill progression: warm amber → sage green → slate  */
  --level-exploring:         #c2b36b;
  --level-exploring-bg:      rgba(194, 179, 107, 0.14);
  --level-exploring-text:    #8a7530;
  --level-growing:           #70a085;
  --level-growing-bg:        rgba(112, 160, 133, 0.14);
  --level-growing-text:      #3e6e52;
  --level-flying:            #5a7fb5;
  --level-flying-bg:         rgba(90, 127, 181, 0.14);
  --level-flying-text:       #3558a0;

  /* Learning subject palette ─────────────────────────────────────
     Used for skill badges, subject chips, and SB badge labels.
     One canonical set — no more divergent badge systems.         */
  --subject-literacy-bg:     #e8eef8;
  --subject-literacy-text:   #2d4d8a;
  --subject-maths-bg:        #fef3e2;
  --subject-maths-text:      #8a5c14;
  --subject-creative-bg:     #f3eaf8;
  --subject-creative-text:   #6a2d8a;
  --subject-discovery-bg:    #e5f4f0;
  --subject-discovery-text:  #1d6b5a;
  --subject-social-bg:       #fef0ee;
  --subject-social-text:     #8a3028;
  --subject-practice-bg:     var(--surface);
  --subject-practice-text:   var(--muted);

  /* Status colours ───────────────────────────────────────────────
     Success = deep forest green; Danger = warm red              */
  --status-success-bg:       #eaf4ee;
  --status-success-text:     #2f5e42;
  --status-success-border:   #4a7a62;
  --status-success-dark:     #4a6353;
  --status-danger:           #c0392b;
  --status-danger-bg:        #fdf0ef;

  /* Daily rhythm row-type colours ────────────────────────────────
     Full-day · Short · Low-energy · Rainy-day                   */
  --rhythm-full-bg:          #e8f2ea;
  --rhythm-full-text:        #3a6b46;
  --rhythm-short-bg:         #eef2f8;
  --rhythm-short-text:       #3a4e80;
  --rhythm-low-bg:           #fef7ed;
  --rhythm-low-text:         #8a5c28;
  --rhythm-low-label:        #7a5c3a;
  --rhythm-rainy-bg:         #edf2fa;
  --rhythm-rainy-text:       #365380;
  --rhythm-rainy-label:      #4a5c7a;
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Instrument Sans", Inter, "Aptos", Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"),
    radial-gradient(circle at top left, #f8f7f0 0%, var(--bg) 45%, #e8e7de 100%);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-family: "Poppins", "Instrument Sans", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.04em;
  letter-spacing: -0.01em;
}

/* ── Webflow heading type scale ─────────────────────────────────── */
/* Desktop (default) */
h1 { font-size: 4.21rem; line-height: 1.04em; }
h2 { font-size: 2.37rem; line-height: 1.04em; }
h3 { font-size: 1.78rem; line-height: 1.04em; }
h4 { font-size: 1.33rem; line-height: 1.30em; letter-spacing: -0.01em; }
h5 { font-size: 1rem;    line-height: 1.30em; letter-spacing: 0; }
h6 { font-size: var(--text-xs); line-height: 1.30em; letter-spacing: 0.1em; }

/* Tablet (≤ 991px) */
@media (max-width: 991px) {
  h1 { font-size: 3.37rem; }
  h2 { font-size: 1.89rem; }
  h3 { font-size: 1.42rem; }
  h4 { font-size: 1.20rem; }
}

/* Mobile landscape (≤ 767px) */
@media (max-width: 767px) {
  h1 { font-size: 2.69rem; }
  h2 { font-size: 1.52rem; }
  h3 { font-size: 1.14rem; }
  h4 { font-size: 1.08rem; }
}

/* Mobile portrait (≤ 478px) */
@media (max-width: 478px) {
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.21rem; }
  h3 { font-size: 0.91rem; }
  h4 { font-size: 0.97rem; }
}

p { margin-top: 0; max-width: 68ch; }
blockquote {
  margin: 0 0 1em;
  padding: 14px 18px 14px 20px;
  border-left: 3px solid var(--sage);
  border-radius: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);
  letter-spacing: 0.01em;
  line-height: 1.5em;
  color: var(--muted);
  font-style: italic;
}
a { color: var(--sage-dark); transition: color 0.2s ease; }
a:hover { color: var(--sage-dark-hover); }
img { max-width: 100%; }

/* ── Custom text selection ─────────────────────────────────────── */
::selection {
  background: rgba(102, 217, 126, 0.25);
  color: var(--ink);
}

/* ── Smooth scroll for reduced-motion-respecting systems ───────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Top Navigation Bar ─────────────────────────────────────────── */
.topnav {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1.5px solid var(--month-accent, var(--line));
  padding: 0 max(24px, 4vw);
  display: flex;
  align-items: center;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 52px;
}

/* Inner wrapper — flex passthrough, no width constraint */
.topnav-inner {
  display: contents;
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  padding: 8px 0;
  margin-right: 24px;
  flex-shrink: 0;
}

.topnav-brand-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1.5px solid #e0e5db;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}

.topnav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
  flex: 1;
}

.topnav-links a {
  text-decoration: none;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.topnav-links a:hover {
  background: var(--month-accent-soft, var(--mist));
  color: var(--ink);
}

.topnav-links a.active {
  background: var(--month-accent-soft, var(--mist));
  color: var(--month-accent-text, var(--sage-dark));
  font-weight: 700;
}

.topnav-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 8px;
  flex-shrink: 0;
}

/* ── Current-month shortcut link (injected by mobile-nav.js) ───── */
/* Inherits base style from .topnav-links a; this rule adds the
   indicator dot and ensures it stays hidden on mobile. */
.topnav-current-month {
  position: relative;
}

.topnav-current-month::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--month-accent, var(--sage));
  margin-right: 5px;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

@media (max-width: 980px) {
  .topnav-current-month { display: none; }
}

/* ── Monthly Guides dropdown ────────────────────────────────────── */
.topnav-dropdown {
  position: relative;
  flex-shrink: 0;
}

.topnav-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.topnav-dropdown-btn:hover,
.topnav-dropdown-btn.active {
  background: var(--month-accent-soft, var(--mist));
  color: var(--ink);
}

.topnav-dropdown-btn:focus-visible {
  outline: 2px solid var(--month-accent, var(--sage));
  outline-offset: 2px;
}

.topnav-dropdown-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.topnav-dropdown-btn[aria-expanded="true"] .topnav-dropdown-chevron {
  transform: rotate(180deg);
}

/* Panel — hidden by default, shown as 2-col grid when open */
.topnav-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  min-width: 340px;
  background: var(--paper);
  border: 1px solid var(--line, #dde3d8);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.06);
  padding: 8px;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.topnav-dropdown-panel.topnav-dropdown-open {
  display: grid;
}

.topnav-dropdown-panel a {
  display: block;
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.topnav-dropdown-panel a:hover {
  background: var(--mist, #edf3ef);
  color: var(--ink);
}

.topnav-dropdown-panel a.active {
  background: var(--month-accent-soft, var(--mist));
  color: var(--month-accent-text, var(--sage-dark));
  font-weight: 600;
}

/* Past months in the desktop dropdown — subtly dimmed */
.topnav-dropdown-panel a.nav-month-past {
  opacity: 0.45;
}
.topnav-dropdown-panel a.nav-month-past:hover {
  opacity: 1;
}

/* Hide dropdown entirely on mobile — hamburger panel handles it there */
@media (max-width: 980px) {
  .topnav-dropdown { display: none; }
}

/* ── Mobile hamburger button (inside topnav) ───────────────────── */
/* Hidden by default; shown only in the mobile media query (≤980px) */
.mob-nav-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.mob-nav-btn:hover,
.mob-nav-btn:focus-visible {
  background: var(--mist, #edf3ef);
  outline: none;
}

/* ── Shell Layout ───────────────────────────────────────────────── */
.shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 24px auto 64px;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 76px; /* accounts for topnav */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-a10) transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(250,250,246,0.88) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  transition: box-shadow 0.3s ease;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.brand-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1.5px solid #e0e5db;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: grid;
  place-items: center;
  font-size: 24px;
  flex-shrink: 0;
}

.brand-text h2,
.brand-name {
  display: block;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.brand-text p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Document TOC */
.toc {
  display: grid;
  gap: 4px;
  margin-top: 18px;
}

.toc-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 12px 6px;
  margin-top: 8px;
}

.toc a {
  text-decoration: none;
  color: var(--ink);
  padding: 9px 12px;
  border-radius: var(--radius-xs);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  border: 1px solid transparent;
  font-size: 0.92rem;
  display: block;
}

.toc a:hover {
  background: var(--mist);
  border-color: var(--line);
  transform: translateX(2px);
  color: var(--ink);
}

.toc a.active {
  background: var(--month-accent-soft, var(--mist));
  border-color: var(--month-accent, var(--line));
  color: var(--month-accent-text, var(--sage-dark));
  font-weight: 600;
}

/* Sidebar TOC divider — "Setup & Planning" separator */
.toc-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 0 12px;
}
.toc-divider::before,
.toc-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.toc-divider-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Sidebar note */
.mini-note {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fbf4e2, #fffaf1);
  border: 1px solid #f0e3bb;
  color: var(--rhythm-low-label);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ── Main Content Area ──────────────────────────────────────────── */
main {
  display: grid;
  gap: 24px;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
  box-shadow: var(--shadow-hover);
}

/* ── Print Page Band (print-only — hidden on screen) ───────────── */
/* print.css overrides display: none with display: flex inside       */
/* @media print so labels appear only when the page is printed.      */
.page-band {
  display: none;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  min-height: 380px;
  border-top: 3px solid var(--month-accent, var(--accent));
}

.hero-copy {
  padding: 42px;
  background: linear-gradient(180deg, #fcfcfb 0%, #f8fbf8 100%);
}

/* ── Monthly hero copy theming ───────────────────────────────────────────────
   Each month's hero card gets a very soft background wash on the copy panel
   and a tinted eyebrow badge, derived from the same palette as the art panel.
   ──────────────────────────────────────────────────────────────────────────── */

/* Month 1 — September · golden morning warmth */
.hero.theme-september .hero-copy { background: linear-gradient(180deg, #fff8e7 0%, #fffdf5 100%); }
.hero.theme-september .eyebrow   { background: #fdefc4; color: #7a5010; }

/* Month 2 — October · autumn russet */
.hero.theme-october .hero-copy   { background: linear-gradient(180deg, #fff4ec 0%, #fffbf8 100%); }
.hero.theme-october .eyebrow     { background: #fde4cc; color: #8a3010; }

/* Month 3 — November · earthy harvest */
.hero.theme-november .hero-copy  { background: linear-gradient(180deg, #fdf5ec 0%, #fffef8 100%); }
.hero.theme-november .eyebrow    { background: #f8e4cc; color: #6e4018; }

/* Month 4 — December · cool winter blue */
.hero.theme-december .hero-copy  { background: linear-gradient(180deg, #eef4ff 0%, #f6faff 100%); }
.hero.theme-december .eyebrow    { background: #d4e6f8; color: #1e5080; }

/* Month 5 — January · icy crisp */
.hero.theme-january .hero-copy   { background: linear-gradient(180deg, #e8f2ff 0%, #f4f9ff 100%); }
.hero.theme-january .eyebrow     { background: #c8dff5; color: #144878; }

/* Month 6 — February · soft rose */
.hero.theme-february .hero-copy  { background: linear-gradient(180deg, #fff0f5 0%, #fff8fb 100%); }
.hero.theme-february .eyebrow    { background: #fcd6ea; color: #801858; }

/* Month 7 — March · fresh spring green */
.hero.theme-march .hero-copy     { background: linear-gradient(180deg, #f0faf0 0%, #f8fef8 100%); }
.hero.theme-march .eyebrow       { background: #d4f0d4; color: #286030; }

/* Month 8 — April · sky blue */
.hero.theme-april .hero-copy     { background: linear-gradient(180deg, #e4f5ff 0%, #f0faff 100%); }
.hero.theme-april .eyebrow       { background: #c4e6f6; color: #085878; }

/* Month 9 — May · warm amber gold */
.hero.theme-may .hero-copy       { background: linear-gradient(180deg, #fffcec 0%, #fffef8 100%); }
.hero.theme-may .eyebrow         { background: #fdeea0; color: #6a4000; }

/* Month 10 — June · playful teal */
.hero.theme-june .hero-copy      { background: linear-gradient(180deg, #e4f9f7 0%, #f0fdfb 100%); }
.hero.theme-june .eyebrow        { background: #c0efea; color: #085858; }

/* Month 11 — July · dreamy lavender */
.hero.theme-july .hero-copy      { background: linear-gradient(180deg, #f4f0ff 0%, #f9f6ff 100%); }
.hero.theme-july .eyebrow        { background: #ddd8f8; color: #3e2878; }

/* Month 12 — August · golden celebration */
.hero.theme-august .hero-copy    { background: linear-gradient(180deg, #fffbec 0%, #fffdf5 100%); }
.hero.theme-august .eyebrow      { background: #fde8a0; color: #7a4800; }

/* ── Monthly chip theming ────────────────────────────────────────────────────
   The chip-subject (left) pill picks up the month's hue.  The chip border
   and divider line follow the same palette so everything reads as one system.
   ──────────────────────────────────────────────────────────────────────────── */

/* Month 1 — September */
.hero.theme-september .chip                { border-color: #f0d890; }
.hero.theme-september .chip-subject        { background: #fdefc4; color: #7a5010; border-right-color: #f0d890; }

/* Month 2 — October */
.hero.theme-october .chip                  { border-color: #f0c8a0; }
.hero.theme-october .chip-subject          { background: #fde4cc; color: #8a3010; border-right-color: #f0c8a0; }

/* Month 3 — November */
.hero.theme-november .chip                 { border-color: #edd4b0; }
.hero.theme-november .chip-subject         { background: #f8e4cc; color: #6e4018; border-right-color: #edd4b0; }

/* Month 4 — December */
.hero.theme-december .chip                 { border-color: #b8d0ec; }
.hero.theme-december .chip-subject         { background: #d4e6f8; color: #1e5080; border-right-color: #b8d0ec; }

/* Month 5 — January */
.hero.theme-january .chip                  { border-color: #a8cae8; }
.hero.theme-january .chip-subject          { background: #c8dff5; color: #144878; border-right-color: #a8cae8; }

/* Month 6 — February */
.hero.theme-february .chip                 { border-color: #f0b8d8; }
.hero.theme-february .chip-subject         { background: #fcd6ea; color: #801858; border-right-color: #f0b8d8; }

/* Month 7 — March */
.hero.theme-march .chip                    { border-color: #b0ddb0; }
.hero.theme-march .chip-subject            { background: #d4f0d4; color: #286030; border-right-color: #b0ddb0; }

/* Month 8 — April */
.hero.theme-april .chip                    { border-color: #9ad0ec; }
.hero.theme-april .chip-subject            { background: #c4e6f6; color: #085878; border-right-color: #9ad0ec; }

/* Month 9 — May */
.hero.theme-may .chip                      { border-color: #edd878; }
.hero.theme-may .chip-subject              { background: #fdeea0; color: #6a4000; border-right-color: #edd878; }

/* Month 10 — June */
.hero.theme-june .chip                     { border-color: #8adcd6; }
.hero.theme-june .chip-subject             { background: #c0efea; color: #085858; border-right-color: #8adcd6; }

/* Month 11 — July */
.hero.theme-july .chip                     { border-color: #c0b8f0; }
.hero.theme-july .chip-subject             { background: #ddd8f8; color: #3e2878; border-right-color: #c0b8f0; }

/* Month 12 — August */
.hero.theme-august .chip                   { border-color: #edce78; }
.hero.theme-august .chip-subject           { background: #fde8a0; color: #7a4800; border-right-color: #edce78; }

/* ── Per-month accent palette ────────────────────────────────────────────────
   Three custom properties set on <body data-month-theme="*"> for every monthly
   guide page.  Values are derived from the hero card palette so the accent
   reads as a continuous thread from hero to body.

   --month-accent       Saturated mid-tone — badges, active states, borders
   --month-accent-soft  Same hue at ~12 % opacity — background washes
   --month-accent-text  Darkened — text on light surfaces

   All non-monthly pages receive none of these and fall back gracefully.
   ──────────────────────────────────────────────────────────────────────────── */

[data-month-theme="september"] {
  --month-accent:      #b87820;
  --month-accent-soft: rgba(184, 120,  32, 0.12);
  --month-accent-text: #7a4e10;
}
[data-month-theme="october"] {
  --month-accent:      #c86030;
  --month-accent-soft: rgba(200,  96,  48, 0.12);
  --month-accent-text: #883810;
}
[data-month-theme="november"] {
  --month-accent:      #a86830;
  --month-accent-soft: rgba(168, 104,  48, 0.12);
  --month-accent-text: #6e4018;
}
[data-month-theme="december"] {
  --month-accent:      #4e80be;
  --month-accent-soft: rgba( 78, 128, 190, 0.12);
  --month-accent-text: #1e5080;
}
[data-month-theme="january"] {
  --month-accent:      #3870ae;
  --month-accent-soft: rgba( 56, 112, 174, 0.12);
  --month-accent-text: #144878;
}
[data-month-theme="february"] {
  --month-accent:      #c05090;
  --month-accent-soft: rgba(192,  80, 144, 0.12);
  --month-accent-text: #801858;
}
[data-month-theme="march"] {
  --month-accent:      #388840;
  --month-accent-soft: rgba( 56, 136,  64, 0.12);
  --month-accent-text: #185820;
}
[data-month-theme="april"] {
  --month-accent:      #1888b0;
  --month-accent-soft: rgba( 24, 136, 176, 0.12);
  --month-accent-text: #085878;
}
[data-month-theme="may"] {
  --month-accent:      #a87818;
  --month-accent-soft: rgba(168, 120,  24, 0.12);
  --month-accent-text: #704808;
}
[data-month-theme="june"] {
  --month-accent:      #189090;
  --month-accent-soft: rgba( 24, 144, 144, 0.12);
  --month-accent-text: #085858;
}
[data-month-theme="july"] {
  --month-accent:      #6858b0;
  --month-accent-soft: rgba(104,  88, 176, 0.12);
  --month-accent-text: #3e2878;
}
[data-month-theme="august"] {
  --month-accent:      #c07810;
  --month-accent-soft: rgba(192, 120,  16, 0.12);
  --month-accent-text: #804800;
}

.eyebrow {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--sage-dark);
  font-family: "Instrument Sans", Inter, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 0.9rem;
  line-height: 1.3em;
  margin-bottom: 18px;
}
@media (max-width: 478px) {
  .eyebrow { font-size: var(--text-sm); }
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero .sub {
  margin: 16px 0 22px;
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 56ch;
}

/* ── Chip Row ───────────────────────────────────────────────────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  font-size: var(--text-sm);
  background: var(--paper);   /* was: white — now uses warm off-white token */
  max-width: 100%;
}

.chip-subject {
  background: var(--ink-a10); /* was: var(--mist)/6% — now uses Neutral Inverse A10 */
  color: var(--muted);        /* was: var(--sage-dark) legacy — now Text Secondary */
  font-weight: 600;
  padding: 7px 11px 7px 13px;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.chip-topic {
  color: var(--ink);
  font-weight: 400;           /* was: 500 — now Base Font Weight per style guide */
  padding: 7px 13px 7px 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Hero Art Panel ─────────────────────────────────────────────── */
.hero-art {
  position: relative;
  padding: 28px;
  background: linear-gradient(180deg, #dfece3 0%, #eff6f1 42%, #fff 100%);
  display: grid;
  place-items: center;
}

.art-panel {
  width: min(100%, 360px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff8f2, #ffffff 70%);
  border: 1px solid rgba(94, 122, 104, 0.15);
  position: relative;
  box-shadow: 0 18px 40px rgba(77, 98, 84, 0.12);
  overflow: hidden;
}

/* Koala illustration elements */
.sun {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  top: 24px;
  right: 26px;
  background: radial-gradient(circle at 35% 35%, #fff9d1 0%, #f4e29d 48%, #edcc72 100%);
}

.hill {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -10%;
  height: 42%;
  background: #bfd6c2;
  border-radius: 50% 50% 0 0;
}

.hill.two {
  bottom: -17%;
  height: 34%;
  background: #9fc1a5;
}

.koala {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: #dde2e5;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.04);
}

.ear {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #dde2e5;
  top: -8px;
}

.ear::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: #efced0;
}

.ear.left { left: 12px; }
.ear.right { right: 12px; }

.eye {
  position: absolute;
  width: 16px;
  height: 20px;
  border-radius: 50%;
  background: #28313a;
  top: 76px;
}

.eye.left { left: 56px; }
.eye.right { right: 56px; }

.nose {
  position: absolute;
  width: 28px;
  height: 22px;
  left: 50%;
  top: 88px;
  transform: translateX(-50%);
  border-radius: 50% 50% 60% 60%;
  background: #46515a;
}

.smile {
  position: absolute;
  width: 42px;
  height: 22px;
  border: 3px solid #46515a;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0 0 40px 40px;
  left: 50%;
  top: 118px;
  transform: translateX(-50%);
}

.sparkle,
.sparkle::before,
.sparkle::after {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--paper);
  border-radius: 2px;
  transform: rotate(45deg);
  opacity: 0.95;
}

.sparkle { top: 74px; left: 34px; }
.sparkle::before { content: ""; top: 48px; left: 242px; }
.sparkle::after { content: ""; top: 156px; left: 212px; }

/* ── Monthly hero icon panel ─────────────────────────────────────────────
   Matches the core guide .hero-doc-accent pattern exactly: one div,
   gradient background, emoji centred via grid, no nested containers.
   Each month's gradient mirrors its .art-panel.theme-* palette.
   ───────────────────────────────────────────────────────────────────────── */
.hero-art--icon {
  display: grid;
  place-items: center;
  font-size: clamp(5rem, 6vw + 2rem, 8rem);
  user-select: none;
  position: relative;
  /* Default (no theme): green gradient matching hero-art fallback */
  background: linear-gradient(180deg, #e4f0e8 0%, #eff6f1 100%);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.04));
}

/* Per-month gradients — same colours as the .art-panel.theme-* backgrounds */
.hero-art--icon.theme-september { background: linear-gradient(180deg, #fff8e7, #fffef5 100%); }
.hero-art--icon.theme-october   { background: linear-gradient(180deg, #fff4ec, #fffbf8 100%); }
.hero-art--icon.theme-november  { background: linear-gradient(180deg, #fdf5ec, #fffef8 100%); }
.hero-art--icon.theme-december  { background: linear-gradient(180deg, #eef4ff, #f6faff 100%); }
.hero-art--icon.theme-january   { background: linear-gradient(180deg, #e8f2ff, #f4f9ff 100%); }
.hero-art--icon.theme-february  { background: linear-gradient(180deg, #fff0f5, #fff8fb 100%); }
.hero-art--icon.theme-march     { background: linear-gradient(180deg, #f0faf0, #f8fef8 100%); }
.hero-art--icon.theme-april     { background: linear-gradient(180deg, #e4f5ff, #f0faff 100%); }
.hero-art--icon.theme-may       { background: linear-gradient(180deg, #fffcec, #fffef8 100%); }
.hero-art--icon.theme-june      { background: linear-gradient(180deg, #e4f9f7, #f0fdfb 100%); }
.hero-art--icon.theme-july      { background: linear-gradient(180deg, #f4f0ff, #f9f6ff 100%); }
.hero-art--icon.theme-august    { background: linear-gradient(180deg, #fffbec, #fffdf5 100%); }

/* Month 1 — September · Hello World · golden morning warmth */
.art-panel.theme-september { background: linear-gradient(180deg, #fff8e7, #fffef5 70%); }
.art-panel.theme-september .sun  { background: radial-gradient(circle at 35% 35%, #fffde7 0%, #ffd54f 48%, #f9a825 100%); }
.art-panel.theme-september .hill      { background: #9cad7e; }
.art-panel.theme-september .hill.two  { background: #7d9065; }

/* Month 2 — October · The World Around Me · autumn russet */
.art-panel.theme-october { background: linear-gradient(180deg, #fff4ec, #fffbf8 70%); }
.art-panel.theme-october .sun  { background: radial-gradient(circle at 35% 35%, #ffe8d0 0%, #ffb74d 48%, #f57c00 100%); }
.art-panel.theme-october .hill      { background: #c0804a; }
.art-panel.theme-october .hill.two  { background: #a0683a; }

/* Month 3 — November · Thankful Together · earthy harvest */
.art-panel.theme-november { background: linear-gradient(180deg, #fdf5ec, #fffef8 70%); }
.art-panel.theme-november .sun  { background: radial-gradient(circle at 35% 35%, #fff8e7 0%, #ffcc80 48%, #ffa726 100%); }
.art-panel.theme-november .hill      { background: #a08060; }
.art-panel.theme-november .hill.two  { background: #8a6a4a; }

/* Month 4 — December · Light & Celebrations · cool winter blue with warm glow */
.art-panel.theme-december { background: linear-gradient(180deg, #eef4ff, #f6faff 70%); }
.art-panel.theme-december .sun  {
  background: radial-gradient(circle at 35% 35%, #fff8f0 0%, #ffe0b2 48%, #ffb74d 100%);
  box-shadow: 0 0 28px rgba(255, 183, 77, 0.50);
}
.art-panel.theme-december .hill      { background: #9ab8d8; }
.art-panel.theme-december .hill.two  { background: #7a9ec0; }

/* Month 5 — January · Fresh Start · icy crisp */
.art-panel.theme-january { background: linear-gradient(180deg, #e8f2ff, #f4f9ff 70%); }
.art-panel.theme-january .sun  { background: radial-gradient(circle at 35% 35%, #fff9f0 0%, #fff3cd 48%, #ffe082 100%); }
.art-panel.theme-january .hill      { background: #b4cce0; }
.art-panel.theme-january .hill.two  { background: #95b4cc; }

/* Month 6 — February · Hearts & Living Things · soft rose */
.art-panel.theme-february { background: linear-gradient(180deg, #fff0f5, #fff8fb 70%); }
.art-panel.theme-february .sun  { background: radial-gradient(circle at 35% 35%, #ffe4f0 0%, #f48fb1 48%, #e91e8c 100%); }
.art-panel.theme-february .hill      { background: #d4a0b8; }
.art-panel.theme-february .hill.two  { background: #be88a0; }

/* Month 7 — March · Growing Things · fresh spring green */
.art-panel.theme-march { background: linear-gradient(180deg, #f0faf0, #f8fef8 70%); }
.art-panel.theme-march .sun  { background: radial-gradient(circle at 35% 35%, #fffde7 0%, #fff176 48%, #f9d000 100%); }
.art-panel.theme-march .hill      { background: #6bb86b; }
.art-panel.theme-march .hill.two  { background: #4da04d; }

/* Month 8 — April · Our Earth · sky blue with forest green */
.art-panel.theme-april { background: linear-gradient(180deg, #e4f5ff, #f0faff 70%); }
.art-panel.theme-april .sun  { background: radial-gradient(circle at 35% 35%, #fffde7 0%, #fff59d 48%, #f9a825 100%); }
.art-panel.theme-april .hill      { background: #4a9e6a; }
.art-panel.theme-april .hill.two  { background: #338a55; }

/* Month 9 — May · Stories & Imagination · warm amber gold */
.art-panel.theme-may { background: linear-gradient(180deg, #fffcec, #fffef8 70%); }
.art-panel.theme-may .sun  { background: radial-gradient(circle at 35% 35%, #fffde7 0%, #ffe082 48%, #ffc107 100%); }
.art-panel.theme-may .hill      { background: #c8a050; }
.art-panel.theme-may .hill.two  { background: #b08838; }

/* Month 10 — June · Exploring & Moving · playful teal */
.art-panel.theme-june { background: linear-gradient(180deg, #e4f9f7, #f0fdfb 70%); }
.art-panel.theme-june .sun  { background: radial-gradient(circle at 35% 35%, #fff9c4 0%, #fff176 48%, #ffd600 100%); }
.art-panel.theme-june .hill      { background: #45b0a8; }
.art-panel.theme-june .hill.two  { background: #2e9890; }

/* Month 11 — July · Summer Connections · dreamy lavender */
.art-panel.theme-july { background: linear-gradient(180deg, #f4f0ff, #f9f6ff 70%); }
.art-panel.theme-july .sun  { background: radial-gradient(circle at 35% 35%, #fff0f8 0%, #ffcdd2 48%, #f48fb1 100%); }
.art-panel.theme-july .hill      { background: #8870c8; }
.art-panel.theme-july .hill.two  { background: #7058b0; }

/* Month 12 — August · Ready for Tomorrow · golden celebration */
.art-panel.theme-august { background: linear-gradient(180deg, #fffbec, #fffdf5 70%); }
.art-panel.theme-august .sun  {
  background: radial-gradient(circle at 35% 35%, #fff9e0 0%, #ffcc02 48%, #ff9800 100%);
  box-shadow: 0 0 28px rgba(255, 152, 0, 0.40);
}
.art-panel.theme-august .hill      { background: #d4a030; }
.art-panel.theme-august .hill.two  { background: #b88818; }

/* Document hero (non-koala, for core guides) */
.hero-doc {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  min-height: 260px;
}

/* Scope hero-doc h1 to a safe clamped size — the global h1 (4.21rem)
   is unsafe here and causes text to overflow on smaller screens */
.hero-doc h1 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

.hero-doc-accent {
  background: linear-gradient(180deg, #edf5ef 0%, #f6faf7 100%);
  display: grid;
  place-items: center;
  padding: 32px;
  font-size: 5rem;
}

/* ── Sections ───────────────────────────────────────────────────── */
section {
  padding: 2rem;  /* Style guide: Card Padding = 2rem desktop */
}
/* Soft divider between stacked sections inside cards */
.card section + section {
  border-top: 1px solid var(--ink-a06);
}
/* Responsive card padding — style guide spec */
@media (max-width: 767px) {
  section { padding: 1.5rem; }
}
@media (max-width: 478px) {
  section { padding: 1rem; }
}

section > h2,
section > h3 {
  margin: 0 0 14px;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}

/* Responsive card-level headings — scales section > h2/h3,
   .setup-summary h2, and .pk-section-header h2 together */
@media (max-width: 991px) {
  section > h2, section > h3,
  .setup-summary h2,
  .pk-section-header h2 { font-size: 1.35rem; }
}
@media (max-width: 767px) {
  section > h2, section > h3,
  .setup-summary h2,
  .pk-section-header h2 { font-size: 1.2rem; }
}
@media (max-width: 478px) {
  section > h2, section > h3,
  .setup-summary h2,
  .pk-section-header h2 { font-size: 1.1rem; }
}

/* ── Doc Body — Core Reference Guides prose styling ─────────────────────
   Scoped to .doc-body so monthly-guide sections are not affected.
   ────────────────────────────────────────────────────────────────────── */

/* Card-to-card breathing room */
.doc-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Section header: clear visual anchor for each card */
.doc-body section > h2 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--line);
}

/* Sub-section headings: sage accent, visual separator from content above */
.doc-body h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sage-dark);
  margin: 26px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* First H3 in a section — no top separator needed */
.doc-body section > h3:first-of-type,
.doc-body h3:first-child {
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
}

/* Prose paragraphs: generous line height, bottom margin */
.doc-body p {
  margin-bottom: 0.95em;
  line-height: 1.78;
}

/* Paragraph immediately before a list acts as a label — pull it closer */
.doc-body p:has(+ ul),
.doc-body p:has(+ ol) {
  margin-bottom: 5px;
}

/* Lists: clear indent, item breathing room */
.doc-body ul,
.doc-body ol {
  padding-left: 1.45em;
  margin: 0 0 1.1em;
}

.doc-body li {
  margin-bottom: 0.42em;
  line-height: 1.68;
}

.doc-body li:last-child {
  margin-bottom: 0;
}

/* Wide tables (e.g. Annual Curriculum Map): horizontal scroll on tablet.
   min-width: 0 prevents the section from stretching wider than the card.
   On mobile (≤980px) the tables switch to stacked-card layout instead. */
.doc-body section {
  min-width: 0;
  overflow-x: auto;
}

.doc-body table {
  font-size: var(--text-sm);
  min-width: 480px; /* overridden to 0 in mobile media query */
}

.doc-body th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Blockquotes — italic pull-quote treatment */
.doc-body blockquote {
  margin: 0 0 1em;
  padding: 14px 18px 14px 20px;
  border-left: 3px solid var(--sage);
  background: var(--mist);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-style: italic;
  color: var(--muted);
  line-height: 1.75;
}

/* "A Note on This Month" — author's closing thought, sits after subject cards */
.overview-note {
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--muted);
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* "Connecting to the Annual Map" — collapsed reference link at base of Overview */

.lede {
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 64ch;
  font-size: var(--text-lg);  /* 1.13rem — Body LG per style guide */
  line-height: 1.6;
}

.overview-pacing-note {
  margin: 16px 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: italic;
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* ── Grid Layouts ───────────────────────────────────────────────── */
.grid-2,
.grid-3 {
  display: grid;
  gap: 16px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Subcards ───────────────────────────────────────────────────── */
.subcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.subcard:hover {
  border-color: var(--month-accent, var(--ink-a20));
  background: rgba(255, 255, 255, 0.6);
}

.subcard h3,
.subcard h4 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.pill {
  display: inline-block;
  padding: 5px 11px;
  background: var(--month-accent-soft, #eef4ef);
  color: var(--month-accent-text, var(--sage-dark));
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── Lists ──────────────────────────────────────────────────────── */
ul.clean {
  margin: 0;
  padding-left: 18px;
}

ul.clean li { margin-bottom: 4px; }

.soft-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.soft-list li {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  line-height: 1.5;
}

/* ── Tables ─────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}

th, td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

thead th {
  background: var(--month-accent-soft, #eef5ef);
  color: var(--month-accent-text, var(--sage-dark));
  font-weight: 700;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:nth-child(even) td {
  background: var(--paper);
}

/* ── Callouts ───────────────────────────────────────────────────── */
.callout {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid #eadfb8;
  background: linear-gradient(180deg, #fffaf0 0%, #fff7e8 100%);
  line-height: 1.6;
}

.callout strong { color: var(--rhythm-low-label); }

.callout-info {
  border-color: var(--line);
  background: var(--mist);
}

.callout-info strong { color: var(--month-accent-text, var(--sage-dark)); }

/* ── Quote / Highlighted Note ───────────────────────────────────── */
.quote {
  padding: 16px 18px;
  border-left: 4px solid var(--month-accent, var(--sage));
  background: var(--month-accent-soft, var(--mist));
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  color: var(--month-accent-text, var(--sage-dark));
  font-weight: 600;
  line-height: 1.55;
}

/* ── Experience Cards ───────────────────────────────────────────── */
.experience {
  display: grid;
  gap: 16px;
}

.experience-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
  overflow: hidden;
}

.experience-head {
  padding: 14px 18px;
  background: var(--month-accent-soft, linear-gradient(180deg, #edf5ef 0%, #f8fbf9 100%));
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.experience-head-text {
  flex: 1;
  min-width: 0;
}

.experience-head h3,
.experience-head h4 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.meta {
  color: var(--muted);
  font-size: 0.92rem;
}

.experience-body {
  padding: 16px 18px;
  display: grid;
  gap: 14px;
}

.experience-body > p:first-child {
  margin: 0;
}

/* ── Layers ─────────────────────────────────────────────────────── */
.layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.layer {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  background: var(--paper);
}

.layer h5 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.layer ul {
  margin: 0;
  padding-left: 16px;
}

.layer ul li { margin-bottom: 4px; font-size: 0.93rem; }

/* ── Experience Sub-sections ────────────────────────────────────── */
.exp-section {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 2px;
}

.exp-section h4,
.exp-section h5 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--month-accent-text, var(--sage-dark));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Age adjustment cards */
.adjust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.adjust-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.adjust-card h5 {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--month-accent-text, var(--sage-dark));
}

.adjust-card ul {
  margin: 0;
  padding-left: 14px;
}

.adjust-card ul li { font-size: var(--text-sm); margin-bottom: 3px; }

/* ── Reflection Grid ────────────────────────────────────────────── */
.checkbox-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.checkbox-grid div {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.93rem;
}

.checkbox-grid div:nth-child(4n),
.checkbox-grid div:last-child {
  border-right: 0;
}

.checkbox-grid .head {
  background: var(--month-accent-soft, #eef5ef);
  color: var(--month-accent-text, var(--sage-dark));
  font-weight: 700;
  font-size: var(--text-sm);
}

.center { text-align: center; }

.reflection-prompts {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.reflection-prompt {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-style: italic;
  color: var(--muted);
}

/* ── Footer Note ────────────────────────────────────────────────── */
.footer-note {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}

/* ── Page Footer / Prev-Next Navigation ─────────────────────────── */
.doc-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 30px;
}

.prev-next-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  flex: 1;
  max-width: 320px;
  transition: background 0.15s, box-shadow 0.15s;
}

.prev-next-link:hover {
  background: var(--mist);
  box-shadow: 0 4px 16px rgba(31, 41, 51, 0.06);
}

.prev-next-link .direction {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.prev-next-link .title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.prev-next-link.next {
  text-align: right;
  margin-left: auto;
}

/* ── Index Page ─────────────────────────────────────────────────── */
.index-hero {
  padding: 56px 48px;
  background: linear-gradient(180deg, #fcfcfb 0%, #f4f8f5 100%);
}

.index-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  margin: 0 0 12px;
}

.index-hero p {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 60ch;
  margin: 0;
}

.doc-group-label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.doc-card {
  text-decoration: none;
  display: block;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: box-shadow 0.15s, transform 0.15s;
}

.doc-card:hover {
  box-shadow: 0 4px 14px rgba(32, 49, 11, 0.09);
  transform: translateY(-1px);
}

.doc-card-num {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--sage-dark);
  background: var(--mist);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 10px;
}

.doc-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.3;
}

.doc-card-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

/* ── Utility Classes ────────────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.avoid-break { break-inside: avoid-page; page-break-inside: avoid; }
.print-page { break-before: page; page-break-before: always; }

/* ── Mobile TOC Toggle ───────────────────────────────────────────
   Floating "Contents" button + slide-up panel. Visible on mobile only.
   Lets users access in-page navigation after scrolling down.
   ─────────────────────────────────────────────────────────────── */

.mob-toc-btn {
  display: none; /* shown only in mobile media query */
}

.mob-toc-backdrop {
  display: none;
}

.mob-toc-panel {
  display: none;
}

@media (max-width: 980px) {

  /* Floating trigger button — fixed, bottom-right */
  .mob-toc-btn {
    display: flex;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 290;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    background: var(--month-accent, var(--sage-dark));
    color: var(--white);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(31, 41, 51, 0.22);
    font-family: inherit;
    transition: background 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-toc-btn:hover,
  .mob-toc-btn:focus-visible {
    background: var(--month-accent-text, #3da854);
    box-shadow: 0 6px 24px rgba(31, 41, 51, 0.28);
    outline: none;
  }

  .mob-toc-icon {
    flex-shrink: 0;
  }

  /* Semi-transparent backdrop */
  .mob-toc-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 51, 0.38);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-toc-backdrop.mob-toc-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Slide-up panel */
  .mob-toc-panel {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--paper);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow: 0 -8px 40px rgba(31, 41, 51, 0.14);
    max-height: 78vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .mob-toc-panel.mob-toc-open {
    transform: translateY(0);
  }

  .mob-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 1;
  }

  .mob-toc-title {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .mob-toc-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
  }

  .mob-toc-close:hover,
  .mob-toc-close:focus-visible {
    background: var(--mist);
    color: var(--ink);
    outline: none;
  }

  .mob-toc-links {
    padding: 10px 12px 20px;
    display: grid;
    gap: 2px;
  }

  .mob-toc-links a {
    display: block;
    text-decoration: none;
    color: var(--ink);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    transition: background 0.14s;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-toc-links a:hover,
  .mob-toc-links a:focus-visible {
    background: var(--mist);
    outline: none;
  }

  .mob-toc-links .mob-toc-h3 {
    padding-left: 26px;
    font-size: var(--text-sm);
    color: var(--muted);
  }

  .mob-toc-links a.mob-toc-current {
    background: var(--month-accent-soft, var(--mist));
    color: var(--month-accent-text, var(--sage-dark));
    font-weight: 700;
  }

  /* Past months in the mobile panel — subtly dimmed */
  #mob-monthly-panel a.nav-month-past {
    opacity: 0.45;
  }
  #mob-monthly-panel a.nav-month-past:hover,
  #mob-monthly-panel a.nav-month-past:focus-visible {
    opacity: 1;
  }

  /* mob-monthly-panel is an unstyled container — no extra spacing needed */
  #mob-monthly-panel { display: contents; }

  /* Mobile TOC divider */
  .mob-toc-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 14px 4px;
  }
  .mob-toc-divider::before,
  .mob-toc-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  .mob-toc-divider-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }
}

/* ── Prev / Next month strip ─────────────────────────────────────────────
   Shown at the top of regular monthly guides (month 1–12) on all viewports.
   Links to adjacent months in the curriculum sequence.
   ─────────────────────────────────────────────────────────────────────── */

.month-nav-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}

.month-nav-prev,
.month-nav-next {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.month-nav-prev:hover,
.month-nav-next:hover,
.month-nav-prev:focus-visible,
.month-nav-next:focus-visible {
  background: var(--mist);
  border-color: var(--sage-dark);
  box-shadow: 0 2px 8px rgba(32, 49, 11, 0.07);
  outline: none;
}

.month-nav-next {
  justify-content: flex-end;
  text-align: right;
}

.month-nav-arrow {
  font-size: 1.1rem;
  color: var(--sage-dark);
  flex-shrink: 0;
  line-height: 1;
}

.month-nav-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.month-nav-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}

.month-nav-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.month-nav-spacer {
  flex: 1;
}

@media (max-width: 600px) {
  .month-nav-strip {
    gap: 6px;
  }
  .month-nav-prev,
  .month-nav-next {
    padding: 8px 12px;
    gap: 8px;
  }
  .month-nav-name {
    display: none; /* Arrow + label is enough on small phones */
  }
  .month-nav-label {
    font-size: var(--text-xs);
  }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .shell {
    grid-template-columns: 1fr;
    margin: 16px auto 48px;
  }

  /* Prevent the fixed floating menu button (mob-toc-btn) from
     obscuring interactive content at the bottom of the page */
  .shell main,
  .home-wrapper {
    padding-bottom: 80px;
  }

  /* Hide sidebar on mobile — use the floating Contents button instead */
  .sidebar {
    display: none;
  }

  .hero,
  .hero-doc {
    grid-template-columns: 1fr;
  }

  .hero-art,
  .hero-doc-accent {
    display: none;
  }

  /* Keep the emoji icon panel visible on mobile — show as a horizontal
     accent strip rather than a full side column */
  .hero-art--icon {
    min-height: 80px;
    font-size: 3.5rem;
    border-top: 1px solid rgba(0,0,0,0.06);
  }

  .hero-copy {
    padding: 28px;
  }

  .grid-2,
  .grid-3,
  .layers,
  .adjust-grid {
    grid-template-columns: 1fr;
  }

  .topnav-links { display: none; }

  /* Show hamburger button in topnav on mobile */
  .mob-nav-btn { display: flex; }

  /* Hide the topnav separator that sits between brand and .topnav-links —
     it would show as a dangling line next to the hamburger */
  .topnav > .topnav-sep { display: none; }

  .doc-footer {
    flex-direction: column;
  }

  .prev-next-link.next {
    text-align: left;
    margin-left: 0;
  }

  .checkbox-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  .checkbox-grid div {
    padding: 10px 8px;
    font-size: var(--text-sm);
  }

  /* ── Responsive tables: stacked card layout ───────────────────────
     On mobile, each table row becomes a self-contained card.
     The JS in document.html stamps data-label on every td so that
     ::before can show the column header as an inline label.
  ── */

  /* Kill horizontal scroll — cards don't need it */
  .doc-body section {
    overflow-x: visible;
  }

  .doc-body table {
    display: block;
    min-width: 0;        /* override the desktop 480px floor */
    width: 100%;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  /* Hide the header row — labels come from data-label ::before */
  .doc-body table thead {
    display: none;
  }

  .doc-body table tbody {
    display: block;
  }

  /* Each row becomes a card */
  .doc-body table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--line, #e8e4da);
    border-radius: var(--radius, 0.75rem);
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  }

  /* Each cell is a row inside the card, with label stacked above value */
  .doc-body table td {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--mist, #edf3ef);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .doc-body table td:last-child {
    border-bottom: none;
  }

  /* Column header label — sits above the cell value, wraps freely */
  .doc-body table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--muted, #6b7a72);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
  }

  /* First cell (Month / row identifier) acts as the card title */
  .doc-body table td:first-child {
    background: var(--month-accent-soft, var(--mist, #edf3ef));
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--month-accent-text, var(--sage-dark, #3da854));
    padding: 10px 14px;
  }

  /* Suppress the "Month" label — the value is self-evident as the card header */
  .doc-body table td:first-child::before {
    display: none;
  }
}

@media (max-width: 600px) {
  .hero-copy { padding: 22px; }
  section { padding: 20px; }
  .index-hero { padding: 32px 22px; }
  .doc-grid { grid-template-columns: 1fr; }
  .checkbox-grid { font-size: var(--text-xs); }

  /* ── Chips: stacked 2-per-row format on mobile ──────────────── */
  /* Prevents any single chip from overflowing narrow screens     */
  .hero .chip-row {
    gap: 6px;
  }
  .hero .chip {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius);
    flex: 1 1 calc(50% - 3px);
    max-width: calc(50% - 3px);
    min-width: 0;
  }
  .hero .chip-subject {
    border-right: none;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 10px;
    font-size: var(--text-2xs);
    letter-spacing: 0.02em;
  }
  .hero .chip-topic {
    white-space: normal;
    line-height: 1.3;
    padding: 5px 10px 7px;
    font-size: var(--text-sm);
  }
}

/* ================================================================
   Progress Tracker — tracker.js companion styles
   All tracker styles use the existing Koala Grove design language:
   same card radius, ink/muted colours, mist backgrounds, etc.
   ================================================================ */

/* ── Tracker Status Block (near hero, top of month page) ─────── */
.tracker-status-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--mist);
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0 0 4px;
}

.tracker-status-label {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.tracker-status-value {
  flex: 1;
}

.tracker-status-value.status-empty {
  color: var(--muted);
  font-style: italic;
}

.tracker-status-value.status-progress {
  color: var(--month-accent-text, var(--sage-dark));
  font-weight: 500;
}

/* ── Progress Summary Card (homepage) ────────────────────────── */
.progress-summary-card {
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}

.progress-summary-card h3 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 700;
}

/* Per-child cards — row of surface-tinted cards, up to 3 per row */
.child-progress-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Loading placeholder shown before tracker.js populates the cards */
.cpc-loading {
  margin: 0;
  padding: 6px 0;
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: italic;
}

.child-progress-card {
  flex: 1 1 calc(33.33% - 6px);
  min-width: 200px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s;
}

.child-progress-card:hover {
  box-shadow: 0 2px 8px rgba(32, 49, 11, 0.07);
}

.child-progress-card--add {
  flex: 1 1 calc(33.33% - 6px);
  min-width: 200px;
  background: transparent;
  border: 1.5px dashed var(--line);
  box-shadow: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  gap: 6px;
  padding: 9px;
  color: var(--muted);
  transition: border-color 0.15s, color 0.15s;
}

.child-progress-card--add:hover {
  border-color: var(--sage);
  color: var(--sage-dark);
  background: transparent;
  box-shadow: none;
}

.cpc-add-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.cpc-add-label {
  font-size: var(--text-sm);
  font-weight: 500;
}

.cpc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cpc-child-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  flex: 1;
  letter-spacing: -0.01em;
}

/* Icon buttons in the card header (pencil / ×) */
.cpc-rename-btn,
.cpc-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.13s, color 0.13s;
  flex-shrink: 0;
}

.cpc-rename-btn:hover { background: var(--mist); color: var(--sage-dark); }
.cpc-remove-btn:hover { background: var(--status-danger-bg); color: var(--rust, #c0392b); }

/* ── Inline rename input ─────────────────────────────────────────── */
.cpc-rename-input {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--sage-dark, #3da854);
  outline: none;
  padding: 1px 3px;
}

/* Shared confirm / cancel icon buttons used by rename and remove */
.cpc-inline-confirm,
.cpc-inline-cancel,
.cpc-inline-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.13s, color 0.13s;
}

.cpc-inline-confirm {
  background: var(--mist);
  color: var(--sage-dark, #3da854);
}
.cpc-inline-confirm:hover { background: var(--sage-dark); color: var(--white); }

.cpc-inline-cancel {
  background: none;
  color: var(--muted);
}
.cpc-inline-cancel:hover { background: var(--mist); color: var(--ink); }

/* ── Inline remove confirmation ─────────────────────────────────── */
.cpc-confirm-strip {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--ink);
  min-width: 0;
}

.cpc-inline-remove {
  background: none;
  color: var(--rust, #c0392b);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: inherit;
  width: auto;
  padding: 0 8px;
}
.cpc-inline-remove:hover { background: var(--status-danger-bg); }

/* ── Add learner inline editing state ───────────────────────────── */
.child-progress-card--adding {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: default;
}

.cpc-add-label-text {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cpc-add-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line, #e8e4da);
  border-radius: var(--radius-xs, 0.25rem);
  padding: 7px 10px;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  outline: none;
  transition: border-color 0.15s;
}
.cpc-add-input:focus { border-color: var(--sage-dark, #3da854); }

.cpc-add-actions {
  display: flex;
  gap: 8px;
}

.cpc-add-confirm,
.cpc-add-cancel {
  flex: 1;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius-xs, 0.25rem);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  transition: background 0.13s, color 0.13s;
}

.cpc-add-confirm {
  background: var(--accent, #66d97e);
  color: var(--accent-text, #1c3203);
}
.cpc-add-confirm:hover { background: var(--accent-hover, #97e5a7); }

.cpc-add-cancel {
  background: var(--mist, #edf3ef);
  color: var(--muted);
}
.cpc-add-cancel:hover { color: var(--ink); }

/* Stats hidden on home page — info is visible in the history bars */
.cpc-stats {
  display: none;
}

.cpc-continue-btn {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sage-dark);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  margin-top: 2px;
  align-self: flex-start;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cpc-continue-btn:hover {
  background: var(--mist);
  border-color: var(--sage);
  color: var(--ink);
  text-decoration: none;
}

/* ── Tracker Section Card ────────────────────────────────────── */
.tracker-section {
  /* inherits .card styles; add light top accent */
  border-top: 3px solid var(--month-accent, var(--sage));
}

.tracker-section h2 {
  margin-bottom: 6px;
}

.tracker-intro {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 22px;
  max-width: 62ch;
}

/* ── Child Tab Strip (tracker section) ──────────────────────── */
.tracker-child-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}

/* A single child with no siblings: non-interactive name label */
.tracker-child-tabs .child-tab:only-of-type:not(.child-tab--add) {
  cursor: default;
  pointer-events: none;
  background: var(--month-accent-soft, var(--mist));
  border-color: var(--month-accent-soft, var(--line));
  color: var(--month-accent-text, var(--sage-dark));
}

.child-tab {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 5px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.child-tab:hover:not(.child-tab--active) {
  background: var(--mist);
  color: var(--ink);
}

.child-tab--active {
  background: var(--month-accent-soft, var(--sage-light, #d4e8d4));
  border-color: var(--month-accent, var(--sage));
  color: var(--month-accent-text, var(--sage-dark));
  font-weight: 600;
  pointer-events: none;
}

.child-tab--add {
  border-style: dashed;
  color: var(--muted);
  padding: 5px 12px;
}

.child-tab--add:hover {
  background: var(--mist);
  color: var(--sage-dark);
  border-color: var(--sage);
}

/* ── Milestone Cards ─────────────────────────────────────────── */
.tracker-milestones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.milestone-card {
  background: var(--month-accent-soft, var(--mist));
  border: 1px solid var(--month-accent-soft, var(--line));
  border-radius: var(--radius-xs);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.milestone-label {
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
}

/* ── Level Buttons (3-state toggle) ─────────────────────────── */
.level-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.level-btn {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  line-height: 1.4;
}

.level-btn:hover {
  border-color: var(--month-accent, var(--sage));
  color: var(--ink);
}

/* Exploring — soft sage tint */
.level-btn.level-exploring.selected {
  background: var(--month-accent-soft, #d7e8db);
  border-color: var(--month-accent, var(--sage));
  color: var(--month-accent-text, var(--sage-dark));
}

/* Growing — mid green */
.level-btn.level-growing.selected {
  background: var(--month-accent, var(--sage));
  border-color: var(--month-accent-text, var(--sage-dark));
  color: var(--white);
}

/* Flying — deep sage */
.level-btn.level-flying.selected {
  background: var(--month-accent-text, var(--sage-dark));
  border-color: var(--month-accent-text, #3da854);
  color: var(--white);
}

/* ── Notes Field ─────────────────────────────────────────────── */
.tracker-notes-row {
  margin-bottom: 20px;
}

.tracker-notes-row label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.tracker-notes-row textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  resize: vertical;
  transition: border-color 0.15s;
  line-height: 1.5;
}

.tracker-notes-row textarea:focus {
  outline: none;
  border-color: var(--month-accent, var(--sage));
}

.tracker-notes-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  min-height: 1.2em;
}

.tracker-notes-count {
  font-size: var(--text-xs);
  color: var(--muted, #6a6a5a);
}

.tracker-notes-count--near {
  color: var(--status-danger);
  font-weight: 600;
}

.tracker-notes-saved {
  font-size: var(--text-xs);
  color: var(--sage, #6b8f6b);
  font-weight: 600;
}

.tracker-notes-row textarea::placeholder {
  color: var(--muted);
  font-style: italic;
}

/* ── Meta Row (last-updated + actions) ───────────────────────── */
.tracker-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

[data-tracker-updated] {
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: italic;
}

.tracker-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-tracker-save,
.btn-tracker-reset {
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  border: none;
}

.btn-tracker-save {
  background: var(--month-accent-text, var(--sage-dark));
  color: var(--white);
}

.btn-tracker-save:hover { background: var(--month-accent-text, var(--sage-dark)); }

.btn-tracker-save.saved {
  background: var(--month-accent, var(--sage));
  opacity: 0.85;
}

.btn-tracker-save:disabled {
  cursor: default;
}

.btn-tracker-reset {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--line);
}

.btn-tracker-reset:hover {
  color: var(--ink);
  border-color: var(--muted);
}

/* ── Print: hide tracker interactive elements ────────────────── */
@media print {
  .tracker-section .level-buttons,
  .tracker-notes-row textarea,
  .tracker-meta,
  .tracker-status-block,
  .progress-summary-card {
    display: none !important;
  }
  .milestone-label { margin-bottom: 4px; }
}

/* ── Responsive adjustments ──────────────────────────────────── */
@media (max-width: 768px) {
  .progress-summary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .progress-summary-item:not(:last-child) {
    border-right: none;
    margin-right: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .tracker-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .tracker-actions {
    width: 100%;
  }
  .btn-tracker-save,
  .btn-tracker-reset {
    flex: 1;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .tracker-status-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .level-btn {
    padding: 7px 12px;
    font-size: var(--text-sm);
  }
}


/* ════════════════════════════════════════════════════════════════════════
   MILESTONE DESCRIPTORS — expandable <details>/<summary> pattern
   ════════════════════════════════════════════════════════════════════════ */

.milestone-descriptors {
  margin-top: 10px;
}

.milestone-descriptors > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
  list-style: none; /* remove default triangle in Safari */
}
.milestone-descriptors > summary::-webkit-details-marker { display: none; }
.milestone-descriptors > summary::before {
  content: "▸";
  font-size: var(--text-xs);
  transition: transform 0.18s ease;
  display: inline-block;
}
.milestone-descriptors[open] > summary::before {
  transform: rotate(90deg);
}
.milestone-descriptors > summary:hover {
  color: var(--ink);
}

.descriptor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.descriptor {
  background: var(--bg-alt, #fafaf8);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border-left: 3px solid transparent;
}

.descriptor-exploring {
  border-left-color: var(--level-exploring); /* warm amber */
}
.descriptor-growing {
  border-left-color: var(--level-growing); /* soft sage */
}
.descriptor-flying {
  border-left-color: var(--level-flying); /* gentle blue */
}

.descriptor-level {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--muted);
}
.descriptor-exploring .descriptor-level { color: var(--level-exploring-text); }
.descriptor-growing   .descriptor-level { color: var(--level-growing-text); }
.descriptor-flying    .descriptor-level { color: var(--level-flying-text); }

.descriptor p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 640px) {
  .descriptor-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  .milestone-descriptors > summary { display: none; }
  .milestone-descriptors .descriptor-grid { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   REFLECTION — rendered inside .tracker-section by tracker.js
   ════════════════════════════════════════════════════════════════════════ */

.tracker-reflection-wrap {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 2px solid var(--month-accent-soft, var(--line));
}

.reflection-heading {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}

.reflection-intro-text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* ── Prompt cards ──────────────────────────────────────────────── */

.reflection-prompts-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.reflection-prompt-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface-soft, #f5f3ee);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.reflection-prompt-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: var(--month-accent, var(--sage, #6a9a7a));
  color: var(--white);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.reflection-prompt-item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* ── Progress bar summary ──────────────────────────────────────── */

.reflection-progress-summary {
  background: var(--bg-alt, #fafaf8);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
}

.reflection-summary-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reflection-bar {
  display: flex;
  height: 12px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--line);
  gap: 2px;
  margin-bottom: 10px;
}

.reflection-bar-seg {
  border-radius: var(--radius-xs);
  min-width: 6px;
  transition: flex-grow 0.3s ease;
}
.seg-exploring { background: var(--level-exploring); }
.seg-growing   { background: var(--level-growing); }
.seg-flying    { background: var(--level-flying); }
.seg-empty     { background: var(--line, #e0ddd4); }

.reflection-bar-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.bar-legend-item {
  font-size: var(--text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}
.bar-legend-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.legend-exploring::before { background: var(--level-exploring); }
.legend-growing::before   { background: var(--level-growing); }
.legend-flying::before    { background: var(--level-flying); }
.legend-empty::before     { background: var(--line, #e0ddd4); }

/* ── Celebration note ──────────────────────────────────────────── */

.reflection-celebration {
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--muted);
  padding: 16px 20px;
  background: linear-gradient(135deg, #f4f0e8 0%, #f0ece2 100%);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--month-accent, var(--sage, #6a9a7a));
  margin-top: 0;
}

/* ── For You prompt ────────────────────────────────────────────── */
.reflection-for-you {
  margin-top: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #edf7f2 0%, #e8f4ee 100%);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--sage, #6a9a7a);
}

.reflection-for-you-label {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sage-dark, #4a7a5c);
  margin-bottom: 6px;
}

.reflection-for-you p {
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--text, #2c2c2c);
  margin: 0;
}

/* ── Print styles for reflection ───────────────────────────────── */

@media print {
  .tracker-reflection-wrap {
    page-break-before: auto;
  }
  .reflection-prompt-num {
    background: var(--ink-a50);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .reflection-bar,
  .reflection-bar-legend,
  .reflection-progress-summary {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TODAY CARD — Today Engine
   ─────────────────────────────────────────────────────────────────────────
   Entry experience at top of each monthly page.
   Shows 1 primary + 1 backup recommended activity.
   2-state tracking: not started → tried → loved.
   Continue banner, weekly focus banner, "see all" collapsible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* .today-card-section — primary rule at the Start Today / At a Glance section block further down */

/* ── Engine wrapper ──────────────────────────────────────────────────────── */

.tc-engine {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Week focus banner ───────────────────────────────────────────────────── */

.tc-week-banner {
  background: var(--bg-alt, #f7f5ef);
  border: 1px solid var(--line, #e8e4d8);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.tc-week-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tc-week-banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tc-week-banner-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b6b5e);
}

.tc-week-banner-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.tc-week-banner-list li {
  font-size: var(--text-sm);
  color: var(--ink, #1a1a18);
  font-weight: 500;
}

.tc-week-banner-list li::before {
  content: "·";
  margin-right: 5px;
  color: var(--month-accent, var(--sage, #6a9a7a));
}

.tc-week-banner-close {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted, #6b6b5e);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s;
  font-family: inherit;
}

.tc-week-banner-close:hover {
  color: var(--ink, #1a1a18);
}

/* ── Focus cards (primary + backup) ─────────────────────────────────────── */

.tc-focus-card {
  border-radius: var(--radius);
  border: 1px solid var(--line, #e8e4d8);
  padding: 18px 20px 16px;
  background: var(--bg-alt, #fafaf8);
  transition: border-color 0.2s, background 0.2s;
}

.tc-focus-card--primary {
  background: var(--paper);
  border-color: var(--month-accent, var(--sage, #6a9a7a));
  border-width: 2px;
}

.tc-focus-card--backup {
  background: var(--bg-alt, #fafaf8);
  border-color: var(--line, #e8e4d8);
}

.tc-focus-card--tried {
  background: var(--month-accent-soft, #f0f6f2);
  border-color: var(--month-accent, var(--sage, #6a9a7a));
}

.tc-focus-card--loved {
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
}

/* Eyebrow label */
.tc-focus-card-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--month-accent, var(--sage, #6a9a7a));
  margin-bottom: 6px;
}

.tc-focus-card--backup .tc-focus-card-eyebrow {
  color: var(--muted, #6b6b5e);
}

/* Title */
.tc-focus-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink, #1a1a18);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.tc-focus-card--backup .tc-focus-card-title {
  font-size: 0.97rem;
}

/* Meta row: duration */
.tc-focus-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.tc-focus-card-duration {
  font-size: var(--text-xs);
  color: var(--muted, #6b6b5e);
  font-style: italic;
}

/* Materials line */
.tc-activity-materials {
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.5;
  margin: 0 0 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.tc-materials-icon {
  flex-shrink: 0;
  font-size: var(--text-sm);
  margin-top: 1px;
}

/* Description */
.tc-focus-card-desc {
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.65;
  margin: 0 0 14px;
}

.tc-focus-card--backup .tc-focus-card-desc {
  font-size: var(--text-sm);
  margin-bottom: 12px;
}

/* Actions row */
.tc-focus-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Mark tried button (state 0) */
/* ── Focus card cycling buttons ─────────────────────────────────────────────
   State 0 (untried):  [Name]    — solid primary colour, action: try
   State 1 (tried):    [Name ✓]  — light green tinted, action: love
   State 2 (loved):    [Name ❤]  — light indigo tinted, action: clear
   Clicking cycles 0→1→2→0. "All ✓" shortcut tries all untried children.
   ───────────────────────────────────────────────────────────────────────── */

.tc-focus-cycle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--month-accent, var(--sage));
  background: var(--paper);
  color: var(--month-accent-text, var(--sage-dark));
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.tc-focus-cycle-btn:hover {
  background: var(--month-accent-soft, var(--ink-a06));
  border-color: var(--month-accent, var(--sage-dark));
  box-shadow: 0 1px 3px var(--ink-a10);
}

/* ── Child chip check icons ─────────────────────────────────────── */
.tc-check-icon--empty {
  opacity: 0.45;
  font-size: 0.8em;
}
.tc-check-icon--done {
  font-size: 0.8em;
}
.tc-check-icon--loved {
  font-size: 0.8em;
}

/* Tried state — success green tint */
.tc-focus-cycle-btn--tried {
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
  color: var(--status-success-text);
}

.tc-focus-cycle-btn--tried:hover {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: var(--white);
}

/* Loved state — creative purple tint */
.tc-focus-cycle-btn--loved {
  background: var(--subject-creative-bg);
  border-color: var(--subject-creative-text);
  color: var(--subject-creative-text);
}

.tc-focus-cycle-btn--loved:hover {
  background: var(--subject-creative-text);
  border-color: var(--subject-creative-text);
  color: var(--white);
}

/* "All ✓" shortcut */
.tc-focus-all-btn {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── See All list: single-child try/love/clear buttons (unchanged) ────────── */

.tc-try-btn {
  padding: 9px 22px;
  border-radius: var(--radius);
  border: 2px solid var(--month-accent, var(--sage, #6a9a7a));
  background: var(--month-accent, var(--sage, #6a9a7a));
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.tc-try-btn:hover {
  background: var(--month-accent-text, var(--sage-dark, #4f7a5e));
  border-color: var(--month-accent-text, var(--sage-dark, #4f7a5e));
}

/* Love it button (single child See All, state 1) */
.tc-love-btn {
  padding: 7px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid #9b82d4;
  background: transparent;
  color: var(--subject-creative-text);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.tc-love-btn:hover {
  background: var(--subject-creative-text);
  color: var(--white);
}

/* Clear record button (single child See All) */
.tc-clear-act-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  line-height: 1;
  transition: color 0.15s;
}

.tc-clear-act-btn:hover {
  color: var(--ink);
}

/* Full instructions link */
/* Focus card footer — "Full instructions" link + "Hide for now" button on same row */
.tc-focus-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.tc-focus-card-link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--month-accent, var(--sage, #6a9a7a));
  text-decoration: none;
}

.tc-focus-card-link:hover {
  text-decoration: none;
}

/* "Hide for now" — subtle, clearly secondary to action buttons */
.tc-skip-btn {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.tc-skip-btn:hover {
  color: var(--ink);
  border-color: var(--muted);
}

/* ── OR divider ──────────────────────────────────────────────────────────── */

.tc-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted, #6b6b5e);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tc-or-divider::before,
.tc-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line, #e8e4d8);
}

/* ── See all activities (collapsible) ────────────────────────────────────── */

.tc-see-all {
  border: 1px solid var(--line, #e8e4d8);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tc-see-all-summary {
  padding: 11px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted, #6b6b5e);
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--bg-alt, #fafaf8);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}

.tc-see-all-summary:hover {
  background: var(--month-accent-soft, var(--ink-a06));
}

.tc-see-all-summary::before {
  content: "›";
  font-size: 1rem;
  transition: transform 0.2s;
  display: inline-block;
}

.tc-see-all[open] .tc-see-all-summary::before {
  transform: rotate(90deg);
}

.tc-all-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
}

.tc-all-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--line, #e8e4d8);
  flex-wrap: wrap;
}

.tc-all-item:first-child {
  border-top: none;
}

.tc-all-item-label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--ink, #1a1a18);
  font-weight: 500;
  text-decoration: none;
  min-width: 0;
}

.tc-all-item-label:hover {
  color: var(--month-accent, var(--sage, #6a9a7a));
  text-decoration: none;
}

.tc-all-item-week {
  font-size: var(--text-xs);
  color: var(--muted, #6b6b5e);
  white-space: nowrap;
}

/* Actions area — holds state button(s) and optional clear link */
.tc-all-item-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Small variants of the main CTA buttons, used inside See all */
.tc-try-btn--sm {
  padding: 4px 12px;
  font-size: var(--text-xs);
  border-radius: var(--radius);
  border-width: 1px;
  font-weight: 600;
}

.tc-love-btn--sm {
  padding: 4px 11px;
  font-size: var(--text-xs);
  border-radius: var(--radius);
}

.tc-tried-indicator--sm {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--month-accent, var(--sage, #6a9a7a));
  white-space: nowrap;
}

.tc-all-item-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.tc-all-item-badge--loved {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border: 1px solid var(--status-success-border);
}

/* ── All-done celebration state ──────────────────────────────────────────── */

.tc-all-done {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  border-radius: var(--radius);
}

.tc-all-done-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.tc-all-done-msg {
  font-size: 0.9rem;
  color: var(--status-success-text);
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* ── Footer row ──────────────────────────────────────────────────────────── */

.tc-footer-row {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}

.tc-reset-btn {
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line, #e8e4d8);
  background: transparent;
  color: var(--muted, #6b6b5e);
  font-size: var(--text-xs);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}

.tc-reset-btn:hover {
  border-color: var(--status-danger);
  color: var(--status-danger);
}

.tc-reset-btn--armed,
.tc-reset-btn--armed:hover {
  border-color: var(--status-danger);
  background: var(--status-danger-bg);
  color: var(--status-danger);
  font-weight: 600;
}

/* ── Experience card highlight (when scrolled to from Today Card) ─────────── */

.experience-card.exp-highlight {
  box-shadow: 0 0 0 3px var(--month-accent, var(--sage, #6a9a7a));
  transition: box-shadow 0.3s ease;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .today-card-section {
    padding: 20px 18px 18px;
  }
  .tc-focus-card-title {
    font-size: 1rem;
  }
  .tc-try-btn {
    padding: 8px 18px;
    font-size: var(--text-sm);
  }
  .tc-focus-card-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tc-week-banner-list {
    flex-direction: column;
    gap: 3px;
  }
}

/* ── Print: hide today card ──────────────────────────────────────────────── */

@media print {
  .today-card-section {
    display: none;
  }
}


/* ── Monthly Summary (inside tracker section) ───────────────────────────── */

.tracker-monthly-summary {
  margin-top: 22px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f6f3ec 0%, #f2efe6 100%);
  border-radius: var(--radius);
  border: 1px solid var(--line, #e8e4d8);
}

.tracker-summary-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted, #6b6b5e);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

.tracker-summary-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tracker-summary-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tracker-summary-row-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted, #6b6b5e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tracker-summary-row-value {
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.55;
}

.tracker-summary-next {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e8e4d8);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--muted, #6b6b5e);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   START TODAY — merged section header
   ─────────────────────────────────────────────────────────────────────────
   "Start Here This Month" has been folded into the today-card section.
   The heading + editorial note sit above the today-card widget.
   ═══════════════════════════════════════════════════════════════════════════ */

.start-today-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line, #e8e4d8);
}

.start-today-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink, #1a1a18);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.start-today-note {
  font-size: var(--text-sm);
  color: var(--muted, #6b6b5e);
  line-height: 1.65;
  margin: 0;
  padding: 10px 14px;
  background: var(--bg-alt, #f7f5ef);
  border-left: 3px solid var(--month-accent, var(--sage, #6a9a7a));
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TROUBLESHOOT PANEL — "If Your Child…"
   ─────────────────────────────────────────────────────────────────────────
   Chips expand inline to show reassurance, cause, steps, fallback, stop cue.
   ═══════════════════════════════════════════════════════════════════════════ */

.troubleshoot-panel {
  margin-bottom: 4px;
}

/* ── Chip row ────────────────────────────────────────────────────────────── */

.ts-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ts-chip {
  padding: 6px 14px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line, #e8e4d8);
  background: var(--bg-alt, #fafaf8);
  color: var(--ink-soft, #3a3a32);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.4;
}

.ts-chip:hover {
  background: var(--month-accent-soft, #f0f4f1);
  border-color: var(--month-accent, var(--sage, #6a9a7a));
  color: var(--ink, #1a1a18);
}

.ts-chip--active {
  background: var(--month-accent, var(--sage, #6a9a7a));
  border-color: var(--month-accent, var(--sage, #6a9a7a));
  color: var(--white);
}

/* ── Expanded panel ──────────────────────────────────────────────────────── */

.ts-panel {
  margin-bottom: 14px;
  border: 1px solid var(--line, #e8e4d8);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  animation: ts-fade-in 0.18s ease;
}

@keyframes ts-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ts-panel-inner {
  padding: 20px 22px 16px;
}

.ts-reassurance {
  font-size: 0.9rem;
  color: var(--ink, #1a1a18);
  line-height: 1.7;
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 3px solid var(--month-accent, var(--sage, #6a9a7a));
  font-style: italic;
}

.ts-section {
  margin-bottom: 14px;
}

.ts-section-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #6b6b5e);
  margin-bottom: 5px;
}

.ts-section p {
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.65;
  margin: 0;
}

.ts-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ts-steps li {
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.6;
}

.ts-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.ts-section--fallback {
  background: var(--bg-alt, #f7f5ef);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 0;
}

.ts-section--stop {
  background: var(--rhythm-low-bg);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #f0e0c8;
  margin-bottom: 0;
}

.ts-close {
  background: none;
  border: 1px solid var(--line, #e8e4d8);
  border-radius: var(--radius-xs);
  padding: 4px 12px;
  font-size: var(--text-xs);
  color: var(--muted, #6b6b5e);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}

.ts-close:hover {
  border-color: var(--month-accent, var(--sage, #6a9a7a));
  color: var(--month-accent, var(--sage, #6a9a7a));
}

/* ── Month-specific support cards (below universal panel) ────────────────── */

.support-extra {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #e8e4d8);
}

.support-extra-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6b5e);
  margin: 0 0 14px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .ts-panel-inner {
    padding: 16px 16px 14px;
  }
  .ts-row-pair {
    grid-template-columns: 1fr;
  }
  .ts-chip {
    font-size: var(--text-xs);
    padding: 5px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WONDER QUESTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.wonder-section {
  background: linear-gradient(135deg, #f7f5ef 0%, #f2f0e8 100%);
  border: 1px solid var(--line, #e8e4d8);
}

.wonder-header {
  margin-bottom: 16px;
}

.wonder-header h2 {
  margin-bottom: 6px;
}

.wonder-intro {
  font-size: var(--text-sm);
  color: var(--muted, #6b6b5e);
  line-height: 1.65;
  margin: 0;
}

.wonder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.wonder-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line, #e8e4d8);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.wonder-q-mark {
  font-size: 1rem;
  font-weight: 700;
  color: var(--month-accent, var(--sage, #6a9a7a));
  flex-shrink: 0;
  line-height: 1.5;
  font-style: italic;
}

.wonder-text {
  font-size: var(--text-sm);
  color: var(--ink, #1a1a18);
  line-height: 1.6;
}

/* ── Wonder Questions — week-grouped layout ───────────────────────────────── */

.wonder-week-group {
  margin-bottom: 24px;
}

.wonder-week-group:last-child {
  margin-bottom: 0;
}

.wonder-week-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--month-accent-text, var(--sage-dark, #4a6741));
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line, #e8e4d8);
}

/* ── Wonder Questions — Weekly Plan tab panel ─────────────────────────────── */

.wp-panel-section--wonder {
  border-top: 1px solid var(--line, #e8e4d8);
  border-left: 3px solid var(--month-accent, var(--sage, #88a691));
  padding-top: 14px;
  padding-left: 12px;
  margin-top: 4px;
  background: var(--month-accent-soft, var(--mist, #edf3ef));
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.wp-wonder-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wp-wonder-item {
  font-size: var(--text-sm);
  color: var(--ink, #1a1a18);
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--month-accent-soft, var(--mist, #f0f4f1));
  border-radius: var(--radius-xs, 0.25rem);
}

/* ── You're on Track callout ──────────────────────────────────────────────── */
.wp-panel-section--track {
  border-top: 1px solid var(--line, #e8e4d8);
  border-left: 3px solid #7aaa87;
  padding-top: 14px;
  padding-left: 12px;
  margin-top: 4px;
  background: var(--status-success-bg);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.wp-track-prompt {
  font-size: var(--text-sm);
  color: var(--ink, #1a1a18);
  line-height: 1.55;
  margin: 6px 0 0;
  font-style: italic;
}

/* ── Caregiver Note ───────────────────────────────────────────────────────── */
.caregiver-note {
  background: var(--rhythm-low-bg);
  border: 1px solid #f0dfa0;
  border-left: 4px solid #d4a017;
  border-radius: var(--radius-xs, 0.25rem);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.caregiver-note-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--subject-maths-text);
  margin-bottom: 6px;
}

.caregiver-note p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink, #1a1a18);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPERIENCE CARD UPGRADES
   ─────────────────────────────────────────────────────────────────────────
   • Practical Life badge
   • What to Say with type labels
   • Same Activity Tomorrow panel
   • Learning Everywhere panel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Practical Life card variant ─────────────────────────────────────────── */

.exp-focus-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-right: 4px;
}

.exp-focus-badge--practical {
  background: var(--subject-maths-bg);
  color: var(--rhythm-low-label);
  border: 1px solid #e0c99a;
}


/* ── You're on track ────────────────────────────────────────────── */
.exp-on-track {
  margin-top: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f0f8f3 0%, #eaf5f0 100%);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--sage, #6a9a7a);
}

.exp-on-track-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage-dark, #4a7a5c);
  margin-bottom: 4px;
}

.exp-on-track p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text, #2c2c2c);
  margin: 0;
}

/* ── Bilingual tip ──────────────────────────────────────────────── */
.exp-bilingual-tip {
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--subject-creative-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid #9b7fc4;
}

.exp-bilingual-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subject-creative-text);
  margin-bottom: 4px;
}

.exp-bilingual-tip p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text, #2c2c2c);
  margin: 0;
  font-style: italic;
}

/* ── Together badge ──────────────────────────────────────────────────────── */

.exp-together-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--level-flying);
  background: var(--level-flying-bg);
  border: 1px solid #b8ddf0;
  border-radius: var(--radius-xl);
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Low Energy badge ────────────────────────────────────────────────────── */

.exp-energy-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--subject-creative-text);
  background: var(--subject-creative-bg);
  border: 1px solid #d0c0f0;
  border-radius: var(--radius-xl);
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Only child / playdate adaptation ───────────────────────────────────── */

.exp-playdate-note {
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--level-flying-bg);
  border-left: 3px solid #9ab0e8;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.exp-playdate-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--level-flying);
  margin-bottom: 4px;
}

.exp-playdate-note p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text, #2c2c2c);
  margin: 0;
}

/* ── Toddler sibling note (merged into Together badge row) ──────────────── */

.exp-sibling-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--level-growing-text);
  background: var(--level-growing-bg);
  border: 1px solid #c4dfa8;
  border-radius: var(--radius-xl);
  padding: 2px 7px;
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Rabbit Trail (inside Set the Stage) ─────────────────────────────────── */

.stage-sub--rabbit-trail {
  background: var(--rhythm-low-bg);
  border: 1px solid var(--level-exploring);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}

.rabbit-trail-inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.rabbit-trail-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.rabbit-trail-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--subject-maths-text);
  margin: 0 0 6px;
}

.rabbit-trail-prompt {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 8px;
  font-style: italic;
}

.rabbit-trail-ideas {
  list-style: disc;
  padding-left: 16px;
  margin: 0;
}

.rabbit-trail-ideas li {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text, #2c2c2c);
  margin-bottom: 3px;
}

/* ── Maths in Everyday Life (inside Skill Builders) ─────────────────────── */

.sb-math-moments {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e0eaf4;
}

.sb-math-moments-inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--level-flying-bg);
  border-left: 4px solid #7ab0d4;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
}

.sb-math-moments-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.sb-math-moments-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #2c2c2c);
  margin: 0 0 4px;
}

.sb-math-moments-intro {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

.sb-math-moments-list {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
}

.sb-math-moments-list li {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text, #2c2c2c);
  margin-bottom: 4px;
}

/* ── Small Space tips (inside Set the Stage) ─────────────────────────────── */

.stage-sub--small-space {
  background: var(--surface);
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-top: 16px;
}

.small-space-list {
  list-style: disc;
  padding-left: 18px;
  margin: 6px 0 0;
}

.small-space-list li {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text, #2c2c2c);
  margin-bottom: 4px;
}

/* ── Safety callout variant ──────────────────────────────────────────────── */

.callout--safety {
  background: var(--rhythm-low-bg);
  border-left-color: var(--rhythm-low-label);
}

/* ── What to Say — type labels ───────────────────────────────────────────── */

.what-to-say-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wts-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  background: var(--bg-alt, #fafaf8);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line, #e8e4d8);
}

.wts-type {
  flex-shrink: 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--month-accent, var(--sage, #6a9a7a));
  background: var(--month-accent-soft, #e8f2ec);
  border-radius: 3px;
  padding: 2px 6px;
  margin-top: 2px;
  white-space: nowrap;
}

.wts-prompt {
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.6;
}

/* ── Same Activity, Smarter Tomorrow ─────────────────────────────────────── */

/* ── Ways to go further: unified extend panel ───────────────────────────── */

.extend-panel {
  border: 1px solid var(--line, #e8e4d8);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 14px;
}

.extend-summary {
  padding: 10px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted, #6b6b5e);
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--bg-alt, #fafaf8);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s;
}

.extend-summary::-webkit-details-marker { display: none; }

.extend-summary::before {
  content: "↗";
  font-size: 0.9rem;
  color: var(--month-accent, var(--sage, #6a9a7a));
}

.extend-summary::after {
  content: "▸";
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--muted, #999);
  transition: transform 0.2s;
}

details[open].extend-panel .extend-summary::after {
  transform: rotate(90deg);
}

.extend-summary:hover {
  background: var(--month-accent-soft, #f0f4f1);
}

.extend-body {
  border-top: 1px solid var(--line, #e8e4d8);
  display: flex;
  flex-direction: column;
}

/* Each labelled section inside the panel */
.extend-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #e8e4d8);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 10px;
  align-items: start;
}

.extend-section:last-child {
  border-bottom: none;
}

/* "In real life" spans full width so learning-everywhere items can breathe */
.extend-section--reallife {
  display: block;
}

.extend-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #888);
  padding-top: 3px;
  white-space: nowrap;
}

.extend-section--vary   .extend-label { color: var(--level-growing-text); }
.extend-section--deeper .extend-label { color: var(--level-flying-text); }
.extend-section--reallife .extend-label {
  color: var(--rhythm-low-label);
  display: inline-block;
  margin-bottom: 8px;
}

.extend-section p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.6;
}

/* Real-world intro sentence */
.extend-realworld-intro {
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.6;
  margin: 0 0 10px !important;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line, #e8e4d8);
}

/* Learning Everywhere items (inside real life section) */
.le-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.le-item {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line, #e8e4d8);
}

.le-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.le-context {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rhythm-low-label);
  background: var(--subject-maths-bg);
  border: 1px solid #e0c99a;
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  margin-bottom: 5px;
}

.le-framing {
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.6;
  margin: 0 0 7px;
}

.le-prompts {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.le-prompts li {
  font-size: var(--text-sm);
  color: var(--ink-soft, #3a3a32);
  line-height: 1.6;
}

/* ── Weekly Plan: column sizing ─────────────────────────────────────────── */

.col-week  { width: 44px; text-align: center; }
.col-theme { width: 170px; }

/* Week number badge */
.week-num-cell {
  text-align: center;
  vertical-align: middle;
}

.week-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--month-accent, var(--sage, #6a9a7a));
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}

/* Theme cell: name + connecting note */
.week-theme-cell {
  vertical-align: top;
}

.week-theme-name {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink, #1a1a14);
  line-height: 1.3;
  margin-bottom: 4px;
}

.week-theme-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted, #777);
  line-height: 1.45;
  font-style: italic;
}

/* Activity cells */
.week-act-cell {
  font-size: var(--text-sm);
  vertical-align: top;
  line-height: 1.35;
}

/* Linked activity cells: dashed underline + exp badge */
.wp-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--month-accent, var(--sage, #6a9a7a));
  transition: color 0.12s, border-color 0.12s;
  display: inline;
}

.wp-link:hover {
  color: var(--month-accent-text, var(--sage-dark, #3e6b4e));
  border-bottom-style: solid;
}

/* "Exp N" badge rendered inside linked cells */
.wp-badge {
  display: inline-block;
  margin-left: 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--month-accent-text, var(--sage-dark, #3e6b4e));
  background: var(--month-accent-soft, #eaf2eb);
  border: 1px solid var(--month-accent-soft, #b8d8bf);
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
  white-space: nowrap;
}

.wp-link:hover .wp-badge {
  background: var(--month-accent, var(--sage, #6a9a7a));
  color: var(--white);
  border-color: transparent;
}

/* Legend above the table */
.wp-legend {
  margin-bottom: 10px;
  font-size: var(--text-xs);
  color: var(--muted, #888);
}

.wp-link--demo {
  pointer-events: none;
  cursor: default;
}


/* ── What to Observe: Progress Tracker link ─────────────────────────────── */

.exp-section--observe .observe-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.observe-tracker-link {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--month-accent-text, var(--sage-dark, #4a6b4a));
  border: 1px solid var(--month-accent, var(--sage, #6b8f6b));
  border-radius: var(--radius-xl);
  padding: 2px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.observe-tracker-link:hover {
  background: var(--month-accent, var(--sage, #6b8f6b));
  color: var(--white);
}


/* ── Weekly Plan: per-week Prep & Weekend collapsible rows ──────────────── */

.week-note-row {
  background: transparent;
}

.week-note-cell {
  padding: 0 !important;
  border-top: none !important;
}

.week-note-details {
  border-top: 1px dashed var(--line, #e0e0e0);
  margin: 0;
}

.week-note-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft, #555);
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--bg-alt, #f7f5f0);
  transition: background 0.15s;
}

.week-note-summary::-webkit-details-marker { display: none; }

.week-note-summary::after {
  content: "▸";
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--muted, #999);
  transition: transform 0.2s;
}

details[open].week-note-details .week-note-summary::after {
  transform: rotate(90deg);
}

.week-note-summary:hover {
  background: var(--line, #e8e4da);
}

.week-note-icon {
  font-size: var(--text-sm);
}

.week-note-body {
  display: flex;
  gap: 0;
  flex-direction: column;
  padding: 0 14px 12px;
  background: var(--bg-alt, #f7f5f0);
  border-top: 1px solid var(--line, #e0e0e0);
}

@media (min-width: 640px) {
  .week-note-body {
    flex-direction: row;
    gap: 24px;
  }
}

.week-note-item {
  flex: 1;
  padding-top: 12px;
}

.week-note-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #999);
  margin-bottom: 4px;
}

.week-note-item--prep  .week-note-label { color: var(--month-accent-text, var(--sage-dark, #4a6b4a)); }
.week-note-item--weekend .week-note-label { color: var(--rhythm-low-label); }

.week-note-item p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft, #444);
}

/* ── Week Blocks (new weekly plan layout) ───────────────────────────────── */

.wp-intro {
  font-size: var(--text-sm);
  color: var(--ink-soft, #555);
  margin: 0 0 20px;
}

/* Individual week block — visual card within the section card */
.week-block {
  border: 1px solid var(--line, #e8e4da);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--bg, #fff);
}

.week-block:last-child { margin-bottom: 0; }

/* Header band */
.week-block-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--month-accent, var(--sage, #6a9a7a));
  color: var(--white);
}

.week-block-num {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.22);
  border-radius: var(--radius);
  padding: 3px 10px;
  white-space: nowrap;
}

.week-block-theme {
  font-size: 1rem;
  font-weight: 600;
}

/* Theme connecting note */
.week-block-note {
  font-size: var(--text-sm);
  color: var(--ink-soft, #555);
  font-style: italic;
  line-height: 1.55;
  margin: 0;
  padding: 11px 18px;
  background: var(--month-accent-soft, var(--sage-pale, #f2f7f3));
  border-bottom: 1px solid var(--line, #e8e4da);
}

/* Section label (small caps above each group) */
.week-block-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #999);
  margin-bottom: 7px;
}

/* Core Experiences list */
.week-block-exps {
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--line, #e8e4da);
}

.week-exp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.week-exp-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.week-exp-list .wp-link {
  font-weight: 600;
  font-size: 0.9rem;
}

.week-exp-meta {
  font-size: var(--text-xs);
  color: var(--muted, #888);
}

/* Supplementary activities */
.week-block-supplementary {
  padding: 11px 18px;
  border-bottom: 1px solid var(--line, #e8e4da);
}

.week-supp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
}

.week-supp-list li {
  font-size: var(--text-sm);
  color: var(--ink-soft, #555);
  background: var(--bg-alt, #f7f5f0);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
}

/* Daily rhythm rows */
.week-rhythm {
  padding: 11px 18px 13px;
  border-bottom: 1px solid var(--line, #e8e4da);
}

.rhythm-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rhythm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.rhythm-tag {
  flex-shrink: 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  margin-top: 1px;
  white-space: nowrap;
}

.rhythm-row--full   .rhythm-tag { background: var(--rhythm-full-bg); color: var(--rhythm-full-text); }
.rhythm-row--short  .rhythm-tag { background: var(--rhythm-short-bg); color: var(--rhythm-short-text); }
.rhythm-row--low    .rhythm-tag { background: var(--rhythm-low-bg); color: var(--rhythm-low-text); }
.rhythm-row--rainy  .rhythm-tag { background: var(--rhythm-rainy-bg); color: var(--rhythm-rainy-text); }

.rhythm-desc {
  color: var(--ink-soft, #444);
  flex: 1;
}

/* Low-Energy Days & Prep — always visible in Weekly Plan tab */
.wp-panel-section--prep .week-prep-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: none;
  border-top: none;
}

.week-prep-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--bg-alt, #f7f5f0);
  border-top: 1px solid var(--line, #e0e0e0);
}

@media (min-width: 640px) {
  .week-prep-body { flex-direction: row; gap: 24px; }
}

.week-prep-item { flex: 1; padding-top: 12px; }

.week-prep-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #999);
  margin-bottom: 4px;
}

.week-prep-item--prep    .week-prep-label { color: var(--month-accent-text, var(--sage-dark, #4a6b4a)); }
.week-prep-item--weekend .week-prep-label { color: var(--rhythm-low-label); }
.week-prep-item--low     .week-prep-label { color: var(--rhythm-rainy-label); }
.week-prep-item--rainy   .week-prep-label { color: var(--rhythm-rainy-label); }

.week-prep-item p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft, #444);
}

.week-prep-ideas {
  list-style: disc;
  padding-left: 1.1em;
  margin: 0;
}

.week-prep-ideas li {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft, #444);
  margin-bottom: 3px;
}

.week-prep-ideas li:last-child {
  margin-bottom: 0;
}

/* Print: keep week blocks together */
@media print {
  .week-block { page-break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Start Today — Three-Tier Layout
   ══════════════════════════════════════════════════════════════════════════ */

/* Section wrapper — primary card, visually dominant */
.today-card-section {
  background: var(--paper, #ffffff);
  border: 1px solid var(--line, #e8e4da);
  border-top: 3px solid var(--month-accent, var(--sage, #88a691));
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--shadow-elevated);
}

.start-today-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line, #e8e4da);
  color: var(--month-accent-text, var(--sage-dark, #4fb264));
  letter-spacing: -0.02em;
}

.st-loading {
  color: var(--muted, #999);
  font-style: italic;
  font-size: var(--text-sm);
  padding: 16px 22px;
  margin: 0;
}

/* Tier label (small caps above each section) */
.st-tier-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, #999);
  margin-bottom: 6px;
}

/* Section label (inside tiers) */
.st-section-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #bbb);
  margin-bottom: 5px;
}

/* ── This Month strip ──────────────────────────────────────────────────── */

.st-month-strip {
  background: var(--month-accent-soft, #f7fbf8);
  padding: 14px 22px;
  border-bottom: 1px solid var(--line, #e8e4da);
}

.st-month-header {
  margin-bottom: 4px;
}

.st-month-summary {
  font-size: var(--text-sm);
  color: var(--ink-soft, #444);
  line-height: 1.55;
  margin: 0 0 10px;
}

.st-month-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* legacy single-tone pill (kept for fallback) */
.st-month-pill {
  font-size: var(--text-xs);
  color: var(--month-accent-text, var(--sage-dark, #3d6b4a));
  background: var(--month-accent-soft, rgba(106,154,122,0.12));
  border: 1px solid var(--month-accent-soft, rgba(106,154,122,0.25));
  border-radius: var(--radius-xl);
  padding: 3px 10px;
  white-space: nowrap;
}

/* Small chip variant used in the This Month strip */
.chip--sm {
  font-size: var(--text-xs);
}
.chip--sm .chip-subject {
  padding: 4px 9px 4px 11px;
  font-size: var(--text-xs);
}
.chip--sm .chip-topic {
  padding: 4px 11px 4px 9px;
}

/* Month-themed chip colors from body CSS variables */
.st-month-strip .chip {
  border-color: var(--month-accent-soft, var(--line, #e8e4da));
}
.st-month-strip .chip-subject {
  background: var(--month-accent-soft, var(--ink-a10));
  color: var(--month-accent-text, var(--muted));
  border-right-color: var(--month-accent-soft, var(--line));
}

/* ── This Week card ────────────────────────────────────────────────────── */

.st-week-card {
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--line, #e8e4da);
  background: var(--bg-alt, #faf8f4);
}

.st-week-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.st-week-header .st-tier-label {
  margin-bottom: 0;
}

/* Week picker — compact inline control */
.st-week-picker {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: var(--border, #e0dfda);
  border-radius: var(--radius-sm);
  padding: 1px;
}

.st-week-pick {
  width: 26px;
  height: 24px;
  border: none;
  border-radius: calc(var(--radius-sm) - 1px);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}

.st-week-pick:hover {
  background: var(--paper);
  color: var(--ink);
}

.st-week-pick--active {
  background: var(--month-accent, var(--sage, #6a9a7a));
  color: var(--white);
}

.st-week-pick--current:not(.st-week-pick--active) {
  color: var(--month-accent, var(--sage, #6a9a7a));
  font-weight: 700;
}

.st-week-reset {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: calc(var(--radius-sm) - 1px);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  margin-left: 1px;
  transition: background 0.12s, color 0.12s;
}

.st-week-reset:hover {
  background: var(--paper);
  color: var(--ink);
}

.st-week-theme {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink, #2a2a22);
}

.st-week-note {
  font-size: var(--text-sm);
  color: var(--ink-soft, #555);
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 12px;
}

.st-week-exps {
  margin-top: 2px;
}

/* Core Experience pills — At a Glance */
.st-week-exp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.st-week-exp-pill {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--month-accent-text, var(--sage-dark, #3d6b4a));
  background: var(--month-accent-soft, rgba(106,154,122,0.12));
  border: 1px solid var(--month-accent-soft, rgba(106,154,122,0.3));
  border-radius: var(--radius-pill);
  padding: 4px 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}

.st-week-exp-pill:hover {
  border-color: var(--month-accent, var(--sage, #6a9a7a));
  background: var(--month-accent-soft, rgba(106,154,122,0.2));
  text-decoration: none;
}

/* Practical Life variant — subtle blue tint */
.st-week-exp-pill--pl {
  color: var(--level-flying);
  background: var(--level-flying-bg);
  border-color: var(--level-flying);
}

.st-week-exp-pill--pl:hover {
  border-color: var(--level-flying);
  background: var(--level-flying-bg);
}

/* ── This Week — Skill Builder chips ──────────────────────────────────── */

.st-week-skills {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #e8e4da);
}

.st-week-skills .st-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.st-week-skills-all {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--month-accent-text, var(--sage-dark, #4fb264));
  text-decoration: none;
  letter-spacing: 0.02em;
  opacity: 0.8;
}
.st-week-skills-all:hover { opacity: 1; text-decoration: none; }

.st-week-skills-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.st-week-skill-chip {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted, #6b7280);
  background: var(--month-accent-soft, var(--mist, #edf3ef));
  border: 1px solid var(--month-accent-soft, var(--line, #dfe7e1));
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
  line-height: 1.6;
  text-decoration: none;
}
a.st-week-skill-chip:hover {
  color: var(--month-accent-text, var(--sage-dark, #4fb264));
  border-color: var(--month-accent-text, var(--sage-dark, #4fb264));
  text-decoration: none;
}

/* Practical Life inline tag — At a Glance / This Week exp list */
.st-week-exp-pl {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--level-flying);
  background: var(--level-flying-bg);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 2px;
}

/* ── This Week — Wonder Questions ──────────────────────────────────────── */

.st-week-wonder {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #e8e4da);
}

.st-wonder-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.st-wonder-item {
  font-size: var(--text-sm);
  color: var(--ink, #1a1a18);
  line-height: 1.5;
  padding: 3px 0 3px 10px;
  border-left: 2px solid var(--month-accent-light, #c8d8c4);
}

/* ── Today card ────────────────────────────────────────────────────────── */

.st-today-card {
  background: var(--paper, #ffffff);
}

.st-today-header {
  padding: 14px 22px 0;
}

.st-today-body {
  padding: 0 22px 18px;
}

/* Rhythm strip inside Today */
.st-rhythm-strip {
  margin: 16px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #f0ece4);
}

/* Ensure rhythm rows use correct styles from week-block CSS */
.st-rhythm-strip .rhythm-rows { gap: 4px; }
.st-rhythm-strip .rhythm-row  { font-size: var(--text-sm); }

/* ── Responsive: stack on small screens, side-by-side on md+ ─────────── */
@media (min-width: 680px) {
  .st-month-pills { gap: 6px; }
  .st-week-exp-pills { gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Weekly Plan — Tab Layout
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tab nav ──────────────────────────────────────────────────────────── */

.wp-tabs {
  margin-top: 4px;
}

.wp-tab-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line, #e8e4da);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
  background: var(--bg-alt, #f7f5f0);
}

.wp-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px 11px;
  min-height: 48px;
  border: none;
  border-right: 1px solid var(--line, #e8e4da);
  background: var(--bg-alt, #f7f5f0);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
  line-height: 1.3;
}

.wp-tab-btn:last-child { border-right: none; }

.wp-tab-btn:hover {
  background: var(--month-accent-soft, var(--line, #e8e4da));
}

.wp-tab-btn--active {
  background: var(--month-accent, var(--sage)) !important;
  color: var(--white);
}

.wp-tab-wk {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #888);
}

.wp-tab-btn--active .wp-tab-wk {
  color: rgba(255,255,255,0.75);
}

.wp-tab-theme-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft, #555);
  /* Truncate long themes on small screens */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wp-tab-btn--active .wp-tab-theme-name {
  color: var(--white);
  font-weight: 600;
}

@media (max-width: 478px) {
  .wp-tab-nav { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tab panel ────────────────────────────────────────────────────────── */

.wp-tab-panel {
  border: 1px solid var(--line, #e8e4da);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
}

/* Panel header */
.wp-panel-header {
  padding: 16px 20px 12px;
  background: var(--month-accent-soft, var(--sage-pale, #f2f7f3));
  border-bottom: 1px solid var(--line, #e8e4da);
}

.wp-panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.wp-panel-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.wp-panel-wk {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--month-accent, var(--sage, #6a9a7a));
}

.wp-panel-theme {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #2a2a22);
}

.wp-panel-note {
  font-size: var(--text-sm);
  color: var(--ink-soft, #555);
  font-style: italic;
  line-height: 1.55;
  margin: 0;
}

/* Panel sections */
.wp-panel-section {
  padding: 13px 20px;
  border-bottom: 1px solid var(--line, #f0ece4);
}

.wp-panel-section:last-child { border-bottom: none; }

/* ── Weekend Prep panel section ───────────────────────────────── */
.wp-panel-section--weekend-prep {
  background: var(--month-accent-soft, #f2f7f3);
  border-bottom: 1px solid var(--month-accent-soft, var(--line, #e8e4da));
}

.wp-panel-section--weekend-prep .wp-section-label {
  color: var(--month-accent-text, var(--sage-dark, #4a6b4a));
}

.weekend-prep-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weekend-prep-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.weekend-prep-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.weekend-prep-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--month-accent-text, var(--sage-dark, #4a6b4a));
  margin-bottom: 3px;
}

.weekend-prep-item p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.58;
  color: var(--ink, #1a1a18);
}

.wp-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #aaa);
  margin-bottom: 9px;
}

.wp-section-more {
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--month-accent, var(--sage, #6a9a7a));
  text-decoration: none;
  margin-left: auto;
}

.wp-section-more:hover { text-decoration: none; }

/* Core experience list within panel */
/* Core Experience pills — Weekly Plan (mirrors At a Glance style) */
.wp-core-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.wp-core-pill {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--month-accent-text, var(--sage-dark, #3d6b4a));
  background: var(--month-accent-soft, rgba(106,154,122,0.12));
  border: 1px solid var(--month-accent-soft, rgba(106,154,122,0.3));
  border-radius: var(--radius-pill);
  padding: 4px 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}

.wp-core-pill:hover {
  border-color: var(--month-accent, var(--sage, #6a9a7a));
  background: var(--month-accent-soft, rgba(106,154,122,0.2));
  text-decoration: none;
}

.wp-core-pill--pl {
  color: var(--level-flying);
  background: var(--level-flying-bg);
  border-color: var(--level-flying);
}

.wp-core-pill--pl:hover {
  border-color: var(--level-flying);
  background: var(--level-flying-bg);
}

/* ══════════════════════════════════════════════════════════════════════════
   Skill Builders grid
   ══════════════════════════════════════════════════════════════════════════ */

.skill-builder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

@media (min-width: 480px) {
  .skill-builder-grid { grid-template-columns: 1fr 1fr; }
}

.skill-builder-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e8e4da);
  border-radius: var(--radius-xs);
  padding: 7px 10px;
  text-decoration: none;
  color: inherit;
}
a.skill-builder-card--link:hover {
  border-color: var(--month-accent-text, var(--sage-dark, #4fb264));
  background: var(--month-accent-soft, var(--mist, #edf3ef));
}

.skill-name {
  font-size: var(--text-sm);
  color: var(--ink, #2a2a22);
  flex: 1;
  min-width: 0;
}

/* Subject badges */
.skill-badge {
  flex-shrink: 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  white-space: nowrap;
}

.skill-badge--literacy  { background: var(--subject-literacy-bg); color: var(--subject-literacy-text); }
.skill-badge--maths     { background: var(--subject-maths-bg); color: var(--subject-maths-text); }
.skill-badge--creative  { background: var(--subject-creative-bg); color: var(--subject-creative-text); }
.skill-badge--discovery { background: var(--subject-discovery-bg); color: var(--subject-discovery-text); }
.skill-badge--social    { background: var(--subject-social-bg); color: var(--subject-social-text); }
.skill-badge--practice  { background: var(--bg-alt, #f7f5f0); color: var(--muted, #888); }

/* ══════════════════════════════════════════════════════════════════════════
   Rhythm chips (replaces arrow-chain sentences)
   ══════════════════════════════════════════════════════════════════════════ */

/* Override old rhythm-row layout for Full/Short chip rows */
.rhythm-row--full,
.rhythm-row--short {
  align-items: flex-start;
  flex-wrap: wrap;
}

.rhythm-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.rhythm-duration {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft, #444);
}

.rhythm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rhythm-chip {
  font-size: var(--text-xs);
  background: var(--bg-alt, #f7f5f0);
  border: 1px solid var(--line, #e8e4da);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  color: var(--ink-soft, #555);
  white-space: nowrap;
}

.rhythm-row--full  .rhythm-chip { border-color: var(--level-growing); background: var(--rhythm-full-bg); }
.rhythm-row--short .rhythm-chip { border-color: var(--level-flying); background: var(--rhythm-short-bg); }

/* Low-energy and Rainy Day keep the old prose layout */
.rhythm-row--low .rhythm-desc,
.rhythm-row--rainy .rhythm-desc {
  font-size: var(--text-sm);
}

/* ── Daily Rhythm card grid (standalone section) ────────────────────
   Three equal-width cards side by side: Full Day · Short · Low-Energy
   ─────────────────────────────────────────────────────────────────── */

.rhythm-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.rhythm-card {
  background: var(--bg-alt, #f8f6f1);
  border: 1px solid var(--line, #e8e4da);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Accent top border by session type */
.rhythm-card--full     { border-top: 3px solid #6aab7a; }
.rhythm-card--short    { border-top: 3px solid #7a90c0; }
.rhythm-card--low      { border-top: 3px solid #d4a464; }
.rhythm-card--justlife {
  border-top: 3px solid #c0c0c0;
  background: var(--surface);
  opacity: 0.92;
}
.rhythm-card--justlife .rhythm-card-title {
  color: var(--muted);
}
.rhythm-card--justlife .rhythm-card-time {
  color: var(--muted);
  font-style: italic;
}
.rhythm-justlife-note {
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: italic;
  margin: 0 0 8px;
  line-height: 1.5;
}
.rhythm-justlife-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rhythm-justlife-list li {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: 3px 0;
  border-bottom: 1px dotted #ddd;
}
.rhythm-justlife-list li:last-child {
  border-bottom: none;
}

.rhythm-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.rhythm-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}

.rhythm-card-time {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted, #888);
  white-space: nowrap;
}

/* ── Numbered step list (Full Day / Short Session) ──────────────── */

.rhythm-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: rhythm-step;
}

.rhythm-step {
  counter-increment: rhythm-step;
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line, #e8e4da);
}

.rhythm-step:last-child {
  border-bottom: none;
}

.rhythm-step::before {
  content: counter(rhythm-step);
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: start;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted, #999);
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e8e4da);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  flex-shrink: 0;
}

.rhythm-card--full  .rhythm-step::before { border-color: var(--level-growing); color: var(--rhythm-full-text); }
.rhythm-card--short .rhythm-step::before { border-color: var(--level-flying); color: var(--rhythm-short-text); }

.rhythm-step-name {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  line-height: 1.3;
}

.rhythm-step-desc {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--text-xs);
  color: var(--muted, #888);
  line-height: 1.4;
  margin-top: 1px;
}

/* ── Low-Energy options list ─────────────────────────────────────── */

.rhythm-options-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--subject-maths-text);
  margin: 0 0 4px;
}

.rhythm-options {
  list-style: none;
  counter-reset: rhythm-opt;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rhythm-option {
  counter-increment: rhythm-opt;
  /* Flexbox avoids the CSS Grid + inline-HTML fragmentation bug    */
  /* where <em> / <strong> inside grid items split into cells.     */
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-soft, #555);
  border-bottom: 1px solid var(--line, #e8e4da);
}

.rhythm-option:last-child {
  border-bottom: none;
}

/* Letter badge — shrinks to fixed size, never grows */
.rhythm-option::before {
  content: counter(rhythm-opt, upper-alpha);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--subject-maths-text);
  background: var(--subject-maths-bg);
  border: 1px solid #f0d090;
  border-radius: 50%;
  min-width: 18px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Text wrapper — takes remaining width, wraps freely */
.rhythm-option-text {
  flex: 1;
  min-width: 0;
}

.rhythm-card-body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft, #555);
  margin: 0;
}

/* Collapse to single column on small screens */
@media (max-width: 680px) {
  .rhythm-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Skill Builders Section ─────────────────────────────────────────
   Standalone section below Core Learning Experiences.
   Simpler cards: name + subject badge + one-line description + connects_to.
   ─────────────────────────────────────────────────────────────────── */

.sb-intro {
  color: var(--ink-soft, #555);
  font-size: 0.9rem;
  margin: 0 0 20px;
  max-width: 680px;
}

.sb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.sb-card {
  background: var(--bg-alt, #f8f6f1);
  border: 1px solid var(--line, #e8e4da);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sb-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sb-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  line-height: 1.3;
  flex: 1;
}

/* Subject badges — mirror the weekly plan skill-badge colours */
.sb-badge {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.sb-badge--literacy  { background: var(--subject-literacy-bg); color: var(--subject-literacy-text); }
.sb-badge--maths     { background: var(--subject-maths-bg); color: var(--subject-maths-text); }
.sb-badge--creative  { background: var(--subject-creative-bg); color: var(--subject-creative-text); }
.sb-badge--discovery { background: var(--subject-discovery-bg); color: var(--subject-discovery-text); }
.sb-badge--social    { background: var(--subject-social-bg); color: var(--subject-social-text); }
.sb-badge--practice  { background: var(--subject-practice-bg); color: var(--subject-practice-text); }

.sb-description {
  font-size: var(--text-sm);
  color: var(--ink-soft, #555);
  line-height: 1.45;
  margin: 0;
}

.sb-connects {
  font-size: var(--text-xs);
  color: var(--muted, #888);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.sb-connects-label {
  font-weight: 600;
  color: var(--ink-soft, #666);
}

.sb-connects-value {
  color: var(--muted, #888);
}

@media (max-width: 640px) {
  .sb-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Experience card — Instructions collapsible ─────────────── */

/* ── Instructions toggle + tracking slot wrapper ── */
.exp-instructions-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.exp-instructions-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* <details> shrinks to fit the Instructions label only */
.exp-instructions-details {
  width: fit-content;
}

/* Body is hidden by default; revealed when details is open via :has() */
.exp-instructions-body {
  display: none;
  margin-top: 12px;
}
.exp-instructions-wrap:has(.exp-instructions-details[open]) .exp-instructions-body {
  display: block;
}

/* ── Experience tracking slot (reuses tc-* classes from today-card) ── */
.exp-track-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.exp-track-slot:empty { display: none; }

/* Summary: no chrome, just the label inside */
.exp-instructions-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.exp-instructions-summary::-webkit-details-marker { display: none; }
.exp-instructions-summary::marker               { display: none; }

/* "Instructions" label — matches tc-focus-cycle-btn ghost style */
.exp-instructions-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--month-accent-text, var(--sage-dark));
  background: var(--paper);
  border: 1.5px solid var(--month-accent, var(--sage));
  border-radius: var(--radius-md);
  padding: 6px 12px 6px 10px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.exp-instructions-summary:hover .exp-instructions-label {
  background: var(--month-accent-soft, var(--ink-a06));
  box-shadow: 0 1px 3px var(--ink-a10);
}

.exp-instructions-label::after {
  content: "▸";
  font-size: var(--text-xs);
  transition: transform 0.18s ease;
  color: var(--month-accent-text, var(--sage-dark));
  margin-left: 2px;
}
.exp-instructions-details[open] .exp-instructions-label::after {
  transform: rotate(90deg);
}

/* ── Setup & Planning Divider ──────────────────────────────── */
/* Visual boundary between daily-use content and reference sections */

.setup-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 24px;
}

.setup-divider::before,
.setup-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.setup-divider-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 4px;
}

/* Reflection divider */
.setup-divider--reflection .setup-divider-label {
  color: var(--month-accent-text, var(--sage-dark, #4fb264));
}
.setup-divider--reflection::before,
.setup-divider--reflection::after {
  background: var(--month-accent, var(--sage, #88a691));
  opacity: 0.4;
}
/* Setup & Planning divider */
.setup-divider:not(.setup-divider--reflection) .setup-divider-label {
  color: var(--month-accent-text, var(--muted, #5f6c72));
}
.setup-divider:not(.setup-divider--reflection)::before,
.setup-divider:not(.setup-divider--reflection)::after {
  background: var(--month-accent, var(--line, #dfe7e1));
  opacity: 0.35;
}

/* ── Setup Details (Readiness / Materials / Learning Zones) ──── */
/* Collapsed by default — "once-a-month reference" sections.      */

.setup-details {
  /* fills the .card container — no extra spacing needed */
}

.setup-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 0;
  /* Remove default browser triangle */
}
.setup-summary::-webkit-details-marker { display: none; }
.setup-summary::marker               { display: none; }

.setup-summary h2 {
  margin: 0;
  flex: 1;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}

/* Chevron indicator */
.setup-summary::after {
  content: "▸";
  font-size: var(--text-sm);
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.setup-details[open] > .setup-summary::after {
  transform: rotate(90deg);
}
.setup-details[open] > .setup-summary {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.setup-hint {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  background: var(--mist);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

.setup-body {
  margin-top: 18px;
}

/* ── Set the Stage — sub-panels ─────────────────────────────────────────── */

.stage-sub {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.stage-sub:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.stage-sub-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--month-accent-text, var(--sage-dark, #4fb264));
  margin: 0 0 14px;
}

/* Books list */
.stage-books-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage-books-list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
}
.stage-books-list li::before {
  content: "📖";
  position: absolute;
  left: 0;
  font-size: var(--text-sm);
  top: 1px;
}

/* Music list */
.stage-music-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage-music-list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
}
.stage-music-list li::before {
  content: "♪";
  position: absolute;
  left: 0;
  color: var(--month-accent, var(--sage, #88a691));
  font-size: 1rem;
  top: 0;
}

/* ── Experience Week-Filter Bar ─────────────────────────────── */

.exp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.exp-filter-btn {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 5px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.exp-filter-btn:hover {
  background: var(--month-accent-soft, var(--mist));
  color: var(--ink);
  border-color: var(--month-accent, var(--sage));
}
.exp-filter-btn--active {
  background: var(--month-accent, var(--sage));
  color: var(--white);
  border-color: var(--month-accent, var(--sage));
}

/* "All" button — visually separated from the week buttons */
.exp-filter-btn--all {
  margin-left: 6px;
  border-left-color: var(--line);
  opacity: 0.75;
}
.exp-filter-btn--all:hover,
.exp-filter-btn--all.exp-filter-btn--active {
  opacity: 1;
}

/* ── Skill Builders — week grouping ────────────────────────── */

.sb-week-group {
  margin-bottom: 28px;
}
.sb-week-group:last-child {
  margin-bottom: 0;
}

.sb-week-heading {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--month-accent, var(--line));
}

.sb-week-count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  background: var(--mist);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

/* ── Start Today — activity progress count ──────────────────── */

.st-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.st-month-progress {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--month-accent-text, var(--muted));
  background: var(--month-accent-soft, var(--mist));
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  white-space: nowrap;
}

/* Multi-child progress: chips side by side inside the pill */
.st-month-progress--multi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
  flex-wrap: wrap;
  border-radius: var(--radius-xs);
}

.st-child-progress-chip {
  background: var(--paper);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Multi-child CTA rows inside focus cards */
.tc-multi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
}

.tc-multi-row--clear .tc-clear-act-btn {
  font-size: var(--text-xs);
  padding: 3px 8px;
}

/* "Tried · All" shortcut — primary emphasis, appears first in the row */
.tc-try-all-btn {
  font-weight: 600;
  background: var(--sage-dark);
  color: var(--white);
  border-color: var(--sage-dark);
}
.tc-try-all-btn:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--white);
}

/* ── Cycling state badges (See All list, multi-child) ────────────────────── */
/* One badge per child. Clicking advances: untried ○ → tried ✓ → loved ❤ → clear */

.tc-cycle-group {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.tc-cycle-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px 8px 2px 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  background: var(--paper);
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.tc-cycle-btn:hover { border-color: var(--sage); background: var(--mist); }

.tc-cycle-abbrev {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.tc-cycle-icon { font-style: normal; }

/* State-specific badge colours */
.tc-cycle-btn--untried {
  background: var(--paper);
  color: var(--muted);
}
.tc-cycle-btn--untried .tc-cycle-abbrev { color: var(--muted); }

.tc-cycle-btn--tried {
  background: var(--status-success-bg);
  border-color: var(--sage);
  color: var(--sage-dark);
}
.tc-cycle-btn--tried .tc-cycle-abbrev { color: var(--sage-dark); }

.tc-cycle-btn--loved {
  background: var(--subject-creative-bg);
  border-color: var(--subject-creative-text);
  color: var(--subject-creative-text);
}
.tc-cycle-btn--loved .tc-cycle-abbrev { color: var(--subject-creative-text); }

/* Per-child state chips inside See-all list */
.tc-child-chips {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.tc-child-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  cursor: default;
}

.tc-child-chip--untried { background: var(--mist); color: var(--muted); }
.tc-child-chip--tried   { background: var(--status-success-bg);     color: var(--sage-dark); }
.tc-child-chip--loved   { background: var(--subject-creative-bg);     color: var(--subject-creative-text); }

.tc-all-item-btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Progress group: week pill + month pill side by side ─────────────────── */

.st-progress-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.st-week-progress {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--bark, #7a5c3a);
  background: var(--warm-sand, #f5e8d0);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  white-space: nowrap;
}

/* ── Per-child milestone progress bar (index page cards) ─────────────────── */

.cpc-milestone-bar-wrap {
  margin-top: 12px;
}

.cpc-bar-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 5px;
}

.cpc-milestone-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--mist);
}

/* Milestone level colours — consistent with .seg-exploring/growing/flying in tracker reflection */
.cpc-bar-seg--exploring { background: var(--level-exploring); flex-shrink: 0; } /* warm amber  */
.cpc-bar-seg--growing   { background: var(--level-growing); flex-shrink: 0; } /* sage green  */
.cpc-bar-seg--flying    { background: var(--level-flying); flex-shrink: 0; } /* slate blue  */
.cpc-bar-seg--empty     { background: var(--mist); flex: 1; }

/* CLE (Core Learning Experience) bar segments — Tried / Loved */
.cpc-bar-seg--tried     { background: var(--sage-dark); flex-shrink: 0; }
.cpc-bar-seg--loved     { background: var(--subject-creative-text, #7c5cbf); flex-shrink: 0; }

.cpc-bar-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.cpc-bar-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.cpc-bar-legend-item::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cpc-bar-legend-item--exploring::before { background: var(--level-exploring); }
.cpc-bar-legend-item--growing::before   { background: var(--level-growing); }
.cpc-bar-legend-item--flying::before    { background: var(--level-flying); }
.cpc-bar-legend-item--unmarked::before  { background: var(--mist); border: 1px solid var(--border); }

/* ── Global milestone level legend (index page, below child cards) ───────── */

.cpc-global-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.cpc-gl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.cpc-gl-item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cpc-gl-item--exploring::before { background: var(--level-exploring); }
.cpc-gl-item--growing::before   { background: var(--level-growing); }
.cpc-gl-item--flying::before    { background: var(--level-flying); }
.cpc-gl-item--tried::before     { background: var(--sage-dark); }
.cpc-gl-item--loved::before     { background: var(--subject-creative-text, #7c5cbf); }

/* ── Per-child month history (index page) ────────────────────────────────── */

.cpc-month-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.cpc-month-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: none;
  border-radius: var(--radius-xs);
  transition: background 0.12s;
}

/* CLE sub-row sits below the milestone bar, spanning bar + count columns */
.cpc-month-sub-row {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cpc-month-bar--cle {
  height: 6px;
}

.cpc-month-row:hover {
  background: var(--ink-a10, rgba(32,49,11,0.06));
}

.cpc-month-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpc-month-bar {
  display: flex;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--mist);
  flex: 1;
}

.cpc-month-count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

.cpc-month-count-label {
  font-size: var(--text-2xs);
  font-weight: 400;
  color: var(--muted);
  opacity: 0.75;
  margin-left: 1px;
}

.cpc-empty-state {
  margin: 6px 0 0;
  padding: 22px 20px 20px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1px dashed #c8dfce;
  text-align: center;
}

.cpc-empty-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 10px;
}

.cpc-empty-heading {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink, #2e2e2a);
}

.cpc-empty-body {
  margin: 0 0 14px;
  font-size: var(--text-sm);
  color: var(--muted, #6a6a5a);
  line-height: 1.5;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.cpc-empty-cta {
  display: inline-block;
  padding: 7px 20px;
  background: var(--sage-dark, #4fb264);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}

.cpc-empty-cta:hover {
  background: var(--status-success-dark);
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Print Kit — screen-side trigger buttons & layout support
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Print trigger button ──────────────────────────────────────────────── */

.pk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted, #6b7280);
  background: var(--ink-a06);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}

.pk-trigger:hover,
.experience-card:hover .pk-trigger,
.wp-tab-panel:hover .pk-trigger,
.card:hover .pk-trigger {
  opacity: 1;
  color: var(--month-accent-text, var(--sage-dark));
  background: var(--month-accent-soft, var(--ink-a06));
  border-color: var(--month-accent, var(--sage));
}

/* Always visible on touch devices — no hover states available */
@media (hover: none) {
  .pk-trigger {
    opacity: 1;
  }
}

.pk-trigger svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* ── Skill Builders section header row ─────────────────────────────────── */

.pk-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.pk-section-header h2 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}

/* ── Overview → Setup & Planning anchor link ───────────────────────────── */

.overview-setup-anchor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--month-accent-text, var(--sage-dark, #4fb264));
  text-decoration: none;
  border: 1px solid var(--month-accent-soft, var(--line, #dfe7e1));
  border-radius: var(--radius-xs);
  padding: 5px 12px;
  background: var(--month-accent-soft, var(--mist, #edf3ef));
  letter-spacing: 0.01em;
  transition: background 0.15s, border-color 0.15s;
}

.overview-setup-anchor:hover {
  border-color: var(--month-accent, var(--sage-dark, #4fb264));
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   CELEBRATION — confetti toast
   ══════════════════════════════════════════════════════════════════════════ */

#kg-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink, #2a2a22);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
}

#kg-toast.kg-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.kg-toast-icon { font-size: 1.1rem; }
.kg-toast-text em { font-style: italic; opacity: 0.85; }


/* ══════════════════════════════════════════════════════════════════════════
   NAV — months dropdown
   ══════════════════════════════════════════════════════════════════════════ */

.nav-months-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-months-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--month-accent-text, var(--muted, #555));
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.nav-months-toggle:hover {
  background: var(--month-accent-soft, var(--mist));
  color: var(--ink);
}

.nav-months-caret {
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.nav-months-toggle[aria-expanded="true"] .nav-months-caret {
  transform: rotate(180deg);
}

.nav-months-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: var(--paper);
  border: 1px solid var(--line, #e8e4da);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 6px;
  z-index: 200;
  display: none;
}

.nav-months-dropdown--open {
  display: block !important;
}

.nav-months-item {
  display: block;
  padding: 7px 12px;
  font-size: var(--text-sm);
  color: var(--ink, #2a2a22);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: background 0.12s;
}

.nav-months-item:hover {
  background: var(--mist, #edf3ef);
  text-decoration: none;
}

.nav-months-item--current {
  font-weight: 700;
  color: var(--month-accent-text, var(--sage-dark));
  background: var(--month-accent-soft, var(--mist));
}

.nav-months-item--past {
  color: var(--muted, #777);
}


/* ══════════════════════════════════════════════════════════════════════════
   HOME CARD — command centre (index.html)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Onboarding checklist card ───────────────────────────────────────────── */

.kg-ob-card {
  background: var(--paper);
  border: 1px solid #c8dfce;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(74, 99, 83, 0.09);
}

/* Header row: title + progress pips */
.kg-ob-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #e8f4ec, #f2f9f4);
  border-bottom: 1px solid #c8dfce;
  padding: 18px 22px 16px;
}

.kg-ob-heading {
  margin: 0 0 3px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #2a2a22);
}

.kg-ob-sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted, #5a5a4a);
  line-height: 1.45;
}

/* Progress count + pip row */
.kg-ob-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.kg-ob-progress-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--sage-dark, #4fb264);
  white-space: nowrap;
}

.kg-ob-progress-bar {
  display: flex;
  gap: 5px;
}

.kg-ob-progress-pip {
  width: 28px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--level-growing-bg);
  transition: background 0.2s;
}

.kg-ob-progress-pip--done {
  background: var(--sage-dark, #4fb264);
}

/* Step list */
.kg-ob-steps {
  padding: 6px 0;
}

.kg-ob-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid #eef0ea;
  transition: background 0.15s;
}

.kg-ob-step:last-child {
  border-bottom: none;
}

.kg-ob-step--done {
  background: var(--paper);
}

/* Circle check indicator */
.kg-ob-step-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #c8dfce;
  background: var(--paper);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--sage-dark, #4fb264);
  margin-top: 1px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.kg-ob-step-check:hover {
  border-color: var(--sage-dark, #4fb264);
  background: rgba(79, 178, 100, 0.08);
}

.kg-ob-step--done .kg-ob-step-check {
  background: var(--sage-dark, #4fb264);
  border-color: var(--sage-dark, #4fb264);
  color: var(--white);
}

.kg-ob-step-body { flex: 1; min-width: 0; }

.kg-ob-step-title {
  margin: 0 0 4px;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--ink, #2a2a22);
  display: flex;
  align-items: center;
  gap: 6px;
}

.kg-ob-step--done .kg-ob-step-title {
  color: var(--muted, #6a6a5a);
}

.kg-ob-step-icon {
  font-size: 1rem;
  line-height: 1;
}

.kg-ob-step-desc {
  margin: 0 0 10px;
  font-size: var(--text-sm);
  color: var(--muted, #5a5a4a);
  line-height: 1.5;
}

.kg-ob-step-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kg-ob-step-link {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--sage-dark, #4fb264);
  text-decoration: none;
}

.kg-ob-step-link:hover { text-decoration: underline; }


/* CTA — all steps done */
.kg-ob-ready {
  padding: 18px 22px;
  border-top: 1px solid #c8dfce;
  background: linear-gradient(135deg, #e8f4ec, #f2f9f4);
}

.kg-ob-cta {
  display: inline-block;
  background: var(--accent, #66d97e);
  color: var(--accent-text, #1c3203);
  font-size: 0.93rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background 0.15s;
}

.kg-ob-cta:hover {
  background: var(--accent-hover, #97e5a7);
  text-decoration: none;
}

/* Skip row — wraps skip link + "Skip for now" button */
.kg-ob-skip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #eef0ea;
}

/* Skip link — steps not yet done */
.kg-ob-skip {
  margin: 0;
  padding: 13px 22px;
  font-size: var(--text-sm);
  color: var(--muted, #6a6a5a);
}

.kg-ob-skip a {
  color: var(--muted, #6a6a5a);
}

.kg-ob-skip a:hover { color: var(--ink); }

/* "Skip for now" button — dismisses onboarding, shows today card inline */
.kg-ob-skip-btn {
  flex-shrink: 0;
  margin-right: 22px;
  padding: 5px 12px;
  font-size: var(--text-xs);
  color: var(--muted, #6a6a5a);
  background: none;
  border: 1px solid #d8dbd0;
  border-radius: var(--radius-xl);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.kg-ob-skip-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 520px) {
  .kg-ob-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kg-ob-progress { flex-direction: row; align-items: center; }
  .kg-ob-step { padding: 14px 16px; }
  .kg-ob-ready { padding: 14px 16px; }
  .kg-ob-skip-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; }
  .kg-ob-skip { padding: 0; }
  .kg-ob-skip-btn { margin-right: 0; }
}

/* ── Today command centre card ───────────────────────────────────────────── */

.kg-today-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #edf6f0, #f7fbf8);
  border: 1px solid #c8dfce;
  border-left: 4px solid var(--sage, #6a9a7a);
  border-radius: var(--radius);
  padding: 18px 22px;
  flex-wrap: wrap;
}

.kg-today-left { flex: 1; min-width: 0; }

.kg-today-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sage-dark, #4fb264);
  margin-bottom: 4px;
}

.kg-today-month-link {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #2a2a22);
  text-decoration: none;
}

.kg-today-month-link:hover { text-decoration: underline; }

.kg-today-week {
  font-size: var(--text-sm);
  color: var(--muted, #666);
  margin: 2px 0 10px;
}

.kg-today-activity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.kg-today-activity-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #888);
}

.kg-today-activity-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sage-dark, #4fb264);
  text-decoration: none;
}

.kg-today-activity-link:hover { text-decoration: underline; }

.kg-today-activity-duration {
  font-size: var(--text-xs);
  color: var(--muted, #999);
}

.kg-today-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.kg-today-open-btn {
  display: inline-block;
  background: var(--sage-dark, #4fb264);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.kg-today-open-btn:hover {
  background: var(--status-success-dark);
  text-decoration: none;
}

.kg-today-restart-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--muted, #6a6a5a);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kg-today-restart-btn:hover { color: var(--ink, #2e2e2a); }


/* ══════════════════════════════════════════════════════════════════════════
   YEAR ARC — "Where this fits in the year" callout strip
   ══════════════════════════════════════════════════════════════════════════ */

.year-arc {
  display: flex;
  gap: 0;
  border: 1px solid var(--line, #e8e4da);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--bg-alt, #faf8f4);
}

.year-arc-item {
  flex: 1;
  padding: 12px 16px;
  min-width: 0;
}

.year-arc-item--right {
  border-left: 1px solid var(--line, #e8e4da);
}

.year-arc-divider {
  display: none; /* handled by border-left on --right */
}

.year-arc-icon {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--muted, #aaa);
  margin-right: 4px;
}

.year-arc-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--month-accent-text, var(--sage-dark, #4fb264));
  display: block;
  margin-bottom: 3px;
}

.year-arc-text {
  font-size: var(--text-sm);
  color: var(--muted, #666);
  line-height: 1.45;
  display: block;
}

/* ── Materials buy link ────────────────────────────────────────────────── */
/* Renders when an affiliate_url is set in data/materials-catalogue.yaml.   */
/* Uses a subtle underline; no hover underline added per general UI rules.  */
a.mat-buy-link {
  color: var(--month-accent-text, var(--sage-dark));
  text-decoration: underline;
  text-decoration-color: var(--month-accent-soft, var(--sage-soft));
  text-underline-offset: 2px;
}
a.mat-buy-link:hover {
  color: var(--month-accent, var(--sage));
  text-decoration: none;
}

/* ── Sidebar & mobile TOC separators ───────────────────────────────────── */
/* A thin rule that visually distinguishes "At a Glance" from the rest      */
/* of the month navigation. Intentionally subtle — lighter than a divider.  */
.toc-separator {
  height: 1px;
  background: var(--line, #e0e6e1);
  margin: 0.45rem 0.25rem;
  opacity: 0.7;
}
.mob-toc-separator {
  height: 1px;
  background: var(--line, #e0e6e1);
  margin: 0.4rem 0.75rem;
  opacity: 0.6;
}

/* ── What To Gather — sub-group layout ─────────────────────────────────── */
/* Three groups inside the merged section: Monthly Box, Standard Kit, Books */
.gather-group {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #e0e6e1);
}
.gather-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.gather-group-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--month-accent-text, var(--sage-dark, #4fb264));
  margin: 0 0 6px;
}
.gather-group-hint {
  font-size: var(--text-sm);
  color: var(--muted, #7a8f7e);
  margin: 0 0 12px;
  line-height: 1.5;
}
.gather-group-hint a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Materials checklist ────────────────────────────────────────────────── */
/* Gather checklist grid — used for both Monthly Box and Standard Kit.      */
.monthly-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem 1.2rem;
  margin: 1.1rem 0 0.9rem;
}

.box-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.box-item-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text, #2d3a2e);
}

.box-check {
  flex-shrink: 0;
  margin-top: 0.15em;
  accent-color: var(--sage, #6b8f71);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.box-item-name {
  font-weight: 500;
}

.box-item-use {
  font-size: var(--text-xs);
  color: var(--text, #2d3a2e);
  margin-left: 1.5rem;
  opacity: 0.75;
}

.box-item-sub {
  font-size: var(--text-xs);
  color: var(--muted, #7a8f7e);
  margin-left: 1.5rem;
  font-style: italic;
}



/* ── Curriculum Position — Option 1 UI ──────────────────────────────────────
   Badge, start-month prompt overlay, and weekly skill-focus notes.
   Injected by curriculum-position.js on month pages only.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Position badge (top of month page) ─────────────────────────────────── */
.cp-badge {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 9px 14px;
  margin-bottom: 12px;
  background: var(--month-accent-soft, rgba(56,136,64,0.10));
  border: 1px solid var(--month-accent, var(--sage));
  border-radius: var(--radius-xs, 0.25rem);
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.4;
}

/* Each logical row inside the badge */
.cp-badge-hem,
.cp-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  width: 100%;
}

/* Hemisphere row: slightly muted, separated from curriculum row */
.cp-badge-hem {
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--month-accent, var(--sage));
  opacity: 0.85;
}

.cp-badge-icon { flex-shrink: 0; }

.cp-badge-text { flex: 1 1 auto; }

.cp-badge-sep {
  color: var(--muted);
  flex-shrink: 0;
}

.cp-badge-meta {
  color: var(--muted);
  font-size: var(--text-sm);
}

.cp-badge-home {
  margin-left: auto;
  padding: 2px 8px;
  font-size: var(--text-xs);
  color: var(--month-accent-text, var(--sage-dark));
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-xl);
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.cp-badge-home:hover {
  opacity: 1;
  text-decoration: none;
}

/* ── Start-month prompt overlay ──────────────────────────────────────────── */
.cp-prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cp-prompt {
  background: var(--paper);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  padding: 32px 28px 24px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}

.cp-prompt-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.cp-prompt-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}

.cp-prompt-body {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.cp-prompt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.cp-month-btn {
  padding: 9px 6px;
  font-size: var(--text-sm);
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  background: var(--mist, #edf3ef);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cp-month-btn:hover,
.cp-month-btn:focus-visible {
  background: var(--sage, #388840);
  color: var(--white);
  border-color: var(--sage, #388840);
  outline: none;
}
.cp-month-btn--selected {
  background: var(--sage-dark, #4fb264);
  color: var(--white);
  border-color: var(--sage-dark, #4fb264);
}

.cp-prompt-note {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}

/* ── Weekly skill-focus note (inside Weekly Planner panels) ─────────────── */
.cp-skill-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  padding: 8px 12px;
  margin-bottom: 14px;
  background: var(--month-accent-soft, rgba(56,136,64,0.09));
  border-left: 3px solid var(--month-accent, var(--sage));
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: var(--text-sm);
}

.cp-skill-note-label {
  font-weight: 600;
  color: var(--month-accent-text, var(--sage-dark));
  white-space: nowrap;
}

.cp-skill-note-items {
  color: var(--ink);
}

/* ── Swapped skill builder cards get a subtle left accent ────────────────── */
.sb-card--swapped {
  border-left: 3px solid var(--month-accent, var(--sage));
}

/* ── Readiness arc skill-focus block ─────────────────────────────────── */
/* Appears inside each age-pill subcard; replaced by JS for non-matching  */
/* curriculum positions.                                                   */
.readiness-arc-group {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1.5px dashed var(--sage, #88a691);
}

.readiness-arc-label {
  margin: 0 0 0.3rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sage-dark, #4a8a5c);
}

.readiness-arc-group .clean {
  margin: 0;
}

/* ── Materials arc section ────────────────────────────────────────────── */
/* Distinct styling for the arc-specific skill materials gather group.     */
.gather-group--arc {
  background: var(--mint-light, #edf7f2);
  border: 1.5px solid var(--sage, #88a691);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}

/* ── Arc zone adjustment tips block ─────────────────────────────────────── */
/* Appears below the Learning Zones grid in Set the Stage.                    */
.arc-zone-tips {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: var(--mint-light, #edf7f2);
  border: 1.5px dashed var(--sage, #88a691);
  border-radius: var(--radius-sm);
}

.arc-zone-tips-label {
  margin: 0 0 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sage-dark, #4a8a5c);
}

.arc-zone-tips-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.arc-zone-tip {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.arc-zone-tip-zone {
  font-weight: 700;
  color: var(--sage-dark, #4a8a5c);
}

/* ── Arc milestone divider in Progress Tracker ───────────────────────── */
/* Separates thematic milestones from arc-specific (skill-position) ones. */
.arc-milestone-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0 0.75rem;
}

.arc-milestone-divider::before,
.arc-milestone-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sage, #88a691);
  opacity: 0.4;
}

.arc-milestone-divider-label {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sage-dark, #4a8a5c);
  padding: 0.2rem 0.6rem;
  background: var(--mint-light, #edf7f2);
  border: 1px solid var(--sage, #88a691);
  border-radius: var(--radius);
}

/* Arc milestone cards get a subtle left accent to distinguish from thematic ones */
.milestone-card--arc {
  border-left: 3px solid var(--sage, #88a691);
}

/* ── Swapped skill chips in Weekly Plan ─────────────────────────────── */
.skill-builder-card--swapped {
  border-color: var(--month-accent, var(--sage));
}

/* ── Index start-month panel ─────────────────────────────────────────────── */
.kg-sm-picker {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e8e4dc);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  margin-bottom: 18px;
}

.kg-sm-prompt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  font-size: var(--text-base);
  line-height: 1.5;
}

.kg-sm-icon { flex-shrink: 0; font-size: 1.1rem; }

.kg-sm-hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted, #777);
  margin-top: 2px;
}

.kg-sm-grid { margin-top: 0; }

/* ── Hemisphere toggle ───────────────────────────────────────────────────── */
.kg-sm-hem-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.kg-sm-hem-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  flex-shrink: 0;
  white-space: nowrap;
}

.kg-sm-hem-btn {
  padding: 7px 16px;
  font-size: var(--text-sm);
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  background: var(--mist, #edf3ef);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.kg-sm-hem-btn:hover,
.kg-sm-hem-btn:focus-visible {
  background: var(--sage, #388840);
  color: var(--white);
  border-color: var(--sage, #388840);
  outline: none;
}

.kg-sm-hem-btn--active {
  background: var(--sage-dark, #4fb264);
  color: var(--white);
  border-color: var(--sage-dark, #4fb264);
}

.kg-sm-set {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
  background: var(--month-accent-soft, rgba(56,136,64,0.08));
  border: 1px solid var(--month-accent, var(--sage));
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink, #2d2d2d);
}

.kg-sm-set-text { flex: 1 1 auto; }

.kg-sm-set-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kg-sm-default-hint {
  font-size: var(--text-xs);
  color: var(--muted, #777);
}

.kg-sm-set--default {
  border-style: dashed;
}

.kg-sm-change-btn {
  margin-left: auto;
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-family: inherit;
  color: var(--month-accent-text, var(--sage-dark));
  background: transparent;
  border: 1px solid var(--month-accent, var(--sage));
  border-radius: var(--radius-xl);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.kg-sm-change-btn:hover {
  background: var(--month-accent, var(--sage));
  color: var(--white);
}

@media (max-width: 600px) {
  .cp-prompt-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-badge { font-size: var(--text-sm); }
  .kg-sm-picker { padding: 14px 14px 16px; }
}


/* ================================================================
   Home Page Layout & Components
   Two-column: main (hero + monthly journey) + aside (progress + refs)
   ================================================================ */

/* ── Outer wrapper ───────────────────────────────────────────────── */
.home-wrapper {
  width: min(1180px, calc(100vw - 32px));
  margin: 28px auto 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Home card slot — reserve height before JS populates it ──────────
   Prevents CLS: without a min-height the slot is 0px tall on load and
   home-card.js inserts the onboarding card (~600px) after first paint,
   shifting everything below it.  Values match observed card heights on
   mobile (34rem) and desktop (26rem). ─────────────────────────────── */
#kg-home-card { min-height: 34rem; }
@media (min-width: 641px) { #kg-home-card { min-height: 26rem; } }

/* ── Section headings ────────────────────────────────────────────── */
.home-section { margin-top: 0; }

/* Reference Library — plain section, same weight as Your Year of Learning */
.home-section--library {
  /* no card wrapper — inherits bare page background like the monthly section */
}

.home-section-header { margin-bottom: 20px; }

.home-section-title {
  font-family: "Poppins", "Instrument Sans", Arial, sans-serif;
  font-size: 1.33rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.2;
}

.home-section-title--label {
  /* Used in aside — reverts to small uppercase label style */
  font-family: "Instrument Sans", Inter, Arial, sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

.home-section-sub {
  font-size: var(--text-sm, 0.88rem);
  color: var(--muted);
  margin: 0;
}

/* ── Monthly guide journey grid ──────────────────────────────────── */
.monthly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

/* ── Arc entry/capstone strip (Getting Started + Year of Learning) ─ */
.monthly-arc-strip {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

/* ── Monthly guide cards ─────────────────────────────────────────── */
.doc-card--monthly {
  border-left: 3px solid var(--card-accent, var(--line));
  padding: 14px 16px;
  transition: box-shadow 0.15s, transform 0.15s, opacity 0.2s;
}

.doc-card--monthly .doc-card-num {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: block;
  margin-bottom: 5px;
  text-transform: none;
}

/* Seasonal accent colors — one per KG month (Sep=1 … Aug=12) */
.doc-card--monthly[data-month-number="1"]  { --card-accent: #c07655; } /* Sep — terracotta  */
.doc-card--monthly[data-month-number="2"]  { --card-accent: #b8773f; } /* Oct — oak brown   */
.doc-card--monthly[data-month-number="3"]  { --card-accent: #a9923a; } /* Nov — harvest gold*/
.doc-card--monthly[data-month-number="4"]  { --card-accent: #5b86a5; } /* Dec — winter blue */
.doc-card--monthly[data-month-number="5"]  { --card-accent: #7b8fcf; } /* Jan — lavender    */
.doc-card--monthly[data-month-number="6"]  { --card-accent: #c46d8a; } /* Feb — rose        */
.doc-card--monthly[data-month-number="7"]  { --card-accent: #5a9e72; } /* Mar — spring green*/
.doc-card--monthly[data-month-number="8"]  { --card-accent: #5b9cbf; } /* Apr — rain blue   */
.doc-card--monthly[data-month-number="9"]  { --card-accent: #8c6fab; } /* May — story purple*/
.doc-card--monthly[data-month-number="10"] { --card-accent: #c4a030; } /* Jun — golden sun  */
.doc-card--monthly[data-month-number="11"] { --card-accent: #c46e5a; } /* Jul — coral       */
.doc-card--monthly[data-month-number="12"] { --card-accent: #5e8a6e; } /* Aug — sage        */

/* Current month — accent green highlight */
.doc-card--monthly.doc-card--current {
  border-left-color: var(--accent, #66d97e);
  border-left-width: 4px;
  background: rgba(102, 217, 126, 0.07);
  box-shadow: 0 2px 14px rgba(102, 217, 126, 0.18);
}

.doc-card--monthly.doc-card--current .doc-card-title {
  color: var(--ink);
}

/* Past months — gently dimmed */
.doc-card--monthly.doc-card--past {
  opacity: 0.55;
}

.doc-card--monthly.doc-card--past:hover {
  opacity: 0.85;
}

/* ── Arc cards (Getting Started / Year of Learning) ──────────────── */
.doc-card--arc {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface, #ebeae1);
  border: 1px solid var(--line);
  transition: box-shadow 0.15s, transform 0.15s;
}

.doc-card--arc:hover {
  background: var(--mist);
  box-shadow: 0 4px 16px rgba(32, 49, 11, 0.08);
  transform: translateY(-1px);
}

.doc-card-arc-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.doc-card--arc .doc-card-num {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--ink-a10, rgba(32, 49, 11, 0.1));
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  display: inline-block;
  margin-bottom: 6px;
}

.doc-card--arc .doc-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 3px;
}

.doc-card--arc .doc-card-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

/* ── Start month panel — sits between section header and arc strip ── */
#kg-start-month-panel {
  margin-bottom: 14px;
}

/* ── Core guide cards (compact rows) ────────────────────────────── */
.doc-grid--core {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
}

.doc-card--core {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: none;
}

.doc-card--core:hover {
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(32, 49, 11, 0.07);
  border-color: var(--ink-a20);
  transform: translateY(-1px);
}

.doc-card--core .doc-card-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}

.doc-card--core .doc-card-body {
  flex: 1;
  min-width: 0;
}

.doc-card--core .doc-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--ink);
}

.doc-card--core .doc-card-desc {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-card--core .doc-card-arrow {
  color: var(--muted);
  font-size: var(--text-sm);
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}

.doc-card--core:hover .doc-card-arrow {
  color: var(--ink);
  transform: translateX(3px);
}

/* ── Today card — hero upgrade ───────────────────────────────────── */
.kg-today-card {
  padding: 22px 26px;
  border-left-color: var(--accent, #66d97e);
  border-left-width: 4px;
  background: linear-gradient(135deg, #eef9f1 0%, #f7fbf8 100%);
}

.kg-today-eyebrow {
  color: var(--accent-text, #1c3203);
  letter-spacing: 0.08em;
}

.kg-today-month-link {
  font-size: 1.15rem;
}

.kg-today-open-btn {
  background: var(--accent, #66d97e);
  color: var(--accent-text, #1c3203);
  font-weight: 600;
}

.kg-today-open-btn:hover {
  background: var(--accent-hover, #97e5a7);
  color: var(--accent-text, #1c3203);
  text-decoration: none;
}

/* ── Scroll-reveal animation ────────────────────────────────────── */
/* Cards and sections gently fade up on first appearance.
   The .reveal class is added by a lightweight IntersectionObserver
   in base.html.  Respects prefers-reduced-motion.                */

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal-target {
  opacity: 0;
}
.reveal-target.revealed {
  animation: reveal-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-target { opacity: 1; }
  .reveal-target.revealed { animation: none; opacity: 1; }
}

/* ── Button & interactive polish ───────────────────────────────── */
button, .btn, [role="button"] {
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
button:active, .btn:active, [role="button"]:active {
  transform: scale(0.97);
}

/* ── Focus-visible ring for accessibility ──────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── PWA install banner ────────────────────────────────────────── */
.pwa-install-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--bg);
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(32, 49, 11, 0.28);
  font-size: 0.92rem;
  max-width: min(420px, calc(100vw - 32px));
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  pointer-events: none;
}
.pwa-install-banner.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.pwa-install-banner-text {
  flex: 1;
  line-height: 1.4;
}
.pwa-install-banner-text strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.pwa-install-banner-text span {
  opacity: 0.75;
  font-size: var(--text-sm);
}
.pwa-install-btn {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.pwa-install-btn:hover {
  background: var(--accent-hover);
}
.pwa-install-dismiss {
  background: none;
  border: none;
  color: var(--bg);
  opacity: 0.5;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.pwa-install-dismiss:hover {
  opacity: 1;
}


/* ── Loading skeleton ──────────────────────────────────────────── */
/* Shown briefly on first paint before content hydrates.
   The .loaded class is added by a tiny inline script once
   DOMContentLoaded fires, crossfading the skeleton out.          */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-bar {
  height: 1em;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface) 25%, var(--bg) 37%, var(--surface) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-hero {
  height: 380px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface) 25%, var(--bg) 37%, var(--surface) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-shell {
  display: none; /* hidden by default — shown only via no-JS fallback or preload */
}

/* ── Heading margin-bottom — style guide responsive spec ─────── */
h1, h2 { margin-bottom: 0.3em; }
h3, h4, h5, h6 { margin-bottom: 0.5em; }
@media (max-width: 767px) {
  h1, h2 { margin-bottom: 0.5em; }
}

/* ── Body text responsive sizing (LG / XL) ───────────────────── */
/* Style guide: LG = 1.13rem desktop, 1.10rem mobile
                XL = 1.50rem desktop, 1.20rem mobile              */
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
@media (max-width: 767px) {
  .text-lg { font-size: 1.10rem; }
  .text-xl { font-size: 1.30rem; }
}
@media (max-width: 478px) {
  .text-xl { font-size: 1.20rem; }
}

/* ── Scroll-to-top button ──────────────────────────────────────── */
.scroll-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 150;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}
.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.scroll-top-btn svg {
  width: 18px;
  height: 18px;
}
/* Stack above mobile Menu button when both are visible */
@media (max-width: 980px) {
  .scroll-top-btn {
    bottom: 80px;
    right: 24px;
  }
}
/* Hide when PWA install banner is visible to avoid overlap */
.pwa-install-banner.visible ~ .scroll-top-btn {
  bottom: 90px;
}
@media (max-width: 980px) {
  .pwa-install-banner.visible ~ .scroll-top-btn {
    bottom: 140px;
  }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .monthly-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-wrapper {
    margin-top: 20px;
    gap: 16px;
  }

  .monthly-arc-strip {
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .monthly-grid {
    grid-template-columns: 1fr;
  }
}