/* THE SIGNED-IN HOME: THE DECK (Steven 2026-10-12: "the card filling the
   page ... swipe and the next fills the page"; card redesign plan step 10;
   COO hands 2026-10-12). Page sheet for templates/feed/home_cards.html
   (/home, behind LAYOUT_CARDS); the card itself is static/cards/card.css, the
   Details sheet's frame static/css/pages/step-cards.css. Wiring:
   static/js/pages/home-cards.js. Everything is scoped under .hc / .hc-*.

   The deck is its own scroller, fixed under the site header (--hc-top, the
   header's height, measured by home-cards.js), one slide per screen with
   mandatory snap that stops on every slide, both ways. A slide is the
   deck's height; the card fills it, 4px from each edge under 900px wide,
   TikTok's 9:16 shape centred above that. No counter. */

.home-cards-page .main-area { background: var(--surface-secondary); min-height: 0; }

/* The header's plus already posts a want; the floating one would sit on the
   card. */
.home-cards-page .global-post-fab,
.home-cards-page .global-post-fab-surface { display: none !important; }

.hc { color: var(--text-primary); }

/* ---- the deck --------------------------------------------------------- */
.hc-deck {
    position: fixed;
    top: var(--hc-top, var(--size-16));
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--surface-secondary);
}
.hc-deck::-webkit-scrollbar { display: none; }
/* the other wants and the second entry card wait here until "Show all my
   wants" */
.hc-slide[hidden] { display: none; }

.hc-slide {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: var(--space-1);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
/* THE card is the screen (Steven 22:16, "why is it not full screen?"):
   under 900px wide it is 4px from each edge, any device; from 900px it
   keeps TikTok's shape, the full height and a 9:16 width, centred. Always
   exactly the screen's height, so its button is in view without scrolling
   inside it; its words are clamped below and the chart takes only the room
   left. */
.hc-slide > .tb-card {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
}
@media (min-width: 900px) {
    .hc-slide { padding: var(--space-3); }
    .hc-slide > .tb-card { width: auto; max-width: 100%; aspect-ratio: 9 / 16; }
}
.hc-slide > .tb-card--full > .tb-card__inner {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
}

/* The card's words, clamped so the turn and the button stay on the screen;
   the chart only takes the room left over, down to nothing for a long want. */
.hc-slide .tb-card__heading,
.hc-slide .tb-card__subtitle,
.hc-slide .tb-card__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
/* the back is the agent: its intelligence line lays out as on the proposal
   card (card.css .tb-card__model), not as the front's clamped words */
.hc-slide .tb-card__back .tb-card__model { display: flex; overflow: visible; -webkit-line-clamp: unset; line-clamp: none; }
/* a your-turn card's heading is the step's name: three lines, as the step
   card's (step-cards.css .sc-body__task); two on a short phone, below */
.hc-slide .tb-card__heading--step { -webkit-line-clamp: 3; line-clamp: 3; }
.hc-slide .tb-card--full .tb-card__over > .tb-card__chart { flex: 1 1 0; min-height: 0; }
/* The number block sits clear above the chart: the chart has its own band
   under it and never draws outside that band (the interior probability
   card's rule). */
.hc-slide .tb-card__chart { overflow: hidden; margin-top: var(--space-2); }
/* home-cards.js moves the starfield's square so its waves and orbit sit on
   the chart's band; its edges fade into the card's night. The front's only:
   the back of a want is its agent, whose disc stays whole. */
.hc-slide .tb-card--want .tb-card__front .tb-card__bg svg {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 14%, black 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, black 14%, black 86%, transparent 100%);
}
@media (max-width: 600px) {
    .hc-slide .tb-card__art { padding: var(--space-4) var(--space-5); }
    .hc-slide .tb-card__over { gap: 6px; }
    .hc-slide .tb-card__number { font-size: 44px; }
    .hc-slide .tb-card__title { margin-top: 2px; font-size: 26px; }
    .hc-slide .tb-card__subtitle { font-size: 15px; line-height: 1.35; }
    .hc-slide .tb-card__panel { gap: 10px; padding: var(--space-4) var(--space-5) 4px; }
    .hc-slide .tb-card__heading { font-size: 20px; }
    .hc-slide .tb-card__body { font-size: 15px; line-height: 1.4; }
    .hc-slide .tb-card__cta { min-height: 52px; font-size: 18px; }
    .hc-slide .tb-card__foot { padding: 0 0 4px; font-size: 15px; }
}
/* a short phone (375x667): one line of the want's words and of the step's
   body, a smaller number */
@media (max-width: 600px) and (max-height: 760px) {
    .hc-slide .tb-card__number { font-size: 38px; }
    .hc-slide .tb-card__title { font-size: 24px; }
    .hc-slide .tb-card__art { padding: var(--space-3) var(--space-5); }
    .hc-slide .tb-card__over { gap: 4px; }
    .hc-slide .tb-card__caption { font-size: 14px; }
    .hc-slide .tb-card__markers { font-size: 12px; }
    .hc-slide .tb-card__panel { gap: 8px; padding-top: var(--space-3); }
    .hc-slide .tb-card__cta { min-height: 48px; }
    .hc-slide .tb-card__subtitle,
    .hc-slide .tb-card__body { -webkit-line-clamp: 1; line-clamp: 1; }
    .hc-slide .tb-card__heading--step { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* A slide the deck has not filled yet: the card's own frame, the title over
   the night art, quiet lines where the words go. The deck fills it while it
   is still cards away; a person who outruns it sees this, never a blank. */
.hc-light .tb-card__panel { flex: 0 0 auto; }
.hc-light__line,
.hc-light__cta {
    display: block;
    border-radius: var(--radius-full);
    background: var(--surface-tertiary);
}
.hc-light__line { height: 18px; width: 80%; }
.hc-light__line--short { width: 50%; }
.hc-light__cta { height: 52px; margin-top: var(--space-2); }

/* ---- up and down: one pair of chevrons at the right edge, a pointer
   device on a wide screen only (TikTok's desktop controls). Never at phone
   width, pointer or not (Steven 2026-10-13: they drew over the chart on his
   Mac at phone width); the site's tablet breakpoint, 768px. ------------- */
.hc-arrows { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .hc-arrows {
        position: fixed;
        top: calc(50% + var(--hc-top, var(--size-16)) / 2);
        right: var(--space-6);
        z-index: var(--z-sticky);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        transform: translateY(-50%);
    }
    .hc.is-market .hc-arrows { z-index: calc(var(--z-sticky) + 1); }
}
.hc-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-12);
    height: var(--size-12);
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    font-size: 22px;
    text-decoration: none;
}
.hc-arrow:hover { background: var(--surface-tertiary); }
.hc-arrow[aria-disabled="true"] { opacity: 0.35; pointer-events: none; box-shadow: none; }

/* ---- the entry card: "What do you want for your life?" --------------- */
/* the entry card grows with the /start flow inside it (the deck scrolls
   within it); every other slide is exactly one screen */
.hc-slide--entry { justify-content: flex-start; gap: var(--space-5); height: auto; min-height: 100%; padding-bottom: var(--space-5); }
.hc-entry {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    border-radius: var(--radius-hero, 28px);
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.hc-entry__fallback { padding: var(--space-8) var(--space-5); text-align: center; }
.hc-entry__title {
    margin: 0 0 var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.hc-entry__title span { display: block; color: var(--text-secondary); }
.hc-entry__btn {
    display: inline-flex;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    background: var(--highlight-purple);
    color: var(--text-inverse);
    font-weight: 700;
    text-decoration: none;
}
.hc-entry--gate .wants-cap-gate { margin: 0; }
/* the embedded /start flow (the /wants overlay's own classes, wants.css
   .wants-compose__flow) sits in the card with its own heading */
.hc-entry__mount { margin: 0; padding: 0; }
.hc-entry.is-flow .hc-entry__fallback { display: none; }
/* the /start flow brings its own card: the entry card steps back */
.hc-entry.is-flow { background: transparent; box-shadow: none; overflow: visible; padding-top: var(--space-4); }

/* ONE CARD SIZE (Steven 2026-10-13: "I noticed you had a few different
   sizes of cards and I want to make sure we are getting these to all be
   the same size"). Every card on the deck is one box at a given viewport:
   the slide less its padding, 4px from each screen edge under 900px wide,
   TikTok's 9:16 at the full height from 900px. The want cards (every
   state), the light placeholder and the market's offer cards already are
   (.hc-slide > .tb-card above). The entry card was the one that grew with
   the /start flow, with the ideas and See all targets under it:
   home-cards.js puts those inside it (.is-whole) and it is the same box,
   scrolling inside instead of growing; it stays a card while the flow is
   in it. Without scripts the entry card reads as before. */
.hc-slide--entry.is-whole { height: 100%; min-height: 0; gap: 0; padding-bottom: var(--space-1); }
.hc-slide--entry.is-whole > .hc-entry {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: var(--space-5);
    border-radius: calc(var(--radius-hero, 28px) + var(--space-1));
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hc-slide--entry.is-whole > .hc-entry::-webkit-scrollbar { display: none; }
.hc-slide--entry.is-whole > .hc-entry.is-flow { padding-top: var(--space-4); }
.hc-slide--entry.is-whole > .hc-entry > .hc-entry__center,
.hc-slide--entry.is-whole > .hc-entry > .hc-ideas,
.hc-slide--entry.is-whole > .hc-entry > .hc-all { box-sizing: border-box; width: auto; margin-left: var(--space-3); margin-right: var(--space-3); }
.hc-slide--entry.is-whole > .hc-entry > .hc-ideas { max-width: none; margin-top: var(--space-6); }
.hc-slide--entry.is-whole > .hc-entry > .hc-all { max-width: none; }
/* THE ENTRY CARD, CENTRAL (Steven 2026-10-14, his shot of the deck's entry
   card: "I want that card to be more central, so it's easier to view"):
   "What do you want for your life?" sits in the middle of the box's first
   screen, even room above and below it, its words centered over the want
   box and the buttons. The ideas start under it (--space-12 is held back
   so their "Need ideas?" pill shows at the foot), then See all targets;
   the box scrolls to them. The /start flow's mount keeps 32px of room under
   its card (home-cards.js trackHeight), so while the flow is in it the
   middle takes the same on top.
   THE GAP CLOSED (COO hands 2026-10-14, Steven's shot of the entry box
   scrolled to the want card: "the tall blank gap on home between the want
   card and Need ideas"). Nothing failed to render there: the middle block
   held the box's whole first screen (min-height: calc(100% - 48px)) for a
   want card about a third of its height, so a band of blank as tall as
   the box less the card sat under it, above Need ideas. The block is its
   content's height now: the want card, then Need ideas, Greg's List and
   See all targets at the cards' own gap, the words still centered. */
.hc-slide--entry.is-whole > .hc-entry > .hc-entry__center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hc-slide--entry.is-whole > .hc-entry.is-flow > .hc-entry__center { padding-top: var(--space-8); }
.hc-entry .start-hero { justify-items: center; text-align: center; }
.hc-entry .start-hero__headline { justify-items: center; }
@media (min-width: 900px) {
    .hc-slide--entry.is-whole { padding-bottom: var(--space-3); }
    .hc-slide--entry.is-whole > .hc-entry { width: auto; max-width: 100%; aspect-ratio: 9 / 16; }
}

/* ---- the door to the Want Market -------------------------------------- */
.hc-slide--door { justify-content: center; }
.hc-door {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-muted);
}

/* ---- the Want Market: the rest of the feed, under the site header -------
   (Steven 2026-10-13: "Once I scroll into the market, we don't need the
   close X like that, it's just the extension of the feed; if they want to
   go back to the beginning they can click the top left icon"). It grows
   from the door's ring over the screen under the header, where the deck
   is, so the header's mark (/home) stays in view; no X. Under the header's
   own layer (z-overlay), so its menu opens over the market. */
.hc-market {
    position: fixed;
    top: var(--hc-top, var(--size-16));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    background: var(--surface-secondary);
}
.hc-market[hidden] { display: none; }
.hc-deck--market { position: absolute; inset: 0; top: 0; }
.hc-market__loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--surface-primary);
    color: var(--text-muted);
}
.hc-market.is-ready .hc-market__loading { display: none; }
.hc-slide--back { justify-content: flex-end; }
.hc-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---- the Details sheet (the step cards' frame, step-cards.css) -------- */
.hc-sheet .sc-sheet__panel {
    max-width: 720px;
    height: 90vh;
    height: 90dvh;
    max-height: 90vh;
    max-height: 90dvh;
    padding: 0 var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}
/* the grab and the head stay at the top while the body scrolls under them;
   they are the drag handle */
.hc-sheet__top {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 calc(-1 * var(--space-5));
    padding: 10px var(--space-5) var(--space-2);
    background: inherit;
    cursor: grab;
    touch-action: none;
}
.hc-sheet__top .sc-sheet__grab { margin-bottom: var(--space-2); }
.hc-sheet.is-dragging .sc-sheet__panel { animation: none; transition: none; }
.hc-sheet.is-settling .sc-sheet__panel { transition: transform 0.2s ease-out; }
/* Rise first, fill after (home-cards.js afterPaint, fluid-fast lane
   2026-10-14): the first rising frame of the Details or the work skips its
   body; the body is styled and laid out once that frame is painted, while
   the panel (a fixed height) is still rising. */
.hc-sheet.is-filling .hc-sheet__body,
.hc-work.is-filling .sc-work__body { content-visibility: hidden; }
/* the want page's body, without the page's own gutters */
.hc-sheet .want-detail { max-width: none; padding: 0 0 var(--space-6); }

/* the sheet's parts, one plain scroll (feed/_want_deck_sheet.html) */
.hc-sheet__part { scroll-margin-top: var(--size-16); }
.hc-sheet__part + .hc-sheet__part { margin-top: var(--space-2); }
.hc-sheet__text {
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-size: var(--text-lg);
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.hc-sheet__plan {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
}
.hc-sheet__plan-name { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; }
.hc-sheet__plan-by { margin: var(--space-1) 0 0; color: var(--text-secondary); }
.hc-sheet__files { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.hc-sheet__none {
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
    color: var(--text-secondary);
}
.hc-sheet__more { margin: var(--space-5) 0 0; text-align: center; }
.hc-sheet__more a { color: var(--text-secondary); }

/* YOUR AGENT (Steven 2026-10-13: "The agent details are supposed to be in
   the Details. Can you get those back? I want to see the agent details"):
   the chosen agent's profile as a sheet part (feed/_want_deck_sheet.html
   your_agent), the card back's own grid and lists (card.css .tb-card__record,
   .tb-card__gives) in one white card */
.hc-agent__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
    color: var(--text-primary);
}
.hc-agent__head { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.hc-agent__pic {
    flex: none;
    width: var(--size-16);
    height: var(--size-16);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--highlight-purple);
}
.hc-agent__pic img,
.hc-agent__pic .agent-art,
.hc-agent__pic svg,
.hc-agent__pic video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-agent__who { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.hc-agent__name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.hc-agent__model { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; color: var(--text-secondary); }
.hc-agent__mark { flex: none; width: 1em; height: 1em; }
.hc-agent__runs { font-size: var(--text-sm); opacity: 0.75; }
.hc-agent__operator { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.hc-agent__operator a { color: inherit; }
.hc-agent__cert { margin: 0; }
.hc-agent__sub { margin: 0; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; }
.hc-agent__more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--highlight-purple);
    font-weight: 700;
    text-decoration: none;
}
#hc-sheet-agents > .hc-agent + *,
#hc-sheet-agents > * + .hc-agent { margin-top: var(--space-4); }

/* the card's words open Details at the want's full words */
.hc-slide .tb-card--want .tb-card__front .tb-card__title,
.hc-slide .tb-card--want .tb-card__front .tb-card__subtitle { cursor: pointer; }

/* under the entry card: the ideas (ready-targets.css .start-ideas-card,
   its paid tile), then See all targets */
.hc-ideas { box-sizing: border-box; width: 100%; max-width: 560px; margin-top: var(--space-3); }
.hc-ideas .start-intro-card__pills {
    position: absolute;
    top: 0;
    left: var(--space-6);
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
}
.hc-ideas .start-intro-card__tag {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-6);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--highlight-yellow);
    color: var(--text-primary);
    font: var(--font-bold) var(--text-xs)/1 var(--font-mono);
    text-transform: uppercase;
    white-space: nowrap;
}
/* SEE ALL TARGETS (Steven 2026-10-14: "Separate out the button for Show
   all my wants. Remove the targets, show my hidden wants. Actually this
   would be a button to see all targets, on /targets."): its own button
   under the ideas, a plain link to /targets, in the deck's own pill (the
   one "Show all my wants" wore inside the ideas card). */
.hc-all {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    min-height: var(--size-14);
    margin-top: var(--space-4);
    padding: 0 var(--space-5);
    border-radius: var(--radius-full);
    background: var(--highlight-purple);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    text-decoration: none;
}
.hc-all:focus-visible { outline: 2px solid var(--highlight-purple); outline-offset: 2px; }

/* ---- your turn, in place: the step's work over its card (Steven
   2026-10-13: "you should just drop into the action card") ---------------
   home-cards.js mounts the step page's own region here (GET
   /wants/<id>/steps/<n>/work) while its work sheet is open. The region and
   its wrapper draw no box of their own; only the work sheet shows, in the
   step page's own frame (step-cards.css .sc-sheet--work, fixed). Anything
   else the region carries (a fresh region from the server after an answer:
   the step card, its Details sheet) never shows here. */
.hc-work[hidden] { display: none; }
.hc-work .hc-work__want,
.hc-work [data-live-region="step"] { display: contents; }
.hc-work [data-live-region="step"] > :not([data-sc-work]) { display: none !important; }
/* the card that comes back after the work settles in where it was */
@keyframes hc-card-arrive {
    from { opacity: 0.4; transform: scale(0.98); }
    to { opacity: 1; transform: none; }
}
.hc-slide .tb-card.hc-card--arrive { animation: hc-card-arrive 0.45s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
    .hc-slide .tb-card.hc-card--arrive { animation: none; }
}
/* the button while its work is on its way */
.hc-slide .tb-card__cta[aria-busy="true"] { opacity: 0.75; }

/* ---- CONFIRM YOUR HUMANITY: the second level of login, one card of the
   deck's one size (Steven 2026-10-13 evening: "Transform those two things
   into card shape, and the card is one of the things you swipe on the
   first card deck page"; feed/_home_deck_slides.html hc_humanity,
   home_cards.humanity_card). The one card's own frame and starfield; here
   only what is its own: the why reads whole, the two steps are two lines,
   and, since it is not an agent's card and does not flip, its foot is the
   quiet "Later". ------------------------------------------------------- */
.hc-slide--humanity .tb-card--want .tb-card__front .tb-card__title { cursor: default; }
.hc-slide--humanity .tb-card__body { -webkit-line-clamp: 4; line-clamp: 4; }
/* the two steps: the number in the kicker's yellow, then the step */
.hc-slide--humanity .tb-card__record { grid-template-columns: 1fr; gap: var(--space-2); }
.hc-slide--humanity .tb-card__record div {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    text-align: left;
}
.hc-slide--humanity .tb-card__record dt {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8);
    height: var(--size-8);
    border-radius: var(--radius-full);
    background: var(--highlight-yellow);
    color: var(--color-black);
    font: var(--font-bold) var(--text-sm)/1 var(--font-mono);
}
.hc-slide--humanity .tb-card__record dd { font-size: var(--text-lg); font-weight: 700; line-height: 1.2; }
/* no flip: the foot's place holds "Later" */
.hc-slide--humanity .tb-card__foot { display: none; }
.hc-slide--humanity .tb-card__panel { padding-bottom: calc(var(--size-10) + var(--space-2)); }
/* over the card, which the want page's sheets lift to z-index 2
   (toll-bench-sheets.css .tb-card) */
.hc-later {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: calc(var(--space-1) + 2px + var(--space-1));
    left: 0;
    display: flex;
    justify-content: center;
    margin: 0;
    pointer-events: none;
}
.hc-later__btn {
    min-height: var(--size-10);
    padding: 0 var(--space-5);
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
}
.hc-later__btn:hover,
.hc-later__btn:focus-visible { color: var(--text-primary); text-decoration: underline; }
@media (min-width: 900px) {
    .hc-later { bottom: calc(var(--space-3) + 2px + var(--space-1)); }
}
@media (max-width: 600px) and (max-height: 760px) {
    .hc-slide--humanity .tb-card__body { -webkit-line-clamp: 3; line-clamp: 3; }
    .hc-slide--humanity .tb-card__record div { padding: var(--space-1) var(--space-3); }
}

/* ---- THE AGENT'S SIDE IS THE FRONT (Steven 2026-10-13 night: "This is one
   ball and the card represents whose turn it is ... If we are waiting on
   agents then we should say Gathering proposals") ----------------------
   While an agent has the ball, or no agent has taken the want yet, the
   deck card's front is the one dark agent side (cards/_agent_side.html,
   static/cards/agent-side.css) and the want's art is its back: the back's
   starfield fades at its edges the way the front's does, and home-cards.js
   moves its square onto the chart's band there too. */
.hc-slide .tb-card--want .tb-card__back--want .tb-card__bg svg {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 14%, black 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, black 14%, black 86%, transparent 100%);
}
.hc-slide .tb-card--full .tb-card__back--want .tb-card__over > .tb-card__chart { flex: 1 1 0; min-height: 0; }
/* the want's words on the dark side: two lines at most on a phone */
@media (max-width: 600px) {
    .hc-slide .tb-card__face--side .tb-side__name { font-size: var(--size-10); }
}

/* ---- OPENING… (Steven 2026-10-13 night: "It's SOOOO long to get the
   review slider to come up. Review popped up because it loaded so slow, I
   was on another card") ---------------------------------------------------
   While a card's work is on its way its green button says "Opening…" with a
   turning ring before the word (home-cards.js busy); a second tap does
   nothing and a swipe away puts the button back. */
.hc-slide .tb-card__cta.is-opening { cursor: progress; gap: var(--space-2); }
.hc-slide .tb-card__cta.is-opening::before {
    content: '';
    flex: none;
    width: var(--size-5);
    height: var(--size-5);
    box-sizing: border-box;
    border: calc(var(--tb-hair) * 3) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: hc-opening-turn calc(var(--duration-slow) * 3) linear infinite;
}
@keyframes hc-opening-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hc-slide .tb-card__cta.is-opening::before { animation: none; border-right-color: currentColor; opacity: 0.5; }
}

/* ---- THE CONTROL FOLLOWS THE PILL (Steven 2026-10-20, his flipped-card
   screenshot: "2  YOUR TURN" and a green Start button while the card's
   clock badge already read the agent working the step: "when I flip the
   card, and the ball is in the agent's court, the button should be grayed
   out"). The front's control grays the same way a closed want's already
   does (card.css .tb-card--closed .tb-card__cta), same tokens, scoped to
   the control alone (never the photo, band or move): the kicker's own
   --agent tone (card.css) already carries the purple pill. Set by the
   template (_card.html _agent_turn) or the instant tap (home-cards.js
   setFrontWorking), never typed twice. */
.hc-slide .tb-card__cta.tb-card__cta--working,
.hc-slide .tb-card__cta.tb-card__cta--working:hover,
.hc-slide .tb-card__cta.tb-card__cta--working:focus-visible {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
    cursor: default;
    pointer-events: none;
}

/* ---- THE AGENT'S TURN PILL FLASHES LIKE THE DOT (Steven 2026-10-20, two
   phone screenshots of a card flipped to its back on the agent's turn:
   "the agent's turn needs to be flashing the blue too"): the purple
   "AGENT'S TURN" pill (card.css .tb-card__kicker--agent) picks up the same
   cyan pulse the dark side's own working dot already plays
   (static/cards/agent-side.css .tb-side__turn--working .tb-side__pip,
   @keyframes tb-side-pulse) -- the one keyframes, never a second one, and
   only where the pill sits inside that dark side (.tb-side), where its
   --tb-side-cyan token is in scope. Reduced motion keeps the plain purple
   pill, same as the dot. */
@media (prefers-reduced-motion: no-preference) {
    .hc-slide .tb-side .tb-card__kicker--agent .tb-card__label {
        color: var(--tb-side-cyan);
        animation: tb-side-pulse calc(var(--duration-slow) * 8) ease-in-out infinite;
    }
}

/* ---- THE WANT'S TITLE, ONE STEP UP (Steven 2026-10-13 night: "The title
   ('Get together, keep it easy') needs a bigger font") ---------------------
   On a phone 390px wide and up the title over the art goes from 26px to the
   next step of the type scale, --text-3xl (30px), still three lines at most
   (card.css .tb-card__title). A short phone keeps its 24px (the card's
   button stays on the screen) and a wider screen keeps card.css's
   --text-4xl. */
@media (min-width: 390px) and (max-width: 600px) and (min-height: 761px) {
    .hc-slide .tb-card__title { font-size: var(--text-3xl); }
}