/* THE WANT PAGE (Steven 2026-11-11, late night: "the edges of the card are
   gone ... The target with the 8 stays there. And in the top right-hand
   corner, there's a close, an X that closes, that floats above everything.
   And so it's no longer a card. It is a page."). templates/feed/
   _want_page.html, static/js/shell/want-page.js.

   One page over whatever is on screen: the whole window, the page's own
   ground, no edge line, one scroll. The corner mark (the deck shell's own
   type mark and its number) top left and the one X (components/
   _page_close.html, deck-shell-pages.css .ds-page-x) top right stay put at
   every scroll position; the page sits under the X and over the Market's
   circle, the deck's two discs and every card. Then the question and the
   box, Need ideas (nine blocks, three across, every one shown), Meg's
   List with every category open. Tokens only. */

.wp {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-utility-overlay, 9400) + 2);
    /* WHITE (Steven 2026-11-13: "I think the signed in one ended up not being
       white for some reason. please change that."): the page wore the page
       frame's ground (--ds-pf-bg, the app's grey-blue --surface-app); it is
       the card white */
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
}
.wp[hidden] { display: none; }
/* the page comes in at once; a short rise, never under reduced motion */
@media (prefers-reduced-motion: no-preference) {
    .wp.is-in { animation: wp-in 140ms ease-out; }
    @keyframes wp-in { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: none; } }
}
.wp__scroll {
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding:
        calc(var(--wp-strip) + var(--space-4))
        calc(env(safe-area-inset-right, 0px) + var(--space-4))
        calc(env(safe-area-inset-bottom, 0px) + var(--space-12, 48px))
        calc(env(safe-area-inset-left, 0px) + var(--space-4));
}
.wp__scroll > * {
    max-width: 36rem;
    margin-inline: auto;
}

/* ---- the dot and the X float (Steven 2026-11-12: "Just leave the top
   left as the dot and then the scroll should just scroll over it. I like
   the white around the logo, but there shouldn't be a fade, it should be
   like the dot and the close X are just floating over the text.") -------
   Only two things at the top: the deck shell's mark (the bullseye and its
   purple number) on its white round, and the one X; each fixed in the
   place it had, each with a soft shadow so it reads over a picture, and
   nothing behind them: no corner curve, no band, no fade. The page scrolls
   under both at full strength. */
.wp { --wp-strip: calc(var(--ds-pf-top, 4px) + var(--ds-pf-head, 80px)); }
.wp__top { height: 0; }
.wp .wp__mark {
    top: calc(var(--ds-pf-top, 4px) + var(--ds-pf-mark, 18px));
    left: calc(var(--ds-pf-left, 4px) + var(--ds-pf-mark, 18px));
    z-index: 3;
    color: var(--cf-ink, #030308);
}
/* the white round around the mark (the card pocket's size, 75px) */
.wp .wp__mark::before {
    content: "";
    inset: calc((var(--boh-rail-control-size, 40px) - 75px) / 2);
    background: var(--surface-primary, #fff);
    box-shadow: 0 0 0 1px var(--border-subtle, rgb(0 0 0 / 0.06)), 0 4px 14px rgb(0 0 0 / 0.14);
}
.wp .ds-page-x {
    top: calc(var(--ds-pf-top, 4px) + var(--ds-pf-mark, 18px));
    z-index: 4;
}
/* the mark, as on a page (deck-shell-pages.css .ds-page-frame ~ .ds-page-mark) */
.wp__mark > .ds-type {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.wp__mark > .ds-type::after { content: ""; position: absolute; inset: calc(-1 * var(--space-2)); border-radius: var(--radius-full); }
.wp__mark > .ds-type > .cf-mark { position: absolute; inset: 0; }
.wp__mark .ds-type__glyph { display: contents; }
.wp__mark .ds-type__glyph[hidden] { display: none; }

/* ---- the question and the box ----------------------------------------- */
/* CENTRED, "for your life?" AT THE MIDDLE (Steven 2026-11-12: "center the
   what do you want for your life here again, and we had a single line that
   you could type in and the buttons were centered. Then give some space
   below for need ideas. there should be some space under the buttons. 'for
   your life' should be almost centered on the page vertically too."): the
   question, the box and the two buttons centred left to right, as on the
   entry card (home-cards.css .hc-entry .start-hero).
   A THIRD OF THE WAY DOWN (Steven 2026-11-12, his phone shot of the block
   well past half way: "move this up is 1/3 of the way fom the top to
   bottom, that the wha do you wna tfor you life secitno"): on first paint
   the block's top (the yellow "What do you want") sits a third of the way
   down the visible screen (dvh, so it holds on a short phone and a tall
   one), less the top room the scroll already has; Need ideas follows
   under it with the same gap as before. A QUARTER (Steven 2026-11-12,
   his shot of it over the feed at about 34%: "lift the what do you ant
   section up to 25% heighte. its' stil too low."): the top sits at a
   quarter of the visible screen now; the page is the whole window, over
   the feed or by its address, so the screen's height is the page's. */
.wp { --wp-q-size: clamp(var(--text-3xl), 8.5vw, var(--text-5xl)); }
.wp__ask {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;
    padding-top: max(0px, calc(25vh - var(--wp-strip) - var(--space-4)));
    padding-top: max(0px, calc(25dvh - var(--wp-strip) - var(--space-4)));
}
.wp__q {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--wp-q-size);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-primary);
}
.wp__q-hl {
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--highlight-yellow);
    color: var(--color-black);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.wp__q-soft { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.wp__form { display: grid; gap: var(--space-3); justify-items: center; width: 100%; margin: 0; }
.wp__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.wp__box {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: var(--size-12, 48px);                 /* one line, as the entry card's box */
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--border-strong, var(--border-default));
    border-radius: var(--radius-2xl, 16px);
    outline: 0;
    background: var(--surface-primary);
    color: var(--text-primary);
    font: var(--font-normal) max(16px, var(--text-lg))/var(--leading-normal) var(--font-sans);
    resize: none;
    box-shadow: var(--shadow-sm);
}
.wp__box:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-drop, var(--shadow-sm)); }
.wp__say { margin: 0; color: var(--text-primary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.wp__say[hidden] { display: none; }
.wp__say a { color: var(--tb-brand-purple, var(--accent-tertiary)); font-weight: var(--font-bold); }
.wp__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
.wp__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font: var(--font-bold) var(--text-sm)/1 var(--font-heading);
    text-decoration: none;
    cursor: pointer;
}
.wp__btn--post { border-color: var(--tb-brand-purple, var(--accent-tertiary)); background: var(--tb-brand-purple, var(--accent-tertiary)); color: var(--color-white); }
.wp__btn--post:hover { background: var(--tb-brand-purple-hover, var(--accent-tertiary)); }
.wp__btn--post:disabled { opacity: 0.6; cursor: progress; }
.wp__btn--about { border-color: var(--text-primary); background: transparent; color: var(--text-primary); }
.wp__btn:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; }
.wp__gate { display: grid; gap: var(--space-3); justify-items: center; }
.wp__gate-msg { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); }

/* ---- the rest: Need ideas, then Meg's List ----------------------------- */
/* clear room under the buttons: the ideas read as a second section */
.wp__more { display: grid; gap: var(--space-10, 40px); margin-top: var(--space-20, 80px); }
.wp__more[aria-busy="true"]:empty { min-height: 40vh; }
.wp .start-ideas-card.need-tiles--grid {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.wp .need-tiles--grid > .need-tiles__pills { margin: 0; }
.wp .need-tiles--grid .need-tiles__heading { margin: 0; font-size: var(--text-2xl); line-height: 1.1; }
.wp .need-tiles__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wp .need-tiles__grid > .need-tile { display: block; width: auto; min-width: 0; }
.wp .need-tile--block .need-tile__link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 0 0 6px;
    overflow: hidden;
    border: var(--feed-card-border);
    border-radius: var(--radius-lg);
    background: var(--feed-card-bg, var(--surface-primary));
    color: var(--text-primary);
    text-decoration: none;
}
.wp .need-tile--block .need-tile__pic {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    margin-bottom: 2px;
    overflow: hidden;
    border-radius: 0;
    background: var(--surface-secondary);
}
.wp .need-tile--block .need-tile__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.wp .need-tile--block .need-tile__pic--whole::before {
    content: "";
    position: absolute;
    inset: -16px;
    background: var(--ni-ground) center / cover no-repeat;
    filter: blur(14px);
    opacity: 0.85;
}
.wp .need-tile--block .need-tile__pic--whole img { position: relative; object-fit: contain; object-position: 50% 50%; }
.wp .need-tile--block .need-tile__title,
.wp .need-tile--block .need-tile__agent { padding-inline: 6px; font-size: var(--text-xs); line-height: 1.25; }
.wp .need-tile--block .need-tile__title {
    display: -webkit-box;
    min-height: 2.5em;
    overflow: hidden;
    white-space: normal;
    font-weight: var(--font-bold);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wp .need-tile--block .need-tile__agent { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary); }
.wp .need-tile--block .need-tile__chip {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 2 * var(--space-1));
    height: var(--size-5, 20px);
    padding: 0 var(--space-2);
    overflow: hidden;
    border-radius: var(--radius-full);
    font: var(--font-bold) var(--text-xs)/1 var(--font-mono);
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.wp .need-tile--block .need-tile__chip--free { background: var(--highlight-yellow); color: var(--color-black); }
.wp .need-tile--block .need-tile__chip--paid { background: var(--tb-brand-purple, var(--accent-tertiary)); color: var(--color-white); }
@media (min-width: 768px) {
    .wp .need-tile--block .need-tile__title,
    .wp .need-tile--block .need-tile__agent { font-size: var(--text-sm); }
}

/* Meg's List, every category open, its ideas plain links (grags-list.css
   draws the rows) */
.wp__megs { display: grid; gap: var(--space-2); }
.wp__megs .gl-free-note { margin: 0; }
.wp__cat { margin-top: var(--space-4); }
.wp__cat-name {
    margin: 0 0 var(--space-1);
    color: var(--text-primary);
    font: var(--font-bold) var(--text-lg)/var(--leading-tight) var(--font-heading);
}
.wp__megs .gl-ideas > li { padding: var(--space-2) 0; }

/* Meg's List rows (Steven 2026-11-12: "I dont like that this is all bold,
   the text can be links that are blue that's ok"): regular weight in the
   list's own link blue (grags-list.css --gl-blue, the site's blue), no
   underline (the row's rule is enough), a clear pressed state; the
   category heads keep their weight; the FREE pill stays */
.wp .gl-idea-row { gap: var(--space-2); }
.wp .gl-idea {
    display: block;
    margin: calc(-1 * var(--space-1)) 0;
    padding: var(--space-2);
    border-radius: var(--radius-md, 8px);
    color: var(--gl-blue, var(--color-blue-500));
    font: var(--font-normal, 400) var(--text-base)/1.4 var(--font-sans);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.wp .gl-idea:visited { color: var(--gl-blue, var(--color-blue-500)); }
.wp .gl-idea:hover { background: var(--surface-secondary); text-decoration: underline; }
.wp .gl-idea:active { background: var(--surface-tertiary, var(--border-default)); }
.wp .gl-idea:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 0; }
/* See all with the Market's stack of cards beside it (Steven 2026-11-12:
   "see all should have a market stacked cards beside it") */
.wp .need-tiles__all { gap: var(--space-1); }
.wp .need-tiles__all .ds-glyph { flex: none; color: inherit; }   /* the sprite inks the Market white for dark grounds */

/* ---- LOG IN ON TOP (Steven 2026-11-13: "it also should have a login
   button on the top"): a visitor's cover (feed/wants.html) wears Log in
   on the X's row, just left of it, the X's height and its white with the
   same soft shadow, floating like the dot and the X. */
.wp .wp__login {
    position: fixed;
    top: calc(var(--ds-pf-top, 4px) + var(--ds-pf-mark, 18px));
    right: calc(env(safe-area-inset-right, 0px) + var(--space-4, 16px) + var(--boh-rail-control-size, 40px) + var(--space-2, 8px));
    z-index: 4;
    box-sizing: border-box;
    height: var(--boh-rail-control-size, 40px);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-4, 16px);
    border-radius: var(--radius-full, 9999px);
    background: var(--surface-app, #fff);
    box-shadow: 0 0 0 1px var(--border-default, rgb(0 0 0 / 0.12)), 0 4px 14px rgb(0 0 0 / 0.14);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.wp .wp__login:is(:link, :visited, :hover, :focus, :active) { color: var(--text-primary); text-decoration: none; }
.wp .wp__login:hover { background: var(--surface-hover, var(--surface-app, #fff)); }
.wp .wp__login:focus-visible { outline: 2px solid var(--color-primary, #7c3aed); outline-offset: 3px; }

/* the homepage's headline keeps the brand words for readers and search (the
   old hero's .start-hero__brand), out of sight */
.wp .wp__brand {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}