/* STARTING A WANT IN THE FEED (Steven 2026-11-09, deck redesign step 5).
   templates/feed/_home_entry.html (the signed-in deck's entry card),
   templates/feed/wants.html (the visitor deck's first card) and
   templates/feed/_feed_start.html (the probability card and the sign-in
   card that come in below it); static/js/pages/feed-start.js.

   1. ONE CARD, ONE SCREEN ("for this first card, I do not want there to be
      a scroll ... I want these six to fit in the card"): the entry card is
      the slide's box, top of the screen to the bottom, and nothing in it
      scrolls. The question, the box, the two buttons, then the six ideas:
      the Need ideas card's first three paid outcomes and first three free
      ones, three to a row (a row with fewer fills the card's width). The
      ideas take what height is left: their
      pictures shrink before any words do, never past square, and the gaps
      close up on a short phone (375x667). The foot keeps the deck's line
      clear (Market, +: --ds-dock-*). The site's own type and colours.
   2. THE CARDS BELOW: the probability card and the sign-in card are the
      entry card's frame (home-cards.css .hc-slide--entry.is-whole >
      .hc-entry) holding the /start flow, scrolling inside themselves. */

/* ---- 1. the entry card ------------------------------------------------ */
[data-fs-entry] {
    --fs-gap: var(--space-4);
    --fs-foot: calc(var(--ds-dock-h, 48px) + var(--ds-dock-in-b, 16px) + var(--space-6));
}
.hc-slide--entry.is-whole > .hc-entry[data-fs-entry],
[data-visitor-home] .hc-slide--tall > .vd-entry[data-fs-entry] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--fs-gap);
    overflow: hidden;
    overscroll-behavior: auto;
    /* the top keeps clear of the card frame's pocket and its mark
       (card-frame.css: the pocket's centre 37.5px in from the corner) */
    padding: var(--fs-top, 80px) var(--space-3) var(--fs-foot);
}
[data-fs-entry] > .start-hero,
[data-fs-entry] > .hc-entry__center { flex: 0 0 auto; }
/* the question: the hero's own words, centred, under the card's mark (its place is the shell's) */
[data-fs-entry] .start-hero {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    justify-items: center;
    text-align: center;
}
[data-fs-entry] .start-hero__headline { justify-items: center; font-size: var(--text-3xl); line-height: 1.1; gap: var(--space-1); }
[data-fs-entry] .start-hero__brand,
[data-fs-entry] .start-hero__form label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
[data-fs-entry] .start-hero__entry { position: static; margin-top: var(--space-4); transform: none; }
[data-fs-entry] .start-hero__actions { margin-top: var(--space-3); gap: var(--space-3); }
[data-fs-entry] .start-hero__explainer,
[data-fs-entry] .toll-hero-explainer,
[data-fs-entry] .start-hero__sub { display: none; }

/* the six ideas: three paid, three free, three to a row */
[data-fs-entry] .start-homepage-proof--ideas,
[data-fs-entry] > .start-ideas-card {
    flex: 1 1 0;
    min-height: 0;
    max-height: 30rem;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: auto;
}
[data-fs-entry] .start-homepage-proof--ideas > .start-ideas-card {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
}
[data-fs-entry] .start-ideas-card.need-tiles {
    padding: var(--space-3);
    gap: 0;
    border-radius: var(--radius-xl, 20px);
}
[data-fs-entry] .need-tiles .need-tiles__heading { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
[data-fs-entry] .need-tiles .need-tiles__group {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
[data-fs-entry] .need-tiles .need-tiles__group + .need-tiles__group { margin-top: var(--space-3); }
[data-fs-entry] .need-tiles .need-tiles__pills { margin-bottom: var(--space-2); }
[data-fs-entry] .need-tiles .need-tiles__all { min-height: var(--size-6); }
[data-fs-entry] .need-tiles .need-tiles__scroll {
    flex: 1 1 0;
    min-height: 0;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    scroll-snap-type: none;
}
/* A ROW FILLS THE CARD (Steven 2026-11-10, his shot of the entry card, one
   paid tile at the left third and two thirds empty: "This needs to have the
   cards be the right size so the card is filled."). The row makes one column
   per tile it shows, so one tile fills the row, two take half each and three
   stay thirds; tiles 4+ and hidden ones take no column. The row is the
   pictures' container: a picture is never taller than a tile in a row of
   three, so a wide tile shows the same height in a landscape crop. Over
   need-tiles.css (a lone short page in threes) and card-panels.css. */
[data-fs-entry] .need-tiles .need-tiles__scroll > .need-tiles__page {
    --fs-tile-gap: var(--space-2);
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--fs-tile-gap);
    height: 100%;
    width: 100%;
    flex: none;
    container-type: inline-size;
}
[data-fs-entry] .need-tiles .need-tiles__page ~ .need-tiles__page,
[data-fs-entry] .need-tiles .need-tile:nth-child(n+4) { display: none; }
[data-fs-entry] .need-tiles .need-tile {
    width: auto;
    min-width: 0;
    min-height: 0;
}
[data-fs-entry] .need-tiles .need-tile__link {
    height: 100%;
    min-height: 0;
    justify-content: flex-start;
    gap: 2px;
}
[data-fs-entry] .need-tiles .need-tile__pic {
    flex: 1 1 0;
    min-height: var(--size-8);
    /* one third of the row, less its two gaps: the three-across height */
    max-height: calc((100cqw - 2 * var(--fs-tile-gap)) / 3);
    aspect-ratio: auto;
}
[data-fs-entry] .need-tiles .need-tile__title,
[data-fs-entry] .need-tiles .need-tile__agent,
[data-fs-entry] .need-tiles .need-tile__price {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--text-xs);
}
[data-fs-entry] .need-tiles .need-tile .need-tile__sub { display: none; }
/* a short phone: the gaps close up before anything else does */
@media (max-height: 700px) {
    [data-fs-entry] { --fs-gap: var(--space-2); }
    .hc-slide--entry.is-whole > .hc-entry[data-fs-entry],
    [data-visitor-home] .hc-slide--tall > .vd-entry[data-fs-entry] { padding-top: 72px; }
    [data-fs-entry] .start-hero__headline { font-size: var(--text-2xl); }
    [data-fs-entry] .start-hero__entry { margin-top: var(--space-3); }
    [data-fs-entry] .start-hero__actions { margin-top: var(--space-2); }
    [data-fs-entry] .start-ideas-card.need-tiles { padding: var(--space-2) var(--space-3); }
    [data-fs-entry] .need-tiles .need-tiles__heading { display: none; }
    [data-fs-entry] .need-tiles .need-tiles__group + .need-tiles__group { margin-top: var(--space-2); }
    [data-fs-entry] .need-tiles .need-tiles__pills { margin-bottom: var(--space-1); }
}

/* ---- 2. the probability card and the sign-in card below ---------------- */
/* over home-cards.css .hc-slide--entry.is-whole > .hc-entry.is-flow: the top
   keeps clear of the card frame's pocket and its mark */
.hc-slide--entry.is-whole.hc-slide--fs > .hc-entry.fs-frame { padding: 84px var(--space-3) calc(var(--fs-foot, 72px) + var(--space-4)); }
.hc-slide--fs > .fs-frame[hidden],
.hc-slide--fs > .card-below-wait[hidden] { display: none; }
.hc-slide--fs .fs-mount { position: relative; margin: 0; padding: 0; }
.hc-slide--fs .fs-point { min-height: 0; background: transparent; }
.hc-slide--fs .fs-point > .start-point { position: static; margin: 0 auto; transform: none; opacity: 1; visibility: visible; }

/* the /start flow as the embed draws it (wants.css .wants-compose__flow,
   which the visitor page does not load): a card stack in the page's flow,
   the hidden headline gone, the follow-on cards in flow */
.hc-slide--fs .wants-compose__flow.start-home { display: block; grid-template-columns: none; height: auto; min-height: 0; overflow: visible; background: transparent; }
.hc-slide--fs .wants-compose__flow .start-home__main { min-height: 0 !important; padding: 0 0 var(--space-8); }
/* the homepage body is .start-home: its sticky offset (start-home.css) never reaches the card */
.hc-slide--fs .wants-compose__flow .start-hero__entry { position: relative !important; top: auto !important; z-index: 1 !important; transform: none !important; margin-top: var(--space-2); }
.hc-slide--fs .wants-compose__flow .start-hero__entry::before { display: none; }
.hc-slide--fs .wants-compose__flow.start-home--future .start-hero__chip,
.hc-slide--fs .wants-compose__flow.start-home--future .start-hero__headline,
.hc-slide--fs .wants-compose__flow.start-home--future .start-hero__sub { display: none; }
.hc-slide--fs .wants-compose__flow.start-home--future .start-hero__entry:not(.start-hero__entry--docked) .start-hero__form {
    width: 100%;
    padding: var(--space-3) var(--space-6) var(--space-4);
    background: var(--feed-card-bg);
    border: var(--feed-card-border);
    border-radius: var(--feed-card-radius);
    box-shadow: var(--feed-card-shadow);
}
.hc-slide--fs .wants-compose__flow.start-home--future .start-hero__entry:not(.start-hero__entry--docked) .start-card__odds { position: static; justify-self: stretch; margin-top: var(--space-2); }
.hc-slide--fs .wants-compose__flow .start-why,
.hc-slide--fs .wants-compose__flow .start-point,
.hc-slide--fs .wants-compose__flow .start-story,
.hc-slide--fs .wants-compose__flow .start-solution,
.hc-slide--fs .wants-compose__flow .start-card__retry { position: relative !important; top: auto !important; right: auto !important; left: auto !important; width: 100%; margin-top: var(--space-4); }
.hc-slide--fs .wants-compose__flow:not(.start-home--future) .start-why { display: none; }
.hc-slide--fs .wants-compose__flow:not(.start-home--point) .start-point { display: none; }
.hc-slide--fs .wants-compose__flow:not(.start-home--retry-allowed) .start-card__retry { display: none; }
.hc-slide--fs .wants-compose__flow:not(.start-home--story):not(.start-home--story-moving):not(.start-home--story-settled):not(.start-home--solution-moving) .start-story { display: none; }
.hc-slide--fs .wants-compose__flow:not(.start-home--solution):not(.start-home--solution-moving):not(.start-home--solution-settled) .start-solution { display: none; }
.hc-slide--fs .wants-compose__flow .start-hero__entry .start-card__pills { top: calc((var(--size-6) + var(--space-1)) / -2); left: var(--space-6); right: var(--space-6); }
.hc-slide--fs .wants-compose__flow .start-card__want { padding-inline: 0; }
/* the sign-in card is the start-point alone in its card: in flow, at the top */
.hc-slide--fs .fs-point > .start-point { margin-top: 0; }

/* the homepage styles its own page main and hero (body.start-home): the
   flow's main and hero inside the card are neither */
.hc-slide--fs .fs-flow .start-home__main {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 var(--space-8) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.hc-slide--fs .fs-flow.start-home--future .start-hero { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
/* the homepage is a .wants-page, whose rule hides a probability card's
   pills (probability-card.css): the card in the feed keeps WANT REQUEST
   and TARGET, as on /home */
body .hc-slide--fs .fs-flow .start-card__compact-face.probability-card .probability-card__pills { display: flex; }

/* Creating the card, not a card inside a card (Steven 2026-11-10).
   The deck frame owns the surface. Its picture reaches the frame edges;
   the estimate, cost choices and bench share its one scrolling body.
   Only the probability slide changes; the sign-in slide keeps its spacing. */
.hc-slide--entry.is-whole.hc-slide--fs[data-fs-slide="prob"] > .hc-entry.fs-frame {
    padding-top: 0;
    padding-inline: 0;
}
.hc-slide--fs[data-fs-slide="prob"] .fs-flow .start-hero__entry { margin-top: 0; }
.hc-slide--fs[data-fs-slide="prob"] .fs-flow .start-card__compact-face,
.hc-slide--fs[data-fs-slide="prob"] .fs-flow.start-home--future .start-hero__entry:not(.start-hero__entry--docked) .start-hero__form {
    padding: calc(var(--size-16) + var(--space-6)) var(--space-6) var(--space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.hc-slide--fs[data-fs-slide="prob"] .fs-flow.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__art {
    margin-top: calc(-1 * (var(--size-16) + var(--space-6)));
    border-radius: 0;
}
.hc-slide--fs[data-fs-slide="prob"] .fs-flow .start-hero__entry .start-card__pills {
    top: var(--space-6);
    left: calc(var(--size-16) + var(--space-6));
}
.hc-slide--fs[data-fs-slide="prob"] .fs-flow .start-card__bench {
    box-sizing: border-box;
    padding-inline: var(--space-6);
}

/* Grag's List and See all my wants, their own card under the entry card */
.hc-slide--gl > .hc-entry.fs-more { padding-top: 84px; padding-bottom: calc(var(--fs-foot, 72px) + var(--space-4)); }
.hc-slide--gl > .hc-entry.fs-more > .hc-ideas:first-child { margin-top: 0; }

/* THE MAIN BUTTON ON THE BOTTOM ROW (the deck's rule, card-col.css: Market,
   the card's main button and + on one line at one height, from the dock's
   tokens): the flow's post button sits in the probability card's dock, on
   the slide over its scroller, between the Market disc and the +. Its old
   row in the card (the "2" ring) steps aside. */
.hc-slide--fs > .fs-dock {
    position: absolute;
    z-index: 3;
    /* clear of the Market disc and of the + pocket's ring (card-frame.css) */
    left: calc(var(--ds-dock-side, 24px) + var(--ds-dock-h, 48px) + var(--ds-dock-gap, 8px) + var(--space-2));
    right: calc(var(--ds-dock-side, 24px) + var(--ds-dock-h, 48px) + var(--ds-dock-gap, 8px) + var(--space-2));
    bottom: var(--ds-dock-bottom, 20px);
    height: var(--ds-dock-h, 48px);
    display: flex;
}
.hc-slide--fs > .fs-dock[hidden] { display: none; }
.hc-slide--fs > .fs-dock > .start-point__cta {
    /* The same type as the deck's primary action (.tb-card__cta). */
    font-family: var(--font-heading);
    --interface-font: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: var(--radius-full);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-slide--fs > .fs-dock > .start-point__cta.is-waiting:disabled,
.hc-slide--fs > .fs-dock > .start-point__cta.is-waiting:disabled:hover {
    border-color: var(--border-default);
    background: var(--surface-tertiary);
    color: var(--text-secondary);
    opacity: 1;
    box-shadow: none;
    cursor: default;
}
.hc-slide--fs .start-card__post-row { display: none; }
/* the scroller ends clear of the bottom row: its last rows (the primary
   target box, the agents on the bench, the sign-in card's buttons) scroll
   up above Market, the button and the + pocket */
.hc-slide--entry.is-whole.hc-slide--fs > .hc-entry.fs-frame {
    padding-bottom: calc(var(--ds-dock-bottom, 20px) + var(--ds-dock-h, 48px) + var(--space-10));
}

/* a very short phone (402x620): the gaps and the tiles' extra line give
   the pictures their room before the words would crowd */
@media (max-height: 640px) {
    .hc-slide--entry.is-whole > .hc-entry[data-fs-entry],
    [data-visitor-home] .hc-slide--tall > .vd-entry[data-fs-entry] { padding-top: 64px; }
    [data-fs-entry] .start-hero__headline { font-size: var(--text-xl); }
    [data-fs-entry] .start-hero__entry { margin-top: var(--space-2); }
    [data-fs-entry] .need-tiles .need-tile__agent { display: none; }
}