/* The screens moved onto the design system in step 46: Settings, sign-in and security, the way
   back in, privacy, an invite, making a deck, You and the TV page (docs/design/README.md). Built on
   tokens.css and components.css alone: no colour, size or duration here that a token holds. Loaded
   after components.css. Every symbol is a Lucide icon (principle 6), never an emoji. */

/* ---------- a screen of its own: its head (back, title, tools), then its groups ---------- */
.q-page { display: grid; gap: var(--space-6); padding-bottom: var(--space-7); min-width: 0; }
.q-head { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; }
.q-head h1 { flex: 1; min-width: 0; margin: 0; font: 750 var(--t-title-1)/1.05 var(--font-sans); font-stretch: 85%; text-wrap: balance; overflow-wrap: anywhere; }
.q-head .q-iconbtn { text-decoration: none; }
.q-group { display: grid; gap: var(--space-2); min-width: 0; }
.q-group > .q-eyebrow, .q-group > .q-meta { padding-inline: var(--space-1); }
.q-group > h2.q-eyebrow { line-height: 1.3; }

/* ---------- a row's words: its title over its line, whatever element holds them ---------- */
.q-row__title, .q-row__meta { display: block; }

/* ---------- grouped rows: a list one looks things up in (rule 25); an icon, a word, its switch or a chevron ---------- */
.q-set { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--raised); overflow: hidden; }
.q-set > * + * { border-top: 1px solid var(--line); }
.q-set__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px;
  margin: 0; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border: 0; border-radius: 0; background: none; color: var(--ink);
  font: inherit; text-align: start; text-decoration: none; }
.q-set__row > .q-i { width: 22px; height: 22px; color: var(--ink-2); }
.q-set__row > .q-set__text:first-child { grid-column: span 2; } /* a row with no icon of its own: its words take the icon's place */
button.q-set__row, a.q-set__row, summary.q-set__row { cursor: pointer; }
.q-set__row:focus-visible { outline-offset: -3px; }
.q-set__text { display: grid; gap: 1px; min-width: 0; }
a.q-set__text { color: inherit; text-decoration: none; } /* a row's words as its link, beside a button of its own (Your topics) */
.q-set__text b { font: 600 var(--t-body-strong)/1.3 var(--font-sans); overflow-wrap: anywhere; }
.q-set__text small { font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.q-set__end { display: flex; align-items: center; gap: var(--space-2); }
.q-set__end .q-switch { min-height: var(--hit); }
.q-set__row--face { grid-template-columns: 32px minmax(0, 1fr) auto; padding-left: var(--space-3); }
.q-group__sub { margin: var(--space-3) 0 0; }
.q-set__row--danger, .q-set__row--danger > .q-i { color: var(--danger); }
.q-set__body { display: grid; gap: var(--space-3); padding: var(--space-1) var(--space-4) var(--space-4); }
/* a row that opens to more: the chevron turns */
details.q-fold > summary { list-style: none; }
details.q-fold > summary::-webkit-details-marker { display: none; }
details.q-fold > summary > .q-i:last-child { transition: transform var(--dur-ui) var(--ease-ui); }
details.q-fold[open] > summary > .q-i:last-child { transform: rotate(180deg); }
.q-fold__text { margin: 0; padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 22px + var(--space-3)); max-width: var(--read-max); }

/* ---------- sign-in and security: one row per way in, opening in place; a list inside an open row ---------- */
.q-set__body > .q-set { border-radius: var(--radius-m); }
.q-set__body .q-set__row { min-height: 52px; padding-inline: var(--space-3); }
.q-sec__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.q-set__body > .q-btn { justify-self: start; }
/* a sheet with a form: a column on wide screens, never the window's width */
.q-sheet--form { max-width: 32rem; margin-inline: auto; display: grid; gap: var(--space-2); }

/* ---------- a search field: the icon, then the words ---------- */
.q-search { display: flex; align-items: center; gap: var(--space-2); padding-block: 0; color: var(--ink-2); }
.q-search > .q-i { flex: none; width: 20px; height: 20px; }
.q-search input { flex: 1; min-width: 0; min-height: var(--hit); border: 0; background: none; color: var(--ink); font: inherit; outline: none; }
.q-chips--wrap { flex-wrap: wrap; overflow: visible; }

/* ---------- one thing to do: a face or an icon, a title, its button low on a phone (rule 9) ---------- */
.q-solo { display: flex; flex-direction: column; min-height: 100%; max-width: 26rem; margin-inline: auto; text-align: center; }
.q-solo__main { flex: 1; display: grid; justify-items: center; align-content: center; gap: var(--space-4); padding-block: var(--space-6); }
.q-solo h1 { margin: 0; font: 750 var(--t-title-1)/1.05 var(--font-sans); font-stretch: 85%; text-wrap: balance; overflow-wrap: anywhere; }
.q-solo__acts { display: grid; gap: var(--space-2); padding-bottom: var(--space-5); }
.q-solo__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-l); background: var(--sunk); color: var(--ink); }
.q-solo__icon .q-i { width: 36px; height: 36px; stroke-width: 1.8; }
.q-face--xl { width: 96px; height: 96px; border-width: 0; font-size: var(--t-title-1); }

/* ---------- the way back in: recovery codes in a well, a line between two ways ---------- */
.q-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); width: 100%; margin: 0; padding: var(--space-4);
  border-radius: var(--radius-l); background: var(--sunk); list-style: none; counter-reset: code; text-align: start; }
.q-codes li { counter-increment: code; display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; font: 600 var(--t-body)/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
.q-codes li::before { content: counter(code); min-width: 1.4em; text-align: end; font-size: var(--t-label); color: var(--ink-2); }
.q-codes code { font: inherit; letter-spacing: 0.02em; }
.q-codes__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.q-or { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.q-or::before, .q-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- an invite opened while signed in: one card, swiped (rule 25) ---------- */
.q-invite { display: grid; align-content: center; width: 100%; max-width: var(--card-max); min-height: 100%; margin-inline: auto; padding-block: var(--space-4); }

/* ---------- the privacy note: its promises first, then every part in full ---------- */
.q-promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.q-promises li { display: grid; gap: var(--space-2); align-content: start; min-width: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--raised); }
.q-promises .q-i { width: 24px; height: 24px; }
.q-promises b { font: 650 var(--t-body-strong)/1.25 var(--font-sans); overflow-wrap: anywhere; }
.q-part { display: grid; gap: var(--space-2); max-width: var(--read-max); }
.q-part h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 650 var(--t-title-3)/1.2 var(--font-sans); }
.q-part h2 .q-i { width: 22px; height: 22px; color: var(--ink-2); }
.q-part p { margin: 0; }
.q-part a { color: inherit; font-weight: 600; text-underline-offset: 3px; }

/* ---------- making a deck: the decks it is built on, its filters, what it would hold, pictures first ---------- */
.q-make { gap: var(--space-5); }
.q-make .q-entry__form { gap: var(--space-5); }
.q-make__way { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--raised); }
.q-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
textarea.q-input { min-height: calc(var(--hit) * 2); resize: vertical; }
/* the decks it is built on: chips that are on, each with its x */
.q-parents:empty { display: none; }
.q-parent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); padding-right: 2px; cursor: default; }
.q-parent .q-chip__count { color: inherit; opacity: 0.75; }
.q-parent__x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-round); background: none; color: inherit; cursor: pointer; }
.q-parent__x .q-i { width: 18px; height: 18px; }
/* what a search finds, as rows to tap */
.q-sugg:empty { display: none; }
.q-sugg button.q-row { width: 100%; font: inherit; text-align: start; cursor: pointer; }
.q-sugg .q-row > .q-i { color: var(--ink-2); }
/* "a deck like this already exists": said in the form, never a block (step 30) */
.q-like { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--sunk); }
.q-like__h { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.q-like__h .q-i { color: var(--ink-2); }
.q-based { display: flex; align-items: flex-start; gap: 6px; }
.q-based .q-i { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.q-based a { color: var(--ink); font-weight: 600; }
/* what it would hold */
.q-preview { display: grid; gap: var(--space-2); min-width: 0; }
.q-preview:empty { display: none; }
.q-preview__n { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.q-preview__n b { font: 700 var(--t-title-2)/1.1 var(--font-sans); font-stretch: 85%; }
.q-preview__strip { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.q-preview__strip::-webkit-scrollbar { display: none; }
.q-preview__strip figure { flex: 0 0 92px; display: grid; align-content: start; gap: 4px; margin: 0; }
.q-preview__strip .q-pic { width: 92px; aspect-ratio: 2 / 3; border-radius: var(--radius-s); }
.q-preview__strip figcaption { font-size: var(--t-small); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-preview__strip small { color: var(--ink-2); }

/* ---------- You (Tom's picks of step 44): your cards, your types, your decks as covers, one line ---------- */
.q-profile { display: grid; gap: var(--space-5); padding-bottom: var(--space-6); }
.q-profile__head { display: flex; align-items: center; gap: var(--space-3); }
.q-profile__head .q-face { border-width: 0; }
.q-profile__head .q-iconbtn { text-decoration: none; }
.q-profile__who { flex: 1; min-width: 0; }
.q-profile__who h1 { margin: 0; font: 750 var(--t-title-1)/1.05 var(--font-sans); font-stretch: 85%; overflow-wrap: anywhere; }
.q-profile__hero .you-stack { height: min(64vh, 540px); }
/* the types wrap: nothing scrolls sideways, no word is cut (L5's polish list, item 19) */
.q-profile__types { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: 2px; }
.q-profile__type { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--hit); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--raised); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); }
.q-profile__type .q-i { width: 22px; height: 22px; }
.q-profile__type > span { display: grid; gap: 1px; }
.q-profile__type b { font: 600 var(--t-small-strong)/1.2 var(--font-sans); }
.q-profile__type small { font-size: var(--t-label); line-height: 1.2; color: var(--ink-2); }
.q-profile__decks { display: grid; gap: var(--space-3); }
.q-profile__decks h2 { margin: 0; font: 700 var(--t-title-2)/1.1 var(--font-sans); font-stretch: 85%; }
.q-profile__covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .q-profile__covers { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }
.q-profile__deck { display: grid; gap: 6px; min-width: 0; }
.q-profile__cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  background: linear-gradient(155deg, var(--c1, var(--sunk)), var(--c2, var(--line))); }
.q-profile__cover::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--poster-edge); pointer-events: none; }
.q-profile__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* how far one is, a ring; a dot per badge won (Tom's pick: the ring) */
.q-profile__ring { position: absolute; z-index: 2; right: var(--space-2); bottom: var(--space-2); width: 30px; height: 30px; border-radius: var(--radius-round);
  background: conic-gradient(var(--on-poster) var(--p), var(--poster-edge) 0); box-shadow: var(--shadow-1); }
.q-profile__ring::after { content: ""; position: absolute; inset: 5px; border-radius: var(--radius-round); background: var(--poster-chip); }
.q-profile__dots { position: absolute; z-index: 2; left: var(--space-2); top: var(--space-2); display: flex; gap: var(--space-1); }
.q-profile__dots i { display: block; width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--want); box-shadow: 0 0 0 2px var(--poster-chip); }
.q-profile__ctitle { 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-profile__lines { display: grid; }
.q-profile__line { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-2) var(--space-1); border-top: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font: 600 var(--t-body-strong)/1.2 var(--font-sans); }
.q-profile__line span { flex: 1; }
.q-profile__line .q-i { color: var(--ink-2); }

/* ---------- Find: its head, its shelves of decks, a deck's tile (its picture, its name, its people) ---------- */
.q-find { gap: var(--space-4); }
.q-find .q-head .q-btn { flex: none; }
.q-shelves { display: grid; gap: var(--space-5); min-width: 0; }
.q-shelf { display: grid; gap: var(--space-2); min-width: 0; padding: 0; }
.q-shelf h2 { margin: 0; font: 700 var(--t-title-3)/1.2 var(--font-sans); }
.q-shelf__row { display: flex; gap: var(--space-3); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--space-4)); padding: 2px var(--space-4) var(--space-2);
  list-style: none; scroll-padding-inline: var(--space-4); scroll-snap-type: x proximity; }
.q-shelf__row::-webkit-scrollbar { display: none; }
.q-shelf__row > li { flex: 0 0 148px; scroll-snap-align: start; }
.q-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-4) var(--space-3); margin: 0; padding: 0; list-style: none; }
.q-dtile { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.q-dtile__link { display: grid; gap: 4px; align-content: start; min-width: 0; color: var(--ink); text-decoration: none; }
.q-dtile__pic { position: relative; display: block; }
.q-dtile__pic > .q-mosaic { box-shadow: var(--shadow-1); }
.q-dtile__badge { position: absolute; z-index: 3; left: var(--space-2); top: var(--space-2); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: var(--radius-s); background: var(--poster-chip); color: var(--on-poster); font: 600 var(--t-label)/1.3 var(--font-sans); box-shadow: none; }
.q-dtile__badge .q-i { width: 12px; height: 12px; }
.q-dtile__name { margin-top: 4px; font: 650 var(--t-small-strong)/1.25 var(--font-sans); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-dtile__meta { display: flex; align-items: center; gap: 5px; min-width: 0; margin: 0; font-size: var(--t-label); line-height: 1.3; color: var(--ink-2); }
.q-dtile__meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-dtile__meta > .q-i { flex: none; width: 14px; height: 14px; color: var(--ink-2); }
.q-dtile .ring-fg { stroke: var(--accent); }
.q-dtile .ring-bg { stroke: var(--line); }
.q-dtile__join { justify-self: start; }
/* a deck's picture: as many cells as it has pictures, its cover art when it has none */
.q-mosaic { color: var(--on-poster); }
.q-mosaic--n1 { grid-template-columns: 1fr; }
.q-mosaic--n2 { grid-template-columns: 1fr 1fr; }
.q-mosaic--n3, .q-mosaic--n4 { grid-template: 1fr 1fr / 1fr 1fr; }
.q-mosaic--n3 > :first-child { grid-row: 1 / 3; }
.q-maker { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.q-maker .q-face { border-width: 0; }
.q-maker__who { flex: 1; min-width: 0; }
.q-maker__who h1 { margin: 0; font: 750 var(--t-title-1)/1.05 var(--font-sans); font-stretch: 85%; overflow-wrap: anywhere; }

/* ---------- a deck's page: its cover, how far you are, its buttons, its cards ---------- */
.q-dpage { gap: var(--space-5); }
.q-dhead { display: grid; gap: var(--space-3); padding: 0; min-width: 0; }
.q-dhead__cover { min-height: 184px; }
.q-dhead .q-cover__title { font: 800 var(--t-title-1)/1 var(--font-sans); font-stretch: 75%; overflow-wrap: anywhere; letter-spacing: 0; }
.q-cover .q-eyebrow { color: var(--on-poster); }
.q-cover .q-eyebrow a { color: inherit; }
.q-dhead .q-eyebrow .q-i { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }
.q-dhead__title { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.q-dhead__pen { width: 36px; height: 36px; border-color: var(--poster-edge); background: var(--poster-chip); color: var(--on-poster); }
.q-dhead__pen .q-i { width: 16px; height: 16px; }
.q-dhead__lead { margin: 0; max-width: var(--read-max); color: var(--ink); font-size: var(--t-body); line-height: 1.5; }
.q-dhead .dh-members { display: flex; align-items: center; gap: 6px; margin: 0; }
.q-dhead .dh-members .q-i { width: 16px; height: 16px; }
.q-dhead__rename { display: grid; gap: var(--space-2); }
.q-dyou { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.q-dyou .q-donut { width: 112px; }
.q-dyou .q-donut__n b { font-size: var(--t-title-1); }
.q-donut__n > .q-i { width: 36px; height: 36px; color: var(--ink); }
.q-dyou .q-cell { min-height: 84px; }
.q-cell__w .q-i { width: 14px; height: 14px; }
.q-cell--none b { color: var(--ink-2); }
.q-dyou__new { display: grid; gap: 2px; margin: 0; }
.q-dyou__new b { font: 700 var(--t-title-3)/1.2 var(--font-sans); }
@media (max-width: 420px) { .q-dyou { grid-template-columns: minmax(0, 1fr); justify-items: center; } .q-dyou > .q-grid4 { width: 100%; } }
.q-dbtns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.q-dpage .dh-btns { padding: 0; }
.q-dpage .dh-leave { margin: 0; }
.q-dsec { display: grid; gap: var(--space-3); min-width: 0; padding: 0; border: 0; }
.q-dsec h2 { margin: 0; font: 700 var(--t-title-3)/1.2 var(--font-sans); }
.q-dsec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.q-dsec__h3 { margin: var(--space-2) 0 0; font: 650 var(--t-body-strong)/1.3 var(--font-sans); }
.q-dsec__n { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.q-dsec__n b { font: 800 var(--t-title-1)/1 var(--font-sans); font-stretch: 85%; }
.q-dsec .src-line { display: flex; align-items: flex-start; gap: 6px; }
.q-dsec .src-line .q-i { flex: none; width: 16px; height: 16px; margin-top: 2px; }
/* rows: a card without a picture shows its cover art; a lookup that is not of the deck's kind, dimmed */
.q-thumb { position: relative; }
.q-thumb > .q-pic { width: 100%; height: 100%; }
button.q-row { width: 100%; font: inherit; text-align: start; cursor: pointer; }
.q-row--dim { opacity: 0.7; }
.q-row--text { grid-template-columns: minmax(0, 1fr); }
.q-row__title .q-tag { vertical-align: 2px; }
.q-tag--danger { background: var(--danger-soft); color: var(--danger); }
.q-share__bar { display: flex; height: 6px; margin: 4px 0; overflow: hidden; border-radius: var(--radius-round); background: var(--sunk); }
.q-share__bar i { display: block; height: 100%; }
.q-share__love { background: var(--love); }
.q-share__want { background: var(--want); }
.q-addbox { display: grid; gap: var(--space-2); }
.q-csv { min-height: 120px; font-size: var(--t-small); }
.q-more > summary { display: flex; align-items: center; min-height: var(--hit); font-weight: 600; cursor: pointer; }
/* a card's row taken out by a swipe: the colour of a destructive act, never an answer's (rule 7) */
.crow.swiping .q-row.cr-main { background: var(--danger-soft); border-color: var(--danger); }
/* a card's sheet (the maker's): its picture, its words, its fields */
.q-cardsheet__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.q-cardsheet__head h2 { margin: 0; font: 650 var(--t-title-3)/1.2 var(--font-sans); overflow-wrap: anywhere; }
.q-cardsheet__who { min-width: 0; }
.q-cardsheet__body { padding: var(--space-2) var(--space-4) var(--space-4); }

/* ---------- Swipe together: its home, the lobby, who is in, the waiting, the matches, a pick shared ---------- */
.q-tg { gap: var(--space-5); }
.q-tg__top { display: grid; gap: var(--space-2); padding: 0; }
.q-tg__top h1 { margin: 0; font: 750 var(--t-title-1)/1.05 var(--font-sans); font-stretch: 85%; text-wrap: balance; }
.q-tg__top .q-tg__n { color: var(--ink); font: 800 var(--t-display)/1 var(--font-sans); font-stretch: 75%; }
.q-tg__code { padding: var(--space-3) var(--space-4); border-radius: var(--radius-l); background: var(--sunk); text-align: center;
  font: 800 var(--t-display)/1 var(--font-sans); font-stretch: 85%; letter-spacing: 0.12em; overflow-wrap: anywhere; }
.q-tg__rule { display: flex; align-items: flex-start; gap: var(--space-2); padding: 0; }
.q-tg__rule .q-i { flex: none; margin-top: 2px; }
.q-tg__initial { cursor: pointer; }
.q-tg__initial input { width: 22px; height: 22px; margin: 0 var(--space-2); accent-color: var(--accent); }
.q-inline { display: flex; gap: var(--space-2); }
.q-inline .q-input { flex: 1; min-width: 0; }
.q-people { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.q-people .q-person { color: var(--ink); }
.q-people .q-person .q-i { width: 14px; height: 14px; color: var(--ink-2); }
.q-people .q-person.invited { border-style: dashed; color: var(--ink-2); }
.q-tg__bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px var(--space-4) var(--space-2); }
.q-tg__wait { gap: var(--space-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-l); }
.q-tg__wait h3 { margin: 0; font: 650 var(--t-title-3)/1.2 var(--font-sans); }
.q-ranks { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.q-rank { display: grid; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--raised); }
.q-rank.first { border-color: var(--accent); background: var(--raised); box-shadow: var(--shadow-card); }
.q-rank__b { display: grid; grid-template-columns: 28px 52px minmax(0, 1fr); align-items: center; gap: var(--space-3); width: 100%; min-height: 64px;
  padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.q-rank .q-rank__no { font: 800 var(--t-title-2)/1 var(--font-sans); font-stretch: 75%; text-align: center; }
.q-rank__pic { width: 52px; aspect-ratio: 2 / 3; border-radius: var(--radius-s); }
.q-rank__tx { display: grid; gap: 2px; min-width: 0; }
.q-rank__pick { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--t-label)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.q-rank__pick .q-i { width: 12px; height: 12px; }
.q-rank__wl { display: flex; align-items: center; gap: 5px; color: var(--ink); }
.q-rank__wl:empty { display: none; }
.q-rank__bar { display: block; height: 6px; margin-top: 6px; overflow: hidden; border-radius: var(--radius-round); background: var(--sunk); }
.q-rank__bar i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: var(--accent); }
.q-rank__acts { padding-left: calc(28px + var(--space-3)); }
.sheet-acts .q-tg__locked { color: var(--ink); }
.q-pick { position: relative; isolation: isolate; overflow: hidden; gap: var(--space-3); }
.q-pick > .q-room { inset: 0; }
.q-pick h1 { 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-pick__poster { width: min(220px, 56vw); aspect-ratio: 2 / 3; border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.q-pick .q-btn { max-width: 20rem; }

/* ---------- a deck's makers, its news, its queue, the community; moderation ---------- */
.q-row .q-face { justify-self: center; border-width: 0; }
.q-row__acts { display: flex; align-items: center; gap: var(--space-2); }
/* an icon button asked a second time (twoTaps) says so in words: it grows to hold them */
.q-iconbtn[data-armed] { width: auto; height: auto; min-width: var(--hit); min-height: var(--hit); max-width: 160px; padding: 4px 12px; border-radius: var(--radius-m);
  font: 600 var(--t-small-strong)/1.2 var(--font-sans); white-space: normal; text-align: center; }
.q-mk.pending { border-style: dashed; }
.q-mk.pending .q-face { opacity: 0.6; }
.q-mk__pick { display: grid; gap: var(--space-2); }
.q-quote { overflow-wrap: anywhere; }
.q-hidden { display: flex; align-items: flex-start; gap: 4px; color: var(--danger); }
.q-hidden .q-i { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.q-asked { align-items: flex-start; }
.q-asked > .q-i { flex: none; margin-top: 2px; }
.q-asked p { margin: 0 0 var(--space-2); }
.q-activity { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--sunk); }
.q-activity__h { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 600 var(--t-small-strong)/1.3 var(--font-sans); }
.q-activity__h .q-i { flex: none; width: 16px; height: 16px; color: var(--ink-2); }
.q-activity__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.q-activity__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); font-size: var(--t-small); }
.q-activity__list .q-face { width: 24px; height: 24px; border-width: 0; font-size: var(--t-label); }
.q-activity__list small { white-space: nowrap; }
.q-community { display: grid; gap: var(--space-3); }
.q-weeks { display: grid; gap: 6px; }
/* members week by week: how many, never who; the bars in the accent, not an answer's colour (rule 7) */
.q-weeks__bars { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 5px; height: 48px; }
.q-weeks__bars i { display: block; height: var(--h); min-height: 3px; border-radius: var(--radius-s) var(--radius-s) 2px 2px; background: var(--accent); }
.q-weeks__bars i.none { background: var(--sunk); }
.q-mqs { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.q-mq { display: grid; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.q-mq:last-child { border-bottom: 0; }
.q-mq__said { display: flex; align-items: center; gap: 4px; color: var(--danger); }
.q-mq__said .q-i { width: 14px; height: 14px; }
.q-mq__acts { display: grid; gap: var(--space-2); }
.q-mq__pic { width: 44px; }

/* ---------- your answers, a type's page, one's year ---------- */
.q-answers { gap: var(--space-4); }
.q-answers .q-head .q-btn { flex: none; }
.q-answers__tools { display: grid; gap: var(--space-3); min-width: 0; }
.q-chip[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.q-chip[aria-selected="true"] .q-chip__count { color: inherit; opacity: 0.75; }
.q-answers__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
/* a poster tile without a picture shows its cover art (answers.js draws it) */
.pp > .q-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.q-answers .pp { border-radius: var(--radius-s); }
.q-answers .pp .st { background: var(--raised); color: var(--love-ink); box-shadow: var(--shadow-1); }
.q-answers .pt-t { font: 600 var(--t-small-strong)/1.25 var(--font-sans); }
.q-type { gap: var(--space-5); }
.q-type__ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--radius-m); background: var(--sunk); }
.q-type__ic .q-i { width: 24px; height: 24px; }
.q-type__who { flex: 1; min-width: 0; }
/* the spread: love's and want's numbers in their text tokens (the fills fail as text, rule 6) */
.q-type .grid2 .hd, .q-type .grid2 .rh { font: 600 var(--t-label)/1.3 var(--font-sans); letter-spacing: 0.12em; }
.q-type .cell { border-radius: var(--radius-m); }
.q-type .cell b { font: 800 var(--t-title-1)/1 var(--font-sans); font-stretch: 85%; }
.q-type .cell span { font-size: var(--t-small); }
.q-type .cell.k-pos b { color: var(--love-ink); }
.q-type .cell.u-pos b { color: var(--want-ink); }
.q-year { gap: var(--space-5); }
.q-year__head { display: grid; gap: var(--space-2); }
.q-year__head h1 { margin: 0; font: 800 var(--t-poster)/0.95 var(--font-sans); font-stretch: 75%; text-transform: uppercase; text-wrap: balance; }
.q-year__n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.q-year__n > span { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-m); background: var(--sunk); }
.q-year__n b { font: 800 var(--t-title-1)/1 var(--font-sans); font-stretch: 85%; font-variant-numeric: tabular-nums; }
.q-year__n small { font-size: var(--t-small); color: var(--ink-2); }
.q-year__top { margin: 0; padding: 0; list-style: none; }
.q-year__top > li { flex: 0 0 92px; }
.q-year__love { position: absolute; z-index: 3; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-round);
  background: var(--raised); color: var(--love-ink); }
.q-year__love .q-i { width: 12px; height: 12px; }

/* ---------- the last old-look bits: a card's report, the player's bar, the install hint ---------- */
.report .q-btn .q-i { width: 15px; height: 15px; }
.report-kinds .q-btn { white-space: normal; line-height: 1.2; }
.player .player-head { color: var(--on-poster); }
.player-head .q-iconbtn { border-color: var(--poster-edge); background: var(--poster-chip); color: var(--on-poster); }
.inst .q-meta { font-size: var(--t-body); }
.q-empty .q-dbtns { justify-content: center; }
.sheet .q-btn--quiet { justify-self: center; }

/* ---------- posting a card: where it goes under the preview, Post in a band of its own (L5's item K) ---------- */
.q-postgo { position: sticky; bottom: 0; z-index: 2; padding-block: var(--space-3); background: var(--surface); }
.q-postgo::after { content: ""; position: absolute; inset: calc(100% - 1px) 0 auto; height: calc(var(--space-6) + 1px); background: var(--surface); }
.q-postgo > #pgo { position: static; box-shadow: none; }
.q-postnew { scroll-margin-bottom: calc(var(--hit) + var(--space-7)); }

/* ---------- the TV page: always dark, a 16:9 canvas that grows with the screen ---------- */
.q-tv { position: relative; display: grid; place-items: center; min-height: 100dvh; overflow: hidden; background: var(--ground); color: var(--ink); isolation: isolate; }
.q-tv__stage { position: relative; display: grid; align-content: start; gap: var(--space-5); width: 100%; min-height: 100dvh; padding: var(--space-5) var(--space-4); isolation: isolate; }
.q-tv__stage > .q-room { inset: 0; }
.q-tv__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.q-tv__top .q-brand { font-size: var(--t-title-3); }
.q-tv h1 { margin: 0; font: 800 var(--t-poster)/0.95 var(--font-sans); font-stretch: 75%; text-transform: uppercase; text-wrap: balance; }
.q-tv h2 { margin: 0; font: 700 var(--t-title-2)/1.1 var(--font-sans); font-stretch: 85%; }
.q-tv__lobby { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-6); }
.q-tv__join { display: grid; gap: var(--space-3); min-width: 0; }
.q-tv__url { margin: 0; font-size: var(--t-title-3); color: var(--ink-2); overflow-wrap: anywhere; }
.q-tv__code { margin: 0; font: 800 var(--t-display)/1 var(--font-sans); font-stretch: 85%; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.q-tv__qr { display: block; justify-self: center; width: min(280px, 70vw); aspect-ratio: 1; border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.q-tv__guests { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.q-tv__guest { display: grid; justify-items: center; gap: var(--space-1); width: 76px; text-align: center; font: 600 var(--t-small-strong)/1.2 var(--font-sans); overflow-wrap: anywhere; }
/* how far each one is: a ring around the face, never an answer (principle 3) */
.q-tv__ring { position: relative; display: grid; place-items: center; width: 66px; height: 66px; border-radius: var(--radius-round); background: conic-gradient(var(--accent) var(--p, 0%), var(--line) 0); }
.q-tv__ring > .q-face { border-color: var(--ground); }
.q-tv__done { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-round);
  border: 2px solid var(--ground); background: var(--accent); color: var(--on-accent); }
.q-tv__done .q-i { width: 14px; height: 14px; stroke-width: 3; }
.q-tv__note { margin: 0; font-size: var(--t-title-3); color: var(--ink-2); }
.q-tv__matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.q-tv__match { display: grid; gap: var(--space-2); align-content: start; min-width: 0; animation: q-tv-land var(--dur-room) var(--ease-ui) both; }
.q-tv__match > .q-pic { aspect-ratio: 2 / 3; border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.q-tv__match--chosen > .q-pic { outline: 3px solid var(--ink); outline-offset: 3px; }
.q-tv__t { font: 650 var(--t-small-strong)/1.25 var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-tv__more { display: grid; place-items: center; aspect-ratio: 2 / 3; border-radius: var(--radius-m); background: var(--sunk); color: var(--ink-2); font: 800 var(--t-title-1)/1 var(--font-sans); font-stretch: 85%; }
@keyframes q-tv-land { from { opacity: 0; transform: translateY(24px) scale(0.94); } }
.q-tv__picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.q-tv__player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-l); background: var(--screen); box-shadow: var(--shadow-card); }
.q-tv__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.q-tv__gone { display: grid; justify-items: center; align-content: center; gap: var(--space-5); min-height: 60vh; text-align: center; }
/* a new match's moment: its poster over the room in its colours, every face under it (Tom's pick) */
.q-tv__moments { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.q-tv__moments:empty { display: none; }
.q-tv__moment { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ground); animation: q-tv-moment 3200ms var(--ease-ui) both; }
.q-tv__momentin { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--space-5); width: 100%; height: 100%; isolation: isolate; }
.q-tv__momentin > .q-room { inset: 0; }
.q-tv__momentin > .q-pic { height: min(58vh, 420px); aspect-ratio: 2 / 3; border-radius: var(--radius-l); box-shadow: var(--shadow-card); animation: q-tv-pop 3200ms var(--ease-ui) both; }
.q-tv__faces { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.q-tv__faces .q-face { border-color: var(--ground); }
@keyframes q-tv-moment { 0% { opacity: 0; } 10%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes q-tv-pop { 0% { transform: scale(0.86); } 14%, 86% { transform: none; } 100% { transform: scale(0.7) translateY(-8%); } }

/* a TV, a computer: laid out at 960 by 540, then grown to fill the screen (tv.js sets --tv-zoom);
   a phone that opens the link keeps one column */
@media (min-width: 960px) and (min-height: 540px) {
  .q-tv__stage, .q-tv__momentin { width: 960px; height: 540px; min-height: 0; zoom: var(--tv-zoom, 1); }
  /* the canvas holds a screen whole: the head, the faces and one row of posters fit its 540 (L5's item D) */
  .q-tv__stage { gap: var(--space-4); padding: var(--space-6) var(--space-7); }
  .q-tv__t { -webkit-line-clamp: 1; }
  .q-tv__momentin > .q-pic { height: 340px; }
  .q-tv__lobby { grid-template-columns: minmax(0, 1fr) auto; min-height: 400px; }
  .q-tv__matches--picks { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; }
  .q-tv__qr { width: 280px; }
  .q-tv__matches { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .q-tv__picks { grid-template-columns: minmax(0, 1fr) 232px; }
  .q-tv__picks .q-tv__matches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  /* beside the trailer, two rows of picks fit under the head (L5's item G): the posters keep a height, cropped */
  .q-tv__picks .q-tv__match > .q-pic, .q-tv__picks .q-tv__more { aspect-ratio: auto; height: 150px; }
}

/* ---------- reduce motion: nothing lands, nothing turns ---------- */
@media (prefers-reduced-motion: reduce) {
  .q-tv__match, .q-tv__momentin > .q-pic { animation: none; }
  details.q-fold > summary > .q-i:last-child { transition: none; }
}

/* ---------- every list on the switcher (Tom, 2026-11-13, step 47) ---------- */
/* a list as a form's field, where a select was: the field's look, the current choice, a chevron */
button.q-switch.q-pickfield { display: flex; width: 100%; max-width: none; margin: 0; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--raised); color: var(--ink); font: 400 var(--t-body)/1.3 var(--font-sans); font-stretch: 100%; }
button.q-switch.q-pickfield .q-i { color: var(--ink-2); }
button.q-switch.q-pickfield:disabled { opacity: 0.5; cursor: default; }
button.q-switch.q-pickfield:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 0; }
/* a plain word's row (a language, a size): no cover */
.q-switcher .q-stackrow.q-stackrow--plain { grid-template-columns: minmax(0, 1fr) auto auto; min-height: var(--hit); padding-inline: var(--space-3); }
/* several to pick: a tick on each row, the list scrolls, the button stays at the foot */
.q-picker--multi .q-switcher__sheet { display: flex; flex-direction: column; overflow: hidden; }
.q-picker--multi .q-switcher__sheet > .grab { align-self: center; flex: none; }
.q-picker--multi .q-switcher__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.q-picker--multi .q-stackrow { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.q-switcher.q-picker--multi .q-stackrow[aria-pressed="true"] { background: none; box-shadow: none; }
.q-picker__tick { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--line-strong); border-radius: var(--radius-round); color: transparent; }
.q-picker__tick .q-i { width: 16px; height: 16px; }
.q-stackrow[aria-pressed="true"] .q-picker__tick { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.q-picker__foot { flex: none; padding-top: var(--space-2); }
/* a list chosen in a row of fields (a birthday's month) */
.bday-month { display: grid; min-width: 0; }
.bday-row button.q-switch.q-pickfield { min-width: 0; }
button.q-switch.q-pickfield .q-pickfield__none { color: var(--ink-2); }

/* ---------- the wishlist (N1, SPEC §7 amended 2026-11-13) ---------- */
/* the bookmark at the top of every screen: no count that stays, a "+1" for a moment when a want lands */
.q-iconbtn.q-wish { position: absolute; z-index: 20; top: calc(var(--space-2) + env(safe-area-inset-top, 0px)); right: max(var(--space-3), env(safe-area-inset-right, 0px));
  background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--ink); }
.q-iconbtn.q-wish.q-wish--on { border-color: var(--want); background: var(--want-soft); color: var(--want-ink); }
.q-iconbtn.q-wish.q-wish--on .q-i { fill: var(--want); }
.q-wish__plus { position: absolute; top: -6px; right: -8px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: var(--radius-round); background: var(--want); color: var(--on-want);
  font: 800 var(--t-label)/20px var(--font-sans); text-align: center; animation: q-wish-plus var(--dur-ui) var(--ease-ui); }
@keyframes q-wish-plus { from { transform: translateY(6px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
/* each screen's head leaves the bookmark its corner */
.q-app .main .q-swipe__head, .q-app .main .q-head, .q-app .main .dl-head, .q-app .main .q-profile__head, .q-app .main .subhead { padding-right: calc(var(--hit) + var(--space-3)); }
/* its sheet: where one is first, the list scrolls, its button stays at the foot */
.q-switcher.q-wishsheet { z-index: 48; } /* under a card's sheet (50), over the stack it came from */
.q-wishsheet .q-switcher__sheet { display: flex; flex-direction: column; overflow: hidden; }
.q-wishsheet .q-switcher__sheet > .grab { align-self: center; flex: none; }
.q-wishsheet .q-switcher__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.q-wishsheet__tools { display: flex; gap: var(--space-2); }
.q-wishsheet__levels { flex: none; }
.q-wishsheet__levels .q-chip .face { width: 20px; height: 20px; font-size: 10px; }
.q-wishsheet__tag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-s); background: var(--sunk); color: var(--ink-2);
  font: 700 var(--t-label)/1.2 var(--font-sans); white-space: nowrap; }
.q-wishsheet__tag--must { background: var(--want-soft); color: var(--want-ink); }
.q-wishsheet__tag .q-i { width: 12px; height: 12px; fill: currentColor; }
.q-wishsheet .q-stackrow:disabled { cursor: default; opacity: 1; }
.q-wishsheet__more { justify-self: center; }
.q-wishsheet__empty { padding-block: var(--space-6); }
.q-wishsheet__foot { flex: none; }
.q-wishsheet__foot:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .q-wish__plus { animation: none; } }

/* L1, N4a: a topic's card, its posts' pictures filling it as one (the mosaic is a square on a deck's page) */
.q-card--topic > .q-pic > .q-mosaic { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }

/* L1, N4b: the mark on a card about Quadra (the version's, For you's break), in the middle of what the words leave */
.q-card__taste > .q-mark { position: absolute; inset: 0 0 40%; margin: auto; }

/* ---------- the new version's shell (step R9): no bookmark in the corner; Saved, You's posts, a person's posts ---------- */
.q-app--new .main .q-swipe__head, .q-app--new .main .q-head, .q-app--new .main .dl-head, .q-app--new .main .q-profile__head, .q-app--new .main .subhead { padding-right: var(--space-4); }
.q-saved { display: grid; gap: var(--space-3); align-content: start; }
.q-saved__more { justify-self: center; }
.q-saved__foot:empty { display: none; }
.q-profile__posts, .q-maker__posts { display: grid; gap: var(--space-3); }
.q-profile__posts h2, .q-maker__posts h2 { margin: 0; font: 700 var(--t-title-2)/1.1 var(--font-sans); }
.q-profile__first { display: flex; align-items: center; gap: var(--space-3); min-height: 72px; padding: var(--space-3) var(--space-4); border: 2px dashed var(--line-strong);
  border-radius: var(--radius-l); color: var(--ink-2); font: 600 var(--t-body)/1.3 var(--font-sans); text-decoration: none; }
/* the "+1" of a want landing, on the Saved tab, for a moment: never a count that stays (SPEC §7) */
.q-nav__ic { position: relative; display: inline-grid; }
.q-nav__ic .q-wish__plus { top: -8px; right: -14px; }

/* ---------- boards in the new version's screens (step R10): Saved's strip, a board's lean page, friends' and a maker's ---------- */
.q-saved__boards, .q-friendboards, .q-maker__boards { display: grid; gap: var(--space-2); }
.q-saved__boards h2, .q-friendboards h2, .q-maker__boards h2 { margin: 0; font: 700 var(--t-title-3)/1.1 var(--font-sans); }
.q-boardpage { display: grid; gap: var(--space-3); align-content: start; }
.q-boardpage__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); margin: 0; }
.q-boardpage__line .q-i { width: 16px; height: 16px; }
.q-boardpage__who { display: inline-flex; align-items: center; gap: 4px; }
.q-boardpage__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.q-boardpage__link:empty { display: none; }

/* ---------- + in the new version (step R8): what it shows, then the post as it will look; More options folded ---------- */
.q-newpost__tabs { display: flex; width: 100%; }
.q-newpost__tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-inline: 8px; }
.q-newpost__tabs .q-i { flex: none; width: 18px; height: 18px; }
.q-newpost__tabs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-newpost__body { display: grid; gap: var(--space-3); }
.q-newpost__tiles { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-2); }
.q-newpost__tile { display: grid; place-items: center; align-content: center; gap: var(--space-2); min-height: 160px; padding: var(--space-3); border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-l); background: var(--sunk); color: var(--ink); font: 600 var(--t-body)/1.3 var(--font-sans); text-align: center; cursor: pointer; }
.q-newpost__tile .q-i { width: 32px; height: 32px; }
.q-newpost__tile:focus-within { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.q-newpost__tracks:empty { display: none; }
.q-newpost__track { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.q-newpost__track > .q-row { width: 100%; grid-template-columns: 44px minmax(0, 1fr); text-align: left; font: inherit; cursor: pointer; }
.q-newpost__track .q-thumb { aspect-ratio: 1; }
.q-newpost__track .b-audio .play { border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); }
.q-newpost__track .b-audio.playing .play { border-color: var(--accent); color: var(--accent); }
.q-newpost__preview { height: min(52dvh, 460px); }
.q-newpost__song { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line);
  border-radius: var(--radius-l); background: var(--raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.q-newpost__song > .q-i { flex: none; width: 20px; height: 20px; }
.q-newpost__song--on { border-color: var(--accent); cursor: default; }
.q-newpost__songtx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.q-newpost__song--on .q-newpost__songtx { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-newpost__songs { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.q-newpost__chips:empty { display: none; }
.q-newpost__x { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -8px -4px 0; padding: 0; border: 0; border-radius: var(--radius-round);
  background: none; color: inherit; cursor: pointer; }
.q-newpost__x .q-i { width: 16px; height: 16px; }
.q-newpost__more { display: inline-flex; align-items: center; justify-self: center; gap: 8px; min-height: var(--hit); padding: 6px 14px; border: 0; border-radius: var(--radius-round);
  background: none; color: var(--ink-2); font: 600 var(--t-body)/1.3 var(--font-sans); cursor: pointer; }
.q-newpost__more .q-i { width: 18px; height: 18px; }
.q-newpost__opts { display: grid; gap: var(--space-4); }
.q-newpost__words { min-height: 72px; resize: vertical; font: inherit; }
.q-newpost__start { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.q-newpost__start input { width: 100%; accent-color: var(--accent); }
.q-newpost__start output { font: 600 var(--t-body)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
/* who sees it: while one's posts reach everyone, this post's own (R15), else Friends; then the link for all of them */
.q-newpost__who { display: grid; gap: var(--space-2); }
.q-newpost__who .q-set__row { min-height: 52px; }
.q-newpost__choice { width: 100%; grid-template-columns: 44px minmax(0, 1fr); text-align: left; font: inherit; cursor: pointer; }
.q-newpost__choice .q-thumb { aspect-ratio: 1; border-radius: var(--radius-round); background: var(--sunk); color: var(--ink); }
.q-newpost__ask .q-rows { margin-bottom: var(--space-3); }

/* ---------- a friend's page in the new version (R2): the posts both liked ---------- */
.q-friendposts { display: grid; gap: var(--space-3); }
.q-friendposts h2 { margin: 0; font: 700 var(--t-title-3)/1.1 var(--font-sans); }