/* HiLo XI — style.css
 *
 * The landing is the family's (shared/xi-landing.css) and the chrome is the
 * family's (shared/xi-chrome.css); this sheet is the game view only: the
 * ladder of two rows, the call buttons, the per-call clock, the answers list
 * and the full-time card. Every colour is a shared token; the one value this
 * game owns is its kit, navy, which the hub gives shirt 4 too.
 */
:root{ --hl-kit:#1F4E79; --hl-kit-ink:#FFFFFF; }

/* THE ONE LINE EVERY OTHER GAME HAS AND THIS ONE DID NOT. Without it the
   browser's default 8px body margin stands, so the chrome bar started eight
   pixels in and the whole page sat in a gutter — the header looked inset and
   the game looked narrower than its siblings. Nothing in this sheet set it
   because the sheet is "the game view only" and a body reset reads like the
   shell's job; the shell does not do it, and four games each do it in their
   own stylesheet. Found by the owner clicking through from the front door. */
/* THE FAMILY'S FACE, SAID OUT LOUD. This was `body{margin:0}` and nothing
   else, so every element that did not name a font inherited the USER AGENT's
   default — Times New Roman — while the headings, which do name var(--disp),
   came out in Barlow Condensed. The page read half condensed sans and half
   serif and nothing in the tree said why: the fonts load here, and every
   fallback chain in xi-tokens.css ends in sans-serif, so there was no failure
   to find. The cascade simply never asked.
   Measured on the live site 17 Sep 2026: getComputedStyle(document.body)
   returned "Times New Roman" for hilo, grid, whoami and ballpark, and
   "Public Sans" for the other six. aligned_test now refuses a game whose
   stylesheet does not set it, so the eleventh cannot arrive in serif. */
body{margin:0;font-family:var(--body)}

.screen[hidden]{display:none!important}
.hidden{display:none!important}

/* ---- the game view ---- */
.game{max-width:1080px;margin:0 auto;padding:12px 16px 40px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
@media (max-width:820px){.game{grid-template-columns:1fr}}

.stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg,10px);padding:16px}
.cat{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 2px;color:var(--ink)}
.cat small{display:block;font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.eyebrow{font-family:var(--disp);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pitch-ink,var(--pitch));margin:0 0 4px}

/* Eleven shirts across the top, one filled per call. */
.ladder{display:grid;grid-template-columns:repeat(11,1fr);gap:5px;margin:12px 0 18px;max-width:440px}
.ladder i{aspect-ratio:1/1.12;border-radius:4px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ink-faint);font-style:normal}
.ladder i.cur{border-color:var(--accent-ink,var(--hl-kit));color:var(--accent-ink,var(--hl-kit))}
.ladder i.ok{background:var(--correct);border-color:var(--correct);color:var(--correct-ink,#fff)}
.ladder i.bad{background:var(--wrong);border-color:var(--wrong);color:var(--wrong-ink,#fff)}

/* The two rows: the pair just called, stamped, and the live pair. Every
   settled row is kept; the list scrolls and holds itself at the newest. */
.rows{display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;max-height:296px;padding-right:4px}
@media (max-width:520px){.rows{max-height:560px}}
@media (prefers-reduced-motion:reduce){.rows{scroll-behavior:auto}}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;flex:0 0 auto}
@media (max-width:520px){.duel{grid-template-columns:1fr;gap:8px}.duel .vs{display:none}}
.player{border:2px solid var(--line);border-radius:12px;padding:18px 16px;text-align:center;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:4px;background:var(--card);
  transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.player .who{font-family:var(--disp);font-weight:700;font-size:clamp(22px,4vw,30px);letter-spacing:.04em;text-transform:uppercase;line-height:1.05;color:var(--ink)}
.player .sub{font-size:13px;color:var(--ink-soft)}
.player .val{font-family:var(--disp);font-weight:700;font-size:clamp(40px,8vw,56px);line-height:1;font-variant-numeric:tabular-nums;color:var(--accent-ink,var(--hl-kit))}
.player .val.q{color:var(--ink-faint)}
.player.known{background:var(--tint)}
.player.ok{border-color:var(--correct);background:var(--correct-bg,var(--tint))}
.player.ok .val{color:var(--correct)}
.player.bad{border-color:var(--wrong);background:var(--wrong-bg,var(--tint))}
.player.bad .val{color:var(--wrong)}
.vs{align-self:center;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.2em;color:var(--ink-faint)}
.duel.settled{opacity:.92;animation:settleIn var(--t-move) var(--ease)}
.duel.settled .player{min-height:0;padding:10px 14px}
.duel.settled .player .who{font-size:clamp(16px,2.6vw,20px)}
.duel.settled .player .sub{display:none}
.duel.settled .player .val{font-size:clamp(24px,4vw,30px)}
.duel.settled .vs{font-size:13px}
.stamp{grid-column:1/-1;display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:-2px;flex-wrap:wrap}
.stamp b{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.16em;text-transform:uppercase}
.stamp span{font-size:12.5px;color:var(--ink-soft)}
.duel.settled.ok .stamp b{color:var(--correct)}
.duel.settled.bad .stamp b{color:var(--wrong)}
@keyframes settleIn{from{opacity:0;transform:translateY(14px)}to{opacity:.92;transform:none}}
@media (prefers-reduced-motion:reduce){.duel.settled{animation:none}}

/* The question in words, then the two faces, each carrying the reference. */
.ask{margin:14px 0 0;text-align:center;font-size:16px;color:var(--ink);text-wrap:balance}
.ask b{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.03em;text-transform:uppercase}
.calls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.call{min-height:64px;padding:8px 10px;border:0;border-radius:12px;background:var(--pitch);color:var(--on-pitch,#fff);font-family:var(--disp);font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.05;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.call b{font-size:26px;font-weight:700}
.call small{font-family:var(--body);font-size:12.5px;font-weight:400;letter-spacing:.02em;text-transform:none;opacity:.9}
.call:hover:not(:disabled){transform:translateY(-2px)}
.call:disabled{opacity:.4;cursor:not-allowed}
.call.lower{background:var(--hl-kit);color:var(--hl-kit-ink)}
.call:focus-visible{outline:none;box-shadow:var(--ring)}
/* Only a timed-out call waits for this; an answered call moves on itself. */
.nextRow{display:flex;justify-content:center;margin-top:10px}
.nextRow .kick{width:auto;min-width:200px}
.kick{min-height:var(--tap);border:0;border-radius:10px;background:var(--pitch);color:var(--on-pitch,#fff);font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.06em;padding:11px 18px;cursor:pointer}
.kick:hover{background:var(--pitch-hover,var(--pitch-deep))}

/* ---- the dugout: this call's clock, the substitutions, the answers ---- */
.dug{display:flex;flex-direction:column;gap:14px;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg,10px);padding:14px 16px;min-width:0}
.card h2{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.clock{display:flex;justify-content:space-between;align-items:flex-end;font-variant-numeric:tabular-nums}
.clock .worth b{display:block;font-family:var(--disp);font-weight:700;font-size:48px;line-height:1;color:var(--pitch-ink,var(--pitch))}
.clock .worth span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.clock .banked{text-align:right}
.clock .banked b{display:block;font-family:var(--disp);font-weight:700;font-size:34px;line-height:1;color:var(--ink)}
.clock .banked span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.bar{height:6px;border-radius:3px;background:var(--tint);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--pitch);width:100%;transition:width 100ms linear}
.bar.low i{background:var(--wrong)}
.subs{display:flex;gap:6px;margin-top:10px;align-items:center;font-size:13px;color:var(--ink-soft)}
.subs i{width:14px;height:14px;border-radius:50%;border:2px solid var(--pitch);display:inline-block}
.subs i.spent{background:var(--ink-faint);border-color:var(--ink-faint)}
.rule{margin-top:10px;font-size:13px;color:var(--ink-soft)}
.rule b{color:var(--ink)}

.sheet{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sheet li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:baseline;font-family:var(--disp);font-size:16px;letter-spacing:.05em}
.sheet li b{text-align:right;font-weight:700;color:var(--ink-faint);font-size:13px}
.sheet li span{color:var(--ink-faint)}
.sheet li em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-faint)}
.sheet li.ok span,.sheet li.ok em{color:var(--correct)}
.sheet li.bad span,.sheet li.bad em{color:var(--wrong)}
.sheet li .src{grid-column:2/-1;font-family:var(--body);font-size:12px;letter-spacing:0;color:var(--ink-soft);line-height:1.4}
/* The page note beside a league-feed link: quieter than the quote, because it
   is a direction to the row rather than a claim about it. */
.sheet li .src .srcPage{color:var(--ink-faint);font-size:11.5px}
.sheet li .src a{color:var(--pitch-ink,var(--pitch))}
.note{font-size:12.5px;color:var(--ink-faint);line-height:1.5}

/* ---- the board's card before kick off, over the stage ---- */
.kickCover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:3;border-radius:var(--r-lg,10px)}
.kickCard{width:min(100%,360px);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pitch);border-radius:8px;padding:14px 16px;box-shadow:var(--shadow-2);text-align:left}
.kickTitle{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--ink);margin-top:2px}
.kickFine{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--ink-faint);max-width:46ch}
.kickFine:empty{display:none}
.kickNote{font-size:13px;color:var(--ink-soft);margin-top:4px;line-height:1.4}
.kickCard .kick{margin-top:12px;width:100%}
.stage{position:relative}

/* ---- full time ---- */
.ft{max-width:520px;margin:0 auto;padding:24px 16px 40px}
/* FULL TIME is the family's panel (shared/xi-fulltime.css); this is only its
   column, and the way back to the menu under it. */
.ftcard{display:flex;flex-direction:column;gap:8px}
#resultMenuBtn{align-self:center;min-height:var(--tap);padding:8px 14px;border:0;background:none;
  color:var(--ink-soft);font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer}

/* ---- previous puzzles, by day (the same drawer the word search uses) ---- */
.archive{margin:0 0 12px;text-align:left}
.arch-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.arch-head .site-sec{margin:0}
.arch-sub{font-size:12px;color:var(--ink-soft)}
.arch-list{list-style:none;margin:8px 0 0;padding:0;max-height:min(52vh,420px);overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.arch-row{display:grid;grid-template-columns:78px 1fr auto;gap:10px;align-items:center;width:100%;min-height:var(--tap);padding:9px 12px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.arch-list li:last-child .arch-row{border-bottom:0}
.arch-row:hover{background:var(--sel-word)}
.arch-row:focus-visible{outline:none;box-shadow:var(--ring)}
.arch-day{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.arch-theme{font-size:14px}
.arch-state{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pitch)}
.arch-row.done .arch-state{color:var(--ink-soft)}
.arch-empty{padding:12px;font-size:13px;color:var(--ink-soft)}

/* ---- how to play, at the foot of the landing ---- */
.how{max-width:1080px;margin:0 auto;padding:8px 20px 40px;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.how h2{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px;padding-bottom:8px;border-top:1px solid var(--line);padding-top:18px}
.how p{margin:0 0 10px;max-width:70ch}
.how b{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:999px;font-family:var(--disp);letter-spacing:.1em;text-transform:uppercase;font-size:14px;opacity:0;transition:opacity var(--t-base) var(--ease);pointer-events:none;z-index:20}
.toast.on{opacity:1}
.legal{font-size:11px;color:var(--ink-faint);margin:16px 0 0;line-height:1.5}

/* The rule that settles the awkward cases, on the daily hero. The same
   quiet weight the cover gives it — this is the daily's cover, since the
   hero starts the round with no cover in between — and it collapses when a
   board's subtitle is one sentence and there is no rule to say. */
.hc-fine {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-faint);
  max-width: 46ch;
}
.hc-fine:empty { display: none; }
/* ON GREEN, NOT ON PAPER. --ink-faint is the family's quiet ink for the
   page's paper; on the pitch-green hero it renders as dark green on green and
   cannot be read at all. The hero has its own token for quiet text and every
   other line in it already uses it — this one was written to the wrong
   surface, and only looking at it showed that. */
.home-choice.hero .hc-fine { color: var(--on-pitch-soft); opacity: .85; }

/* A DAY BEHIND THE FREE WINDOW. Shown rather than hidden: what is behind the
   lock is the reason to register, and a row that vanished would say nothing. */
.arch-row.locked{opacity:.62}
.arch-row.locked .arch-state::after{content:" 🔒"}

/* FULL TIME: THE LADDER AND THE ANSWERS STAY, THE CONTROLS GO. The settled
   calls and the eleven with their sources are the record of what was just
   played, and they used to be hidden the instant the last call landed. What
   is taken away is everything belonging to a round in progress. */
.screen.finished #live,
.screen.finished .calls,
.screen.finished .nextRow,
.screen.finished .ask,
.screen.finished .rule { display: none; }

/* Whether the score above was the server's. Quiet: it is a note about the
   number, not part of it, and it is empty on a round nothing could verify. */
.ft .line.verified { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.ft .line.verified:empty { display: none; }

/* Where the shared challenge draws its button and, for a round that came from
   one, its standings. The panel itself is shared — .xic-panel and .xic-ch-* in
   shared/xi-chrome.css — and this is only the space it sits in on this game's
   Full Time card. */
.ftChallenge { margin-top: 14px; }
.ftChallenge:empty { display: none; }

/* ---- THE LOCKED SCREEN ----------------------------------------------------

   The owner's ruling, 24 Sep 2026: while playing, the page is the screen and
   nothing scrolls, at every size, with the elements scaling up. body.locked is
   set by game.js checkRoom() while the game screen is up, and taken off when
   the stage cannot hold what it must (large text, a very short screen).

   On a phone: the stage, then this call's clock as a strip under it. In the
   stage the settled calls and the live pair share one panel that scrolls in
   itself and sits at its newest; the live pair is side by side and sized in
   units of that panel, so a taller screen gets bigger faces rather than empty
   paper. The eleven, the source line and the table are a column of their own
   where there is room for one. Full Time keeps the board and puts the result
   in a panel under it, or beside it on a wide screen. */
/* The family's top bar stands in for this call's clock, worth, banked and
   substitutions card (shared/xi-matchbar.css). */
.dug>.card:first-child{display:none}
body.locked #screenGame>#xiBar{flex:none;margin-top:6px}
body.locked{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.locked>*{flex:none}
body.locked>footer{display:none}
body.locked>.app{flex:1 1 auto;min-height:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;margin:0}
body.locked .app>:not(#screenGame):not(#screenResults){display:none}
body.locked #screenGame{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.locked .game{flex:1 1 auto;min-height:0;width:100%;box-sizing:border-box;padding:6px 10px 8px;gap:8px;
  align-items:stretch;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  grid-template-areas:"stage"}

body.locked .stage{grid-area:stage;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:10px 12px}
body.locked .stage>:not(.rows){flex:none}
body.locked .eyebrow{display:none}
body.locked .ladder{margin:6px 0 8px}
/* PACKED FROM THE TOP, AND THE LIVE PAIR TAKES WHAT THE HISTORY DOES NOT.
   The owner, 25 Sep 2026: "quite a bit of white space at the top ... the
   active box is massive compared to the answered ones". The panel was pushed
   to the foot of the card with the live pair a fixed 58% of it, so the first
   call stood a quarter of the screen empty above two cards of 280px mostly
   empty inside. Packing it from the top moved that space under the game (a
   third of the screen, found in the app the same day), and the owner's
   answer was to grow the live cards early: they take whatever the settled
   rows leave, and shrink toward their floor as the answers stack up. Their
   type is sized from the card itself, so a tall card is a big card, not an
   empty one. Once the history is longer than the screen allows, the panel
   scrolls in itself, the live pair at its foot at its floor. */
body.locked .stage{box-sizing:border-box}
body.locked .rows{flex:1 1 auto;min-height:0;max-height:none;display:flex;flex-direction:column}
body.locked .rows>*{flex:none}
body.locked .rows>:first-child{margin-top:0}
body.locked .rows>.duel.live{flex:1 0 auto}
body.locked .duel{grid-template-columns:1fr auto 1fr;gap:8px}
body.locked .duel .vs{display:block}
body.locked .duel.live .player{min-height:clamp(96px,20vh,190px);padding:8px;container-type:size}
body.locked .duel.live .player .who{font-size:clamp(16px,min(13cqw,11cqh),56px)}
body.locked .duel.live .player .val{font-size:clamp(30px,min(34cqw,26cqh),170px);line-height:1}
body.locked .duel.live .player .sub{font-size:clamp(11px,min(7.4cqw,6cqh),22px)}
body.locked .ask{margin:8px 0 0}
body.locked .calls{margin-top:8px}
body.locked .call{min-height:max(56px,7vh)}
/* A SHORT SCREEN with the old-link banner up: the family's top bar and the
   banner together left the live pair 40px short of its panel at 360x640. The
   pair goes to its floor and the calls give a little. */
@media (max-height:700px){
  body.locked .duel.live .player{min-height:96px}
  body.locked .call{min-height:46px}
  body.locked .ask{margin-top:4px}
  body.locked .calls{margin-top:4px}
  body.locked .ladder{margin:4px 0 4px}
}

/* The context under a name is two lines at most while the pair is live: it
   runs to 77 characters in the bank and at four lines it pushed the pair out
   of its panel on a 360x640 phone. */
body.locked .duel.live .player .sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* NO STRIP UNDER THE GAME. It was this call's card redrawn as a row -- on
   offer, banked, the substitutions and the call's countdown -- and every one
   of those is in the family's top bar as Worth, Score, Subs and Clock. The
   owner, 26 Sep 2026: "Remove the duplicates". On a phone the rest of the
   dugout is hidden while playing, so the dugout goes with it. */
body.locked .dug{display:none}
@media (max-height:700px){
  body.locked .cat small{font-size:12px}
  body.locked .ask{font-size:13.5px;margin-top:4px}
  body.locked .ask b{font-size:15px}
}

/* FULL TIME IS THE FAMILY'S SHEET OVER THE BOARD (the owner, 30 Sep 2026:
   "Hilo is not a pop up, it's added to the bottom of the page").
   #screenResults is data-xft-host, so shared/xi-fulltime.css draws it as the
   card in the middle of the screen, and the finished board stays where it was
   played, under it, at every size. */

@media (min-width:821px){
  body.locked .game{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);
    grid-template-areas:"stage dug";max-width:1180px;margin:0 auto}
  body.locked .dug{display:flex;grid-area:dug;min-height:0;overflow:auto;gap:14px}
}

/* HOW TO PLAY, ON A LOCKED SCREEN. The bar's "How to play" goes to #how, and
   while the play screen is locked that section is hidden with the rest of the
   landing -- so the link did nothing mid-game (found 24 Sep 2026, the day the
   screens were locked). As its target it opens over the game instead, a panel
   the height of the screen that scrolls in itself, with the way back at the
   top; leaving the target closes it. The page under it never scrolls. */
.how-back{display:none}
body.locked #how:target{display:block!important;position:fixed;inset:0;z-index:60;margin:0;max-width:none;
  overflow:auto;overscroll-behavior:contain;background:var(--paper);padding:14px 16px 40px;box-sizing:border-box}
body.locked #how:target .how-back{display:inline-flex;align-items:center;min-height:var(--tap,44px);padding:0 16px;
  margin:0 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font-family:var(--disp);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

/* THE CALL'S LEVEL, under the V (the owner, 30 Sep 2026): Easy, Medium or
   Hard, how close the two values are. The family's own colours: the ok green,
   the gold, the danger red, each as a tint with its word in the full colour. */
.vs .tier{display:block;margin:4px auto 0;width:max-content;padding:1px 7px;border-radius:999px;
  font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
.vs .tier-easy{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.vs .tier-medium{color:var(--xi-ink);background:color-mix(in srgb,var(--gold) 22%,transparent)}
.vs .tier-hard{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
/* THE GAP, under the level: the size of the difference, never its direction
   (the owner, 2 Oct 2026). In the V column where it shows; in the question
   line on a narrow unlocked screen, where the V column does not. */
.vs .gap{display:block;margin:3px auto 0;width:max-content;max-width:9em;font-family:var(--body);font-weight:600;
  font-size:11px;letter-spacing:0;text-transform:none;line-height:1.25;color:var(--ink-soft);white-space:normal;text-align:center}
.ask .askGap{display:none;color:var(--ink-soft);font-weight:600}
@media (max-width:520px){ body:not(.locked) .ask .askGap{display:inline} }