/* The collections and extras on the Shop menu (src/ui/panels/books.js,
   labels.js, map.js, locker.js, letters.js, help.js, goals.js): the three
   books, the label wall, the map, the locker, letters, Help and the season's
   goals, inside the panel helper's card (teashop.css .ts-sheet), light and
   dark through teashop.css's tokens and sized by the Text size setting.
   Every state has words beside its picture; colour only repeats them. Every
   rule is scoped to a bk-, lk-, lt-, hp- or gl- class. */

/* ---------- what the collections share ---------- */
.bk-count { display: flex; flex-direction: column; gap: 6px; font-weight: 900; }
.bk-meter { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bk-meter i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.bk-search {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--text);
  font: 800 max(16px, 1em) var(--font); -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.bk-search:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.bk-filters { display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--line); border-radius: 14px; padding: 0 12px; background: var(--bg); }
.bk-filters[open] { padding-bottom: 12px; }
.bk-filters > summary, .hp-day > summary {
  min-height: 48px; display: flex; align-items: center; gap: 10px; font-weight: 900; cursor: pointer; list-style: none; touch-action: manipulation;
}
.bk-filters > summary::-webkit-details-marker, .hp-day > summary::-webkit-details-marker { display: none; }
.bk-filters > summary::before, .hp-day > summary::before {
  content: ""; width: 7px; height: 7px; flex: none; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(-45deg); transition: transform 0.15s;
}
.bk-filters[open] > summary::before, .hp-day[open] > summary::before { transform: rotate(45deg); }
.bk-filters .bk-choices + .bk-choices { margin-top: 10px; }
.bk-choices { display: flex; flex-direction: column; gap: 6px; }
.bk-choices-label { font-weight: 800; color: var(--muted); font-size: var(--ts-small); }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer; touch-action: manipulation;
  border: 2px solid var(--line); background: var(--surface); color: var(--text); font: 800 max(14px, min(var(--ts-font), 17px)) var(--font);
}
.bk-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.bk-chip[aria-pressed="true"]::before { content: ""; width: 6px; height: 11px; margin: -3px 2px 0 0; border: solid var(--accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.bk-chip:focus-visible, .bk-row:focus-visible, .hp-hint:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.bk-results { display: flex; flex-direction: column; gap: 10px; }
.bk-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .bk-list { grid-template-columns: 1fr 1fr; } }

/* a book's line: its picture, its words, and a chevron to its page */
.bk-row {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; text-align: left; cursor: pointer; touch-action: manipulation;
  border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: 700 1em/1.25 var(--font); width: 100%;
}
.bk-row.locked { cursor: default; background: transparent; border-style: dashed; }
.bk-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-row-name { font-weight: 900; }
.bk-row-sub { font-size: var(--ts-small); color: var(--muted); font-weight: 700; }
.bk-row-note { flex: none; font-size: var(--ts-small); font-weight: 800; color: var(--muted); text-align: right; max-width: 40%; }
.bk-row-go { flex: none; width: 9px; height: 9px; border: solid var(--muted); border-width: 0 3px 3px 0; transform: rotate(-45deg); margin-right: 4px; }
.bk-swatch.wh-swatch { width: 40px; height: 40px; border-radius: 12px; }
.bk-swatch.wh-swatch .wh-swatch-icon { width: 24px; height: 24px; }
.bk-face { width: 44px; height: 48px; flex: none; border-radius: 12px; background: var(--surface-2); }
.bk-face.big { width: 84px; height: 90px; border-radius: 16px; }
.bk-label-pic { width: 60px; height: 76px; flex: none; display: block; }
.bk-label-pic.small { width: 40px; height: 51px; }

/* a book's page */
.bk-back { justify-content: flex-start; }
.bk-back .btn { flex: 0 0 auto; }
.bk-page { gap: 12px; }
.bk-page-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bk-page-head .bk-swatch.wh-swatch { width: 56px; height: 56px; border-radius: 16px; }
.bk-page-head .bk-swatch.wh-swatch .wh-swatch-icon { width: 34px; height: 34px; }
.bk-page-title { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.bk-page-title h3 { max-width: 100%; margin: 0; font-size: 1.25em; font-weight: 900; }
.bk-fact { display: flex; flex-direction: column; gap: 4px; }
.bk-fact .lbl { font-size: var(--ts-small); font-weight: 800; color: var(--muted); }
.bk-fact-value { min-width: 0; }
.bk-strong { font-weight: 900; }
.bk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-weight: 800; font-size: var(--ts-small); }
.bk-page .cue { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; line-height: 1.15; }
.bk-page .cue-icon { width: 1.35em; height: 1.35em; flex: none; fill: currentColor; }
.bk-page .cue-icon.wide { width: 1.6em; }
.bk-page .cue.brew { flex-wrap: wrap; column-gap: 14px; row-gap: 4px; }
.bk-page .brew-part { display: inline-flex; align-items: center; gap: 6px; }
.bk-page .cue.brew:not([data-cold="hot"]) .cold { color: var(--accent-text); }
.bk-page .prices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; max-width: 16em; }
.bk-page .prices li { display: flex; justify-content: space-between; gap: 10px; }
.bk-recipe { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.bk-recipe li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-recipe b { font-variant-numeric: tabular-nums; }
.bk-story { display: flex; flex-direction: column; gap: 8px; }
.bk-story h4 { margin: 0; font-weight: 900; }

/* ---------- the label wall ---------- */
.bk-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 8px; }
.bk-label { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.bk-label-name { font-size: var(--ts-small); font-weight: 800; line-height: 1.15; max-width: 100%; }
.bk-label-blank {
  width: 60px; height: 76px; border-radius: 9px; border: 2px dashed var(--line); display: grid; place-items: center;
  color: var(--muted); font-weight: 900; font-size: 1.3em;
}

/* ---------- the map ---------- */
.bk-map-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.bk-map { display: block; width: 100%; height: auto; font-family: var(--font); }
.bk-states li b { color: var(--muted); }

/* ---------- the locker ---------- */
.lk-top { gap: 10px; }
.lk-look { display: flex; align-items: center; gap: 12px; }
.lk-look .ts-whole { width: 56px; height: 106px; padding: 3px; border-radius: 12px; background: var(--ts-cream); }
.lk-look-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lk-look-text .muted { font-size: var(--ts-small); font-weight: 700; }
.lk-goal { display: flex; flex-direction: column; gap: 5px; font-weight: 800; }
.lk-goal small { font-size: var(--ts-small); }
.lk-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .lk-list { grid-template-columns: 1fr 1fr; } }
/* (a regular's gift list opens under them, so the regulars stay one column) */
.lk-list:has(> .lk-regular) { grid-template-columns: 1fr; }
.lk-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 60px; padding: 8px 12px; min-width: 0;
  border: 2px solid var(--line); border-radius: 14px; background: var(--surface);
}
.lk-item-text { flex: 1 1 7em; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.lk-item-text b { font-weight: 900; }
.lk-item-text small { font-size: var(--ts-small); font-weight: 700; color: var(--muted); }
.lk-item > .wh-item { flex: 1 1 auto; min-width: 8em; }
.lk-item .wh-item-name { -webkit-hyphens: manual; hyphens: manual; }
/* (beside the words while both fit, and under them, to the right, when not) */
.lk-item-act { flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 100%; }
.lk-item-act .btn.small { white-space: nowrap; padding: 0 0.8em; font-size: var(--ts-font); }
.lk-when { font-size: var(--ts-small); font-weight: 800; color: var(--muted); text-align: right; }
.lk-swatch { width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1.5px solid rgba(46, 42, 38, 0.35); }
.lk-swatches { display: inline-flex; flex: none; }
.lk-swatches .lk-swatch { width: 14px; height: 30px; border-radius: 4px; }
.lk-swatches .lk-swatch + .lk-swatch { margin-left: 2px; }
.lk-regular { display: flex; flex-direction: column; gap: 6px; }
.lk-regular > .lk-item .bk-face { width: 44px; height: 48px; }
.lk-gifts { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 4px solid var(--accent-soft); }
/* a gift: its name and its price, picked with a tick as well as the colour */
.lk-gifts .lk-gift { min-height: 48px; padding: 6px 12px; gap: 8px; border-radius: 14px; box-shadow: none; background: var(--bg); }
.lk-gifts .lk-gift[aria-pressed="true"] { background: var(--accent-soft); }
.lk-gift b { flex: 1 1 auto; min-width: 0; font-weight: 900; }
.lk-gift span { flex: none; font-weight: 800; }
.lk-gift[aria-pressed="true"] b::before { content: ""; display: inline-block; width: 6px; height: 11px; margin: 0 9px 2px 1px; border: solid var(--accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.lk-give { padding-left: 18px; }
/* a tap on the greyed Give: the gifts pulse, as the morning's rooms do */
.lk-gifts.nudge .lk-gift { border-color: var(--sunset); animation: ts-rooms-nudge 0.4s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .lk-gifts.nudge .lk-gift { animation: none; } }
.lk-home { margin-bottom: 4px; }

/* ---------- letters ---------- */
.lt-list { display: flex; flex-direction: column; gap: 14px; }
.lt-letter {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 6px;
  background: var(--ts-cream); color: var(--ts-ink); border: 1.5px solid rgba(46, 42, 38, 0.2); box-shadow: 0 3px 0 var(--line);
}
.lt-letter.postcard { border-radius: 12px; background: #FFF6E6; padding-right: 64px; }
.lt-stamp {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 48px; border-radius: 3px;
  background: var(--turquoise); border: 3px dotted var(--ts-cream); outline: 1.5px solid rgba(46, 42, 38, 0.3);
}
.ts-panel-body .lt-head { margin: 0; font: 400 1.35em/1.15 "Lilita One", var(--font); color: var(--ts-ink); }
.lt-from { margin: 0; font-weight: 800; color: #6E6257; font-size: var(--ts-small); }
.lt-line { margin: 0; font-weight: 700; line-height: 1.45; }
.lt-note { margin: 4px 0 0; padding: 8px 12px; border-radius: 10px; background: #D3EFEB; color: var(--ts-ink); font-weight: 800; }

/* ---------- Help ---------- */
.ts-panel-body ol.hp-steps { gap: 8px; }
.hp-day { border: 2px solid var(--line); border-radius: 14px; padding: 0 12px; background: var(--bg); }
.hp-day[open] { padding-bottom: 12px; }
.hp-hints { display: flex; flex-direction: column; gap: 8px; }
.hp-hint-box { border: 2px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.hp-hint-box.open { border-color: var(--accent); }
.hp-hint {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; text-align: left; cursor: pointer; touch-action: manipulation;
  border: 0; background: transparent; color: var(--text); font: 800 1em/1.2 var(--font);
}
.hp-hint-name { flex: 1 1 auto; min-width: 0; }
.hp-hint-go { flex: none; color: var(--accent-text); font-weight: 900; }
.hp-hint-lines { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 12px; font-weight: 700; line-height: 1.4; }
.hp-hint-lines p { margin: 0; }
/* (the outfits' slots sit under the locker's sections, set apart from them) */
#lkSlot { padding-top: 10px; border-top: 2px solid var(--line); }

/* ---------- the season's goals ---------- */
.gl-season { margin: 0; text-align: left; }
.ts-panel-body .gl-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gl-goal { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.gl-goal.met { border-color: var(--accent); }
.gl-star { width: 1.6em; height: 1.6em; flex: none; color: var(--sunset); opacity: 0.25; }
.gl-goal.met .gl-star { opacity: 1; }
.gl-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.gl-text b { font-weight: 900; line-height: 1.3; }
.gl-text small { font-size: var(--ts-small); font-weight: 700; }
.gl-count { display: flex; flex-direction: column; gap: 4px; font-weight: 800; }
.gl-met { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; color: var(--accent-text); }
.gl-icon { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
.gl-waiting { gap: 10px; }