/* ═══════════════════════════════════════════════════════════════════════
   world-tracker.css — THE QUEST TRACKER (GH #3069 S6, the HUD pass).

   Wray's ruling: "the guided Nerm run becomes a quiet quest tracker under
   the minimap: one objective per line with its key." A slate panel (kit B
   panel.png, the `.hv-slate` primitive of world-hud-v2.css) holding FIRST
   STEPS n/m with a fold control, one line per objective with kit B's
   checkbox (check0 open, check1 done), the lit line the next one to do,
   its keycap from the player's bindings, and the day's quests in a row at
   the foot. Component: public/js/world-tracker.js; markup:
   prototype/the-hall-3d/web/tpl-tracker.html.

   Every rule starts at `body.hud-v2`. The panel exists only when
   nerm-guide.js handed the tracker the world chapter (FEATURE_WORLD_HUD_V2
   or ?hud=1, and FEATURE_NERM_BEATS), so with the flag off this file styles
   nothing, and the one rule on something else (Nerm's strip, the foot of
   this file) is under the same class.

   ── THE LAYER ───────────────────────────────────────────────────────────
   `corners`, one block: the panel is a child of the Albion corner (.an-tr),
   whose order, widths and `pointer-events` are world-albion.css's in this
   layer, and it hides Nerm's strip, which world-skin.css (`skin`) and
   world-nerm-beats.css (`nerm`) lay out. The primitive's slate frame is
   `skin`, so this layer re-states the padding it wants on top of it.

   ── WHERE IT SITS ───────────────────────────────────────────────────────
   Straight under the minimap, as wide as the map's box (the painted map is
   --an-map-w plus 12 frame pixels at --mv2-k 2: 304 on a desktop). The
   corner is a flex column ordered by integers, and the map and the journal
   mount late, so DOM order is a race: under the HUD pass the tracker takes
   4, and the journal (shut until its "!" is pressed) and the notices step
   to 5 and 6, so an opened journal lands UNDER the list and never between
   the list and the map it belongs to.

   ── THE PIXELS ──────────────────────────────────────────────────────────
   THE MAP'S SCALE, NOT THE PAGE'S. The painted minimap is 304 wide at every
   desktop size (its frame at --mv2-k 2, world-map-v2.css) and this list is
   exactly as wide, so it draws at 2 wherever the map does: the panel sets
   --hv-k on itself (world-hud-v2.css says every length reads --hv-k where
   it draws, so a local one works). At the page's own --hv-k 3 the 2560
   shot overflowed a 304 box: 36px rims and 16px type left the count and
   the keycaps outside the frame. So the rim is 24 and the type is the
   1920 mock's at every desktop size, and 12 and 16px on a phone, where the
   map draws at 1. The checkboxes and keycaps draw at their own whole
   scale, --wtk-ck (1: check0 is 15x16 and a 20px VT323 row carries it,
   as the v7 mock drew it). Every line box is a WHOLE pixel (--wtk-lh, the
   TODAY row's 10px): an 8px font at 1.2 made a 9.6px row, the panel came
   out 133.59 tall, and everything under it landed on half pixels (review
   of PR #3118).
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {
/* ── the panel ─────────────────────────────────────────────────────── */
body.hud-v2 .wtk {
  /* the MAP's scale, not the page's (see THE PIXELS above) */
  --hv-k: 2;
  --wtk-ck: 1;
  --wtk-row: 20px;
  --wtk-lh: 21px;
  --wtk-px: 8px;
  box-sizing: border-box;
  width: calc(var(--an-map-w, 280px) + 24px);
  display: grid;
  /* ⛔minmax(0, 1fr), not the implicit `auto` track: an auto track takes
     its widest child's min-content, and the TODAY row's nowrap name is
     wider than a phone's 176px panel, so the row ran 40px past the rim and
     off the screen with its count, and the ellipsis never applied (review
     of PR #3118, 390x844) */
  grid-template-columns: minmax(0, 1fr);
  gap: calc(4 * var(--hv-k, 1) * 1px);
  /* ⭐7 A SIDE, THE MOCK'S 14 AT 2 (review of PR #3177). At 11 the goal
     column was 207 wide and "Send your Nine to the arena" (216 of VT323)
     wrapped, which made the list 230 tall at 1280x720 and ran it into the
     action bar's BUILD and CARDS. panel.png's side rail is 3 art pixels,
     and its corner studs sit in the top and bottom rows, which the header
     and the TODAY row clear at 9 top and bottom. */
  padding: calc(9 * var(--hv-k, 1) * 1px) calc(7 * var(--hv-k, 1) * 1px);
  color: var(--hv-ink, #f0e2c6);
  font-family: var(--hv-f-vt, 'VT323', monospace);
  pointer-events: auto;
}

/* under the map, before the journal and the notices (see the header) */
body.nav-albion.hud-v2 .an-tr .wtk { order: 4; }
body.nav-albion.hud-v2 .an-tr .wt-journal { order: 5; }
body.nav-albion.hud-v2 .an-tr .ws-notices { order: 6; }

/* ── THE JOURNAL OPEN: THE MAP KEEPS ITS SIZE, THE LIST GIVES WAY ────────
   The corner is a flex column capped at 88vh (world-albion.css), and every
   child could shrink. With the journal (min-height 210) open under the map
   and this list, the column no longer fit below about 900 tall, and all
   three shrank: at 1366x768 the map's box went from 312 to 236, the
   painted map spilled out of its frame over "FIRST STEPS", and the TODAY
   row sat on the corner studs (review of PR #3118). So under the HUD pass
   neither the map nor the list ever shrinks.

   And while the journal is open the list gives way. The TODAY row, and a
   list that is only the TODAY row, go at every size: the journal is the
   day's quests in full. Under 1000 tall the whole list stands aside, so
   the corner is exactly what it is without a tracker. Measured at 1366x768:
   the journal alone runs y 400 to 678 (its bottom already 16px over the
   action bar's BUILD and CARDS, which start at 662, before this list
   existed); a 48px FIRST STEPS header kept above it pushed the journal to
   the 88vh cap, squeezed it to 234 so its third quest scrolled out, and
   made the overlap 26px. From 1000 tall the whole column fits clear:
   44 + 312 + 134 + 278 and the gaps is under 800, and BUILD starts about
   106 above the bottom of the screen. */
body.nav-albion.hud-v2 .an-tr .wt-map,
body.nav-albion.hud-v2 .an-tr .wtk { flex-shrink: 0; }
body.nav-albion.hud-v2 .an-tr:has(.wt-journal:not([hidden])) .wtk .wtk-today,
body.nav-albion.hud-v2 .an-tr:has(.wt-journal:not([hidden])) .wtk[data-mode='today'] { display: none; }
@media (max-height: 999px) {
  body.nav-albion.hud-v2 .an-tr:has(.wt-journal:not([hidden])) .wtk { display: none; }
}

/* ── the header: FIRST STEPS 1/2 and the fold, one button ─────────────── */
body.hud-v2 .wtk .wtk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: 400 var(--wtk-px)/1 var(--hv-f-px, 'Press Start 2P', monospace);
  text-align: left;
  cursor: pointer;
}
body.hud-v2 .wtk .wtk-title {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  color: var(--hv-gold-2, #caa982);
  letter-spacing: .05em;
  white-space: nowrap;
}
body.hud-v2 .wtk .wtk-count { color: var(--hv-ink, #f0e2c6); white-space: nowrap; }
body.hud-v2 .wtk .wtk-fold {
  font-style: normal;
  color: var(--hv-dim, #9d8a6d);
  min-width: 1ch;
  text-align: center;
}
body.hud-v2 .wtk .wtk-head:hover .wtk-fold,
body.hud-v2 .wtk .wtk-head:focus-visible .wtk-fold { color: var(--hv-gold-hi, #e3c79a); }
body.hud-v2 .wtk .wtk-head:focus-visible,
body.hud-v2 .wtk .wtk-today:focus-visible { outline: 2px solid var(--hv-gold-2, #caa982); outline-offset: 2px; }

/* ── the objectives ────────────────────────────────────────────────── */
body.hud-v2 .wtk .wtk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(2 * var(--hv-k, 1) * 1px);
}
body.hud-v2 .wtk .wtk-item {
  display: grid;
  grid-template-columns: calc(19px * var(--wtk-ck)) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  font: 400 var(--wtk-row)/var(--wtk-lh) var(--hv-f-vt, 'VT323', monospace);
  color: var(--hv-ink, #f0e2c6);
}
/* the checkbox: a cell as big as check1 (19x18, the tick overhangs up and
   right), check0's box sat on the same bottom-left corner so the two boxes
   land on the same pixels and the words never jump when a line is ticked */
body.hud-v2 .wtk .wtk-ck {
  width: calc(19px * var(--wtk-ck));
  height: calc(18px * var(--wtk-ck));
  background: url('/assets/ui/kitb/check0.png?v=2026-09-24a') left bottom / calc(15px * var(--wtk-ck)) calc(16px * var(--wtk-ck)) no-repeat;
  image-rendering: pixelated;
}
body.hud-v2 .wtk .wtk-item[data-state='done'] .wtk-ck {
  background-image: url('/assets/ui/kitb/check1.png?v=2026-09-24a');
  background-size: calc(19px * var(--wtk-ck)) calc(18px * var(--wtk-ck));
}
/* the one to do next is lit (the mock's own filter on the open box), the
   ones after it a step quieter, and the done ones greyed and ticked */
body.hud-v2 .wtk .wtk-item[data-state='todo'] { color: var(--hv-ink-slate, #d9cdb2); }
body.hud-v2 .wtk .wtk-item[data-state='now'] { color: #fff3d6; }
body.hud-v2 .wtk .wtk-item[data-state='now'] .wtk-ck { filter: brightness(1.6) sepia(.4); }
/* the HUD's quiet ink, not a grey of its own (#3069 S11, C14: #7d8898 was
   3.11:1); a ticked line stays quieter than an open one through its check */
body.hud-v2 .wtk .wtk-item[data-state='done'] { color: var(--hv-mute, #8a98aa); }
/* ⭐ONE ROW PER GOAL, AS THE MOCK DRAWS THEM (review of PR #3177). The
   first cut let a goal that did not fit wrap to a second row, and the
   list grew into the action bar at 1280x720. The side padding above gives
   the mock's five room on a desktop (216 of VT323 in a 223 column); a
   keycap rebound to a three-letter key can still take a few pixels, and
   then the end is cut with an ellipsis rather than the list growing. */
body.hud-v2 .wtk .wtk-goal {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the phone's words (world-tracker.js itemRow): hidden until a screen
   too narrow or too short for the goal as written shows them, below */
body.hud-v2 .wtk .wtk-short,
body.hud-v2 .wtk .wtk-touch { display: none; }
/* ⭐THE LIT GOAL IS A BUTTON when it happens behind a door (#3069 S11,
   PH-10): a press opens that door, which is how a phone, with no keycap,
   finds it. Drawn exactly as the words it replaces. */
body.hud-v2 .wtk .wtk-go {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
body.hud-v2 .wtk .wtk-go:hover { color: var(--hv-gold-hi, #e3c79a); }
body.hud-v2 .wtk .wtk-go:focus-visible { outline: 2px solid var(--hv-gold-2, #caa982); outline-offset: 2px; }
/* the keycap: the v2 action bar's cap (world-actionbar.css .ab2-kc), at
   this panel's own scale */
body.hud-v2 .wtk .wtk-kc {
  box-sizing: border-box;
  min-width: calc(16px * var(--wtk-ck));
  height: calc(16px * var(--wtk-ck));
  padding: 0 calc(3px * var(--wtk-ck));
  display: grid;
  place-items: center;
  font: 400 calc(8px * var(--wtk-ck))/1 var(--hv-f-px, 'Press Start 2P', monospace);
  color: var(--hv-ink, #f0e2c6);
  background: #0b1016;
  box-shadow: 0 0 0 calc(2px * var(--wtk-ck)) var(--hv-black, #06080c), inset 0 0 0 calc(2px * var(--wtk-ck)) #56472f;
  margin-right: calc(2px * var(--wtk-ck));
}
body.hud-v2 .wtk .wtk-item[data-state='done'] .wtk-kc { opacity: .5; }

/* ── TODAY: the day's quests, one row ─────────────────────────────────── */
/* "TODAY 1/3" first, then the quest: the count is the day's, and next to
   a quest's name it read as that quest's own progress (review of PR
   #3118: "Big Game Hunter 0/3" beside a quest that wants 3 KOs) */
body.hud-v2 .wtk .wtk-today {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin: calc(2 * var(--hv-k, 1) * 1px) 0 0;
  padding: calc(4 * var(--hv-k, 1) * 1px) 0 0;
  border: 0;
  border-top: 2px solid #26303c;
  background: none;
  color: var(--hv-mute, #8a98aa);
  font: 400 var(--wtk-px)/10px var(--hv-f-px, 'Press Start 2P', monospace);
  text-align: left;
  cursor: pointer;
}
body.hud-v2 .wtk .wtk-today:hover { color: var(--hv-ink, #f0e2c6); }
/* ⭐SMALL CAPITALS ON EVERY ACTION BUTTON (#3069, Wray 2026-09-26: "fix").
   TODAY (which opens the quest log) is lettered as Settings' CONNECT WALLET
   is: uppercase at its own size, .15em apart (1.5px at 10px). The goals are
   a list and keep their sentence case, the phone's lit goal among them, so
   the list reads as one list.
   ⛔NOT THE HEADER (review of PR #3234). FIRST STEPS is already written in
   capitals (COPY.title) at .05em, and at .15em the title needed 101px of a
   96px box on a phone (390x844, 360x740, 844x390), so it ran into its
   count: "FIRST STEPS0/5". Its lettering is left as it was. */
body.hud-v2 .wtk .wtk-today {
  text-transform: uppercase;
  letter-spacing: .15em;
}
body.hud-v2 .wtk .wtk-tname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hud-v2 .wtk .wtk-tcount { flex: none; color: var(--hv-ink, #f0e2c6); white-space: nowrap; }
/* the header and the TODAY row sit in the rows that hold panel.png's inner
   corner studs, so they stand 4 art pixels further in than the goals do
   (the goals' rows have only the side rail beside them: see the panel's
   padding). After both rules it adjusts; the today-only row below resets
   it, being centred between the rims and clear of the studs. */
body.hud-v2 .wtk .wtk-head,
body.hud-v2 .wtk .wtk-today { padding-inline: calc(4 * var(--hv-k, 1) * 1px); }
/* once the first steps are done the day's row is all there is. The panel
   keeps enough height for its two 12-pixel rims (a box shorter than the
   frame squeezes the corner studs onto the words: measured at 46 tall) */
body.hud-v2 .wtk[data-mode='today'] { padding-block: calc(11 * var(--hv-k, 1) * 1px); }
body.hud-v2 .wtk[data-mode='today'] .wtk-today { margin: 0; padding: 0; border-top: 0; }

/* folded: the header alone */
body.hud-v2 .wtk[data-collapsed='true'][data-mode='first'] .wtk-list,
body.hud-v2 .wtk[data-collapsed='true'][data-mode='first'] .wtk-today { display: none; }

/* ⛔`hidden` HAS TO WIN OVER EVERY DISPLAY ABOVE, and at equal specificity
   the later rule wins: written before them, a hidden header still drew as
   flex (seen on the served page, the header over the TODAY row once the
   chapter was done). The owner hides the whole panel on the island and when
   there is nothing to show; the painter hides the header, the list and the
   TODAY row by mode. Doubled attribute for one more step of weight. */
body.hud-v2 .wtk[hidden][hidden],
body.hud-v2 .wtk [hidden][hidden] { display: none; }

/* ⭐A THUMB'S TARGETS (#3069 S11, PH-8/C8). The fold header was 12px tall
   and the lit goal a 17px line. On a touch screen each is 32 tall in the
   panel and reaches 12 further into the space beside it, transparent, so
   each takes 44 and neither covers the other: the header reaches UP into
   the panel's top rim, the goal DOWN into its foot. The slate panel grows
   by the difference; its art is the same nine-slice.
   ⛔NOT ON A SHORT SCREEN (review of PR #3177). A phone held sideways has
   the list in the one line between the map and the action bar, laid out
   on 16px rows (the short-screen block below), and the grown header and
   goal pushed the lit goal under the bar's sixth slot at 844x390. There
   the drawn rows keep their size and only the transparent reach grows:
   the goal's 44 DOWN (it ends clear of the bar's top), the header's only
   over the panel's own top rim, never up into the map. */
@media (pointer: coarse) {
  body.hud-v2 .wtk .wtk-head,
  body.hud-v2 .wtk .wtk-go { position: relative; }
  body.hud-v2 .wtk .wtk-head::before,
  body.hud-v2 .wtk .wtk-go::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 44px;
  }
  body.hud-v2 .wtk .wtk-head::before { bottom: 0; }
  body.hud-v2 .wtk .wtk-go::before { top: 0; }
}
@media (pointer: coarse) and (min-height: 541px) {
  body.hud-v2 .wtk .wtk-head,
  body.hud-v2 .wtk .wtk-go { min-height: 32px; }
  /* the goal's words centred in its 32 by padding */
  body.hud-v2 .wtk .wtk-go { padding-block: 7px; }
}
@media (pointer: coarse) and (max-height: 540px) {
  body.hud-v2 .wtk .wtk-head::before {
    top: -8px;
    bottom: -2px;
    height: auto;
  }
}
/* ⭐THE PHONE'S WORDS (review of PR #3177). A phone's list, and a short
   screen's, is one line in a 176 panel, and "Open today's free pack"
   wrapped it to two rows (the panel measured 176x100). The mock's phone
   says "Open today's pack" on one line; each long goal carries such a line
   (nerm-guide.js `track.short`), and it is shown here. */
@media (max-width: 560px), (max-height: 540px) {
  body.hud-v2 .wtk .wtk-full { display: none; }
  body.hud-v2 .wtk .wtk-short { display: inline; }
}
/* A SHORT DESKTOP DROPS THE TICKED LINES (review of PR #3177). At 1280x720
   the five goals on one row each and the TODAY row end at y 609, 5px
   above BUILD and CARDS (y 614): clear, but too close to read as two
   things. So from 720 tall down the goals already done stand aside, and
   the header's count still says how many. (541 and under is the short-
   screen block's.) */
@media (min-width: 561px) and (max-height: 720px) {
  body.hud-v2 .wtk .wtk-item[data-state='done'] { display: none; }
}
/* ...AND WHERE THE BAR STANDS UNDER THE LIST, THE LIST GIVES WAY (#3069
   S14, D5). At 1366x657 the bar's BUILD and CARDS rose into the list's
   foot. world-tracker.js (fitToBar) measures the part of the bar under the
   panel and, while the panel runs past it, marks the list short (the TODAY
   row goes) and then the furthest unlit goals over, one at a time. The lit
   goal is never cut, and the header's count still says how many. */
body.hud-v2 .wtk[data-short='true'] .wtk-today,
body.hud-v2 .wtk .wtk-item.is-over { display: none; }
/* ── A PHONE: THE ONE LINE THAT MATTERS ─────────────────────────────────
   The corner's own breakpoint (world-albion.css, 560). The map is 132 wide
   up there, and the list goes under it as the header and the next thing to
   do, nothing else: no keycaps (there is no keyboard), no TODAY row, no
   ticked lines. 176 wide, reaching left past the map rather than wrapping
   the goal: at the height it sits (under the map, above the cat) nothing
   else is to its left but the picture. Folded, the header alone. */
@media (max-width: 560px) {
  body.hud-v2 .wtk {
    --hv-k: 1;
    --wtk-row: 16px;
    --wtk-lh: 17px;
    width: 176px;
    gap: 4px;
    padding: 8px 10px;
  }
  body.hud-v2 .wtk .wtk-item:not([data-state='now']),
  body.hud-v2 .wtk[data-mode='first'] .wtk-today,
  body.hud-v2 .wtk .wtk-kc { display: none; }
  body.hud-v2 .wtk .wtk-item { grid-template-columns: 19px minmax(0, 1fr); column-gap: 6px; }
}
/* a touch screen of any width has no keys to show, so a goal that names
   its way in for touch says it here, over the phone's words (the goal's
   `touch`, review of PR #3234: "Tap the minimap") */
@media (hover: none) and (pointer: coarse) {
  body.hud-v2 .wtk .wtk-kc { display: none; }
  body.hud-v2 .wtk .wtk-goal:has(.wtk-touch) .wtk-full,
  body.hud-v2 .wtk .wtk-goal:has(.wtk-touch) .wtk-short { display: none; }
  body.hud-v2 .wtk .wtk-touch { display: inline; }
}
/* A SHORT SCREEN: THE PHONE'S ONE LINE, UNDER THE PHONE'S MAP (#3069 S10,
   audit PH-1). A phone held sideways (540 tall or less) now draws the
   phone's 120 map (world-albion.css, world-map-v2.css): on an 844x390 phone
   it ends, ribbon and all, near y 214, where the painted map used to run to
   y 392 (this note said 232, from before the painted map). So the list comes
   back as the phone draws it, the header and the next thing to do, 176
   wide under the map, clear of the action bar's top (y 290 there); the
   bar's CARDS button, which rode above the bar's right end and under this
   list, moves to its left end on a short screen (world-actionbar.css). Under 380
   tall the bar rises to meet it, so the list stands down there as it did
   everywhere short; its steps still tick, and Nerm's line still reaches
   chat. (The chat panel draws the same line: world-chat-v2.css.) */
@media (max-height: 540px) {
  body.hud-v2 .wtk {
    --hv-k: 1;
    --wtk-row: 16px;
    --wtk-lh: 17px;
    width: 176px;
    gap: 4px;
    padding: 8px 10px;
  }
  body.hud-v2 .wtk .wtk-item:not([data-state='now']),
  body.hud-v2 .wtk[data-mode='first'] .wtk-today,
  body.hud-v2 .wtk .wtk-kc { display: none; }
  body.hud-v2 .wtk .wtk-item { grid-template-columns: 19px minmax(0, 1fr); column-gap: 6px; }
}
@media (max-height: 379px) {
  body.hud-v2 .wtk { display: none; }
}

/* ── NERM'S STRIP STANDS DOWN (#3069 S6) ──────────────────────────────────
   Under the HUD pass Nerm speaks in chat, on the System tab: the tracker's
   lines when a step is done (world-tracker.js) and the beats
   (world-nerm-beats.js), which no longer glow this box or type into it.
   Nothing needs it as a way in any more, so the ambient strip goes: its
   quips about what you clicked were the one place he still talked over
   the world. world-target.js keeps the element and keeps typing into it;
   only the HUD pass hides it, and the old HUD is untouched. */
body.hud-v2 .wt-nerm { display: none; }

/* ── THE QUESTS WINDOW'S FOLD (#3069 S11, ruling 1, option A) ─────────────
   News and Inbox fold into the Quests window as segments (world-windows.js
   quests()). The sheet's body is a flex ROW, so the segmented row and the
   segment under it stand in one column, and the segment scrolls inside it:
   the Leaderboard's own shape (.ww-boardcontent, world-skin.css). Kept here,
   beside the FIRST STEPS rows it opens with, as this slice's only window
   rules; the row itself is the Leaderboard's .ww-boardscope, which
   world-windows-v2.css already draws red and gold. */
body.hud-v2 .ws-sheet .ww-qfold {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.hud-v2 .ws-sheet .ww-qcontent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* THE ROW HOLDS STILL (review of PR #3177). "News 1" going to "News" as it
   was read shrank that button by 17px and the Inbox button jumped left.
   Each segment is as wide as its longest label with a count ("Inbox 12":
   eight cells of Press Start) plus its rims, so a count coming and going
   moves nothing. */
body.hud-v2 .ws-sheet .ww-qbar .ww-boardscope {
  min-width: calc(8ch + 12px + 12 * var(--hv-k, 1) * 1px);
}
/* ...and takes a thumb: the Leaderboard's row is 34 tall, under the 44 a
   touch screen asks (measured 74x34 at 390). The slate tab stretches. */
@media (pointer: coarse) {
  body.hud-v2 .ws-sheet .ww-qbar .ww-boardscope { min-height: 44px; }
}
/* A HANDLE IN THE BODY FACE (review of PR #3177). An inbox row's name was
   drawn in the quest names' blackletter, where "guest-abbe810d8118" blurred
   a into b and 0 into O. world-target.js inboxRow marks it `ww-q-who`. */
body.hud-v2 .ws-sheet .ww-q-row .ww-q-name.ww-q-who {
  font-family: var(--sk-body, 'VT323', monospace);
  font-size: 19px;
  letter-spacing: 0;
}

/* ── FIRST STEPS IN THE QUESTS WINDOW (#3069 S11, WB-18) ─────────────────
   The window is a right dock and covers this list, so while the chapter is
   unfinished its log opens with the same rows (WorldTracker.firstSteps, off
   the same WorldHud value): the same checks, the same lit line, the same
   keycaps, in the window's type size. The header is the log's own
   (.ww-q-head, world-skin.css), so the block reads as the log's first
   section; it is simply first, so it takes no top margin. */
body.hud-v2 .ws-sheet .ww-q-first { margin: 0 0 6px; }
body.hud-v2 .ws-sheet .ww-q-first > .ww-q-head { margin-top: 0; }
body.hud-v2 .ws-sheet .ww-q-steps {
  list-style: none;
  margin: 0;
  padding: 2px 4px 4px;
  display: grid;
  gap: 4px;
}
body.hud-v2 .ws-sheet .ww-q-item {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  font: 400 18px/19px var(--hv-f-vt, 'VT323', monospace);
  color: var(--hv-ink-slate, #d9cdb2);
}
body.hud-v2 .ws-sheet .ww-q-ck {
  width: 19px;
  height: 18px;
  background: url('/assets/ui/kitb/check0.png?v=2026-09-24a') left bottom / 15px 16px no-repeat;
  image-rendering: pixelated;
}
body.hud-v2 .ws-sheet .ww-q-item[data-state='done'] .ww-q-ck {
  background-image: url('/assets/ui/kitb/check1.png?v=2026-09-24a');
  background-size: 19px 18px;
}
body.hud-v2 .ws-sheet .ww-q-item[data-state='now'] { color: #fff3d6; }
body.hud-v2 .ws-sheet .ww-q-item[data-state='now'] .ww-q-ck { filter: brightness(1.6) sepia(.4); }
body.hud-v2 .ws-sheet .ww-q-item[data-state='done'] { color: var(--hv-mute, #8a98aa); }
body.hud-v2 .ws-sheet .ww-q-goal {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hud-v2 .ws-sheet .ww-q-kc {
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  font: 400 8px/8px var(--hv-f-px, 'Press Start 2P', monospace);
  color: var(--hv-ink, #f0e2c6);
  background: #0b1016;
  box-shadow: 0 0 0 2px var(--hv-black, #06080c), inset 0 0 0 2px #56472f;
  margin-right: 2px;
}
body.hud-v2 .ws-sheet .ww-q-item[data-state='done'] .ww-q-kc { opacity: .5; }
@media (hover: none) and (pointer: coarse) {
  body.hud-v2 .ws-sheet .ww-q-kc { display: none; }
}
}
/* end of @layer corners */