/* ── Landing hero (left-aligned, Laws-of-UX style) ───────────────────────────── */
.hero {
  text-align: left;
  padding: 80px 24px 56px;
  max-width: 1320px;
  margin: 0 auto;
}
.hero h1 {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 18px;
}
.hero p {
  color: var(--brand);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  font-weight: 500;
  max-width: 900px;
}

.landing { min-height: calc(100vh - 60px); }
/* home description (below the doors) — base style; desktop refines it */
.home-desc {
  text-align: center; color: var(--brand); font-weight: 500;
  font-size: 16px; line-height: 1.5; max-width: 720px;
  margin: 20px auto 40px; padding: 0 24px;
}

/* ── Class / chapter page headers (match the home hero arrangement) ───────────── */
.class-page, .chapter-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 24px 64px;
}
.class-page h1, .chapter-page h1 {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--brand);
}
.class-description {
  color: var(--brand);
  margin-bottom: 40px;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  font-weight: 500;
  max-width: 900px;
}
/* the chapter page has only a heading (no description) — same gap before the grid */
.chapter-page h1 { margin-bottom: 40px; }

/* ── Card grid — classes, chapters and tools all share .ux-card ──────────────── */
.classes-grid, .chapters-grid, .tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
/* When the grid sits INSIDE the already-padded .class-page/.chapter-page container, drop its own
   side padding + width cap so its left edge lines up with the page heading (no double indent). */
.class-page .chapters-grid, .chapter-page .tools-grid {
  padding: 0 0 64px; max-width: none;
}
@media (max-width: 920px) { .classes-grid, .chapters-grid, .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 600px) {
  .classes-grid, .chapters-grid, .tools-grid { grid-template-columns: 1fr; gap: 18px; padding: 0 16px 48px; }
  .hero { padding: 48px 16px 32px; }
  .hero p { font-size: 17px; }
}

.ux-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  border: 1.5px solid rgba(60,44,28,0.28);   /* defining stroke against the paper background */
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  box-shadow: 0 2px 6px rgba(60,44,28,0.10);
}
.ux-card:hover {
  transform: translateY(-4px);
  border-color: rgba(60,44,28,0.5);
  box-shadow: 0 12px 30px rgba(60,44,28,0.16);
  text-decoration: none;
}

/* coloured header holding the big geometric icon */
.ux-head {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ux-icon { width: 46%; max-width: 150px; display: block; }
.card-icon-svg { width: 100%; height: auto; display: block; }

/* illustration header — the drawing overlays the generated icon (the fallback if the image is
   missing, hence the header keeps the palette background). object-fit: contain shows the WHOLE
   image; the img carries its own cream backing so the letterbox blends with the artwork's paper. */
.ux-head-img { position: relative; overflow: hidden; }
.ux-illus {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: #f3e7d7;   /* exact illustration paper colour, so the letterbox is invisible */
}

/* body */
.ux-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
/* title row: heading on the left, tool-count pill on the right */
.ux-body-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ux-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: rgba(60,44,28,0.07);
  border: 1px solid rgba(60,44,28,0.16);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ux-title { font-size: 21px; font-weight: 700; color: var(--brand); line-height: 1.2; margin: 0; }
.ux-desc { font-size: 15px; color: var(--brand); line-height: 1.55; margin: 0; }
.ux-cta { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--brand); }
.ux-card:hover .ux-cta { color: var(--brand-hi); }
.ux-diff {
  align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 3px 9px; border-radius: var(--radius-pill); margin-top: 2px;
}
.diff-easy   { background: rgba(52,211,153,0.16); color: #34d399; }
.diff-medium { background: rgba(251,191,36,0.16); color: #fbbf24; }
.diff-hard   { background: rgba(248,113,113,0.16); color: #f87171; }

.loading-placeholder, .empty-state { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════════
   Classroom DOORS — home-page class cards. SAME size/shape as a chapter card: a coloured
   16:10 "door" header (frosted window, panel, brass nameplate, handle) + a caption body.
   ══════════════════════════════════════════════════════════════════════════════ */
.door-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  border: 1.5px solid rgba(60,44,28,0.28);
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  box-shadow: 0 2px 6px rgba(60,44,28,0.10);
}
.door-card:hover {
  text-decoration: none; transform: translateY(-4px);
  border-color: rgba(60,44,28,0.5);
  box-shadow: 0 12px 30px rgba(60,44,28,0.16);
}

/* the door frame — sized so the whole door card matches a chapter card's TOTAL height
   (chapter = 16:10 header + text body below). A taller aspect makes the door occupy that same
   overall footprint. Holds the doorway (behind), the swinging leaf, and the hover caption. */
.door {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 13.5;
  overflow: hidden;
  perspective: 1000px;                  /* so the leaf swings in 3D */
}

/* the dark DOORWAY behind the leaf — a lit classroom interior the student steps out of */
.doorway {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #2a2018 0%, #3a2c1c 100%);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding-left: 14%;
}
/* the student, tucked in the doorway; hidden until the door opens */
.door-student {
  width: 52%; height: 90%;
  opacity: 0; transform: translateX(-14px);
  transition: opacity .28s ease .12s, transform .38s cubic-bezier(.34,1.3,.5,1) .12s;
}
.door-student { position: relative; }
.door-student svg, .door-student-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.door-student svg { display: block; }
/* the image (if present) sits on top of the SVG fallback and is bottom-anchored in the doorway */
.door-student-img { object-fit: contain; object-position: bottom; z-index: 1; }
.door-card:hover .door-student { opacity: 1; transform: translateX(0); }

/* the swinging DOOR LEAF — covers the doorway by default; hinges open on hover */
.door-leaf {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 20px;
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.4,.05,.2,1), box-shadow .3s ease;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.06), inset 0 0 0 6px rgba(0,0,0,0.10);
  backface-visibility: hidden;
}
.door-card:hover .door-leaf {
  transform: rotateY(-72deg);           /* swing ajar on the left hinge */
  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.06), inset 0 0 0 6px rgba(0,0,0,0.10),
              8px 0 24px rgba(0,0,0,0.35);
}

/* frosted window on the leaf */
.door-window {
  width: 34%; height: 26%;
  border-radius: 6px;
  background: rgba(255,255,255,0.16);
  border: 2px solid rgba(0,0,0,0.18);
  overflow: hidden;
}
.door-window-glass {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,0.18) 0 7px, rgba(255,255,255,0.05) 7px 14px);
}

/* brass nameplate — the "Class 10" sign */
.door-plate {
  position: relative;
  padding: 8px 20px;
  border-radius: 6px;
  background: linear-gradient(#e8c66a, #c99a3a);
  border: 2px solid rgba(90,60,10,0.5);
  box-shadow: 0 2px 5px rgba(0,0,0,0.28), inset 0 1px 1px rgba(255,255,255,0.5);
}
.door-plate::before, .door-plate::after {
  content: ''; position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(90,60,10,0.6); transform: translateY(-50%);
}
.door-plate::before { left: 6px; } .door-plate::after { right: 6px; }
.door-plate-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px;
  color: #3a2a08; letter-spacing: 0.02em; white-space: nowrap;
}

/* slim raised panel below the plate */
.door-panel {
  width: 40%; height: 12%;
  border-radius: 5px;
  border: 2px solid rgba(0,0,0,0.16);
  background: rgba(0,0,0,0.06);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.12);
}

/* door handle on the right edge of the leaf */
.door-handle {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2d98a, #b8892e);
  border: 1px solid rgba(90,60,10,0.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* caption — hidden below by default, slides UP on hover to show title + chapters */
.door-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 16px 20px 18px;
  transform: translateY(101%);
  transition: transform .34s cubic-bezier(.4,.05,.2,1);
  border-top: 1.5px solid rgba(60,44,28,0.18);
}
.door-card:hover .door-caption { transform: translateY(0); }
.door-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 20px; color: var(--brand); line-height: 1.2; margin-bottom: 4px;
}
.door-desc { font-size: 14px; color: var(--brand); line-height: 1.45; opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════════════════
   DESKTOP REDESIGN ZONE  (≥ 769px only)
   New desktop design lives here. Rules inside this media query NEVER apply on mobile,
   so the mobile experience stays frozen at the v1 layout. Put all desktop redesign
   overrides in this block. Mobile = everything OUTSIDE this block (unchanged).
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* ── HOME PAGE: single viewport, centred hero + a row of realistic classroom doors ──
     Only the home page uses .home-single (added by JS on the landing grid's page). */

  /* the whole home fits ONE screen with NO scroll: the body is a 100vh flex column, so the
     sticky header, the landing, and the footer all share one viewport height. */
  body.home-desktop {
    overflow: hidden; height: 100vh;
    display: flex; flex-direction: column;
  }
  body.home-desktop .site-header { flex: 0 0 auto; }
  body.home-desktop .landing {
    flex: 1 1 auto; min-height: 0;         /* takes the space left between header & footer */
    height: auto;
    display: flex; flex-direction: column;
    padding: 0 32px;
  }

  /* centred hero — just the big "Enter Your Classroom" CTA */
  body.home-desktop .hero {
    text-align: center; max-width: 940px; margin: 0 auto;
    padding: clamp(20px, 3.5vh, 40px) 24px clamp(8px, 1.5vh, 18px);
    flex: 0 0 auto;
  }
  body.home-desktop .hero h1 {
    font-size: clamp(48px, 7vh, 80px); margin: 0;
  }
  /* description sits in the lower area, in the empty space below the doors */
  body.home-desktop .home-desc {
    flex: 0 0 auto; text-align: center; color: var(--brand);
    font-size: clamp(19px, 2.5vh, 24px); font-weight: 500; line-height: 1.5;
    max-width: 840px; margin: auto auto clamp(60px, 10vh, 130px);
  }

  /* the doors row spans the same width as the header content (max 1200px, centred, 24px sides)
     and uses space-between, so the first door aligns under "Square One" and the last under the
     profile avatar. Doors sit toward the TOP with space left below. */
  body.home-desktop .landing { padding: 0; }     /* header-inner owns the side padding now */
  body.home-desktop .classes-grid {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0;
    flex: 0 1 auto; min-height: 0;               /* only as tall as the doors, so the desc hugs them */
    max-width: 1200px; margin: 0 auto; padding: clamp(6px, 1.5vh, 16px) 24px 0;
  }
  body.home-desktop .hero { max-width: 1200px; padding-left: 24px; padding-right: 24px; }

  /* ── each door: a hand-drawn LINE-ART door (black outline), opens on hover ────── */
  body.home-desktop .door-card {
    flex: 0 1 auto; width: 15%; max-width: 300px;   /* six doors distributed across the row */
    height: auto; align-self: flex-start;           /* card is exactly the door's size (no empty top) */
    background: none; border: none; box-shadow: none;
    border-radius: 0; overflow: visible;
    display: flex; align-items: stretch;
  }
  /* the door SVG defines the height from its width (aspect-preserved) */
  body.home-desktop .door-line { height: auto; }
  /* no lift on hover — the door already opens, which is the hover affordance
     (overrides the v1 base .door-card:hover translateY that applies on all sizes) */
  body.home-desktop .door-card:hover { transform: none; box-shadow: none; border-color: transparent; }

  body.home-desktop .door {
    width: 100%; height: auto;
    aspect-ratio: auto;
    background: none; box-shadow: none; border-radius: 0;
    padding: 0; perspective: 1200px; overflow: visible;
  }
  /* hide ALL the realistic-door parts on desktop — only the line-art SVG shows */
  body.home-desktop .doorway,
  body.home-desktop .door-student,
  body.home-desktop .door-caption,
  body.home-desktop .door-leaf { display: none; }

  /* the line-art door SVG sizes by its width (aspect-preserved), setting the card height */
  body.home-desktop .door-line {
    width: 100%; height: auto; display: block;
    overflow: visible;
  }
  /* the leaf group swings open on hover, hinged on its left edge (x=40 in the viewBox).
     A horizontal squeeze from the hinge reads as a door opening — reliable across browsers. */
  body.home-desktop .door-line .line-leaf {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform .55s cubic-bezier(.45,.05,.2,1);
  }
  body.home-desktop .door-card:hover .door-line .line-leaf {
    transform: scaleX(0.42);          /* leaf swings ajar toward the hinge */
  }

  /* footer pinned at the bottom, part of the single screen */
  body.home-desktop .site-footer {
    flex: 0 0 auto; padding: 12px 24px; border-top: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE HOME (≤ 768px) — the same line-art classroom doors as desktop, but stacked in a
   2-column grid on a scrollable page (a single viewport can't hold 6 tall doors).
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.home-desktop .hero {
    text-align: center; padding: 28px 20px 6px;
  }
  body.home-desktop .hero h1 { font-size: clamp(30px, 9vw, 44px); margin: 0; }

  /* doors in a 2-column grid */
  body.home-desktop .classes-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px 14px; max-width: 520px; margin: 0 auto;
    padding: 16px 16px 4px;
  }
  /* each door is the line-art SVG only (hide the v1 realistic-door parts) */
  body.home-desktop .door-card {
    width: 100%; height: auto; align-self: start;
    background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible;
    display: flex; align-items: stretch;
  }
  body.home-desktop .door-card:hover { transform: none; box-shadow: none; border-color: transparent; }
  body.home-desktop .door {
    width: 100%; height: auto; aspect-ratio: auto;
    background: none; box-shadow: none; border-radius: 0; padding: 0; overflow: visible;
  }
  body.home-desktop .doorway,
  body.home-desktop .door-student,
  body.home-desktop .door-caption,
  body.home-desktop .door-leaf { display: none; }
  body.home-desktop .door-line { width: 100%; height: auto; display: block; overflow: visible; }
  /* on touch there's no hover — leave the door closed (no swing) */

  /* description below the doors */
  body.home-desktop .home-desc {
    text-align: center; color: var(--brand);
    font-size: 16px; font-weight: 500; line-height: 1.5;
    max-width: 560px; margin: 18px auto 12px; padding: 0 20px;
  }

  /* ── MOBILE CLASS PAGE — a chapter dropdown, then that chapter's tools ────────── */
  body.class-mobile #chapters-grid { display: none; }
  body.class-mobile .class-page { padding: 20px 16px 40px; }
  body.class-mobile .class-page h1 { text-align: center; font-size: clamp(26px, 8vw, 36px); margin-bottom: 18px; }

  .cm-picker { max-width: 560px; margin: 0 auto 22px; }
  .cm-label {
    display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--brand-dim); margin-bottom: 8px;
  }
  .cm-select-wrap { position: relative; border-radius: 16px; }
  /* frosted-glass, translucent dropdown */
  .cm-select {
    appearance: none; -webkit-appearance: none;
    width: 100%; padding: 16px 48px 16px 18px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px;
    color: var(--brand);
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.28));
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.6); border-radius: 16px;
    box-shadow: 0 8px 24px rgba(60,44,28,0.14),
                inset 0 1px 0 rgba(255,255,255,0.7);
    cursor: pointer; transition: box-shadow .18s, border-color .18s, transform .12s;
  }
  .cm-select:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(60,44,28,0.18), inset 0 1px 0 rgba(255,255,255,0.7); }
  .cm-select:focus { outline: none; border-color: rgba(122,90,44,0.6); }
  .cm-caret {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--brand); font-size: 13px; opacity: 0.7;
    transition: transform .18s;
  }
  .cm-select-wrap:hover .cm-caret { transform: translateY(-50%) translateY(1px); }

  /* tools: single-column cards, same illustration icons as desktop */
  body.class-mobile .tp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 560px; margin: 0 auto; }
  body.class-mobile .tool-panel-empty { color: var(--muted); text-align: center; padding: 40px 20px; }
  .tp-card {
    display: flex; flex-direction: column; text-decoration: none;
    background: var(--card); border: 1.5px solid rgba(60,44,28,0.24);
    border-radius: 14px; overflow: hidden;
  }
  .tp-icon { position: relative; height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .tp-icon span { width: 40%; max-width: 90px; display: block; }
  .tp-icon .card-icon-svg { width: 100%; height: auto; display: block; }
  .tp-illus { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f3e7d7; }
  .tp-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
  .tp-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--brand); }
  .tp-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.45; margin: 0; }
  .tp-diff {
    align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 3px 10px; border-radius: 999px;
  }
  .tp-diff.diff-easy   { background: rgba(47,158,68,0.16);  color: #2b8a3e; }
  .tp-diff.diff-medium { background: rgba(217,130,43,0.18); color: #b5651d; }
  .tp-diff.diff-hard   { background: rgba(224,49,49,0.16);  color: #c92a2a; }
}

@media (min-width: 769px) {
  /* ══════════════════════════════════════════════════════════════════════════════
     DESKTOP CLASS PAGE — centred heading + a spiral notebook (left) & tool panel (right)
     ══════════════════════════════════════════════════════════════════════════════ */
  /* single viewport, no scroll: body is a 100vh flex column (header + class-page) */
  body.class-desktop { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  body.class-desktop .site-header { flex: 0 0 auto; }
  body.class-desktop .site-footer { display: none; }   /* reclaim the space for the single screen */
  body.class-desktop .class-page {
    flex: 1 1 auto; min-height: 0;
    max-width: 1240px; width: 100%; margin: 0 auto; padding: 26px 32px 24px;
    display: flex; flex-direction: column;
  }
  body.class-desktop .class-page h1 { text-align: center; flex: 0 0 auto; margin-bottom: 10px; }
  body.class-desktop .class-description {
    text-align: center; max-width: 820px; margin: 0 auto 20px; flex: 0 0 auto;
    font-size: 17px; color: var(--brand-dim); font-weight: 600;
  }
  body.class-desktop #chapters-grid { display: none; }

  .class-desk {
    display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: stretch;
    flex: 1 1 auto; min-height: 0;                     /* fill the remaining height */
  }

  /* the spiral NOTEBOOK — a bound pad with a brown cover + stacked page edges peeking on the
     right, and a coil binding on the left. Gently breathes on load. */
  .notebook {
    position: relative; display: flex; padding-left: 22px; min-height: 0;
    margin-right: 14px;                          /* room for the stacked page edges */
    animation: nb-settle .7s cubic-bezier(.34,1.2,.5,1) both;
  }
  @keyframes nb-settle {
    0%   { transform: translateY(-8px) rotate(-0.6deg); opacity: 0; }
    100% { transform: translateY(0) rotate(0); opacity: 1; }
  }
  /* brown COVER + a couple of stacked PAGES, peeking out along the right edge */
  .notebook::before {         /* brown cover — furthest back */
    content: ''; position: absolute; z-index: 0;
    left: 30px; right: -12px; top: 8px; bottom: -8px;
    background: #7a4a22; border: 2.5px solid #1a1a1a; border-radius: 6px 12px 14px 10px;
    box-shadow: 4px 6px 0 rgba(26,26,26,0.12);
  }
  .notebook::after {          /* a couple of cream pages between cover and top sheet */
    content: ''; position: absolute; z-index: 1;
    left: 28px; right: -7px; top: 5px; bottom: -4px;
    background: #efe6cf; border: 2px solid #1a1a1a; border-radius: 5px 12px 13px 8px;
  }
  /* the SPIRAL binding on the left — an SVG of many wire coils, top to bottom of the page */
  .nb-spiral {
    position: absolute; left: 2px; top: 0; width: 40px; height: 100%; z-index: 4;
    display: block;
  }
  /* the top writing PAGE */
  .nb-page {
    position: relative; z-index: 3; flex: 1; background: #fffdf7;
    border: 2.5px solid #1a1a1a; border-radius: 4px 14px 14px 4px;
    box-shadow: 3px 4px 0 rgba(26,26,26,0.10);
    padding: 18px 20px 18px 30px; min-height: 0;
    display: flex; flex-direction: column;
  }
  .nb-head {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px;
    color: var(--brand); margin-bottom: 12px; flex: 0 0 auto;
    border-bottom: 2px solid rgba(26,26,26,0.15); padding-bottom: 10px;
  }
  .nb-rows { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
  .nb-row {
    display: flex; align-items: baseline; gap: 8px; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 9px 8px; border-radius: 6px; font-family: inherit;
    border-bottom: 1px dashed rgba(26,26,26,0.14);
    transition: background .12s;
  }
  .nb-row:last-child { border-bottom: none; }
  .nb-row:hover { background: rgba(200,154,58,0.12); }
  .nb-row.active { background: rgba(200,154,58,0.2); }
  .nb-num { color: var(--brand-dim); font-weight: 700; font-size: 14px; flex-shrink: 0; }
  .nb-name { flex: 1; color: var(--brand); font-weight: 600; font-size: 15.5px; }
  .nb-count {
    flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--brand-dim);
    background: rgba(60,44,28,0.08); border-radius: 999px; padding: 2px 9px;
  }

  /* the TOOL PANEL (right) — fills its column; the tool grid scrolls internally if long */
  .tool-panel { min-height: 0; display: flex; flex-direction: column; }
  .tool-panel-empty {
    color: var(--muted); font-size: 16px; padding: 60px 20px; text-align: center;
  }
  .tp-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    grid-auto-rows: min-content;                  /* rows take their natural height */
    overflow-y: auto; min-height: 0; flex: 1 1 auto;
    padding-right: 6px; align-content: start;
  }
  .tp-card {
    display: flex; flex-direction: column; text-decoration: none;
    background: var(--card); border: 1.5px solid rgba(60,44,28,0.24);
    border-radius: 14px; overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .tp-card:hover {
    transform: translateY(-3px); text-decoration: none;
    border-color: rgba(60,44,28,0.5); box-shadow: 0 10px 24px rgba(60,44,28,0.16);
  }
  /* fixed icon height so it never collapses to a sliver under the single-viewport squeeze */
  .tp-icon { position: relative; height: 200px; flex: 0 0 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .tp-icon span { width: 40%; max-width: 90px; display: block; }
  .tp-icon .card-icon-svg { width: 100%; height: auto; display: block; }
  /* the tool illustration (if present) overlays the geometric-icon fallback, on cream paper */
  .tp-illus { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f3e7d7; }
  .tp-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
  .tp-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--brand); }
  .tp-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin: 0; flex: 1; }
  .tp-diff {
    align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 3px 10px; border-radius: 999px;
  }
  .tp-diff.diff-easy   { background: rgba(47,158,68,0.16);  color: #2b8a3e; }
  .tp-diff.diff-medium { background: rgba(217,130,43,0.18); color: #b5651d; }
  .tp-diff.diff-hard   { background: rgba(224,49,49,0.16);  color: #c92a2a; }
}