/* Quadra's components, the Screening direction (docs/design/README.md).
   Built on tokens.css only: no colour, size or duration is written here that a token holds.
   Every class starts with q- so this sheet can live beside app.css while the screens move over
   one at a time. Every symbol is a Lucide icon (principle 6), never an emoji. */

/* ---------- base ---------- */
.q-base { font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.5; color: var(--ink); background: var(--surface);
  -webkit-tap-highlight-color: transparent; font-optical-sizing: auto; }
.q-base :focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
.q-i { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.22em; }
.q-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q-eyebrow { font: 600 var(--t-label)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.q-meta { font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); margin: 0; }
.q-num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.q-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--hit); padding: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--raised); color: var(--ink); box-shadow: var(--shadow-1);
  font: 600 var(--t-body-strong)/1.2 var(--font-sans); text-decoration: none; text-align: center; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-ui), background var(--dur-press); }
.q-btn:active { transform: scale(0.97); }
.q-btn:disabled, .q-btn[aria-disabled="true"] { opacity: var(--disabled); cursor: default; transform: none; }
.q-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.q-btn--quiet { background: transparent; border-color: transparent; box-shadow: none; padding-inline: 10px; }
.q-btn--danger { color: var(--danger); }
.q-btn--small { font-size: var(--t-small-strong); padding: 8px 14px; }
.q-btn--block { width: 100%; }
.q-iconbtn { display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); padding: 0; border-radius: var(--radius-round);
  border: 1px solid var(--line); background: var(--raised); color: var(--ink); cursor: pointer; flex: none; }
.q-iconbtn .q-i { width: 20px; height: 20px; }

/* ---------- chips: a deck to focus on, a filter ---------- */
.q-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.q-chips::-webkit-scrollbar { display: none; }
.q-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 6px 14px 6px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-m); background: var(--raised); color: var(--ink); font: 600 var(--t-small-strong)/1.2 var(--font-sans); white-space: nowrap; cursor: pointer; }
.q-chip__name { max-width: min(56vw, 240px); overflow: hidden; text-overflow: ellipsis; }
.q-chip__count { font-size: var(--t-label); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.q-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.q-chip[aria-pressed="true"] .q-chip__count { color: inherit; opacity: 0.75; }
.q-chip[aria-pressed="true"] .q-i { color: var(--love); }

/* ---------- the mark (mark.js): still, or swiping out, each colour in its own direction ---------- */
.q-mark { overflow: visible; flex: none; }
.q-mark path { transform-box: fill-box; transform-origin: center; }
.q-mark__love { fill: var(--love); }
.q-mark__want { fill: var(--want); }
.q-mark__meh, .q-mark__nope { fill: currentColor; fill-opacity: 0.22; }
.q-mark--out path { animation: 3.2s var(--ease-ui) infinite both; }
.q-mark--out .q-mark__love { animation-name: q-out-r; }
.q-mark--out .q-mark__want { animation-name: q-out-u; }
.q-mark--out .q-mark__meh { animation-name: q-out-l; }
.q-mark--out .q-mark__nope { animation-name: q-out-d; }
@keyframes q-out-r { 0%, 12% { transform: none; opacity: 1; } 26% { transform: translate(30px, -3px) rotate(16deg); opacity: 0; } 80% { transform: scale(0.5); opacity: 0; } 92%, 100% { transform: none; opacity: 1; } }
@keyframes q-out-u { 0%, 26% { transform: none; opacity: 1; } 40% { transform: translateY(-30px); opacity: 0; } 80% { transform: scale(0.5); opacity: 0; } 92%, 100% { transform: none; opacity: 1; } }
@keyframes q-out-l { 0%, 40% { transform: none; opacity: 1; } 54% { transform: translate(-30px, -3px) rotate(-16deg); opacity: 0; } 80% { transform: scale(0.5); opacity: 0; } 92%, 100% { transform: none; opacity: 1; } }
@keyframes q-out-d { 0%, 54% { transform: none; opacity: 1; } 68% { transform: translateY(30px); opacity: 0; } 80% { transform: scale(0.5); opacity: 0; } 92%, 100% { transform: none; opacity: 1; } }

/* ---------- pictures: a poster, or its cover art (coverart.js) when it has none ---------- */
.q-pic { display: block; position: relative; overflow: hidden; color: var(--on-poster); background: linear-gradient(155deg, var(--c1, var(--sunk)), var(--c2, var(--line))); }
.q-pic > img, .q-pic > .q-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a source's own clip in the details sheet (R13); on the card it is R7's .q-card__clip */
.b-clip__v { display: block; width: 100%; max-height: 70vh; border-radius: var(--radius-m); background: var(--sunk); }
.q-pic::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--poster-edge); pointer-events: none; }

/* Cover art that lives (coverart.js): only on a picture marked alive, the top card, and never
   under reduce motion. Slow, soft, nothing faster than one change a second. */
.q-pic--alive .q-a-twinkle { animation: q-twinkle 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.q-pic--alive .q-a-pulse { animation: q-pulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; animation-delay: var(--d, 0s); }
.q-pic--alive .q-a-drift { animation: q-drift 9s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.q-pic--alive .q-a-sway { animation: q-sway 7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; animation-delay: var(--d, 0s); }
.q-pic--alive .q-a-spin { animation: q-spin 8s linear infinite; transform-box: fill-box; transform-origin: center; }
.q-pic--alive .q-a-eq { animation: q-eq 1.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; animation-delay: var(--d, 0s); }
.q-pic--alive .q-a-sweep { animation: q-sweep 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.q-pic--alive .q-a-bob { animation: q-bob 2.4s ease-in-out infinite; }
@keyframes q-twinkle { 50% { opacity: 0.25; } }
@keyframes q-pulse { 50% { transform: scale(1.06); } }
@keyframes q-drift { to { transform: translate(6px, -8px); } }
@keyframes q-sway { to { transform: skewX(4deg); } }
@keyframes q-spin { to { transform: rotate(360deg); } }
@keyframes q-eq { from { transform: scaleY(0.55); } }
@keyframes q-sweep { 50% { opacity: 0.4; } }
@keyframes q-bob { 50% { transform: translateY(-4px); } }

/* ---------- the room and the swipe card: the picture is the card ---------- */
.q-swipe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100%; min-height: 0; isolation: isolate; }
.q-room { position: absolute; inset: -48px; z-index: -1; pointer-events: none; opacity: var(--room); transition: background var(--dur-room) var(--ease-ui);
  background: radial-gradient(60% 45% at 30% 35%, var(--c1, transparent) 0%, transparent 70%), radial-gradient(60% 50% at 75% 65%, var(--c2, transparent) 0%, transparent 72%); }
.q-room > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(48px) saturate(1.3); transform: scale(1.2); }
.q-stack { position: relative; min-height: 0; width: 100%; max-width: var(--card-max); justify-self: center; }
.q-card { position: absolute; inset: 0; display: grid; overflow: hidden; border-radius: var(--radius-l); background: var(--raised); box-shadow: var(--shadow-card);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; transition: transform var(--dur-card) var(--ease-ui), opacity var(--dur-card) var(--ease-ui); }
.q-card--dragging { transition: none; cursor: grabbing; }
.q-card--next { transform: translateY(12px) scale(0.95); opacity: 0.9; pointer-events: none; }
.q-card > .q-pic { grid-area: 1 / 1; }
.q-card > .q-pic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 34%, var(--poster-shade) 92%); pointer-events: none; }
.q-card__info { grid-area: 1 / 1; align-self: end; position: relative; z-index: 3; display: grid; gap: 6px; padding: var(--space-5) var(--space-4) var(--space-4); color: var(--on-poster); }
.q-card__deck { display: flex; align-items: center; gap: 6px; font: 600 var(--t-label)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.q-card__title { font: 800 var(--t-poster)/0.95 var(--font-sans); font-stretch: 75%; text-transform: uppercase; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.q-card__title--long { font-size: var(--t-title-1); line-height: 1.02; }
.q-card__meta { font-size: var(--t-small); opacity: 0.9; margin: 0; }
.q-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.q-facts > * { font-size: var(--t-small); line-height: 1.3; background: var(--sunk); color: var(--ink); border-radius: var(--radius-s); padding: 2px 8px; }
.q-card__info .q-facts > * { background: var(--poster-chip); color: var(--on-poster); }
/* a trailer's or a song's play button, and a song's mute, at the card's top right */
.q-card__tools { position: absolute; z-index: 3; top: var(--space-4); right: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.q-card__tools .q-card__play { display: grid; place-items: center; width: var(--hit-answer); height: var(--hit-answer); padding: 0;
  border: 1px solid var(--poster-edge); border-radius: var(--radius-round); background: var(--poster-chip); color: var(--on-poster); cursor: pointer; }
.q-card__tools .q-card__play .q-i { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
.q-card__tools .b-audio.playing .q-card__play { background: var(--love); border-color: var(--love); color: var(--on-love); }
.q-card__tools .b-audio.playing .q-card__play .q-i { margin-left: 0; }
.q-card__tools .q-card__audio { display: contents; }
.q-card__tools .q-card__mute { border-color: var(--poster-edge); background: var(--poster-chip); color: var(--on-poster); }
.q-card__text { margin: 0; font-size: var(--t-small); line-height: 1.4; opacity: 0.92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
/* the Feed's and Today's 10's cards say their deck (a link), a discovery offers a Join */
.q-card__from { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; }
a.q-card__deck { min-width: 0; padding-block: 10px; margin-block: -10px; color: inherit; text-decoration: none; }
.q-card__deck > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-card__deck > .q-i { width: 14px; height: 14px; }
.q-card__join, .q-card__joined { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--poster-edge);
  border-radius: var(--radius-m); background: var(--poster-chip); color: var(--on-poster); font: 600 var(--t-small-strong)/1.2 var(--font-sans); cursor: pointer; }
.q-card__joined { border-color: transparent; cursor: default; }
.q-card__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.q-card__taste { background: var(--sunk); }
/* a place without a photo: its dotted map with its pin, at the top of its cover art */
.q-card__map { grid-area: 1 / 1; align-self: start; justify-self: start; position: relative; z-index: 2; width: min(56%, 220px); margin: var(--space-4);
  padding: 6px; border-radius: var(--radius-m); background: var(--poster-chip); pointer-events: none; }
.q-card__map canvas { display: block; width: 100%; aspect-ratio: 2 / 1; --map-land: var(--map-on-poster); }
/* a still press grows a heart, then it is strong love */
.q-card__hold { position: absolute; left: 50%; top: 42%; z-index: 6; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: var(--radius-round); background: var(--love); color: var(--on-love); box-shadow: var(--shadow-card); opacity: 0; transform: scale(0.4); pointer-events: none; }
.q-card__hold .q-i { width: 40px; height: 40px; }
.q-card--holding .q-card__hold { animation: q-heart 370ms linear forwards; }
@keyframes q-heart { to { opacity: 0.94; transform: scale(1); } }
.q-card { -webkit-touch-callout: none; }
.q-card:focus { outline: none; }
.q-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.q-card--leaving { pointer-events: none; }
.q-card--enter { animation: q-enter var(--dur-card) var(--ease-ui) both; }
@keyframes q-enter { from { opacity: 0; transform: translateY(24px) scale(0.9); } }
/* a picture far from the frame's shape shows whole, on a blurred copy of itself */
.q-pic > .q-pic__bg { display: none; }
.q-pic--fit > .q-pic__img { object-fit: contain; }
.q-pic--fit > .q-pic__bg { display: block; filter: blur(22px) saturate(1.2) brightness(0.72); transform: scale(1.2); }
.q-stamp { position: absolute; z-index: 4; top: var(--space-5); padding: 4px 10px; border: 3px solid currentColor; border-radius: var(--radius-s); background: var(--raised);
  font: 800 var(--t-title-3)/1.1 var(--font-sans); font-stretch: 75%; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; }
.q-stamp--r { left: var(--space-4); color: var(--love-ink); transform: rotate(-8deg); }
.q-stamp--l { right: var(--space-4); color: var(--meh); transform: rotate(8deg); }
.q-stamp--u { left: 50%; top: auto; bottom: 45%; color: var(--want-ink); transform: translateX(-50%) rotate(-3deg); }
.q-stamp--d { left: 50%; color: var(--ink-2); transform: translateX(-50%) rotate(3deg); }
.q-stamp--q { left: 50%; top: 40%; color: var(--ink-2); transform: translateX(-50%) rotate(-2deg); }
.q-stamp { max-width: calc(100% - 2 * var(--space-5)); overflow: hidden; text-overflow: ellipsis; }

/* ---------- the swipe screen: its decks on top, the stage, the line after a swipe, the answers ---------- */
.q-swipe__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-2); }
.q-swipe__head > .q-chips { flex: 1; min-width: 0; }
.q-swipe__tools { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.q-streak b { font-variant-numeric: tabular-nums; }
.q-streak.on .q-i { color: var(--want-ink); }
.q-streak.pop .q-i { animation: q-pop 600ms var(--ease-ui); }
@keyframes q-pop { 40% { transform: scale(1.4); } }
.q-swipe__stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; padding: var(--space-2) var(--space-4) 0; }
.q-swipe__linev { position: absolute; inset: 0; pointer-events: none; }
/* a tall screen (a tablet upright) keeps a card shaped like a poster, centred */
.q-swipe__stage > .q-stack { height: 100%; max-height: calc(var(--card-max) * 1.6); align-self: center; }
/* up and down: the line beside the card (on a phone, over its right edge) */
.q-swipe__stage .q-line--v { right: max(var(--space-1), calc((100% - var(--card-max)) / 2 - 72px)); }
.q-swipe__say { display: grid; align-items: center; justify-items: center; min-height: 52px; padding: 0 var(--space-4); }
.q-swipe__say > .fb { width: 100%; max-width: var(--card-max); }
.q-swipe--ended .q-pad, .q-swipe--ended .q-line { display: none; }
.q-pad--offering { padding-inline: var(--space-4); }
.q-pad--offering > .q-btn { max-width: var(--card-max); }
.q-answer[hidden] { display: none; }
.q-answer__near { display: block; }
/* on a computer each answer wears its key, learned or not (README section 8): from the desktop's
   width, or wherever a mouse or a trackpad points */
.q-answer__key { display: none; }
@media (min-width: 1024px), (hover: hover) and (pointer: fine) {
  .q-answer__key { position: absolute; z-index: 1; top: -6px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--raised); color: var(--ink-2); box-shadow: 0 1px 0 var(--line-strong);
    font: 700 var(--t-label)/1 var(--font-sans); }
}
.fb-th > .q-art { width: 100%; height: 100%; }
.done .q-cell { text-align: start; }

/* ---------- a card's details, full screen: the card grown, then everything else ---------- */
.q-details { position: absolute; inset: 0; z-index: 60; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--surface); color: var(--ink);
  font-size: var(--t-body); line-height: 1.5; transform: translateY(100%); transition: transform var(--dur-ui) var(--ease-ui); }
.q-details--on { transform: none; }
.q-details:focus { outline: none; }
.q-details__scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.q-details__media { position: relative; display: grid; height: min(64dvh, 150vw); background: var(--screen); color: var(--on-poster); overflow: hidden; }
.q-details__media > .q-pic { grid-area: 1 / 1; }
.q-details__media > .q-pic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, var(--poster-shade) 94%); pointer-events: none; }
.q-details__info { grid-area: 1 / 1; align-self: end; position: relative; z-index: 3; display: grid; gap: 6px; justify-items: start;
  padding: var(--space-5) max(var(--space-4), calc((100% - 44rem) / 2)) var(--space-5); }
.q-details__title { margin: 0; font: 800 var(--t-poster)/0.95 var(--font-sans); font-stretch: 75%; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.q-details__info .lvl { background: var(--poster-chip); color: var(--on-poster); }
.q-details__play { grid-area: 1 / 1; place-self: center; position: relative; z-index: 3; display: grid; place-items: center; width: 72px; height: 72px; padding: 0;
  border: 1px solid var(--poster-edge); border-radius: var(--radius-round); background: var(--poster-chip); color: var(--on-poster); cursor: pointer; }
.q-details__play .q-i { width: 30px; height: 30px; fill: currentColor; stroke: none; margin-left: 4px; }
.q-details__close { position: absolute; z-index: 4; top: var(--space-3); left: var(--space-3); border-color: var(--poster-edge); background: var(--poster-chip); color: var(--on-poster); }
.q-details__close .q-i { width: 22px; height: 22px; }
/* the media player: the trailer in place of the picture, 16:9 on the screen's black */
.q-details__media--playing { height: auto; }
.q-details__media--playing > :not(.q-details__player):not(.q-details__close) { display: none; }
/* its close button above the player, never over it: YouTube allows nothing drawn over its player (step N3) */
.q-details__media--playing > .q-details__close { position: static; order: -1; justify-self: start; margin: var(--space-3) var(--space-3) 0; }
.q-details__player { position: relative; width: 100%; max-width: calc(64dvh * 16 / 9); aspect-ratio: 16 / 9; justify-self: center; background: var(--screen); }
.q-details__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.q-details__body { display: grid; gap: var(--space-5); padding: var(--space-5) max(var(--space-4), calc((100% - 44rem) / 2)) var(--space-6); }
.q-details__body > * { min-width: 0; }
.q-details .b-text { display: block; -webkit-line-clamp: unset; font-size: var(--t-body); line-height: 1.5; color: var(--ink); max-width: var(--read-max); }
.q-details .b-props { font-size: var(--t-small); }
.q-details .b-map { grid-template-columns: 1fr; }
.q-details .b-map canvas { width: 100%; height: auto; aspect-ratio: 2 / 1; }
.q-details .b-gallery { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
.q-details .b-gallery figure { flex-basis: min(78%, 22rem); }
.q-details .b-video, .q-details .b-image img, .q-details .b-gallery img { border-radius: var(--radius-l); }
.q-details .credits { font-size: var(--t-small); }
.q-details__foot { border-top: 1px solid var(--line); background: var(--surface); padding-bottom: env(safe-area-inset-bottom, 0px); }
.q-details__foot .sheet-acts { border-top: 0; max-width: var(--card-max); margin-inline: auto; }

/* ---------- the answers: one row of round buttons, positive on the right ---------- */
.q-pad { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
.q-answer { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font: 600 var(--t-label)/1.2 var(--font-sans); }
.q-answer__dot { position: relative; display: grid; place-items: center; width: var(--hit-answer); height: var(--hit-answer); border: 1px solid var(--line); border-radius: var(--radius-round);
  background: var(--raised); box-shadow: var(--shadow-1); transition: transform var(--dur-press) var(--ease-ui), background var(--dur-press), border-color var(--dur-press); }
.q-answer__dot .q-i { width: 24px; height: 24px; stroke-width: 2.2; }
.q-answer__word { max-width: 76px; text-align: center; text-wrap: balance; }
.q-pad--learned .q-answer__near { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.q-answer:active .q-answer__dot { transform: scale(0.92); }
.q-answer--l .q-answer__dot { color: var(--meh); }
.q-answer--d .q-answer__dot { color: var(--nope); }
.q-answer--q .q-answer__dot { width: var(--hit); height: var(--hit); margin-block: 6px; border-style: dashed; border-color: var(--line-strong); box-shadow: none; color: var(--ink-2); }
.q-answer--u .q-answer__dot { color: var(--want-ink); }
.q-answer--r .q-answer__dot { width: 64px; height: 64px; margin-top: -4px; margin-bottom: -4px; color: var(--love-ink); }
.q-answer--r .q-answer__dot .q-i { width: 28px; height: 28px; }
.q-answer--hot .q-answer__dot { transform: scale(1.1); border-color: currentColor; }
.q-answer--r.q-answer--hot .q-answer__dot, .q-answer--strong .q-answer__dot { background: var(--love); border-color: var(--love); color: var(--on-love); }
.q-answer--strong .q-answer__dot .q-i, .q-answer--r.q-answer--hot .q-answer__dot .q-i { fill: currentColor; }
.q-answer--u.q-answer--hot .q-answer__dot { background: var(--want-soft); }
/* holding a button fills it to the far step (SPEC §2, the line) */
@property --q-hold { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.q-answer__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(currentColor var(--q-hold), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.q-answer--holding .q-answer__dot::after { opacity: 1; animation: q-hold 550ms linear forwards; }
@keyframes q-hold { to { --q-hold: 100%; } }
.q-answer__far { display: none; }
/* held, the far step's word shows under the button as the ring fills, on one line over its neighbours' */
.q-answer { position: relative; }
.q-answer--holding .q-answer__near { visibility: hidden; }
.q-answer--holding .q-answer__far { display: block; position: absolute; z-index: 2; top: calc(100% - 1.4em); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(180px, 90vw); padding: 2px 8px; border-radius: var(--radius-s); background: var(--accent); color: var(--on-accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* five buttons share a phone's width: each word under its button, two lines at most */
.q-pad { gap: var(--space-2); padding-inline: var(--space-2); }
.q-answer { flex: 1 1 0; min-width: 0; max-width: 80px; }
.q-answer__word { max-width: 100%; hyphens: auto; }

/* ---------- the line: while a card is dragged, its steps show where the pad was (and beside the card for up and down) ---------- */
.q-line { position: absolute; z-index: 2; display: grid; gap: 3px; pointer-events: none; opacity: 0; transition: opacity var(--dur-press) var(--ease-ui); }
.q-line--on { opacity: 1; }
.q-line--h { inset: var(--space-2) var(--space-4) auto; height: var(--hit); grid-template-columns: 1.2fr 1fr 0.5fr 1fr 1.2fr; }
.q-line--v { top: var(--space-2); bottom: var(--space-2); right: 0; width: 64px; grid-template-rows: 1.2fr 1fr 0.5fr 1fr; }
.q-line__step { display: grid; place-items: center; padding: 2px 4px; border-radius: var(--radius-s); background: var(--sunk); color: var(--ink-2);
  font: 700 var(--t-label)/1.1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; transition: background var(--dur-press), color var(--dur-press); }
.q-line__mid { display: grid; place-items: center; }
.q-line__mid::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.q-line__step--on.q-line__step--love { background: var(--love); color: var(--on-love); }
.q-line__step--on.q-line__step--meh { background: var(--meh); color: var(--surface); }
.q-line__step--on.q-line__step--want { background: var(--want); color: var(--on-want); }
.q-line__step--on.q-line__step--nope { background: var(--nope); color: var(--surface); }
.q-pad { position: relative; }
.q-pad--dragging .q-answer { opacity: 0; transition: opacity var(--dur-press); }

.q-undo { display: inline-flex; align-items: center; gap: var(--space-3); padding: 6px 6px 6px 14px; border-radius: var(--radius-m); background: var(--accent);
  color: var(--on-accent); font: 600 var(--t-small-strong)/1.3 var(--font-sans); box-shadow: var(--shadow-card); }
.q-undo button { min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--radius-s); background: var(--on-accent); color: var(--accent); font: inherit; cursor: pointer; }

/* ---------- the line after a swipe (agreement only, never after a no) ---------- */
.q-reveal { display: flex; align-items: center; gap: var(--space-3); width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: var(--radius-m);
  background: var(--accent); color: var(--on-accent); font: 600 var(--t-small-strong)/1.3 var(--font-sans); box-shadow: var(--shadow-card);
  transition: opacity var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui); }
.q-reveal[hidden] { display: none; }
.q-reveal .q-face { border-color: var(--accent); }

/* ---------- people ---------- */
.q-face { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-round); border: 2px solid var(--raised); flex: none;
  background: var(--fc, var(--meh)); color: var(--on-poster); font: 700 var(--t-label)/1 var(--font-sans); }
.q-face--l { width: 56px; height: 56px; font-size: var(--t-title-3); }
.q-faces { display: inline-flex; flex: none; }
.q-faces .q-face + .q-face { margin-left: -10px; }
.q-person { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--hit); padding: 4px 14px 4px 4px; border: 1px solid var(--line);
  border-radius: var(--radius-round); background: var(--raised); font: 600 var(--t-small-strong)/1.2 var(--font-sans); }
.q-person small { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- rows and tags ---------- */
.q-rows { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.q-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: 64px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--raised); color: var(--ink); text-decoration: none; }
.q-thumb { width: 44px; aspect-ratio: 2 / 3; border-radius: var(--radius-s); overflow: hidden; display: grid; place-items: center; color: var(--on-poster);
  background: linear-gradient(155deg, var(--c1, var(--sunk)), var(--c2, var(--line))); }
.q-thumb img { width: 100%; height: 100%; object-fit: cover; }
.q-row__title { font: 600 var(--t-body-strong)/1.25 var(--font-sans); margin: 0; overflow-wrap: anywhere; }
.q-row__meta { font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); margin: 0; }
.q-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-s); background: var(--sunk); color: var(--ink);
  font: 600 var(--t-small-strong)/1.3 var(--font-sans); white-space: nowrap; }
.q-tag .q-i { width: 14px; height: 14px; }
.q-tag--love { background: var(--love-soft); color: var(--love-ink); }
.q-tag--want { background: var(--want-soft); color: var(--want-ink); }
.q-tag--meh { background: var(--meh-soft); color: var(--ink); }
.q-tag--nope { background: var(--nope-soft); color: var(--ink); }

/* ---------- a deck: its cover is its cards ---------- */
.q-cover { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); min-height: 200px; padding: var(--space-4);
  border-radius: var(--radius-l); overflow: hidden; color: var(--on-poster); background: linear-gradient(150deg, var(--c1, var(--sunk)), var(--c2, var(--line))); box-shadow: var(--shadow-card); }
.q-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--poster-shade) 0%, transparent 70%); }
.q-cover > * { position: relative; z-index: 1; }
.q-cover__text { display: grid; gap: 4px; }
.q-cover__title { font: 800 var(--t-title-1)/1 var(--font-sans); font-stretch: 75%; text-transform: uppercase; margin: 0; text-wrap: balance; }
.q-fan { position: relative; width: 132px; height: 150px; align-self: center; }
.q-fan > .q-pic { position: absolute; bottom: 0; width: 84px; aspect-ratio: 2 / 3; border-radius: var(--radius-s); box-shadow: var(--shadow-card); transform-origin: 50% 100%; }
.q-fan > .q-pic:nth-child(1) { left: 0; transform: rotate(-12deg); }
.q-fan > .q-pic:nth-child(2) { left: 24px; transform: rotate(-2deg) translateY(-6px); }
.q-fan > .q-pic:nth-child(3) { left: 48px; transform: rotate(9deg); }
.q-tile { display: grid; gap: var(--space-2); width: 156px; color: var(--ink); text-decoration: none; }
.q-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 1; border-radius: var(--radius-l); overflow: hidden; background: var(--line); }
.q-mosaic > .q-pic { aspect-ratio: auto; min-height: 0; }
.q-tile__name { font: 650 var(--t-small-strong)/1.25 var(--font-sans); margin: 0; }

/* ---------- how far you are: the ring is made of your answers ---------- */
.q-donut { position: relative; display: grid; place-items: center; width: 132px; aspect-ratio: 1; flex: none; }
.q-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.q-donut__track { fill: none; stroke: var(--sunk); stroke-width: 12; }
.q-donut__seg { fill: none; stroke-width: 12; stroke-dasharray: var(--len) 999; stroke-dashoffset: var(--off); animation: q-draw 900ms var(--ease-ui) both; animation-delay: calc(var(--i, 0) * 120ms); }
.q-donut__seg--r { stroke: var(--love); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--love) 55%, transparent)); }
.q-donut__seg--l { stroke: var(--meh); }
.q-donut__seg--u { stroke: var(--want); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--want) 45%, transparent)); }
.q-donut__seg--d { stroke: var(--nope); }
@keyframes q-draw { from { stroke-dasharray: 0 999; } }
.q-donut__n { position: relative; display: grid; justify-items: center; line-height: 1; }
.q-donut__n b { font: 800 var(--t-display)/0.9 var(--font-sans); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.q-donut__n span { font-size: var(--t-small); color: var(--ink-2); }
.q-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.q-cell { position: relative; display: grid; gap: 2px; padding: var(--space-3); min-height: 104px; border-radius: var(--radius-m); overflow: hidden; }
.q-cell b { font: 800 var(--t-title-1)/1 var(--font-sans); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.q-cell span { display: flex; align-items: center; gap: 4px; font-size: var(--t-small); color: var(--ink); }
.q-cell__pics { position: absolute; right: -6px; bottom: -14px; display: flex; }
.q-cell__pics > .q-pic { width: 34px; aspect-ratio: 2 / 3; border-radius: 4px; margin-left: -12px; box-shadow: var(--shadow-1); transform: rotate(8deg); }
.q-cell__pics > .q-pic:nth-child(2) { transform: rotate(-4deg) translateY(-6px); }
.q-cell--r { background: var(--love-soft); } .q-cell--r b { color: var(--love-ink); }
.q-cell--l { background: var(--meh-soft); } .q-cell--l b { color: var(--meh); }
.q-cell--u { background: var(--want-soft); } .q-cell--u b { color: var(--want-ink); }
.q-cell--d { background: var(--nope-soft); } .q-cell--d b { color: var(--ink-2); }

/* ---------- you: meters that light up, badges that belong to a deck ---------- */
.q-meter { display: grid; gap: 8px; }
.q-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font: 600 var(--t-small-strong)/1.3 var(--font-sans); }
.q-meter__head b { font: 800 var(--t-title-2)/1 var(--font-sans); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.q-meter__track { position: relative; height: 14px; border-radius: var(--radius-round); background: var(--sunk); }
.q-meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--want), var(--love));
  box-shadow: 0 0 14px color-mix(in srgb, var(--love) 45%, transparent); animation: q-grow 1100ms var(--ease-ui) both; }
.q-meter__fill::after { content: ""; position: absolute; inset: 2px 6px auto; height: 4px; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); }
@keyframes q-grow { from { width: 0; } }
.q-meter__mark { position: absolute; top: -5px; bottom: -5px; left: var(--m, 50%); width: 3px; border-radius: 2px; background: var(--ink); }
.q-meter__mark span { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: var(--t-label); color: var(--ink-2); white-space: nowrap; }
.q-spectrum { position: relative; height: 72px; }
.q-spectrum svg { width: 100%; height: 100%; overflow: visible; }
.q-spectrum__area { fill: var(--love-soft); }
.q-spectrum__line { fill: none; stroke: var(--love); stroke-width: 2; }
.q-spectrum__you { position: absolute; bottom: 0; left: var(--m, 50%); width: 18px; height: 18px; margin-left: -9px; margin-bottom: -9px; border-radius: 50%;
  background: var(--love); border: 3px solid var(--raised); box-shadow: 0 0 0 0 color-mix(in srgb, var(--love) 60%, transparent); animation: q-ping 1600ms var(--ease-ui) 400ms 2; }
@keyframes q-ping { 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.q-spectrum__ends { display: flex; justify-content: space-between; margin-top: var(--space-3); font: 600 var(--t-label)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.q-medals { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.q-medal { display: grid; justify-items: center; gap: 6px; width: 104px; text-align: center; }
.q-medal__disc { display: block; position: relative; width: 88px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--raised), 0 0 0 6px var(--want), var(--shadow-card); }
.q-medal__disc > .q-pic { position: absolute; inset: 0; }
.q-medal__disc::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%); animation: q-sheen 1400ms var(--ease-ui) 300ms both; }
@keyframes q-sheen { to { transform: translateX(120%); } }
.q-medal__icon { position: absolute; z-index: 4; right: 2px; bottom: 2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--want); color: var(--on-want); border: 3px solid var(--raised); }
.q-medal__icon .q-i { width: 15px; height: 15px; }
.q-medal__wrap { display: block; position: relative; }
.q-medal b { font: 650 var(--t-small-strong)/1.25 var(--font-sans); }
.q-medal small { font-size: var(--t-label); color: var(--ink-2); line-height: 1.3; }
.q-medal--locked .q-medal__disc { box-shadow: 0 0 0 3px var(--raised), 0 0 0 5px var(--line-strong); filter: grayscale(1) opacity(0.55); }
.q-medal--locked .q-medal__disc::after { content: none; }
.q-medal--locked .q-medal__icon { background: var(--sunk); color: var(--ink-2); }

/* ---------- forms ---------- */
.q-field { display: grid; gap: 6px; }
.q-field__label { font: 600 var(--t-small-strong)/1.3 var(--font-sans); }
.q-input { width: 100%; min-height: var(--hit); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--raised);
  color: var(--ink); font: 400 var(--t-body)/1.4 var(--font-sans); }
.q-input:focus { outline: 2.5px solid var(--focus); outline-offset: 0; border-color: transparent; }
.q-input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.q-field__help { font-size: var(--t-small); color: var(--ink-2); margin: 0; }
.q-field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-small); color: var(--danger); margin: 0; }
.q-switch { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--hit); }
.q-switch button { position: relative; width: 52px; height: 32px; flex: none; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-round); background: var(--sunk); cursor: pointer; }
.q-switch button::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-2);
  transition: transform var(--dur-ui) var(--ease-ui), background var(--dur-ui); }
.q-switch button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.q-switch button[aria-checked="true"]::after { transform: translateX(20px); background: var(--on-accent); }
.q-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-m); background: var(--sunk); }
.q-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 0;
  border-radius: var(--radius-s); background: transparent; color: var(--ink-2); font: 600 var(--t-small-strong)/1.2 var(--font-sans); cursor: pointer; }
.q-seg button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---------- the way in: sign-in, sign-up, the welcome; the name, the fields, the buttons ---------- */
.q-entry { display: grid; align-content: center; gap: var(--space-5); width: 100%; max-width: 26rem; min-height: 100%; margin-inline: auto; padding-block: var(--space-6); }
.q-entry--up { align-content: start; }
.q-entry > .q-brand { justify-self: start; }
.q-entry h1 { margin: 0; font: 750 var(--t-title-1)/1.05 var(--font-sans); font-stretch: 85%; text-wrap: balance; }
.q-entry__head { display: flex; align-items: center; gap: var(--space-3); }
.q-entry__head > .face { width: 52px; height: 52px; font-size: var(--t-title-3); border: 0; flex: none; }
.q-entry__form { display: grid; gap: var(--space-4); }
.q-entry__alt { display: grid; gap: var(--space-2); }
.q-entry__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); margin: 0; font-size: var(--t-small); }
.q-entry__links a { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.q-entry__links span { display: inline-flex; align-items: center; color: var(--ink-2); }
.q-entry__note { margin: 0; text-align: center; font-size: var(--t-small); color: var(--ink-2); }
.q-entry__note a { display: inline-flex; align-items: center; gap: 4px; min-height: var(--hit); color: inherit; font-weight: 600; text-underline-offset: 3px; }
/* a handle, written after its @ */
.q-handle { position: relative; display: block; }
.q-handle > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.q-handle > .q-input { padding-left: 30px; }
fieldset.q-field { margin: 0; padding: 0; border: 0; min-width: 0; }

/* ---------- the first open: what you like, the decks to join, one tap ---------- */
.q-start .q-chips { flex-wrap: wrap; overflow: visible; }
.q-start .q-eyebrow { margin-top: var(--space-2); }
.q-start .st-go { position: sticky; bottom: var(--space-3); z-index: 2; box-shadow: var(--shadow-card); }
.q-start [aria-busy="true"] { opacity: 0.6; transition: opacity var(--dur-ui); }

/* ---------- notices, empty states, sheets ---------- */
.q-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--sunk);
  font-size: var(--t-small); line-height: 1.45; }
.q-banner--danger { background: var(--danger-soft); color: var(--danger); }
.q-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-2); }
.q-empty > .q-i { width: 40px; height: 40px; stroke-width: 1.5; }
.q-empty h1, .q-empty h3 { font: 650 var(--t-title-3)/1.2 var(--font-sans); color: var(--ink); margin: 0; }
.q-empty p { margin: 0; max-width: 32ch; }
.q-sheet { position: fixed; inset: auto 0 0; z-index: 50; max-height: 90dvh; overflow-y: auto; padding: 0 var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-l) var(--radius-l) 0 0; background: var(--raised); box-shadow: var(--shadow-sheet); transition: transform var(--dur-ui) var(--ease-ui); }
.q-sheet__grab { width: 40px; height: 5px; margin: var(--space-2) auto var(--space-1); border-radius: var(--radius-round); background: var(--line-strong); }
.q-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2) var(--space-3); }
.q-sheet__head h2 { font: 650 var(--t-title-3)/1.2 var(--font-sans); margin: 0; }
.q-scrim { position: fixed; inset: 0; z-index: 49; background: var(--scrim); }

/* ---------- navigation: tabs on a phone, a rail on a tablet, a sidebar on a desktop ---------- */
.q-nav { display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--surface); }
.q-nav__item { display: grid; justify-items: center; gap: 2px; min-height: var(--hit); padding: 6px 0; border: 0; background: none; color: var(--ink-2);
  font: 600 var(--t-label)/1.2 var(--font-sans); text-decoration: none; position: relative; }
.q-nav__item .q-i { width: 24px; height: 24px; stroke-width: 1.8; }
.q-nav__item[aria-current="page"] { color: var(--ink); }
.q-nav__item[aria-current="page"] .q-i { color: var(--love); }
/* + : a round accent button on a phone, its name for screen readers; an item like the others beside */
.q-nav__plus { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -4px; border-radius: var(--radius-round);
  background: var(--accent); color: var(--on-accent); }
.q-nav__item--post > span:not(.q-nav__plus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q-nav__item--post[aria-current="page"] .q-i { color: var(--on-accent); }
.q-nav__dot { position: absolute; top: 4px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--love); border: 2px solid var(--surface); }
/* the name lives in the rail and the sidebar; a phone's screen keeps its height for the content */
.q-nav > .q-nav__brand { display: none; }
@media (min-width: 600px) {
  .q-nav { grid-template-columns: none; grid-auto-rows: min-content; align-content: start; gap: var(--space-2); width: 88px; height: 100%;
    padding: var(--space-4) var(--space-2); border-top: 0; border-right: 1px solid var(--line); }
  .q-nav > .q-nav__brand { display: grid; place-items: center; min-height: var(--hit); margin-bottom: var(--space-4); }
  .q-nav__brand > span:not(.q-sr) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 600px) {
  .q-nav__plus { width: 40px; height: 40px; margin-top: 0; }
}
@media (min-width: 1024px) {
  .q-nav__plus { width: 24px; height: 24px; border-radius: var(--radius-s); }
  .q-nav__plus .q-i { width: 18px; height: 18px; }
  .q-nav__item--post > span:not(.q-nav__plus) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .q-nav { width: 240px; padding: var(--space-5) var(--space-3); }
  .q-nav > .q-nav__brand { display: flex; justify-content: start; padding-inline: var(--space-3); font-size: var(--t-title-2); }
  .q-nav__brand > span:not(.q-sr) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .q-nav__item { grid-template-columns: 24px 1fr; justify-items: start; align-items: center; gap: var(--space-3); padding: 10px var(--space-3);
    border-radius: var(--radius-m); font-size: var(--t-body-strong); }
  .q-nav__item[aria-current="page"] { background: var(--raised); box-shadow: var(--shadow-1); }
  .q-nav__dot { top: 6px; left: 30px; }
}

/* ---------- the name with its mark: the mark at the name's cap height ---------- */
.q-brand { display: inline-flex; align-items: center; gap: 0.2em; font: 800 var(--t-title-1)/1 var(--font-sans); font-stretch: 75%; color: var(--ink); text-decoration: none; }
.q-brand > .q-mark { width: 0.95em; height: 0.95em; }

/* ---------- the opening: the mark swipes out until the first screen is there ---------- */
.q-splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--surface); color: var(--ink);
  transition: opacity var(--dur-ui) var(--ease-ui); }
.q-splash--gone { opacity: 0; pointer-events: none; }
.q-wait { display: grid; place-items: center; height: 100%; color: var(--ink); }
.q-offline { display: grid; align-content: center; justify-items: center; gap: var(--space-5); height: 100%; padding: var(--space-5); }

/* ---------- the app's frame across sizes: the window, never a phone-sized column ---------- */
.q-app { position: relative; display: grid; height: 100dvh; grid-template: "main" 1fr "nav" auto / 1fr; background: var(--surface);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
.q-app > .q-nav { grid-area: nav; }
.q-app > main { grid-area: main; position: relative; min-height: 0; overflow: hidden; }
.q-app > aside { display: none; }
@media (min-width: 600px) { .q-app { grid-template: "nav main" 1fr / auto minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .q-app:has(> aside) { grid-template: "nav main aside" 1fr / auto minmax(0, 1fr) 360px; }
  .q-app > aside { display: block; grid-area: aside; overflow-y: auto; padding: var(--space-5); border-left: 1px solid var(--line); background: var(--surface); }
}

/* ---------- reduce motion: fades, no flights, nothing that grows, draws, pings or shines ---------- */
@media (prefers-reduced-motion: reduce) {
  .q-card, .q-sheet, .q-reveal, .q-btn, .q-answer__dot { transition-property: opacity; }
  .q-btn:active, .q-answer:active .q-answer__dot, .q-answer--hot .q-answer__dot { transform: none; }
  .q-donut__seg, .q-meter__fill, .q-spectrum__you, .q-medal__disc::after { animation: none; }
  .q-pic--alive [class*="q-a-"], .q-mark--out path { animation: none; }
  .q-answer--holding .q-answer__dot::after { animation-duration: 1ms; }
  .q-card--enter, .q-streak.pop .q-i { animation: none; }
  .q-details { transform: none; opacity: 0; transition-property: opacity; }
  .q-details--on { opacity: 1; }
  .q-splash { transition: none; }
}

/* ---------- the search bar (step R9, the new version): on top of For you, a search over the screen ---------- */
.q-swipe__head--bar { flex-wrap: wrap; }
.q-sbar { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: var(--hit); padding: 0 var(--space-4); border: 0;
  border-radius: var(--radius-round); background: var(--sunk); color: var(--ink-2); font: 500 var(--t-body)/1.2 var(--font-sans); text-align: left; cursor: text; }
.q-sbar .q-i { flex: none; width: 18px; height: 18px; }
.q-sbar__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-sbar__text--q { color: var(--ink); font-weight: 650; }
.q-sbar:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.q-swipe__head > .q-refine { flex: 1 0 100%; padding-top: var(--space-1); }
.q-refine .q-chip { min-height: 36px; padding: 4px 12px; font-size: var(--t-small-strong); }
.q-refine .q-chip .q-i { width: 14px; height: 14px; }
.q-searchpage { position: absolute; inset: 0; z-index: 45; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--surface); }
.q-searchpage__bar { display: flex; align-items: center; gap: var(--space-2); margin: 0;
  padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-2); }
.q-searchpage__bar .q-search { flex: 1; min-width: 0; padding: 0 var(--space-3); border-radius: var(--radius-round); background: var(--sunk); }
.q-searchpage__bar .q-search:focus-within { outline: 2.5px solid var(--focus); outline-offset: 0; }
.q-searchpage__bar input::-webkit-search-cancel-button { display: none; }
.q-searchpage__body { overflow-y: auto; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-2) var(--space-4) var(--space-6); }
.q-searchpage__h { margin: 0; font: 600 var(--t-label)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.q-searchpage__hint { margin: var(--space-4) 0 0; text-align: center; }
.q-chips--wrap { flex-wrap: wrap; overflow: visible; }
.q-sugs { display: grid; margin: 0; padding: 0; list-style: none; }
.q-sugs__h { padding: var(--space-3) 0 var(--space-1); font: 600 var(--t-label)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.q-sug { width: 100%; display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 4px 0; border: 0; background: none; color: var(--ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.q-sug__pic, .q-sug__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-m);
  background: linear-gradient(155deg, var(--c1, var(--sunk)), var(--c2, var(--sunk))); color: var(--on-poster); }
.q-sug__ic { border-radius: var(--radius-round); background: var(--sunk); color: var(--ink-2); }
.q-sug__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-sug .q-i { width: 18px; height: 18px; }
.q-sug__tx { display: grid; gap: 2px; min-width: 0; }
.q-sug__tx b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-sug__tx span { color: var(--ink-2); font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the grid to keep (step R9): Saved, a person's posts, one's own; each tile its own height ---------- */
.q-masonry { columns: 2; column-gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .q-masonry { columns: 3; } }
@media (min-width: 1024px) { .q-masonry { columns: 4; } }
.q-mtile { break-inside: avoid; margin-bottom: var(--space-3); }
.q-mtile__btn { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.q-mtile__btn:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-l); }
.q-mtile__pic { position: relative; display: grid; place-items: center; width: 100%; overflow: hidden; border-radius: var(--radius-l);
  background: linear-gradient(155deg, var(--c1, var(--sunk)), var(--c2, var(--sunk))); color: var(--on-poster); }
.q-mtile__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.q-mtile__pic > .q-i { width: 32px; height: 32px; opacity: 0.85; }
.q-mtile__pic > .q-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.q-mtile__title { padding: 0 2px; font: 600 var(--t-small-strong)/1.25 var(--font-sans); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.q-mtile__tag { position: absolute; z-index: 1; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); padding: 3px 8px;
  border-radius: var(--radius-round); background: var(--poster-chip); color: var(--on-poster); font: 700 11px/1.3 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-mtile__tag--must { background: var(--want); color: var(--on-want); }
.q-mtile__tag .q-i { flex: none; width: 12px; height: 12px; fill: currentColor; }

/* ---------- boards (step R10, the new version's word for a deck): a strip or a grid of covers, its cards' pictures ---------- */
.q-boards { display: flex; gap: var(--space-3); margin: 0; padding: 2px 0 var(--space-2); list-style: none; overflow-x: auto; scrollbar-width: none; }
.q-boards::-webkit-scrollbar { display: none; }
.q-boards--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); overflow: visible; }
.q-board { flex: 0 0 132px; min-width: 0; }
.q-boards--grid .q-board { flex: none; }
.q-board__link { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.q-board__link:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-l); }
.q-board__cover { display: grid; gap: 2px; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-l); background: var(--sunk); }
.q-board__cover .q-pic, .q-board__cover img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.q-board__plus { place-items: center; border: 2px dashed var(--line-strong); background: none; color: var(--ink-2); }
.q-board__plus .q-i { width: 28px; height: 28px; }
.q-board__title { padding: 0 2px; font: 650 var(--t-small-strong)/1.25 var(--font-sans); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* a grid one picks from (a new board's wants): a tick on the ones picked */
.q-masonry--pick .q-mtile__btn[aria-pressed="true"] .q-mtile__pic { outline: 3px solid var(--accent); outline-offset: -3px; }
.q-mtile__check { position: absolute; z-index: 1; right: 8px; top: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-round);
  background: var(--accent); color: var(--on-accent); }
.q-mtile__check .q-i { width: 16px; height: 16px; }
/* a row that is a small form (a new board's name, at the end of "Add to a board") */
.q-row--form { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.q-row--form .q-input { flex: 1; min-width: 0; }

/* ---------- the card in For you (step R7, the new version): its author and tags on its foot, its own clip in place ---------- */
.q-card__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--space-2); min-width: 0; }
.q-card__by { display: inline-flex; align-items: center; gap: 5px; margin: 0; font: 600 var(--t-label)/1.3 var(--font-sans); opacity: 0.85; white-space: nowrap; }
.q-card__by .q-i { width: 13px; height: 13px; }
/* a source's file's credit on the face (R11a): one quiet line, its author and licence links */
.q-card__credit { margin: 0; font: 500 var(--t-label)/1.3 var(--font-sans); opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-card__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.q-card__tags { display: flex; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.q-card__tags .q-chip { min-height: 28px; padding: 2px 10px; border-color: var(--poster-edge); background: var(--poster-chip); color: var(--on-poster); font-size: var(--t-label); }
.q-pic > .q-card__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a song on top (R7 part 2): its line at the foot of the picture, lit while it plays */
.q-card__music { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 4px 12px; border: 1px solid var(--poster-edge); border-radius: var(--radius-round);
  background: var(--poster-chip); color: var(--on-poster); font: 500 var(--t-small)/1.2 var(--font-sans); text-align: left; cursor: pointer; }
.q-card__music > .q-i { flex: none; width: 16px; height: 16px; }
.q-card__musicname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-card__musicname b { font-weight: 700; }
.q-card__music .q-card__musicplay { fill: currentColor; stroke: none; width: 14px; height: 14px; }
.q-card:has(.b-audio.playing) .q-card__music { border-color: var(--love); background: var(--love); color: var(--on-love); }
.q-card:has(.b-audio.playing) .q-card__musicplay { display: none; }

/* a search card's mark on its picture's corner (R13b, Tom's pick 1 B): what it carries and whose */
.q-card__mark { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border: 1px solid var(--poster-edge); border-radius: var(--radius-m); background: var(--poster-chip); color: var(--on-poster);
  font: 600 var(--t-small-strong)/1.2 var(--font-sans); pointer-events: none; }
.q-card__mark .q-i { width: 14px; height: 14px; }
/* a search still filling from its sources: a thin line under its bar (R13b, Tom's pick 2 A) */
.q-refine--filling { position: relative; }
.q-refine--filling::after { content: ""; position: absolute; inset: auto 0 -2px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent)
  no-repeat; background-size: 40% 100%; animation: q-filling 1.4s var(--ease-ui) infinite; }
@keyframes q-filling { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .q-refine--filling::after { animation: none; background: var(--accent); opacity: 0.4; } }
/* the stack ran ahead of its sources: "still looking" until their next cards come */
.q-swipe__looking { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-2); color: var(--ink-2); }
.q-swipe__looking .q-i { width: 28px; height: 28px; }
@media (prefers-reduced-motion: no-preference) { .q-swipe__looking .q-i { animation: q-spin 1.2s linear infinite; } }
@keyframes q-spin { to { transform: rotate(360deg); } }
/* a topic card's picture that came with a later batch (R13b): it fades in */
@media (prefers-reduced-motion: no-preference) { .q-fadein { animation: q-fadein var(--dur-ui) var(--ease-ui) both; } }
@keyframes q-fadein { from { opacity: 0; } to { opacity: 1; } }