/* Nanny's Handbook (/handbook, src/routes/handbook.js): a head card (scene banner, Nanny in a keeper bubble, jump pills),
   then one card per group with a colored band across its top, a row per term with an icon tile, and a yellow "Right now"
   line with the player's own numbers. Each group carries its tone: --hb-c (strong: band, badge) and --hb-soft (tiles, lines). */
:root {
  --hb-glint: #fff; /* the energy token's highlight, as on the arcade tray */
}

.hb-tone-sun { --hb-c: var(--sun); --hb-soft: var(--sun-cream); }
.hb-tone-pink { --hb-c: var(--pink); --hb-soft: var(--pink-soft); }
.hb-tone-sky { --hb-c: var(--sky); --hb-soft: var(--sky-soft); }

/* Head */
.hb-head { text-align: center; }
.hb-head .lede { margin-inline: auto; text-wrap: balance; }
.hb-keeper { justify-content: center; gap: 12px; margin: 12px auto 0; max-width: 560px; }
.hb-keeper .speech { text-align: left; }

/* Jump pills: real .pill links grown to 44px, each with its group's art. */
.hb-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 16px 0 0; }
.hb-jump a.pill { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 6px; font-size: var(--fs-sm); color: var(--ink); text-decoration: none; background: var(--hb-soft); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) { .hb-jump a.pill:hover { box-shadow: var(--shadow-lift); text-decoration: underline; } }
.hb-jump a.pill > :is(svg, .hb-token) { flex: none; width: 32px; height: 32px; }

/* Group cards: the band is the h2, pulled out to the card's edges. */
.hb-sec { scroll-margin-top: 16px; }
/* The band reads left to right from its badge on phones too (the picked A4 look), so it opts out of the phone rule that
   centers a card's first heading; a two-line "Meters on your Glimling" would otherwise center beside a left badge. */
.card.hb-sec > h2 { text-align: left; }
.hb-sec h2 { display: flex; align-items: center; gap: 12px; margin: calc(-1 * clamp(16px, 2.4vw, 24px)) calc(-1 * clamp(16px, 2.4vw, 24px)) 8px;
  padding: 12px clamp(16px, 2.4vw, 24px); background: color-mix(in oklab, var(--hb-c) 45%, var(--card)); border-bottom: var(--line) solid var(--ink);
  border-radius: calc(var(--r-card) - var(--line)) calc(var(--r-card) - var(--line)) 0 0; }
.hb-badge { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow-sm); }
.hb-badge > svg { max-width: 30px; max-height: 32px; }
.hb-badge .hb-token { width: 26px; height: 26px; }

/* Rows */
.hb-row { display: flex; gap: 16px; padding: 16px 0; border-top: 2px dashed var(--rule); scroll-margin-top: 16px; }
.hb-sec h2 + .hb-row { border-top: 0; }
.hb-text { min-width: 0; }
.hb-row h3 { margin: 0; }
.hb-row p { margin: 4px 0 0; max-width: 64ch; }
.hb-what { font-weight: 700; }
.hb-row:target .hb-plate { box-shadow: 0 0 0 4px var(--hb-c), var(--shadow-sm); }
.hb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; font-size: var(--fs-sm); }
.hb-foot p { margin: 0; }
.hb-yours-line { padding: 4px 12px; background: var(--hb-soft); border: 2px solid var(--ink); border-radius: var(--r-sm); font-weight: 700; }
.hb-yours-line b { margin-right: 4px; font: 600 var(--fs-xs) var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hb-back { justify-content: center; }

/* Icon tile: a rounded plate holding one entry's art. */
.hb-plate { display: grid; place-items: center; width: 56px; height: 56px; flex: none; background: var(--hb-soft, var(--tint)); border: 2px solid var(--ink); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.hb-plate > svg { max-width: 40px; max-height: 42px; }
.hb-plate .hb-token { width: 30px; height: 30px; }
/* The pet panel's meter path draws in currentColor; give it the hunger fill. */
.hb-plate[data-ic="hunger"] { color: var(--ui-stat-hunger-fill); }

/* The arcade tray's gold energy token (.ah-tray i.on in games.css). */
.hb-token { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink);
  background: radial-gradient(circle at 34% 30%, var(--hb-glint) 0 3px, transparent 4px), radial-gradient(circle, var(--sun) 0 6px, var(--sun-glow) 7px 8px, var(--sun) 9px); }

@media (max-width: 767px) {
  .hb-row { gap: 12px; }
  .hb-row .hb-plate { width: 48px; height: 48px; }
}