/*
 * Hilton Grand Vacations × WHISP creator casting.
 *
 * Two surfaces, on purpose:
 *   the brand line  white, so both logos sit in their own colours, unaltered
 *   the stage       dark, so the creator's video is the brightest thing on screen
 *
 * One figure at a time: the card. Inside it, the video and the single line
 * that introduces the person. Everything else is quieter, in steps.
 *
 * Functional colour is two hues, one meaning each:
 *   green  save, saved            (always with the heart and the word)
 *   blue   a link that leaves     (always with the arrow)
 * Pass is neutral. Declining a creator is not an error.
 *
 * Desktop and phone are two layouts, not one layout squeezed:
 *   desktop  video and story side by side, everything visible, keys shown
 *   phone    the video is the card. One strip under it says who this is and
 *            opens upward for the rest. The two choices sit under the thumb.
 *
 * Type never goes below 12px, and body copy is 15px or more.
 */

:root {
  --ground: #080c14;
  --surface: #111827;
  --surface-raised: #1a2437;
  --line: #263248;
  --text: #f4f6fa;
  --text-soft: #cdd4e0;
  --muted: #98a3b6;
  --save: #3ddc97;
  --save-ink: #04271a;
  --save-on-white: #0b7d50;
  --link: #9cc5ff;
  --idea: #f7c948;        /* yellow means one thing here: the idea on a card */
  --pass: #ff9d8f;        /* a warm red, only on the reasons for passing */
  --paper: #ffffff;
  --ink: #111827;
  --ink-soft: #566074;
  --paper-line: #dfe4ec;
  --radius: 22px;
  --bar-height: 64px;
  --actions-height: 0px;   /* on a desk the choices are in the card; a phone gives them a row of their own */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(1200px 700px at 50% 0%, #132037 0%, var(--ground) 62%) fixed var(--ground);
  color: var(--text);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
/* the heart is the one filled icon: it is the saved mark */
.shortlist-button .icon, .icon-heart { fill: currentColor; stroke: none; }

kbd {
  font: 600 12px/1 var(--sans);
  min-width: 24px; text-align: center;
  padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--line); color: var(--muted);
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
h1, h2, h3, p, ul { margin: 0; }
img { display: block; }

/* ---------- the brand line ---------- */

.bar {
  position: relative;
  height: var(--bar-height);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 28px;
  background: var(--paper); color: var(--ink);
}
.bar-whisp { height: 30px; width: auto; justify-self: start; }
.bar-client { height: 34px; width: auto; justify-self: center; }
.bar-right { justify-self: end; display: flex; align-items: center; gap: 16px; }
.bar :focus-visible { outline-color: #1d4ed8; }

.shortlist-button {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 12px 0 14px;
  border-radius: 999px; border: 1px solid var(--paper-line);
  background: var(--paper); color: var(--ink);
  font-size: 15px; white-space: nowrap;
  transition: border-color 120ms ease;
}
.shortlist-button:hover { border-color: #b8c1d1; }

/* The two round buttons beside the saved count: "?" for how it works, a speech bubble for feedback.
   Icons only, and quieter than the count, because they are help and not the work. */
.bar-button {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border-radius: 999px; border: 1px solid var(--paper-line);
  background: var(--paper); color: var(--ink-soft);
  font: 700 17px/1 var(--sans);
  transition: border-color 120ms ease, color 120ms ease;
}
.bar-button:hover { border-color: #b8c1d1; color: var(--ink); }
.bar-button .icon { width: 19px; height: 19px; }
/* the two help buttons sit together, a little apart from the count they are not part of */
.bar-right .bar-button + .bar-button { margin-left: -8px; }
.shortlist-button .icon { width: 18px; height: 18px; color: var(--save-on-white); }
.shortlist-button b { font-weight: 700; font-variant-numeric: tabular-nums; }
.shortlist-button kbd { border-color: var(--paper-line); color: var(--ink-soft); }
.shortlist-button.is-bumped { animation: bump 380ms ease-out; }
@keyframes bump { 35% { transform: scale(1.08); border-color: var(--save-on-white); } }

/* ---------- stage and card ---------- */

.stage {
  height: calc(100dvh - var(--bar-height));
  display: grid; place-items: center;
  padding: 0 20px;
}

/* The deck is the card's footprint. The card and the three choices both live in it. */
.deck {
  --card-height: min(calc(100dvh - var(--bar-height) - 44px), 820px);
  --info-width: clamp(340px, calc(100vw - 42px - var(--card-height) * 9 / 16), 440px);
  position: relative;
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--card-height) * 9 / 16) var(--info-width);
  height: var(--card-height);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  touch-action: pan-y;
  will-change: transform;
  outline: none;
}
.card.is-entering { animation: card-in 180ms ease-out; }
.card.is-leaving { transition: transform 230ms ease-in, opacity 230ms ease-in; }
.card.is-dragging { transition: none; cursor: grabbing; }
.card.is-settling { transition: transform 180ms ease-out; }
@keyframes card-in {
  from { opacity: 0; transform: scale(0.975) translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* the video */

.media { position: relative; background: #000; min-height: 0; min-width: 0; }
.media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

.media-empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 10px;
  padding: 32px; text-align: center;
  background: linear-gradient(160deg, #1b2740, #0d1422);
}
.media-empty strong { font: 600 44px/1 var(--serif); color: var(--text-soft); }
.media-empty span { color: var(--muted); font-size: 15px; }

.media-nav {
  position: absolute; right: 10px; top: 42%; transform: translateY(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.media-count {
  font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(8, 12, 20, 0.72); backdrop-filter: blur(8px);
  padding: 5px 8px; border-radius: 999px;
}
.media-nav button {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 12, 20, 0.72); backdrop-filter: blur(8px);
  color: #fff;
}
.media-nav button:disabled { opacity: 0.3; cursor: default; }

/* the story */

.info {
  position: relative;
  display: flex; flex-direction: column; gap: 26px;
  min-height: 0; min-width: 0;
  /* the bottom of this panel belongs to the three choices, which sit over it */
  padding: 30px 30px 132px;
  overflow-y: auto; overscroll-behavior: contain;
  cursor: grab; user-select: none;
  scrollbar-width: none;
}
.info::-webkit-scrollbar { display: none; }

/* who this is */
.lead { display: grid; gap: 8px; }
.chip {
  font: 650 12px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-soft);  /* never green: green means saved, and nothing else, on this screen */
}
.name { font: 680 28px/1.15 var(--sans); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.where { color: var(--muted); font-size: 14.5px; }

/* the introduction: the line that sells them, then the reason to believe it */
.pitch { display: grid; gap: 12px; }
.headline { font: 400 24px/1.3 var(--serif); color: var(--text); }
.sell { color: var(--text-soft); font-size: 16px; line-height: 1.5; }

/* evidence they deliver */
.proof { display: grid; gap: 4px; }
.proof-line { font-weight: 650; font-size: 15px; }
.proof-brands { color: var(--muted); font-size: 14px; }

/* in their own voice */
.words { display: grid; gap: 6px; }
.label { font: 650 12px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.words p { color: var(--muted); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
/* The idea is a selling line, not a footnote. Its label and lightbulb are the one yellow on the page,
   so the eye finds it; the line itself is in full text colour and a touch larger than the old bio was. */
.idea .label { display: inline-flex; align-items: center; gap: 7px; color: var(--idea); }
.idea .label .icon { width: 17px; height: 17px; stroke: var(--idea); }
.idea p { color: var(--text); font-size: 15.5px; }

/*
 * Reach. One tile per platform, largest following first. The follower count is the largest
 * thing on the tile because it is the question being asked; the tile is also the link out.
 */
.reach { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; }
.reach a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 48px; padding: 0 12px 0 14px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface-raised);
  color: var(--text); text-decoration: none;
}
.reach a:hover { border-color: #3b4c6b; }
.reach b { font: 700 19px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.reach b.is-unknown { font-weight: 600; font-size: 15px; color: var(--text-soft); }
.reach span { color: var(--muted); font-size: 14px; }
.reach .icon { width: 14px; height: 14px; color: var(--link); }
/* the platform's own mark: a filled shape in the tile's quiet text colour, not the brand's colours */
.reach .icon-brand { width: 16px; height: 16px; color: var(--text-soft); fill: currentColor; stroke: none; }
/* the same fact in words, for the one place there is no room for tiles: a closed strip on a phone */
.reach-line { display: none; }

/* phone only: opens the strip into the full story */
.more { display: none; }

.stamp {
  position: absolute; top: 26px; z-index: 5;
  padding: 8px 14px; border-radius: 10px;
  font: 800 20px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
}
.stamp-save { left: 22px; color: var(--save); border: 3px solid var(--save); transform: rotate(-9deg); background: rgba(4, 39, 26, 0.6); }
.stamp-pass { right: 22px; color: var(--text-soft); border: 3px solid var(--text-soft); transform: rotate(9deg); background: rgba(8, 12, 20, 0.6); }

/* ---------- states that are not a creator ---------- */

.notice {
  max-width: 460px; margin-inline: auto; text-align: center; display: grid; gap: 14px; justify-items: center;
  padding: 44px 36px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
}
.notice h1 { font: 400 30px/1.2 var(--serif); }
.notice p { color: var(--text-soft); }
.notice button { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-raised); font-weight: 600; }
.notice button.is-primary { background: var(--save); color: var(--save-ink); border-color: var(--save); }
.notice button:disabled { opacity: 0.6; cursor: default; }

/* The phone screen: one field and one button, in the same card as every other notice. */
.phone { width: 100%; display: grid; gap: 10px; justify-items: stretch; text-align: left; margin-top: 6px; }
.phone label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.phone input {
  /* 16px or more, or a phone zooms the whole page when the field is tapped */
  width: 100%; min-height: 52px; padding: 0 16px; font: 500 19px/1 var(--sans); letter-spacing: 0.02em;
  color: var(--text); background: var(--ground); border: 1px solid var(--line); border-radius: 14px;
}
.phone input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-color: var(--link); }
.phone button { width: 100%; margin-top: 4px; }
.notice .phone-problem { min-height: 1.4em; font-size: 14px; color: #ffb4a8; }

/* Until someone is in, the saved count and its shortcut mean nothing, so they are not shown. */
.is-outside .shortlist-button, .is-outside .bar-button { visibility: hidden; }
.skeleton {
  width: min(840px, 92vw); height: min(70dvh, 700px); border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--surface) 30%, #172135 50%, var(--surface) 70%); background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- the two choices ---------- */

/*
 * On a desk the choices sit at the bottom of the story panel, where the eye already is.
 * They are placed over the card, not inside it, so they hold still while cards come and go.
 * The fade above them lets a long story slide under without a hard edge.
 */
.actions {
  position: absolute; right: 1px; bottom: 1px; z-index: 6;
  width: calc(var(--info-width) - 1px);
  display: none; align-items: center; gap: 10px;
  padding: 34px 30px 28px;
  background: linear-gradient(to bottom, rgba(17, 24, 39, 0), var(--surface) 30%);
  border-radius: 0 0 calc(var(--radius) - 1px) 0;
}
.deck.has-card .actions { display: flex; }
/* Three buttons of one size, sharing the full width in equal thirds: pass, take back, save.
   Icons only. Save is the only coloured one; the other two differ only in how bright their icon is. */
.action {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  height: 58px; padding: 0; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--text-soft);
  transition: transform 90ms ease, border-color 120ms ease, filter 120ms ease, color 120ms ease;
}
.action .icon { width: 24px; height: 24px; stroke-width: 2.4; }
.action:active:not(:disabled) { transform: scale(0.97); }
.action:disabled { opacity: 0.35; cursor: default; }
.action-pass:hover:not(:disabled), .action-undo:hover:not(:disabled) { border-color: #4a5b7c; color: var(--text); }
.action-undo { color: var(--muted); }
.action-save { background: var(--save); border-color: var(--save); color: var(--save-ink); }
.action-save .icon { stroke-width: 2.8; }
.action-save:hover:not(:disabled) { filter: brightness(1.07); }

/* ---------- overlays: the opening, and the shortlist ---------- */

.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(4, 7, 12, 0.78); backdrop-filter: blur(12px); }
.overlay[hidden] { display: none; }

.intro-card {
  width: min(560px, 100%);
  display: grid; justify-items: center; gap: 22px; text-align: center;
  padding: 44px 40px 40px;
  border-radius: 26px; background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
.lockup { display: flex; align-items: center; justify-content: center; gap: 20px; }
.lockup img { height: 38px; width: auto; }
.lockup-x { color: var(--ink-soft); font: 300 24px/1 var(--sans); }
.intro-card h1 { font: 400 44px/1.1 var(--serif); letter-spacing: -0.01em; }
.intro-lede { max-width: 30em; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
.intro-lede span { color: var(--ink); font-weight: 650; }
.intro-how { list-style: none; padding: 0; display: grid; gap: 12px; justify-items: start; font-size: 17px; }
/* a line that wraps keeps its icon beside its first line, and reads left to right like the short ones */
.intro-how li { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.intro-how .icon { color: var(--ink-soft); flex: none; margin-top: 2px; }
.intro-how .icon-heart, .intro-how .icon-yes { color: var(--save-on-white); }
.intro-start {
  min-height: 58px; padding: 0 34px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--paper); font-weight: 650; font-size: 17px;
}
.intro-start:hover { background: #1f2a3d; }
.intro-start:focus-visible { outline-color: #1d4ed8; }
/* on a short screen the guide scrolls inside itself instead of running off the bottom */
.intro-card { max-height: calc(100dvh - 48px); overflow-y: auto; }

/* ---------- why ---------- */

/* The question after every Save and Pass. Small and quick: a title, four reasons to tap, one line to type in. */
.why-card {
  width: min(480px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 26px 24px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
.why-card h2 { font: 400 24px/1.25 var(--serif); overflow-wrap: anywhere; }
/* Four reasons in two even columns: big, equal targets, each a picture, a few words and its number key.
   One tap decides, so these are the fastest thing on the page. */
.why-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.why-quick .reason {
  min-height: 52px; padding: 0 12px 0 14px; gap: 10px; justify-content: flex-start; border-radius: 14px;
  font-size: 14.5px; color: var(--text); white-space: normal; text-align: left; line-height: 1.25;
  border-color: var(--line); background: var(--surface-raised);
  transition: border-color 100ms ease, background-color 100ms ease;
}
.why-quick .reason .icon { width: 20px; height: 20px; }
.why-quick .reason span { flex: 1; }
.why-quick .reason kbd { color: var(--muted); }
/* The colour is the feeling: green for what they liked, a warm red for what put them off. It is on the
   picture and on the edge when pointed at, never the whole chip, so four of them do not shout. */
.why-quick.is-save .reason .icon { color: var(--save); }
.why-quick.is-pass .reason .icon { color: var(--pass); }
.why-quick.is-save .reason:hover, .why-quick.is-save .reason:focus-visible { border-color: var(--save); background: rgba(61, 220, 151, 0.08); }
.why-quick.is-pass .reason:hover, .why-quick.is-pass .reason:focus-visible { border-color: var(--pass); background: rgba(255, 157, 143, 0.08); }
/* the typing line asks its own small question, with a pencil to say this one is for writing */
.why-label { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-soft); }
.why-label .icon { width: 15px; height: 15px; color: var(--muted); }
.why-text::placeholder { color: var(--muted); font-weight: 400; }
.why-text {
  /* 16px or more, or a phone zooms the whole page when the field is tapped */
  width: 100%; min-height: 50px; padding: 0 16px; font: 500 16px/1 var(--sans);
  color: var(--text); background: var(--ground); border: 1px solid var(--line); border-radius: 12px;
}
.why-text:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-color: var(--link); }
.why-hint { min-height: 1.4em; font-size: 13.5px; color: var(--muted); }
.why-actions { display: flex; justify-content: space-between; gap: 10px; }
.why-actions button { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-raised); font-weight: 600; }
.why-actions button.is-primary { min-width: 132px; background: var(--save); border-color: var(--save); color: var(--save-ink); }
/* green means saved on this page, so the button that passes, and the one that sends feedback, are not green */
.why-actions button.is-primary.is-pass, .why-actions button.is-primary.is-plain { background: var(--text); border-color: var(--text); color: var(--ink); }
/* the feedback panel is the same card with room to write more than a line */
.note-text {
  width: 100%; min-height: 120px; padding: 12px 16px; resize: vertical;
  font: 400 16px/1.45 var(--sans); color: var(--text); background: var(--ground); border: 1px solid var(--line); border-radius: 12px;
}
.note-text::placeholder { color: var(--muted); }
.note-text:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-color: var(--link); }
.why-actions button:disabled { opacity: 0.45; cursor: default; }
.why-actions button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.sheet { width: min(720px, 100%); max-height: min(86dvh, 860px); display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
/* one column that may shrink, so the chip row slides inside the sheet and can never widen it */
.sheet-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 26px 16px; border-bottom: 1px solid var(--line); }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-head h2 { font: 400 28px/1.2 var(--serif); }

/* Finding someone in a long cast: a search field, then one chip per type of creator with its count. */
.sheet-search {
  /* 16px or more, or a phone zooms the whole page when the field is tapped */
  width: 100%; min-height: 46px; padding: 0 16px; font: 500 16px/1 var(--sans);
  color: var(--text); background: var(--ground); border: 1px solid var(--line); border-radius: 12px;
}
.sheet-search::placeholder { color: var(--muted); }
.sheet-search:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-color: var(--link); }
/* The chips are one row that slides sideways, never a stack: however many types are saved, they take
   one line. The row runs to the sheet's edges and fades out there, which is the hint that there is more. */
.sheet-kinds {
  display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 -26px; padding: 0 26px; scroll-padding-inline: 26px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 44px), transparent 100%);
}
.sheet-kinds::-webkit-scrollbar { display: none; }
.sheet-kinds:empty { display: none; }
/* quiet filled pills, no outline: the row reads as one strip, and only the chosen one stands out */
.kind {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: 999px; border: 1px solid transparent; background: var(--surface-raised);
  color: var(--text-soft); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.kind b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.kind:hover { color: var(--text); }
.kind:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* the chosen type is filled in the text colour, never green: green on this page only ever means saved */
.kind[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--ink); }
.kind[aria-pressed="true"] b { color: var(--ink-soft); }
.sheet-count { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.sheet-close { display: inline-flex; align-items: center; gap: 8px; height: 44px; min-width: 44px; justify-content: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-soft); }
.sheet-body { overflow-y: auto; padding: 4px 26px 26px; }
.sheet-section { margin: 28px 0 4px; font: 650 12px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sheet-note { margin-bottom: 4px; color: var(--muted); font-size: 14.5px; }
.sheet-empty { margin: 22px 0 6px; padding: 28px; border-radius: 14px; border: 1px dashed var(--line); color: var(--text-soft); text-align: center; }

/* One person: a name, a line of facts to compare by, and one line about them. Kept short so a
   hundred of them can be scanned; anything longer is one tap away on their card. */
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row-name { font-weight: 650; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { margin-top: 3px; font: 650 11.5px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-line { margin-top: 4px; color: var(--text-soft); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-because { margin-top: 4px; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-weight: 600; font-size: 15px; white-space: nowrap; }
.row button.is-save { background: var(--save); border-color: var(--save); color: var(--save-ink); }

/* Looking back. In the cast and the passed list a person's name and line are one button that
   brings their card back. It reads as text with a "Watch again" cue, not as another pill. */
.row-name, .row-meta, .row-line, .row-because { display: block; }
.row .row-open { all: unset; display: block; min-width: 0; cursor: pointer; border-radius: 10px; }
.row .row-open:focus-visible { outline: 2px solid var(--link); outline-offset: 6px; }
/* what the reviewer themselves said about this person, set apart from the catalog's own description */
.row-said { color: var(--text); font-style: italic; }
/* the cue that the person can be opened sits at the end of their line of facts, in the link colour */
.row-again { color: var(--link); }
.row .row-open:hover .row-again { text-decoration: underline; }
.row .row-open:hover .row-name { text-decoration: underline; }
/* "Passed on" is a section header like "You might also like": one rule above it (the last cast row's own),
   28px of air before its text, and the same again before the next header. Its 15px of padding is the tap target. */
.sheet-passed { margin-top: 13px; }
.sheet-passed summary { padding: 15px 0; cursor: pointer; font: 650 12px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sheet-passed + .sheet-section { margin-top: 13px; }
.sheet-passed[open] + .sheet-section { margin-top: 28px; }
.sheet-passed[open] { border-bottom: 1px solid var(--line); }
.sheet-passed summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }
/* the note on a card that has been brought back */
.chip-back { color: var(--link); }

/* ---------- toast: only when something needs saying ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--actions-height) + 14px); transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(17, 24, 39, 0.96); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  font-size: 15px; white-space: nowrap; max-width: calc(100vw - 32px);
}
.toast[hidden] { display: none; }
.toast.is-problem { border-color: #6b5a2a; }
.toast button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-weight: 600; font-size: 14px; }

/* ---------- phone ---------- */

@media (max-width: 860px) {
  :root { --bar-height: 56px; --actions-height: 88px; --strip: 170px; }
  .bar { padding: 0 14px; gap: 10px; }
  .bar-whisp { height: 22px; }
  .bar-client { height: 27px; }
  .shortlist-word, kbd { display: none; }
  .shortlist-button { padding: 0 12px; gap: 6px; }
  /* three things share the phone's top right, so they close up; the buttons stay a full thumb's size */
  .bar-right { gap: 6px; }
  .bar-right .bar-button + .bar-button { margin-left: 0; }
  .stage { padding: 8px 10px 0; place-items: start stretch; }
  .deck { --card-height: calc(100dvh - var(--bar-height) - var(--actions-height) - 12px); }

  /* the video is the card */
  .card { display: block; width: 100%; border-radius: 20px; }
  .media { position: absolute; inset: 0 0 var(--strip) 0; }

  /* one strip says who this is. It opens upward for the rest. */
  .info {
    position: absolute; inset: auto 0 0 0; z-index: 4;
    height: var(--strip);
    padding: 16px 62px 16px 18px; gap: 18px;
    overflow: hidden;
    background: var(--surface); border-top: 1px solid var(--line);
    -webkit-mask-image: none; mask-image: none;
    transition: height 220ms ease;
  }
  .card.is-open .info { height: 80%; overflow-y: auto; padding-bottom: 28px; box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.6); }
  .lead { gap: 6px; }
  .name { font-size: 22px; }
  /* closed: reach is one line of words. open: the tiles, and the place line. */
  .where, .reach { display: none; }
  .reach-line { display: block; color: var(--text-soft); font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card.is-open .where { display: block; }
  .card.is-open .reach { display: flex; margin-top: 0; }
  .card.is-open .reach-line { display: none; }
  .headline { font-size: 18px; line-height: 1.32; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .card.is-open .headline { display: block; }
  .sell { font-size: 15.5px; }
  .more {
    display: grid; place-items: center;
    position: absolute; top: 10px; right: 10px;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface-raised); color: var(--text-soft);
  }
  .more .icon { transition: transform 200ms ease; }
  .card.is-open .more .icon { transform: rotate(180deg); }

  /* on a phone the choices get their own row under the card, where the thumb rests */
  .actions {
    position: static; width: auto; height: var(--actions-height);
    padding: 0 0 env(safe-area-inset-bottom); gap: 10px;
    background: none; border-radius: 0;
  }
  .action { height: 58px; }

  .overlay { padding: 0; place-items: end center; }
  .intro { place-items: center; padding: 16px; }
  /* the question sits at the top on a phone, so the keyboard that rises from the bottom never covers its field */
  .overlay.why, .overlay.feedback { place-items: start center; padding: 12px; }
  .intro-card { padding: 34px 24px 28px; gap: 18px; border-radius: 22px; }
  .lockup { gap: 14px; }
  .lockup img { height: 30px; }
  .intro-card h1 { font-size: 36px; }
  .intro-lede { font-size: 16.5px; }
  .intro-how { font-size: 16px; }
  .intro-start { width: 100%; }
  .sheet { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .sheet-head { padding: 16px 18px 12px; gap: 12px; }
  /* the chip row runs to this narrower sheet's edges, and each chip is tall enough for a thumb */
  .sheet-kinds { margin: 0 -18px; padding: 0 18px; scroll-padding-inline: 18px; }
  .kind { min-height: 44px; padding: 0 14px; }
  .sheet-body { padding: 4px 18px calc(22px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(var(--actions-height) + 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .card.is-entering, .shortlist-button.is-bumped { animation: none; }
  .card.is-leaving, .card.is-settling, .info { transition: none; }
  .skeleton { animation: none; }
}