/* Tavern Chronicle lobby sticky note (always-visible link → /chronicle).
Standalone stylesheet loaded by the terminal layout. Kept OUT of the
terminal/ bundle on purpose so the lobby affordance doesn't grow the
terminal CSS rule-block count. Reuses the .postit visual classes; only
the in-flow sizing, the collapsed state and the dismiss target live here.
Layers on: terminal — layouts/terminal.html.erb links this after
terminal.css + terminal_2.css, so their tokens are on the page (#15539). */
/* THE NOTE IS IN NORMAL FLOW, NOT FIXED (#16284).
===============================================
Until 2026-09-20 this was a viewport-fixed card rendered from the layout's
body-level #postit-portal, anchored `left: 1rem; bottom: calc(hotbar +
min(42vh, 320px) + 1rem)`. Prod-play 2026-09-19 (desktop/07-terminal-ready.png,
1440x900) found it sitting on the lobby's third quick-action card ("See all
commands /help") and the GERARD speaker label — the primary onboarding surface
— and, being a visible `pointer-events: auto` card, eating their clicks. It
never auto-dismissed either.
That was the FOURTH time this one card collided with a control, and each
previous fix was another offset or another gate on the fixed card:
#10569 lifted it clear of the action dock (bottom offset)
#11411 hid it outside the lobby with a `body:has(.terminal-container:not(
[data-room="lobby"]))` room gate, after the dock moved (#11391)
#15872 hid it while the /quick_start swipe deck was mounted
A fixed element is out of flow, so every anchor lands on SOME interactive
surface at SOME viewport, and every panel underneath is interactive. The
structural answer is to stop being out of flow: the note now renders from
`terminal/panels/narrative/_chronicle_note.html.erb` INSIDE `.lobby-scene`,
after the quick-action cards and before the first DM line, so the layout
engine places the cards above it and the DM line below it. It cannot occlude
anything, by construction, at any viewport.
Phones: the note is still ABSENT under 768px, by the `.postit` atom's own
`display: none !important` (atoms/_postit.css, #4276 — JP: "don't
compact/stack, fully remove from layout flow on narrow viewports"). The
duplicate `@media (max-width: 767px)` hide this file used to carry is gone
because the atom already decides it; this file does not re-decide it either
way. The chronicle stays reachable at /chronicle directly.
What that made unnecessary, and why it is not here any more:
- The #11411 room gate. `.lobby-scene` only renders in the lobby, so the
SERVER is the single source of the room rule — #11416's "they must agree by
construction" is met by having one copy. There is no second copy to drift.
The seamless transition back into the lobby also re-renders the note with
the lobby HTML (the portal copy was wiped on that path and never restored,
#11412).
- The #15872 quick-start gate. The deck is appended to the narrative output
after the lobby scene; two in-flow siblings cannot overlap.
- The `.input-area` offset and its "keep in sync" coupling.
The dismiss-target block below (#11416) is unchanged: the X is still what
makes a card acceptable, and it still has to be pressable.
Guarded by spec/views/terminal/chronicle_note_spec.rb (no out-of-flow
positioning may come back; the note renders from the lobby scene, not the
portal) and e2e/tests/lobby-chronicle-note-overlap-16284.spec.js (real
bounding boxes at 1440x900 and 390x844). */
.chronicle-note {
/* `.postit` (atoms/_postit.css) already gives `position: relative` and
`display: inline-flex`; nothing here may set fixed/absolute/sticky. */
margin: var(--space-4, 1rem) 0 var(--space-2, 0.5rem) var(--space-4, 1rem);
width: 13rem;
/* Never wider than the scene: the tilt below needs a little slack on each
side, and a phone-width column must not scroll horizontally. */
max-width: calc(100% - 2 * var(--space-4, 1rem));
text-decoration: none;
cursor: pointer;
/* A gentler tilt than the fixed card's 2deg: in flow, a rotated box pokes
~3px past its own margin box at the corners, and the margins above/below
absorb that so it still cannot reach the cards or the DM line. */
transform: rotate(1deg);
transition: transform var(--timing-fast, 120ms) var(--ease-default, ease);
}
.chronicle-note:hover {
transform: rotate(1deg) translateY(-3px) scale(1.03);
text-decoration: none;
}
/* Inner link carries the clickable card content; the wrapper owns the
.postit visual + the dismiss button. Reset link styling so the card looks
unchanged from the previous single- markup. */
.chronicle-note__link {
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.chronicle-note__link:hover { text-decoration: none; }
.chronicle-note .postit__command { cursor: pointer; }
/* AUTO-COLLAPSE (#16284) — the "never auto-dismisses" half of the ticket.
===================================================================
`terminal--postit` adds `postit--collapsed` after `auto-collapse-ms`
(8s on the lobby note) — CLASS-ONLY, no inline style (#16064). The card
folds to a single line: title + "Read the chronicle →", still a link, still
dismissable. Collapse rather than dismiss: dismissal is remembered in
localStorage and would make the chronicle undiscoverable for the rest of the
player's life on this browser (CONSTRAINT: keep the link discoverable). The
fold is a reflow, not a motion, so it needs no reduced-motion branch. */
.chronicle-note.postit--collapsed {
width: auto;
max-width: calc(100% - 2 * var(--space-4, 1rem));
padding: var(--space-2, 0.5rem) 44px var(--space-2, 0.5rem) var(--space-3, 0.75rem);
transform: none;
}
.chronicle-note.postit--collapsed:hover {
transform: translateY(-2px);
}
.chronicle-note.postit--collapsed .postit__body {
display: none;
}
.chronicle-note.postit--collapsed .chronicle-note__link {
display: inline-flex;
align-items: baseline;
gap: var(--space-2, 0.5rem);
flex-wrap: wrap;
}
.chronicle-note.postit--collapsed .postit__title {
margin: 0;
}
/* DISMISS TARGET — the affordance that makes covering acceptable (#11416).
======================================================================
JP, 2026-08-21: "it's allowed to cover stuff since it is dismissable
(though the X could be bigger)." The note is deliberately a visible,
`pointer-events: auto`, viewport-fixed card, so the X is the ONLY escape
from whatever it lands on. A 16x16 escape hatch does not carry that weight.
Measured on this file's own markup in Firefox ESR 140.13.0 (the browser JP
filed from) @ 1280x600, by sampling EVERY pixel of the button's bounding box
with elementFromPoint and counting the ones that actually hit-test to the
button. Sampling, not getBoundingClientRect, because the card carries
`transform: rotate(2deg)`: a rect probe reports the axis-aligned bounding
box, which for a rotated square is both too big and includes corners that
belong to whatever is behind it.
before 16 x 16 declared 258 px^2 clickable largest square 15 x 15
after 44 x 44 declared 1920 px^2 clickable largest square 41 x 41
7.4x the clickable area. The 16 px^2 short of a nominal 1936 is the rotation
slivers at the corners falling past the card edge, and 41 rather than 44 is
the largest AXIS-ALIGNED square inscribed in a square rotated 2 degrees —
both are properties of the tilt, not of the target. Area is preserved under
rotation, so the 44x44 floor (WCAG 2.5.5 / 2.5.8) is genuinely met; the
axis-aligned figure is recorded here so the next person to measure it does
not read 41 as a regression.
THE TARGET IS ANCHORED INSIDE THE CARD, NOT INFLATED AROUND THE GLYPH.
The obvious idiom here is `_base.css`'s transparent `::before { inset: -Npx }`
hit expansion, and it is the WRONG one for this element: the glyph sits at
`top: 4px; right: 6px`, so growing 16 -> 44 symmetrically pushes 10px above
and 8px past the card's top-right corner — an invisible, click-eating region
floating over the narrative panel. That is the exact defect class this note
has already caused twice (#10569, #11411: elementFromPoint over a control
returning a post-it). Instead the button is pinned to `top: 0; right: 0` and
given the full 44x44 corner, with the glyph held in its old visual position
by padding + flex alignment. The card does not grow, nothing overflows it,
and the note's own bounding box is unchanged.
Costs ~8% of the card's click area (1936 of ~24,300 px^2) to the link. That
is the trade JP asked for: the X is what makes covering acceptable.
SCOPE IS DELIBERATE. `.postit__dismiss` in `terminal/atoms/_postit.css` is
still 16x16 for every other post-it. That is a real WCAG 2.5.8 gap, but the
sibling post-its ship inside `postit-group--stripped` (display:none, #3731)
and the `scene_hints_controller.js` cards are 180px wide, where a 44px corner
takes 24% of the width — a visual change that needs its own measurement, not
a drive-by. Do not read the narrow selector as an oversight.
The resting `opacity: 0` (reveal on `.postit:hover`) is inherited from the
atom and kept — but an invisible control is unusable by keyboard, so
`:focus-visible` both reveals it and rings it. The offset is NEGATIVE: the
button is flush with the card corner, so an outward ring would draw onto the
panel behind it. */
.chronicle-note .postit__dismiss {
top: 0;
right: 0;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
/* Hold the glyph where the 16x16 button used to put it: hard against the
card's top-right corner, so enlarging the target does not move the X. */
align-items: flex-start;
justify-content: flex-end;
padding: 4px 6px 0 0;
/* Proportionate to the new target — JP asked for a bigger X, not just a
bigger invisible box. 14px -> 18px reads as bigger without crowding a
208px-wide card. */
font-size: 18px;
border-radius: var(--postit-radius, 2px);
/* MEASURED, NOT ASSUMED (#11416). At 16x16 the button cleared the card's text
entirely, so nothing here needed a stacking rule. At 44x44 it overlaps
`.postit__title` and `.postit__body`, and a grid scan of every pixel in the
target found 451 of them hit-testing to that TEXT rather than to the button
(postit__body 416, postit__title 35) — 1571 of a nominal 1936 px^2 usable,
i.e. a control that measures 44x44 and is not clickable across a fifth of
itself. That is the same false-green shape as #11411, where the dock was
"visible, enabled and stable" and still could not be clicked.
`var(--z-raised)` — the scale's "just above siblings" layer, value 1 — lifts
the button over the in-flow link content inside `.postit`'s own stacking
context; it does NOT escape that context, so the note's position relative to
the rest of the page is untouched. The token is not decoration: the
`z_index_literals` ratchet is BLOCKING at 0, and it counts the raw form in a
COMMENT as readily as in a declaration — this comment tripped it once. */
z-index: var(--z-raised, 1);
}
.chronicle-note .postit__dismiss:focus-visible {
opacity: 1;
outline: 2px solid var(--focus-ring-color, #ffd700);
outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
.chronicle-note,
.chronicle-note:hover { transform: rotate(1deg); }
.chronicle-note.postit--collapsed,
.chronicle-note.postit--collapsed:hover { transform: none; }
}