/* One sheet of the player's design system (tickets/T19-room-for-two.md).
style.css keeps the fonts, the tokens and the reset; every area has its
own file from there, linked in index.html in this order — the cascade is
the order of the s, not of a bundler. A ticket works in its sheet.
No @import: it serialises the requests, which is the cost being avoided. */
/* ---------- The record's card (tickets/T38-la-fiche-du-morceau.md) ----------
Frame 1491:3615. A panel in from the right, like the account's drawer, with
two differences that are the whole point of it:
1. NO VEIL, and the page is not inert. The account asks for a name and
deserves the room to itself; this card says what is playing, and one
reads it while listening — with the fader, the keys and the clock alive
behind it. What the frame draws is the page, readable, through a card
that is 90 % of the background with the rest blurred.
2. It is a PHOTOGRAPH. What it says was taken at the click and is never
refreshed: about.js holds the record, and the antenna can move on.
Everything else — fixed position, a card in margin, the corner that is a
superellipse where the browser has one — is drawer.css's grammar, and the
comment at the top of that file is where it is explained.
------------------------------------------------------------------------ */
.about {
position: fixed;
/* HUNG ON WHAT IS SEEN, NOT ON THE WINDOW (T66, after T61). A phone covers
the window with its toolbars instead of shortening it: `inset: 0` here was
the WINDOW while the card's height below was read in `dvh`, the PORTHOLE.
The two differ by the height of the toolbars, and since the card is pinned
to the foot of this box, that difference is how far the thumb and the
report sat BELOW the bottom of the screen — reachable only by scrolling a
card that was never meant to scroll. lib/porthole.js writes the measure;
the fallbacks are the `inset: 0` this replaces. */
top: var(--vv-top, 0px);
left: 0;
right: 0;
height: var(--vv-height, 100%);
--vvh: var(--vv-height, 100dvh); /* what a sheet in here is measured against */
/* The ladder: the page is 1, the column and this card are 2, the account's
drawer is 3 and covers whatever is on screen (css/drawer.css). The card and
the column are never both up — the column's arrival closes it (about.js) —
so they share a rung rather than each claiming one. */
z-index: 2;
display: flex;
justify-content: flex-end;
--r-panel: 24px; /* the drawer's name for the same thing, one card smaller */
--pick-h: 32px; /* the thumb's reason chips, on the small key's height (T71) */
}
/* 32 drawn, mouse or finger, like the small key (T71). A chip is a label, not
a .btn: its 48 under a finger is its own veil (below). */
.about[hidden] { display: none; }
.about__card {
position: relative;
display: flex;
flex-direction: column;
/* Everything reads from the top down — the head, the record, its shape —
and the report alone stands at the foot (`.report`'s auto margin, T46). */
justify-content: flex-start;
gap: 24px;
width: min(336px, calc(100vw - 24px)); /* the Jam's card: two cards of a kind, one width (T64) */
margin: 12px;
padding: 24px;
/* Outside `radius/4`, on purpose and like the account's panel: a corner big
enough to read is what tells a card from the page, and DESIGN.md's scale
is for what sits IN a card. The frame draws 24, the drawer carries 28. */
border-radius: var(--r-panel);
corner-shape: squircle;
/* 90 % of the page's own colour, so the card follows the theme instead of
being white in both — and the rest is what the blur brings up. */
background: color-mix(in srgb, var(--bg) 90%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* A hairline first, then the drop: on a dark page a shadow alone is nothing. */
box-shadow: 0 0 0 1px var(--ink-muted), 0 4px 40px rgba(0, 0, 0, 0.06);
overflow: hidden auto;
overscroll-behavior: contain; /* its own bounce stays in it, never the page's (T79) */
scrollbar-width: none;
/* No entrance of its own: it grows out of the key that opened it, the
Jam's glass (lib/glass.js), and goes back into it. */
}
.about__card::-webkit-scrollbar { display: none; }
/* ---------- The head ---------- */
.about__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Body/UI: 14, the size of a section's name in this card — About, and Report
an issue at the foot. Full ink: both are titles, not dimmed states. */
.about__title { font: 500 14px/16px var(--font-ui); letter-spacing: -0.035em; text-box: trim-both cap alphabetic; }
.about__close { display: block; width: 24px; height: 24px; }
.about__close .icon { width: 24px; height: 24px; }
/* ---------- The record it was opened on ---------- */
.about__record { display: flex; align-items: center; gap: 16px; min-width: 0; }
.about__cover {
flex: none;
position: relative;
overflow: hidden;
width: 48px;
height: 48px;
border-radius: var(--radius-sleeve);
/* The stage's own ghost, so a track with no sleeve at the desk is a cover
here too rather than a hole. */
background: var(--sleeve-ghost);
}
.about__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about__art[hidden] { display: none; }
.about__credits { display: grid; gap: 4px; min-width: 0; }
/* The stage's rows, at the card's height: 16, the icon's own. Nothing scrolls
here — the card is a still, and a line travelling in it would be the one
thing in it that moves. What does not fit is cut where it stops. */
.about__credits .track__row { height: 16px; }
.about__credits .track__text { overflow: hidden; text-overflow: ellipsis; }
/* ---------- Not for me (tickets/T63-le-pouce-en-bas.md) ----------
The thumb stands right above the report, and it is the pair that goes to
the foot now: the auto margin moves up to it, the report follows at 12. */
.nope { margin-top: auto; }
.nope + .report { margin-top: 0; }
.nope__key { anchor-name: --nope; }
/* A native popover: the top layer, light dismiss and Escape come with it.
Sat on the key by anchor positioning where there is one; elsewhere the
UA's own place, the middle of the window, which reads just as well. */
.nope__pop {
width: min(275px, calc(100vw - 32px));
padding: 16px;
border: 0;
border-radius: var(--r-panel);
corner-shape: squircle;
background: var(--bg);
color: var(--ink);
box-shadow: 0 0 0 1px var(--ink-muted), 0 8px 40px rgba(0, 0, 0, 0.16);
}
.nope__pop:popover-open { display: grid; gap: 12px; }
@supports (position-area: top) {
.nope__pop {
position-anchor: --nope;
position-area: top span-right;
position-try-fallbacks: flip-block;
margin: 0 0 8px;
}
}
.nope__ask { display: flex; justify-content: space-between; gap: 8px; font: 500 14px/16px var(--font-ui); letter-spacing: -0.035em; }
.nope__opt { font-size: 10px; text-transform: uppercase; }
/* Native radios, dressed as the page's small keys: one reason at most, the
keyboard's arrows between them for free. */
.nope__why { display: flex; flex-wrap: wrap; gap: 6px; }
.nope__chip {
display: inline-flex;
align-items: center;
height: var(--pick-h);
padding: 0 10px;
border-radius: var(--radius);
background: var(--control);
font-size: 12px;
cursor: pointer;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.nope__chip input { position: absolute; opacity: 0; pointer-events: none; }
@media (pointer: coarse) {
.nope__chip { position: relative; }
.nope__chip::before { content: ""; position: absolute; inset: -8px -3px; } /* 32 + 8 + 8 = 48; 3 is half the 6 between chips (T71) */
}
.nope__chip:has(:checked) { background: var(--primary-solid); color: var(--on-primary); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18); }
.nope__chip:has(:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.nope__note {
height: var(--control-height); /* a field: the house field, as the reason is (T64) */
padding: 0 20px;
border: 0;
border-radius: 999px; /* a field one types in: a capsule (T72) */
background: var(--control);
color: var(--ink);
font: 500 14px var(--font-ui);
letter-spacing: -0.02em;
box-shadow: var(--field-up);
transition: box-shadow 120ms ease;
}
.nope__note::placeholder { color: var(--ink); opacity: 0.4; }
.nope__note:focus-visible { outline: none; box-shadow: var(--field-down); }
@media (hover: hover) { .nope__note:not(:focus-visible):hover { box-shadow: var(--field-lift); } }
@media (pointer: coarse) { .nope__note { font-size: 16px; } }
.nope__keys { display: flex; justify-content: flex-end; gap: 8px; }
/* ---------- Report an issue (tickets/T33-quelque-chose-cloche.md) ---------- */
.report { display: grid; gap: 12px; margin-top: auto; }
.report__row { display: flex; align-items: center; gap: 8px; }
/* The send key is a square, not a key with the word taken out, at the
height of the field beside it, so the pair reads as one row. The row is the
small key's 32 (T71): the reason and its key are a foot note of the card,
not a form — 48 made it the loudest thing in it. */
.report { --report-h: 32px; }
.report__row .btn { width: var(--report-h); height: var(--report-h); padding: 0; }
.report__row[hidden] { display: none; }
/* The sent word, in the place the control was: one line, and the card goes.
Its line is the control's height, so the foot does not jump as it replaces it. */
.report__done { font-size: 12px; line-height: var(--report-h); text-transform: uppercase; }
/* The reason is a native