/* ============================================================
   Wants page — /wants list + detail (goals v1)
   Design-token-only. No new tokens, no new fonts.
   ============================================================ */

.wants-page {
    /* width MUST be explicit: inside the utility-panel zone (flex column)
       margin:auto blocks the stretch and the page falls back to its
       min-content width, overflowing the panel on mobile. */
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-16);
}

/* The ENTIRE drawer header anatomy (.toll-bench-header, __identity,
   .toll-bench-brand + __glyph, __right) now lives in layout.css with the
   rest of the shared drawer chrome (title, action pill, circled X),
   moved 2026-08-03 when the Messages drawer (base.html, every page)
   joined the set. Do not redefine any of it here. */

.wants-post-btn--primary {
    width: 100%;
    min-height: var(--size-12);
    justify-content: center;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: none;
}

/* ---- Anonymous homepage hero (the /start want-entry card) ----
   All card styling comes from start-home.css (.start-hero et al.); this
   only seats the card in the wants column: centered and spaced off the
   toll tabs below it. */
.wants-page .wants-hero {
    margin: 0 auto var(--space-8);
}

/* ---- Toll Bench scoped navigation ---- */
.toll-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Steven 2026-08-13: the nav sits flush against the top bar and runs
       edge to edge — negative margins cancel the page container's --space-4
       padding (both .wants-page and .want-detail). width:auto so the
       negative side margins stretch the box. */
    width: auto;
    min-height: var(--size-12);
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-5);
    border-bottom: 1px solid var(--border-default);
}
.toll-tab {
    display: inline-flex;
    min-width: 0;
    min-height: var(--size-12);
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
}
.toll-tab--active {
    border-bottom-color: var(--color-black);
    background: var(--color-black);
    color: var(--color-white);
}
.toll-tab--back {
    color: var(--text-secondary);
}
.toll-tab--back:hover,
.toll-tab[href]:hover {
    color: var(--text-primary);
}
.toll-tab:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}
.toll-tab iconify-icon {
    flex: 0 0 auto;
    font-size: var(--text-base);
}

.wants-section-head {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.wants-section-head__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
}
.wants-section-head__meta {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ---- Header ---- */
.wants-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.wants-head__title { overflow-wrap: break-word; }
.wants-head__titles { min-width: 0; }
.wants-head__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0;
}
.wants-head__sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}
.wants-post-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--accent-tertiary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    flex-shrink: 0;
}
.wants-post-btn:hover { background: var(--color-black); color: var(--color-white); }
.wants-post-btn iconify-icon { font-size: 1.05em; }

/* ---- Filter ---- */
.wants-filter {
    position: relative;
    width: min(180px, 48%);
    flex: 0 0 auto;
}
.wants-filter__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.wants-filter__toggle[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.wants-filter__menu {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-sticky, 200);
    overflow: hidden;
}
.wants-filter__menu[hidden] { display: none; }
.wants-filter__opt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid var(--border-soft);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}
.wants-filter__opt:first-child { border-top: none; }
.wants-filter__opt:hover { background: var(--surface-secondary); }
.wants-filter__opt .wants-filter__check {
    width: 1.1em;
    color: var(--color-green-600);
    flex-shrink: 0;
}
.wants-filter__opt .wants-filter__count { margin-left: auto; color: var(--text-muted); font-size: var(--text-sm); }

/* ---- How it works ribbon ---- */
.wants-how {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
    overflow: hidden;
}
.wants-how__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: none;
    border: none;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
}
.wants-how__eyebrow {
    display: inline-flex;
    align-items: center;
    background: var(--color-green-100);
    color: var(--color-green-600);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.wants-how__teaser {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.wants-how__caret { margin-left: auto; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s ease; }
.wants-how__toggle[aria-expanded="true"] .wants-how__caret { transform: rotate(180deg); }
.wants-how__body { padding: 0 var(--space-4) var(--space-4); }
.wants-how__body[hidden] { display: none; }
.wants-how__steps { list-style: none; margin: 0; padding: 0; counter-reset: how; }
.wants-how__step {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-soft);
}
.wants-how__step:first-child { border-top: none; }
.wants-how__num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wants-how__step-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
    margin: 0 0 2px;
}
.wants-how__step-body { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; line-height: 1.4; }

/* ---- Want list ---- */
.wants-list { display: flex; flex-direction: column; gap: var(--space-5); }

/* Recent Requests carousel (Steven 2026-08-09): the anon homepage strip shows
   ONE recent request at a time, auto-advancing every ~4s. Slides are stacked
   with grid so the tallest keeps the height stable; only .is-active is shown.
   Overrides the .wants-list flex column it also carries. */
.recent-requests-carousel {
    display: grid;
    grid-template-columns: 1fr;
}
.recent-requests-carousel__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms ease;
    pointer-events: none;
}
.recent-requests-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.recent-requests-carousel__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.recent-requests-carousel__dot {
    width: var(--space-2);
    height: var(--space-2);
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
}
.recent-requests-carousel__dot.is-active {
    background: var(--highlight-yellow);
    transform: scale(1.25);
}
.recent-requests-carousel .target-anchor__title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-2);
    height: 3.3em;
    overflow: hidden;
}
.recent-requests-carousel .target-anchor__title-icon {
    margin-right: 0;
}
.wants-recent + .start-homepage-proof--field {
    margin-top: var(--space-12);
}

.target-anchor {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding: var(--feed-card-padding);
    border: var(--feed-card-border);
    border-radius: var(--feed-card-radius);
    background: var(--feed-card-bg);
    box-shadow: var(--feed-card-shadow);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}
/* Stretched whole-card link (Steven 2026-08-06): the card-link <a> covers the
   entire article. Interactive children (.want-proposal-arrival__cta,
   .target-anchor__action, .target-anchor__repost-form) are raised above it
   with position:relative and z-index:1 so they intercept their own clicks. */
.target-anchor__card-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}
.target-anchor--muted {
    opacity: 0.72;
}
.target-anchor__title {
    /* Steven 2026-08-11: the yellow target disc must center on the FIRST line of
       the title's optical center, and hold there when the title wraps. A flex
       row (the old 2026-08-10 flex-end approach) block-aligns the disc to the
       WHOLE title box, so on a 2-line title it dropped to the second line.
       Reverted to normal block flow: the disc is an inline element before the
       text, so it rides the first line automatically; its vertical position is
       set once on iconify-icon.*__title-icon (vertical-align, shared with the
       detail card) — change it there, not here. */
    display: block;
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-style: italic;
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}
.target-anchor__probability {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.target-anchor__probability-value {
    display: inline-flex;
    min-height: var(--size-10);
    align-items: center;
    padding: 0 var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--accent-primary);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
}
.target-anchor__probability-value--plain {
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: var(--text-base);
}
/* Canceled pill reads in red (Steven 2026-08-19): the person closed this
   want themselves; "Not measured" gray read like a data gap. */
.target-anchor__probability-value--canceled {
    background: var(--color-red-50);
    color: var(--color-red-600);
}
.target-anchor__probability-value--success {
    background: var(--color-green-50);
    color: var(--status-success);
}
.target-anchor__success-status {
    display: inline-flex;
    min-width: 0;
    align-items: stretch;
}
.target-anchor__success-status--timed {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.target-anchor__success-status--timed .target-anchor__probability-value--success {
    gap: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--highlight-yellow);
    color: var(--color-black);
}
.target-anchor__success-target {
    display: inline-flex;
    font-size: var(--text-lg);
    animation: timed-success-target-spin 2s linear infinite;
}
@keyframes timed-success-target-spin {
    to { transform: rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
    .target-anchor__success-target { animation: none; }
}
.target-anchor__delivery-agent {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-width: 0;
    min-height: var(--size-10);
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.target-anchor__delivery-agent:hover .target-anchor__delivery-agent-copy strong {
    text-decoration: underline;
}
.target-anchor__delivery-agent-mark {
    display: inline-grid;
    width: var(--size-10);
    height: var(--size-10);
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--text-primary);
    color: var(--surface-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
}
.target-anchor__delivery-agent-copy {
    display: grid;
    min-width: 0;
    line-height: var(--leading-tight);
}
.target-anchor__delivery-agent-copy strong,
.target-anchor__delivery-agent-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.target-anchor__delivery-agent-copy strong {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
}
.target-anchor__delivery-agent-copy span {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}
.target-anchor__delivery-state {
    display: inline-flex;
    min-height: var(--size-10);
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
}
.target-anchor__success-status--timed .target-anchor__delivery-state {
    min-height: var(--size-10);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
}
.target-anchor__delivery-state > span[aria-hidden] {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--status-success);
}
.target-anchor__delivery-state--paused > span[aria-hidden] { background: var(--color-yellow-400); }
.target-anchor__delivery-state--stopped > span[aria-hidden] { background: var(--text-muted); }
.target-anchor__probability-label {
    color: var(--slate);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-style: italic;
}

/* Public/minimal mode (Steven 2026-08-09): the anon homepage Recent Requests
   carousel renders want_card with public=true. The footer (next-step chip,
   Review/View action, posted/Free meta) is dropped in the macro; here the
   probability pill and label read smaller and cleaner. The up/down move
   indicator stays visible so a visitor sees the probability moving. Design
   tokens only. Scoped to .want-card--public so the Targets list is unchanged. */
.want-card--public .target-anchor__probability-value {
    min-height: var(--size-8);
    padding: 0 var(--space-3);
    font-size: var(--text-base);
}
.want-card--public .target-anchor__probability-label {
    font-size: var(--text-sm);
}
.want-card--public .target-trajectory__move {
    font-size: var(--text-sm);
}
/* The bottom row: next step + facts on the left, small action on the right.
   The rule sits on the row, not on the text, so it spans the whole card. */
.target-anchor__footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}
.target-anchor__next {
    min-width: 0;
}
.target-anchor__next-label {
    display: inline;
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.target-anchor--ready .target-anchor__next-label {
    background: var(--accent-primary);
    color: var(--color-black);
}
.target-anchor__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.target-anchor__facts span + span::before,
.target-trajectory__facts span + span::before {
    margin-right: var(--space-2);
    color: var(--text-muted);
    content: "·";
}
.target-anchor__action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: none;
    min-height: var(--size-10);
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    white-space: nowrap;
}
/* Readiness is already carried by the next-step label turning accent; the
   action stays a quiet pill so the card has one emphasis, not two. */
.target-anchor--ready .target-anchor__action {
    background: var(--accent-primary);
    color: var(--color-black);
}
.target-anchor__action:hover {
    filter: brightness(0.97);
}

/* ---- Failed round: the agent declared a failure ----
   The probability pill is the only green left on this card once the round is
   over (the --ready greens cannot apply: an agent failure always leaves
   action_ready False). It goes red with the same token pair the big
   trajectory card uses -- --status-error / --color-white, which already ships
   as --btn-danger-bg / --btn-danger-color -- so the two cards say the same
   thing in the same colour. No new tokens. */
.target-anchor--failed .target-anchor__probability-value {
    background: var(--status-error);
    color: var(--color-white);
}
/* Same law as the trajectory card (see .target-trajectory--failed below): on
   a failed card an UPWARD move goes quiet, never stays green next to the red
   pill and never turns red, because red would say the odds got worse when
   they got better. The arrow glyph and aria-label still carry the direction. */
.target-anchor--failed .target-trajectory__move--up {
    color: var(--text-secondary);
}
/* Two actions instead of one: View left, Repost right. They sit exactly where
   the single pill sat, on the right of the footer, so flex: none keeps them
   from stretching across the row. Repost wears the black/white emphasis the
   trajectory card gives it; View stays the quiet grey it already was, so the
   pair carries one emphasis, not two. Repost is the way FORWARD, so it must
   not wear danger red. */
.target-anchor__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
}
.target-anchor__repost-form {
    position: relative;
    z-index: 1;
    display: inline-flex;
    margin: 0;
}
.target-anchor__action--repost {
    border: 0;
    background: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
}

/* ---- Empty state ---- */
.wants-empty {
    text-align: center;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-12) var(--space-6);
}
.wants-empty__glyph { font-size: 2.5rem; color: var(--text-muted); margin-bottom: var(--space-3); }
.wants-empty__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.wants-empty__body { font-size: var(--text-base); color: var(--text-secondary); margin: 0 auto var(--space-5); max-width: 34ch; }
/* Secondary link under the primary action (wrong-account interstitial). */
.wants-empty__alt { margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.wants-empty__alt a { color: var(--text-secondary); text-decoration: underline; }

/* ============================================================
   Detail page
   ============================================================ */
.want-detail { width: 100%; max-width: 720px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-16); }
.want-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: var(--space-4);
}
.want-back:hover { color: var(--text-primary); }

.toll-context {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border-left: 3px solid var(--accent-primary);
    background: var(--surface-secondary);
}
/* Steven 2026-08-13, Detail page: the TARGET · DETAILS cap strip is the TOP
   OF THE CARD — flush under the nav, edge to edge, curved top corners, and
   everything underneath is the card with no lines along the edges. The old
   left-accent quote box is dropped on this variant. */
.toll-context--cap {
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) var(--space-5);
    padding: 0;
    border-left: none;
    background: none;
}
.toll-context--cap .tp-ctx__cap {
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
}
.toll-context--cap .toll-context__title {
    padding: var(--space-4) var(--space-4) 0;
}
.toll-context__label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
}
.toll-context__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-style: italic;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.target-trajectory {
    display: grid;
    gap: var(--space-4);
    padding: var(--feed-card-padding);
    border: var(--feed-card-border);
    border-radius: var(--feed-card-radius);
    background: var(--feed-card-bg);
    box-shadow: var(--feed-card-shadow);
    /* Steven 2026-08-09: nothing inside the card may bleed past its right edge
       on a narrow phone. min-width:0 lets the grid track shrink below the
       chart's intrinsic width; overflow-x:clip cuts any horizontal spill
       (a wide label halo, the scaled SVG) without clipping the odds labels
       that lift vertically clear of the dots. */
    min-width: 0;
    overflow-x: clip;
}
.target-trajectory__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-style: italic;
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}
/* Target glyph before the want text (Steven 2026-08-03): inline at text
   start. Shared by the big detail card (.target-trajectory__title) and the
   list/feed card (.target-anchor__title).
   Steven 2026-08-09: Toll Bench branding -- the bullseye now sits inside a
   YELLOW circle (--color-yellow-400, the Toll Bench yellow) with a dark glyph so it is instantly
   identifiable everywhere a want appears. Only the iconify glyph gets the
   circle; the completed-want celebration emoji (.want-celebrate-emoji span)
   is deliberately left uncircled. */
.target-trajectory__title-icon,
.target-anchor__title-icon {
    margin-right: var(--space-2);
    /* Applies to the completed-want celebration emoji span; the iconify disc
       overrides vertical-align below to its own optical-center value. */
    vertical-align: -0.1em;
    color: inherit;
}
iconify-icon.target-trajectory__title-icon,
iconify-icon.target-anchor__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: var(--radius-full);
    background: var(--color-yellow-400);
    color: var(--color-black);
    font-size: 0.72em;
    /* Steven 2026-08-11: center the disc on the FIRST title line's optical
       center (both cards render the disc inline before the text now). Measured
       live on staging against the serif-italic title at leading-tight: the
       disc's geometric middle lands on the line-box center at ~0.10em; nudged
       to 0.14em so the disc sits a hair higher, on the OPTICAL center of the
       cap-to-baseline text mass rather than the leading-padded line box. em so
       it scales with every title size (2xl detail / xl+ list). Holds on wrap:
       an inline disc rides line 1 regardless of how many lines follow. */
    vertical-align: 0.14em;
    flex-shrink: 0;
}
.target-trajectory__probability {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.target-trajectory__probability strong {
    display: inline-flex;
    min-height: var(--size-10);
    align-items: center;
    padding: 0 var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--accent-primary);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
}
/* Steven 2026-08-03: this caption rule used to be a bare
   `.target-trajectory__probability span`, which also matched the move spans
   and out-specified every `.target-trajectory__move*` rule below, so the
   move printed serif-italic-slate on some surfaces. Scoped by class, the
   move keeps its own face at every viewport. */
.target-trajectory__caption {
    color: var(--slate);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-style: italic;
    font-weight: var(--font-medium);
}
.target-trajectory__move {
    /* Steven 2026-08-10: inline after caption text — not pinned right.
       Sits on the same line as "Probability of success", small and tight. */
    display: inline-flex;
    align-items: center;
    gap: 0.1em;
    margin-left: 0.35em;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.target-trajectory__move-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 1em;
}
.target-trajectory__move--up { color: var(--status-success); }
.target-trajectory__move--down { color: var(--status-error); }
/* Steven 2026-08-03: a flat number prints in the plain text color with no
   arrow. The indicator never disappears once a probability exists. */
.target-trajectory__move--flat { color: var(--text-primary); }
/* Item 2 rule 3: the move number carries a visible unit word ("pts" for
   percentage points, "odds" for a 1-in-N denominator change) so no bare
   mystery number ever trails the odds. */
.target-trajectory__move-unit {
    margin-left: 0.15em;
    font-size: var(--text-xs);
    font-weight: 600;
}
.target-chart {
    min-width: 0;
    /* Horizontal clamp only: the scaled SVG can never push past the card,
       but vertically-lifted odds labels still paint (overflow:visible on the
       svg below). */
    overflow-x: clip;
    /* Steven 2026-07-28: tighten the gap between the odds pill and the chart.
       The grid gap above already separates them; the chart's own top padding
       was doubling it. */
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--border-default);
}
.target-chart__key {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}
.target-chart__key > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}
.target-chart__key-line {
    display: inline-block;
    flex: 0 0 22px;
    width: 22px;
    height: 0;
    border-top: 3px solid var(--accent-primary);
}
.target-chart__key-line--target {
    border-color: var(--text-muted);
    border-top-style: dotted;
    border-top-width: 4px;
}
/* Difficulty band chip in the chart key (Steven 2026-08-09): one word for how
   hard the want was at the outset. Escalating tint: Easy green, Hard blue,
   Moonshot red -- all existing status tokens, no new colors. */
.target-chart__band {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.target-chart__band--easy {
    background: var(--status-success-subtle);
    color: var(--status-success);
}
.target-chart__band--hard {
    background: var(--status-warning-subtle);
    color: var(--status-warning);
}
.target-chart__band--moonshot {
    background: var(--status-error-subtle);
    color: var(--status-error);
}
.target-chart__svg {
    display: block;
    width: 100%;
    aspect-ratio: 64 / 21;
    min-height: 160px;
    overflow: visible;
}
.target-chart__grid {
    stroke: var(--border-strong);
    stroke-width: 1;
}
.target-chart__actual-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--accent-primary);
    stroke-width: 5;
}
/* The path to the outcome target. Round dots need BOTH the near-zero dash and
   the round linecap; either one alone draws dashes. */
.target-chart__target-path {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 0.001 10;
}
.target-chart__actual-point {
    fill: var(--accent-primary);
    stroke: var(--surface-primary);
    stroke-width: 3;
}
.target-chart__target-glyph,
.target-chart__target-glyph span {
    display: block;
    width: 40px;
    height: 40px;
}
/* The 40x40 foreignObject is already centred on the target point, but
   iconify-icon paints its shadow <svg> at 1em anchored to the TOP of the host
   box, so the ring landed 10 user units above the point the dotted target path
   ends on. Centre the glyph inside the box rather than stretching the host. */
.target-chart__target-glyph span {
    display: flex;
    align-items: center;
    justify-content: center;
}
.target-chart__target-glyph iconify-icon {
    display: block;
    width: 1em;
    height: 1em;
}
.target-chart__target-glyph {
    color: var(--border-strong);
}
.target-chart__target-label {
    fill: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}
.target-chart__gate-label {
    fill: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
/* A whole-deal road can pack 20+ slots into the same frame. The macro already
   thins which ticks print; the survivors drop to the small size so they read
   as an axis instead of a crowd. */
.target-chart--dense .target-chart__gate-label {
    font-size: var(--text-xs);
}
.target-chart__odds-label {
    /* Sits over the plot area: a card-colored halo keeps it legible even when
       a dot lands directly behind a glyph. */
    paint-order: stroke fill;
    stroke: var(--feed-card-bg);
    stroke-width: 5px;
    stroke-linejoin: round;
    fill: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}
/* Transparent to layout at full size; the collapsed feed card turns it into a
   real flex row (see .feed-primary-want--min in pages/feed.css). */
.target-trajectory__footer {
    display: contents;
}
.target-trajectory__next {
    min-width: 0;
}
.target-trajectory__next > strong {
    display: inline;
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.target-trajectory--ready .target-trajectory__next > strong {
    background: var(--accent-primary);
    color: var(--color-black);
}
.target-trajectory__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.target-trajectory__schedule {
    margin-top: var(--space-2);
}
.target-trajectory__action {
    display: inline-flex;
    width: 100%;
    min-height: var(--size-12);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    text-decoration: none;
}
.target-trajectory--ready .target-trajectory__action {
    background: var(--accent-tertiary);
    color: var(--color-white);
}
.target-trajectory__action:hover {
    filter: brightness(0.97);
}

/* ── The agent failed: the card goes red, start to finish ───────────────
   Steven 2026-07-30: "on fail the green pill turns red, and the whole green
   line that started at 1 in 10 turns red." So the pill, the recorded line,
   every recorded dot, the uncertainty wash and the chart key all swap the
   green accent for the error red. The projection line and its dots stay
   muted grey -- they were never green and there is nothing to restate.

   ONLY an agent failure lands here. The class is set from
   target_cards._card_state gated on deal.is_agent_failed, so a lapse (which
   deems approval and PAYS) and a decline both keep the ordinary card.

   Tokens only, no new ones: --status-error is the red this very card already
   uses for a downward move, and --color-white on it is the pairing
   --btn-danger-color / --btn-danger-bg already ships, so the contrast is one
   the design system has already signed off. --status-error-subtle is its
   matching wash, standing in for --accent-primary-subtle. */
.target-trajectory--failed .target-trajectory__probability strong {
    background: var(--status-error);
    color: var(--color-white);
}
.target-trajectory--failed .target-chart__actual-line {
    stroke: var(--status-error);
}
.target-trajectory--failed .target-chart__actual-point {
    fill: var(--status-error);
}
.target-trajectory--failed .target-chart__key-line--actual {
    border-color: var(--status-error);
}
/* The last-move arrow is the only other green on this card. On a failed card
   it goes quiet rather than red: painting an UPWARD move red would say the
   odds got worse when they got better. The arrow glyph and the aria-label
   still carry the direction, so nothing is lost. */
.target-trajectory--failed .target-trajectory__move--up {
    color: var(--text-secondary);
}

/* Two actions instead of one: View left, Repost right, splitting the row.
   Repost keeps the black/white primary look the single action already wore.
   It is the way FORWARD -- it puts the want back on the bench -- so it must
   not wear danger red, both because red on a now-red card stops reading as a
   button and because danger red would suggest the click destroys something.
   View drops to the quiet secondary surface so the card keeps one emphasis. */
.target-trajectory__actions {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 0;
}
.target-trajectory__actions > * {
    flex: 1 1 0;
    min-width: 0;
}
.target-trajectory__repost-form {
    margin: 0;
}
.target-trajectory__repost-form .target-trajectory__action {
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: var(--font-heading);
}
.target-trajectory__action--secondary {
    background: var(--surface-secondary);
    color: var(--text-primary);
}
.target-trajectory__action--repost {
    background: var(--color-black);
    color: var(--color-white);
}

/* ── Connect actions inline in the waiting card ──────────────────── */
/* Shown only when the person has no approved house and no proposals exist.
   Uses the same button language as the standalone connect card in the feed,
   but sized for the compact trajectory card footer. */
.target-trajectory__connect-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.target-trajectory__connect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-9);
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-decoration: none;
    cursor: pointer;
}
.target-trajectory__connect-btn--ghost {
    border: 1px solid var(--border-strong);
    background: var(--surface-secondary);
    color: var(--text-primary);
}


/* ── Agent panel — dark passport slab ────────────────────────────── */
/*
   Dark canvas: --color-dark-700 (#0c1424) is the same base the full
   Agent Passport card uses (its gradient starts there). Over it we add
   a faint cyan border and the same low-alpha white overlay the passport
   uses for depth, keeping the two surfaces visually related.

   Contrast pairs used (all tokens from tokens.css):
     kicker:  color-cyan-500 (#00f3ff) on color-dark-700 (#0c1424)  — high contrast
     name:    color-white (#ffffff) on color-dark-700 (#0c1424)      — max contrast
     handle:  rgba(255,255,255,0.62) on color-dark-700               — passport idiom
     "now X": rgba(255,255,255,0.45) on color-dark-700               — passport idiom
     up/dn:   status-success / status-error on color-dark-700        — kept for legibility
*/
.target-trajectory__agent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-primary);
}

/* Square identicon — mirrors .ap-glyph at 48px */
.target-trajectory__agent-glyph {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--surface-app);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}
.target-trajectory__agent-glyph-letters {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: 1;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0;
}

.target-trajectory__agent-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.target-trajectory__agent-kicker {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.target-trajectory__agent-name {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
}
.target-trajectory__agent-handle {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.target-trajectory__agent-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--status-success-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}
.target-trajectory__agent-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--status-success);
    flex-shrink: 0;
}
/* ── percent-complete ring ── */
.target-trajectory__agent-ring-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}
/* inner div scopes the label's absolute positioning to the 60×60 ring only,
   so top:50% references the ring height, not the taller flex column */
.target-trajectory__ring-inner {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.target-trajectory__agent-ring {
    display: block;
    width: 60px;
    height: 60px;
}
.target-trajectory__ring-track {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 4;
}
.target-trajectory__ring-fill {
    fill: none;
    stroke: var(--status-success);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease;
}
.target-trajectory__ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 1px;
    pointer-events: none;
}
.target-trajectory__ring-unit {
    font-size: 0.6em;
    line-height: 1;
    color: var(--text-secondary);
}
.target-trajectory__ring-chip-wrap {
    display: flex;
    justify-content: center;
}
.target-trajectory__ring-chip {
    font-size: 0.65rem;
    padding: 2px var(--space-2);
    gap: 3px;
    white-space: nowrap;
}
.target-trajectory__ring-chip iconify-icon {
    font-size: 10px;
}

/* ── Bottom agent band (Plans page variant, Steven 2026-08-13) ──
   The card is book-ended by matching gray strips: same surface-secondary as
   .tp-ctx__cap on top. Bleeds to the card edges the same way the top cap does
   (--feed-card-padding is space-5 space-8 space-5 on desktop; the mobile
   media query mirrors the __cap mobile bleed of space-4/space-5). */
.target-trajectory__agent-cap {
    /* Button reset (Steven 2026-08-13: the whole band opens the Agent
       Passport popup). Buttons shrink-to-fit even as flex containers, so the
       bleed width is stated explicitly: 100% of the padded card box plus the
       two negative side margins. */
    appearance: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: calc(100% + var(--space-8) * 2);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 calc(var(--space-8) * -1) calc(var(--space-5) * -1);
    padding: var(--space-3) var(--space-8);
    background: var(--surface-secondary);
    border-top: 1px solid var(--border-subtle);
    /* Inherit rounded bottom corners from the card */
    border-radius: 0 0 var(--feed-card-radius) var(--feed-card-radius);
    transition: background 0.15s ease;
}
.target-trajectory__agent-cap:hover,
.target-trajectory__agent-cap:active {
    background: var(--surface-tertiary);
}
.target-trajectory__agent-cap:focus-visible {
    /* Negative offset keeps the ring inside the card's rounded bottom edge */
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}
@media (max-width: 600px) {
    .target-trajectory__agent-cap {
        width: calc(100% + var(--space-5) * 2);
        margin: 0 calc(var(--space-5) * -1) calc(var(--space-4) * -1);
        padding: var(--space-3) var(--space-5);
    }
}
.target-trajectory__agent-cap-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.target-trajectory__agent-cap-org {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.target-trajectory__agent-cap-status {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.target-trajectory__agent-cap-status--behind .target-trajectory__agent-dot {
    background: var(--status-warning);
}
.target-trajectory__agent-cap-status--ended .target-trajectory__agent-dot {
    background: var(--text-muted);
}
/* The band's ring is a lone 60px circle (no chip beneath), vertically
   centered by the flex row. */
.target-trajectory__agent-cap-ring {
    flex-shrink: 0;
}
.target-trajectory__agent-cap--with-delivery {
    margin-bottom: 0;
    border-radius: 0;
}
.target-trajectory__agent-cap-ring .target-trajectory__ring-label iconify-icon {
    color: var(--status-success);
    font-size: var(--text-2xl);
}

.want-hero {
    position: relative;
    z-index: 0;
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
    color: var(--text-inverse);
}
.want-hero::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: calc(var(--space-3) * -1);
    left: 0;
    height: var(--space-6);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    background: var(--color-gray-800);
    content: "";
}
.want-hero__body {
    display: grid;
    grid-template-columns: var(--size-32) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
}
.want-hero__probability {
    position: relative;
    display: grid;
    width: var(--size-32);
    height: var(--size-32);
    place-items: center;
}
.want-hero__meter {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.want-hero__meter-track,
.want-hero__meter-value {
    fill: none;
    stroke-width: 7;
}
.want-hero__meter-track { stroke: var(--color-gray-700); }
.want-hero__meter-value {
    stroke: var(--color-green-400);
    stroke-linecap: round;
}
.want-hero__probability-value {
    position: relative;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    color: var(--color-gray-100);
}
.want-hero__probability-icon {
    position: relative;
    font-size: var(--text-3xl);
    color: var(--color-gray-300);
}
.want-hero__content { min-width: 0; }
.want-hero__meta {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.want-hero__pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-green-400);
    color: var(--color-gray-950);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}
.want-hero__band {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}
.want-hero__budget {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0;
    color: var(--color-gray-200);
    background: var(--color-gray-800);
    border: 1px solid var(--color-gray-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}
.want-hero__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-2xl);
    color: var(--color-gray-200);
    line-height: 1.25;
    margin: 0 0 var(--space-4);
    overflow-wrap: anywhere;
}
.want-hero__action {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.want-hero__action-number {
    display: grid;
    width: var(--size-12);
    height: var(--size-12);
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-blue-500);
    color: var(--color-gray-950);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
}
.want-hero__action-label {
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}
.want-hero__up-next {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-8);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--accent-dark);
    color: var(--color-gray-200);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
}
.want-hero__footer {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.want-hero__bid-state {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.want-hero__bid-state strong {
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
}
.want-hero__bid-state span,
.want-hero__stage {
    color: var(--color-gray-400);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.want-hero__stage {
    max-width: 50%;
    text-align: right;
}
.want-hero__posted {
    margin: calc(var(--space-4) + var(--space-2)) var(--space-2) var(--space-5);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

/* Proposals section */
/* Review CTA scroll target: land the Proposed plans title flush BELOW the
   sticky Toll Bench header. Matches the header height used by
   .plans-filter-rail's sticky top exactly: 68px desktop (calc(--size-16 +
   --space-1)), 64px mobile (--size-16). want-detail.js smooth-scrolls here. */
#plans-list {
    scroll-margin-top: calc(var(--size-16) + var(--space-1));
}
@media (max-width: 767px) {
    #plans-list {
        scroll-margin-top: var(--size-16);
    }
}
.want-proposals__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}
.want-proposals__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.want-proposals__count { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

.want-signed__cta--email {
  margin-top: 8px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
}

/* Plans stay scoped to the selected target. A row opens one detail record. */
.toll-plan-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.toll-plan-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}
.toll-plan-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
.toll-plan-card__avatar {
    flex: 0 0 auto;
}
.toll-plan-card__body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
}
.toll-plan-card__name-row,
.toll-plan-card__terms {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.toll-plan-card__name {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    overflow-wrap: anywhere;
}
.toll-plan-card__record,
.toll-plan-card__terms span {
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.toll-plan-card__terms strong {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-base);
}
.toll-plan-card__chevron {
    display: grid;
    width: var(--size-8);
    height: var(--size-8);
    flex: 0 0 auto;
    place-items: center;
    color: var(--text-muted);
}

/* Truthful empty / stage state */
.want-proposals__stage {
    background: var(--surface-primary);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    text-align: center;
}
.want-proposals__stage-glyph { font-size: 2rem; color: var(--text-muted); margin-bottom: var(--space-3); }
.want-proposals__stage-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.want-proposals__stage-body { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 auto; max-width: 40ch; line-height: 1.5; }

/* ---- Proposal card (macro; gallery-only until Phase B) ---- */
.proposal-card {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.proposal-card__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.proposal-card__avatar {
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    display: grid; place-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
    overflow: hidden;
}
.proposal-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.proposal-card__id { min-width: 0; flex: 1; }
.proposal-card__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
    text-decoration: none;
}
a.proposal-card__name:hover,
.proposal-card__name--button:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}
.proposal-card__name--button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.proposal-card__agent {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-2);
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    vertical-align: middle;
}
.proposal-card__meta { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.proposal-card__tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: var(--space-3) 0;
    line-height: 1.4;
}
.proposal-steps__label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: var(--space-3) 0 var(--space-2);
}
.proposal-steps { list-style: none; margin: 0; padding: 0; counter-reset: pstep; }
.proposal-step {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-soft);
}
.proposal-step:first-child { border-top: none; }
.proposal-step__row { display: flex; align-items: baseline; gap: var(--space-2); }
.proposal-step__num {
    counter-increment: pstep;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
    width: 1.2em;
}
.proposal-step__num::before { content: counter(pstep); }
.proposal-step__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}
.proposal-step__dur { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.proposal-step__approve {
    display: inline-flex;
    align-items: center;
    background: var(--color-green-100);
    color: var(--color-green-600);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    margin: var(--space-1) 0 0 calc(1.2em + var(--space-2));
}
.proposal-step__note {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 2px 0 0 calc(1.2em + var(--space-2));
    line-height: 1.4;
}
.proposal-step__deliverable {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: var(--space-1) 0 0 calc(1.2em + var(--space-2));
}
/* r47: quality examples under a step deliverable */
.proposal-step__examples {
    list-style: disc;
    margin: var(--space-1) 0 0 calc(1.2em + var(--space-2) + var(--space-3));
    padding: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}
.proposal-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
}
.proposal-card__terms { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; }
.proposal-card__finalist {
    flex-shrink: 0;
    background: var(--surface-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.proposal-card__finalist:hover { background: var(--surface-secondary); }

/* Gallery banner (design-system context only) */
.wants-gallery-note {
    background: var(--color-green-100);
    border: 1px dashed var(--color-green-400);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-green-600);
    margin-bottom: var(--space-4);
}

/* ---- Maker profile ---- */
.maker-profile { max-width: 640px; margin: 0 auto; padding: calc(var(--layout-topbar-height) + var(--space-4)) var(--space-4) var(--space-16); }
.maker-profile__card {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    text-align: center;
}
.maker-profile__avatar {
    width: 72px; height: 72px;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    display: grid; place-items: center;
    color: var(--text-muted);
    margin: 0 auto var(--space-3);
    font-size: 2rem;
}
.maker-profile__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-2xl);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.maker-profile__meta { font-size: var(--text-base); color: var(--text-muted); }

/* ============================================================
   Mobile — phones (<=560px)
   Header stacks so the green "Post a want" button never sits
   under the floating top-bar utility pill (top-right).
   ============================================================ */
@media (max-width: 560px) {
    .wants-page,
    .want-detail,
    .maker-profile {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
    .wants-section-head {
        align-items: center;
    }
    .wants-section-head__meta {
        display: none;
    }
    .wants-filter {
        width: min(168px, 58%);
    }

    /* Stack title over button; button goes full-width below the titles,
       clear of the right-hand pill. */
    .wants-head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .wants-head__title { font-size: var(--text-2xl); }
    .wants-post-btn {
        justify-content: center;
        width: 100%;
    }

    /* Empty-state button stays centered but comfortable */
    .wants-empty .wants-post-btn { width: auto; }

    /* How-it-works ribbon: let the teaser shrink, keep caret visible */
    .wants-how__toggle { gap: var(--space-2); padding: var(--space-3); }

    .target-anchor,
    .target-trajectory {
        gap: var(--space-3);
        padding: var(--feed-card-padding-mobile);
    }
    .target-anchor__title { font-size: var(--text-xl); }
    /* Two action pills plus the next-step text will not fit one 360px row.
       Let the footer stack and keep the actions right-aligned under it. */
    .target-anchor--failed .target-anchor__footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .target-anchor--failed .target-anchor__actions {
        justify-content: flex-end;
    }
    .target-trajectory__title { font-size: var(--text-2xl); }
    .target-chart__svg {
        min-height: 138px;
    }

    /* Detail target + proposal cards breathe less on phones */
    .want-hero { padding: var(--space-4); }
    .want-hero__body {
        grid-template-columns: var(--size-20) minmax(0, 1fr);
        gap: var(--space-4);
    }
    .want-hero__probability {
        width: var(--size-20);
        height: var(--size-20);
    }
    .want-hero__probability-value { font-size: var(--text-base); }
    .want-hero__title { font-size: var(--text-xl); }
    .want-hero__budget {
        width: fit-content;
        margin-left: 0;
    }
    .want-hero__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
    }
    .want-hero__stage {
        max-width: none;
        text-align: left;
    }
    .proposal-card { padding: var(--space-3); }
    .proposal-card__footer { flex-direction: column; align-items: stretch; }
    .proposal-card__finalist { width: 100%; }
}

/* ---- Cap gate card (shown when user hits 3-want limit without verification) ---- */
.wants-cap-gate {
    margin-top: var(--space-4);
}
.wants-cap-gate__inner {
    background: var(--surface-primary);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    border: 1.5px solid var(--border-default);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: var(--shadow-md);
}
.wants-cap-gate__msg {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}
.wants-cap-gate__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    background: var(--accent-tertiary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}
.wants-cap-gate__link:hover { background: var(--color-black); color: var(--color-white); }
.wants-cap-gate__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-muted);
    padding: var(--space-1);
    line-height: 1;
}
.wants-cap-gate__close:hover { color: var(--text-primary); }

/* Post-a-want button expands into the flow (clip-reveal overlay target) */
.wants-flow-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-detail-overlay, 9450);
    background: var(--surface-app);
}

/* ── Want detail — file attachments row (2026-07-23) ── */
.want-files { margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-primary); }
.want-files__title { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-primary); }
.want-files__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.want-files__item { display: flex; align-items: center; gap: var(--space-3); }
.want-files__link { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent-tertiary); font-size: var(--text-sm); text-decoration: none; }
.want-files__link:hover { text-decoration: underline; }
.want-files__size { flex: none; color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap; }

/* Inline flow embed: the flow root is a rail+content grid sized to the
   viewport; inside the overlay there is no rail and the overlay scrolls. */
.wants-flow-overlay .start-home {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 100%;
    overflow: visible;
}

/* Inline-flow close: legible chip above the card pills */
.wants-flow-overlay__close {
    background: var(--color-white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    width: var(--size-9, 36px);
    height: var(--size-9, 36px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    z-index: 5;
}


/* The embedded /start flow expands in document flow below Post a want. */
.wants-compose {
    position: relative;
    margin: var(--space-4) 0 var(--space-5);
}
.wants-compose[hidden] { display: none; }

.wants-compose__flow.start-home {
    display: block;
    grid-template-columns: none;
    height: auto;
    min-height: 0;
    overflow: visible;
    background: transparent;
}
.wants-compose__flow .start-home__page {
    height: auto;
    min-height: 0;
    overflow: visible;
    overscroll-behavior: auto;
}
.wants-compose__flow .start-home__main {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: var(--space-8);
}

.wants-compose__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-9, 36px);
    height: var(--size-9, 36px);
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    cursor: pointer;
}
.wants-compose__close:hover { background: var(--surface-secondary); }
.wants-compose__close iconify-icon { font-size: 1.05em; }

/* ============================================================
   EMBEDDED FLOW IS A CARD STACK, NOT A PAGE (Steven 2026-08-13/14).
   The standalone /start page lays its cards out ABSOLUTELY inside the
   entry at JS-measured offsets (--start-card-height / --start-why-offset),
   paints the card surface on a height-animated entry::before, and lifts
   the theater with viewport-anchored transforms. Inside the /wants
   composer those measurements go stale (a resumed or re-expanded card
   measures against hidden panels) and every miss reads as dead space or
   an overlap. Docked mode already solved this for point/story (in-flow,
   self-painted cards) — these rules extend that architecture to EVERY
   card the embed can show. All selectors require .wants-compose__flow
   (composer-only); standalone /start never matches (two-paths law). */
.wants-compose__flow .start-home__main { min-height: 0 !important; }
.wants-compose__flow .start-claimed { min-height: 0 !important; }
/* The composer opens with scrollIntoView(block:start); without this the
   sticky utility bar overlays the top of the flow. space-8, not space-4:
   the bar's real height exceeds the token (padding) and the TOLL BENCH
   chip straddles ~14px above the card top — space-4 clipped it (Steven
   2026-08-14). */
.wants-compose { scroll-margin-top: calc(var(--utility-bar-height, 56px) + var(--space-8)); }

/* Entry: in flow, below the utility bar (z10) and the close X (z5) —
   standalone makes it sticky at z-index topbar-1 (49), which rode the card
   OVER the dark bar on scroll and buried the X. Tight to the mount top;
   the X deliberately overlaps the card's top-right corner. */
.wants-compose__flow .start-hero__entry {
    position: relative;
    top: auto;
    z-index: 1 !important;
    transform: none !important;
    margin-top: var(--space-2);
}
/* No height-animated card chrome: each card paints itself (docked pattern). */
.wants-compose__flow .start-hero__entry::before { display: none; }

/* Once a want exists (--future) the invisible hero headline's reserved
   space is pure gap; collapse it for real. */
.wants-compose__flow.start-home--future .start-hero__chip,
.wants-compose__flow.start-home--future .start-hero__headline,
.wants-compose__flow.start-home--future .start-hero__sub { display: none; }

/* Non-docked odds card: the form owns the card surface and the odds panel
   joins the flow inside it, so the card is exactly as tall as its content
   and --start-card-height stops mattering here. */
.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);
}
.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);
}

/* Every follow-on card lives in flow. top:auto !important outranks all the
   measured-offset rules — including the docked-EXPANDED why card, which
   the docked conversion missed: its absolute anchor at a stale
   --start-card-height was the giant void under the baseline cards. */
.wants-compose__flow .start-why,
.wants-compose__flow .start-point,
.wants-compose__flow .start-story,
.wants-compose__flow .start-solution,
.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);
}
/* In flow, a visibility:hidden card still holds its space — display must
   follow the same state classes that flip visibility. */
.wants-compose__flow:not(.start-home--future) .start-why { display: none; }
.wants-compose__flow:not(.start-home--point) .start-point { display: none; }
.wants-compose__flow:not(.start-home--retry-allowed) .start-card__retry { display: none; }
.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; }
.wants-compose__flow.start-home--solution-settled .start-story { display: none !important; }
.wants-compose__flow:not(.start-home--solution):not(.start-home--solution-moving):not(.start-home--solution-settled) .start-solution { display: none; }

/* The docked compact card keeps its straddle pills in the composer —
   standalone hides them there, but Steven wants the card to read as a
   card everywhere in the embed. */
.wants-compose__flow .start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__pills { display: flex; }
/* And the TARGET pill shifts left so the overlapping close X never sits
   on top of it. */
.wants-compose__flow .start-hero__entry .start-card__pills { right: calc(var(--space-6) + var(--size-9, 36px)); }

/* The signed Target Path lives directly beneath its probability card. */
.want-path-embed,
.want-path-embed * {
    box-sizing: border-box;
}
.want-path-embed {
    width: 100%;
    margin: var(--space-5) 0;
}
/* Plans redesign 2026-08-11 (Steven): the target card and the plan are now
   TWO distinct cards, not one welded surface. The target card keeps its own
   drop shadow (matched to the targets-page card, --shadow-md) with all four
   corners rounded and its full border, so the "Proposal accepted" banner that
   renders inside it reads as part of that shadowed card. */
.want-plan-stack .target-trajectory {
    box-shadow: var(--shadow-md);
}
/* A clear gap separates the shadowed target card above from the flat plan card
   below (change 3: visual separation between the two). */
.want-plan-stack .want-path-embed {
    margin: var(--space-5) 0;
}
.want-plan-stack .tp-head {
    margin-bottom: var(--space-5);
    border-top: 2px dashed var(--border-strong);
    border-radius: 0 0 var(--feed-card-radius) var(--feed-card-radius);
    box-shadow: var(--feed-card-shadow);
}
.want-plan-stack .tp-head__title {
    display: none;
}
.want-plan-stack .tp-head__deal .tp-state {
    display: none;
}
.want-path-embed .tp-head__back {
    display: none;
}
.want-step-detail.tp-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 var(--space-8);
    animation: toll-detail-enter var(--duration-normal) var(--ease-default) both;
    /* Standard centered card — full rounded corners, same chrome as all other cards */
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.want-step-detail .tp-ctx__back {
    display: none;
}
/* Strip tp-ctx separate card chrome — it merges into the single ticket surface.
   Strip overflow:hidden too; the outer ticket's overflow:hidden handles corner clipping. */
.want-step-detail .tp-ctx {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible;
}
/* tp-ctx cap: margin bleeds of ±space-4 relative to tp-ctx padding (space-4) work fine.
   The ticket's overflow:hidden clips it cleanly at the rounded top corners. */

/* Work zone (tp-detail article): add horizontal padding for content breathing room */
.want-step-detail .tp-detail.tp-ticket {
    padding: var(--space-4) var(--space-4) 0;
}
/* The state band (tp-stepband) is the ticket work zone's first child and sits
   directly below the dashed tear (tp-perf). The ticket's top padding (space-4)
   would leave a white gap between the tear and the band's coloured wash; pull the
   band up through that padding so its top edge meets the dashed line (Steven:
   make the purple go all the way up to the dotted line). Scoped to this detail
   page only; the standalone /targets step page has no tear above the band. */
.want-step-detail .tp-detail.tp-ticket > .tp-stepband:first-child {
    margin-top: calc(var(--space-4) * -1);
}
/* Perfs inside the ticket: hide the side notch circles (they'd be clipped by
   overflow:hidden on the ticket anyway). The dashed line still reads as a tear. */
.want-step-detail .tp-perf::after,
.want-step-detail .tp-perf .tp-perf__notch {
    display: none;
}
/* The dashed line itself runs between left:12px and right:12px. With the notches gone,
   let it run full-width instead. */
.want-step-detail .tp-perf::before {
    left: 0;
    right: 0;
}

/* Activity accordion footer band: strip floating-card chrome, become a flush band */
.want-step-detail .tp-ac-activity {
    background: var(--surface-secondary);
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    /* bleed past tp-detail's horizontal padding so the band spans full ticket width */
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    border-top: 1px solid var(--border-default);
}
.want-step-detail .tp-ac-activity > summary {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.want-step-detail .tp-ac-activity__body {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
/* Footer back-button area inside the ticket */
.want-step-detail .tp-detail-foot {
    border-top: none;
    padding: var(--space-3) 0;
    margin-top: var(--space-2);
}
.tp-provide__status {
    min-height: 1.5em;
    margin: calc(var(--space-2) * -1) 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.tp-provide__status:empty {
    display: none;
}
.tp-provide__status.is--success {
    color: var(--color-green-600);
    font-weight: var(--font-semibold);
}
.tp-provide__status.is--error {
    color: var(--color-red-600);
    font-weight: var(--font-semibold);
}
.tp-provide__uploaded {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
@keyframes toll-detail-enter {
    from {
        opacity: 0;
        transform: translateX(var(--space-6));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .want-step-detail.tp-page {
        animation: none;
    }
}


/* ================= Want detail — real proposals (owner) ================= */
.want-proposals__list { display: flex; flex-direction: column; gap: var(--space-4); }

.proposal-card--finalist { border-color: var(--color-green-400); box-shadow: var(--shadow-md); }
.proposal-card--accepted { border-color: var(--color-green-500); }
.proposal-card--expired { opacity: 0.55; }
/* Steven 2026-08-13: a failed bid goes RED, just like a finalist goes purple.
   Red border + red wash, worn by deal-failed finalists and rejected bids. */
.proposal-card--failed {
    border-color: var(--color-red-400);
    background: var(--color-red-50);
    box-shadow: none;
}

.proposal-card__nameline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.proposal-card__ordinal {
    display: inline-flex; align-items: center;
    background: var(--color-green-100); color: var(--color-green-600);
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase;
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
.proposal-card__chosen {
    display: inline-flex; align-items: center;
    background: var(--color-green-500); color: var(--color-white);
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase;
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
.proposal-card__expired {
    display: inline-flex; align-items: center;
    background: var(--surface-secondary); color: var(--text-muted);
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase;
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
.proposal-card__failed {
    display: inline-flex; align-items: center;
    background: var(--status-error-subtle); color: var(--status-error);
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase;
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
.proposal-card__model { color: var(--text-muted); }

.proposal-card__head--owner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(112px, auto) minmax(104px, auto) auto;
    align-items: center;
    gap: var(--space-3);
}
.proposal-card__head--owner .proposal-card__avatar {
    width: var(--size-12);
    height: var(--size-12);
    border: 2px solid var(--color-green-500);
    background: var(--color-green-50);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}
.proposal-card__specimen {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-blue-500);
    border-radius: var(--radius-sm);
    color: var(--color-blue-600);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    padding: var(--space-1) var(--space-2);
    text-transform: uppercase;
}
.proposal-card__operator { color: var(--text-muted); }
/* r44/r50 disclosures -- AI notice and money sentence on the proposal face */
.proposal-card__disclosure {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    border-top: 1px solid var(--border-soft);
}
.proposal-card__record {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.proposal-card__record-label,
.proposal-system__label,
.proposal-card__commitment-label,
.proposal-history__rating-label,
.proposal-history__created,
.proposal-history__metric dt,
.proposal-history__bands-label,
.proposal-history__current {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0;
}
.proposal-card__record-value {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}
.proposal-card__offer {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.proposal-card__offer-value {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}
.proposal-system {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--space-4);
    border-block: 1px solid var(--border-default);
    background: var(--surface-secondary);
}
.proposal-system__item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border-left: 1px solid var(--border-default);
}
.proposal-system__item:first-child { border-left: 0; }
.proposal-system__value {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}
.proposal-card__commitment {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-blue-500);
    background: var(--color-blue-50);
}
.proposal-card__commitment-text {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.proposal-history { margin-top: var(--space-4); }
.proposal-history__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-1) var(--space-3);
}
.proposal-history__title {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
}
.proposal-history__rating { font-size: var(--text-base); }
.proposal-history__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-block: 1px solid var(--border-default);
}
.proposal-history__metric {
    min-width: 0;
    padding: var(--space-3);
    border-left: 1px solid var(--border-default);
}
.proposal-history__metric:first-child { border-left: 0; }
.proposal-history__metric dt { margin: 0 0 var(--space-1); }
.proposal-history__metric dd {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}
.proposal-history__bands {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-3);
}
.proposal-history__band-list {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.proposal-history__band {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
}
.proposal-history__band strong {
    color: var(--text-secondary);
    font-family: var(--font-heading);
}
.proposal-history__band--current {
    border: 1px solid var(--color-blue-500);
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}
.proposal-history__band--current strong { color: var(--color-blue-600); }
.proposal-history__current { margin-left: auto; }

.proposal-card__terms-row {
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    margin: var(--space-4) 0 var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.proposal-term { display: flex; flex-direction: column; gap: 2px; }
.proposal-term__label {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted);
}
.proposal-term__value {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-lg); color: var(--text-primary);
}

/* Rule 14: itemized breakdown of where the ask goes, shown below the terms row. */
.proposal-card__breakdown {
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}
.proposal-card__breakdown-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.proposal-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}
.proposal-breakdown__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 96px;
}
.proposal-breakdown__name {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    margin: 0;
}
.proposal-breakdown__amount {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.proposal-card__finish {
    margin-top: var(--space-3); padding: var(--space-3);
    background: var(--surface-secondary); border-radius: var(--radius-md);
}
.proposal-card__finish-label {
    display: block;
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 2px;
}
.proposal-card__finish-text {
    font-family: var(--font-serif); font-style: italic;
    font-size: var(--text-base); color: var(--text-secondary);
}

.proposal-card__choose {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--accent-tertiary); color: var(--color-white);
    font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm);
    border: none; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full); cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.proposal-card__choose:hover { background: var(--color-black); }

/* ---- Signed collapse ---- */
.want-signed {
    text-align: center;
    background: var(--surface-primary);
    border: 1px solid var(--color-green-400);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6) var(--space-5);
}
.want-signed__glyph { font-size: 2.25rem; color: var(--color-green-500); margin-bottom: var(--space-2); }
.want-signed__title {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-lg); color: var(--text-primary); margin: 0 0 var(--space-2);
}
.want-signed__agent { color: var(--text-link); text-decoration: none; }
.want-signed__agent:hover { text-decoration: underline; }
.want-signed__body {
    font-size: var(--text-sm); color: var(--text-secondary);
    margin: 0 auto var(--space-4); max-width: 42ch; line-height: 1.5;
}
.want-signed__cta {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--accent-tertiary); color: var(--color-white);
    font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm);
    text-decoration: none; padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
}
.want-signed__cta:hover { background: var(--color-black); color: var(--color-white); }

/* ================= Accept flow modal (attestation r86) ================= */
.want-accept-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal, 400);
    background: var(--surface-overlay);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
}
.want-accept-overlay[hidden] { display: none; }
.want-accept {
    position: relative;
    width: 100%; max-width: 480px;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    max-height: 88vh; overflow-y: auto;
}
.want-accept__x {
    position: absolute; top: var(--space-3); right: var(--space-3);
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 1.25rem; line-height: 1;
    display: inline-flex;
}
.want-accept__x:hover { color: var(--text-primary); }
.want-accept__title {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-xl); color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.want-accept__lede { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; margin: 0 0 var(--space-4); }

.want-accept__attest {
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4); margin-bottom: var(--space-4);
}
.want-accept__check {
    display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.4;
    margin-bottom: var(--space-3); cursor: pointer;
}
.want-accept__check input { margin-top: 3px; flex-shrink: 0; }
.want-accept__error {
    font-size: var(--text-sm); color: var(--color-red-600, var(--text-primary));
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3); margin: 0 0 var(--space-4); line-height: 1.4;
}
.want-accept__actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
.want-accept__cancel {
    background: none; border: 1px solid var(--border-default);
    color: var(--text-secondary); font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-sm); padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full); cursor: pointer;
}
.want-accept__cancel:hover { background: var(--surface-secondary); }
.want-accept__confirm {
    background: var(--accent-tertiary); color: var(--color-white);
    border: none; font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-sm); padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full); cursor: pointer; box-shadow: var(--shadow-sm);
}
.want-accept__confirm:hover { background: var(--color-black); }
.want-accept__confirm:disabled { opacity: 0.6; cursor: default; }
.want-accept__agree { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.want-accept__agree a { color: var(--text-secondary); text-underline-offset: 2px; }
.want-accept__agree a:hover { color: var(--text-primary); }
body.want-accept-open { overflow: hidden; }

/* ---- Choosing flow (2026-07-24): collapsed summaries, winner pin, walk ---- */

/* Collapsible summary card: the header is the toggle. */
.proposal-card__head--toggle { cursor: pointer; }
.proposal-card__caret {
    flex-shrink: 0;
    align-self: center;
    color: var(--text-muted);
    font-size: var(--text-base);
    display: inline-flex;
    transition: transform var(--duration-fast) var(--ease-default);
}
.proposal-card[data-expanded="1"] .proposal-card__caret { transform: rotate(180deg); }
.proposal-card__summaryline {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}
/* UA `hidden` guard: the detail body must stay display:none when hidden. */
.proposal-card__detail[hidden] { display: none; }

/* Winner pin: the chosen plan + its live walk read as one block. */
.want-winner { margin-bottom: var(--space-5); }
.want-winner .proposal-card { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.want-walk {
    background: var(--surface-primary);
    border: 1px solid var(--color-green-500);
    border-top: 1px solid var(--border-soft);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
}
.want-walk__label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}
.want-walk__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.want-walk__step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-soft);
}
.want-walk__step:first-child { border-top: none; }
.want-walk__glyph {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    font-size: var(--text-base);
    color: var(--text-muted);
}
.want-walk__step--done .want-walk__glyph { color: var(--color-green-500); }
.want-walk__step--current .want-walk__glyph { color: var(--text-primary); }
.want-walk__step--you .want-walk__glyph { color: var(--status-warning); }
.want-walk__ring {
    width: 0.875rem; height: 0.875rem;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-full);
}
.want-walk__title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.35;
}
.want-walk__step--queued .want-walk__title { color: var(--text-muted); font-weight: 500; }
.want-walk__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.want-walk__badge--you {
    background: var(--status-warning-subtle);
    color: var(--status-warning);
}

/* Reference list: the plans that closed when the deal signed. */
.want-reference__note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0 0 var(--space-3);
}
.want-proposals__list--reference .proposal-card {
    opacity: 0.6;
    box-shadow: none;
}
.want-proposals__list--reference .proposal-card[data-expanded="1"] { opacity: 0.85; }

@media (max-width: 560px) {
    .proposal-card__head--owner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
    }
    .proposal-card__head--owner .proposal-card__id { align-self: center; }
    .proposal-card__record {
        grid-column: 2;
        align-items: flex-start;
        text-align: left;
    }
    .proposal-card__offer {
        grid-column: 2;
        align-items: flex-start;
        text-align: left;
    }
    .proposal-card__caret {
        grid-column: 3;
        grid-row: 1 / span 3;
    }
    .proposal-system,
    .proposal-history__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .proposal-system__item:nth-child(3),
    .proposal-history__metric:nth-child(3) {
        border-left: 0;
    }
    .proposal-system__item:nth-child(n+3),
    .proposal-history__metric:nth-child(n+3) {
        border-top: 1px solid var(--border-default);
    }
    .proposal-history__head,
    .proposal-history__bands {
        align-items: flex-start;
        flex-direction: column;
    }
    .proposal-history__band-list { width: 100%; }
    .proposal-history__current { margin-left: 0; }
    .proposal-card__footer { flex-direction: column; align-items: stretch; }
    .proposal-card__finalist,
    .proposal-card__choose { width: 100%; justify-content: center; }
}

/* ============ Proposal readings block (rules 112-113, 2026-07-30) ===========
   The three SMART readings now appear above the collapsible detail so a
   person sorting bids can compare them without expanding each card.
   Design tokens only; reuses the existing .finalist-goal* rules for the goal
   items. Only the wrapper and label are new here.
   ======================================================================== */
.proposal-readings {
    /* In the redesigned card, the divider <hr> above provides the separation;
       no extra top margin or border-top needed here. */
    margin-top: 0;
}
.proposal-readings__label {
    display: block;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.proposal-readings__picked-mark {
    flex-shrink: 0;
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-green-600);
    align-self: center;
}

/* ============ Finalist gate (rules 112-113, 2026-07-28) ==================
   Tick the box -> the panel drops open with the agent's three readings and
   its four questions -> the Choose button sits below the panel. Design
   tokens only; nothing new is invented here.
   ======================================================================== */
.finalist-gate {
    /* Sits directly after the pick-action row or readings section; no extra top border. */
    margin-top: 0;
}

.finalist-gate__check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}
.finalist-gate__check--off { cursor: default; }

.finalist-gate__check-input {
    margin-top: 3px;
    flex-shrink: 0;
}
.finalist-gate__check-input:disabled { cursor: default; }

.finalist-gate__check-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.finalist-gate__check-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
}
.finalist-gate__check--off .finalist-gate__check-title { color: var(--text-muted); }
.finalist-gate__check-sub {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

.finalist-panel {
    margin-top: var(--space-4);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.finalist-panel__legacy {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.finalist-panel__block {
    border: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
    min-width: 0;
}
.finalist-panel__block:last-of-type { margin-bottom: var(--space-4); }

.finalist-panel__legend {
    display: block;
    padding: 0;
    margin: 0 0 var(--space-1);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.finalist-panel__hint {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}
/* Cap notice: sits at the top of the gate section when 3 finalists are named. */
.finalist-panel__hint--cap {
    margin: var(--space-3) 0 0;
    font-style: italic;
}

/* Questions area: hidden until a reading is picked; revealed by JS. */
/* DEFECT 3 FIX: display:flex overrides the [hidden] attribute — add an
   explicit rule so the attribute wins. Check for the same bug on any other
   finalist element that sets display: no others use [hidden] directly. */
.finalist-panel__questions-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.finalist-panel__questions-area[hidden] { display: none; }

/* Pre-pick prompt: shown before any reading is selected. */
.finalist-panel__pre-pick {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
    font-style: italic;
}

/* Checkbox row inside the questions area: sits below the answers. */
.finalist-panel__questions-area .finalist-gate__check {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* ---- The three readings: pick one ---- */
.finalist-goals {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.finalist-goal {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    cursor: pointer;
}
.finalist-goal:hover { border-color: var(--border-strong); }
.finalist-goal--picked {
    border-color: var(--color-green-400);
    box-shadow: var(--shadow-sm);
}
.finalist-goal__input {
    margin-top: 3px;
    flex-shrink: 0;
}
.finalist-goal__ordinal {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
}
.finalist-goal--picked .finalist-goal__ordinal {
    background: var(--color-green-100);
    color: var(--color-green-600);
}
.finalist-goal__text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.45;
    min-width: 0;
}

/* ---- The four questions: answer all ---- */
.finalist-questions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.finalist-question {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.finalist-question__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.finalist-question__input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.45;
}
.finalist-question__input:focus {
    outline: none;
    border-color: var(--border-strong);
}

/* ---- What is still missing, and what went wrong ---- */
.finalist-panel__missing {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}
.finalist-panel__error {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-red-600, var(--text-primary));
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    line-height: 1.4;
}

/* ---- The Choose button: below the panel content ---- */
.finalist-gate__actions {
    display: flex;
    justify-content: flex-end;
}
.finalist-gate__choose {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--accent-tertiary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    border: none;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.finalist-gate__choose:hover { background: var(--color-black); }
.finalist-gate__choose:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

/* ---- Named: the record, read-only ---- */
.finalist-record {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}
.finalist-record__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.finalist-record__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-green-100);
    color: var(--color-green-600);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}
.finalist-record__note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}
.finalist-record__block { margin-bottom: var(--space-4); }
.finalist-record__label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.finalist-record__goal-text {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 1.45;
}
.finalist-record__answers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.finalist-record__answer {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}
.finalist-record__q {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.4;
}
.finalist-record__a {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.45;
}
.finalist-record__legacy,
.finalist-record__empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.45;
}

@media (max-width: 640px) {
    .finalist-gate__actions { justify-content: stretch; }
    .finalist-gate__choose { width: 100%; justify-content: center; }
}

/* ============ Redesigned proposal card — pcard-* elements (2026-07-31) ======
   Light card face: passport strip, identity row with toll, divider, readings,
   pick-action button, inline panel. Everything dark lives only in the passport
   popup dialog (separate surface). Design tokens only. No new tokens invented.
   ======================================================================== */

/* ── 1. Passport header strip ─────────────────────────────────────────────── */
.pcard-passport-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pcard-passport-strip__brand { min-width: 0; }
.pcard-passport-strip__reg { flex-shrink: 0; white-space: nowrap; }

/* ── 2. Identity row ──────────────────────────────────────────────────────── */
.pcard-identity-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.pcard-identity-row__avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-secondary);
    overflow: hidden;
}
.pcard-identity-row__info {
    flex: 1;
    min-width: 0;
}
.pcard-identity-row__nameline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: 2px;
}
.pcard-identity-row__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--text-primary);
    text-decoration: none;
    line-height: var(--leading-snug);
}
.pcard-identity-row__name--button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.pcard-identity-row__name--button:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}
.pcard-identity-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Toll block: right side of identity row ───────────────────────────────── */
.pcard-toll {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
}
.pcard-toll__label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pcard-toll__value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xl, 1.25rem);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}
.pcard-toll__value--free { color: var(--color-green-600); }
.pcard-toll__meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── 3. Divider ───────────────────────────────────────────────────────────── */
.pcard-divider {
    border: none;
    border-top: 1px solid var(--border-soft);
    margin: 0 0 var(--space-4);
}

/* ── Readings section header: label left, "pick one" right ───────────────── */
.proposal-readings__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.proposal-readings__pick-hint {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}
/* Lede line beneath the section header */
.proposal-readings__lede {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── 5. Primary action: Pick a reading button ─────────────────────────────── */
.pcard-pick-action {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.pcard-pick-action__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    border: 1px solid var(--border-default);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.pcard-pick-action__btn:hover:not(:disabled) {
    background: var(--accent-primary-subtle);
    border-color: var(--accent-primary);
}
.pcard-pick-action__btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.pcard-pick-action__btn--disabled,
.pcard-pick-action__btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.pcard-pick-action__hint {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ── 8. Bottom details dropdown ───────────────────────────────────────────── */
.pcard-more {
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}
.pcard-more__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: pointer;
    list-style: none; /* remove default marker */
    user-select: none;
}
.pcard-more__summary::-webkit-details-marker { display: none; } /* Safari */
.pcard-more__summary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.pcard-more__caret {
    flex-shrink: 0;
    transition: transform 0.2s;
}
details.pcard-more[open] .pcard-more__caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pcard-more__caret { transition: none; } }
.pcard-more__section { margin-top: var(--space-3); }

/* ── Mobile adjustments ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pcard-identity-row { flex-wrap: wrap; }
    .pcard-toll { align-items: flex-start; text-align: left; }
    .pcard-pick-action { flex-direction: column; align-items: stretch; }
    .pcard-pick-action__btn { justify-content: center; }
}

/* ============ Informed-plan card state (plan_is_informed = true) ============
   Added 2026-07-31. When the agent has filed its revised plan after reading
   the person's answers, the card face shows the agreed-upon want, steps,
   terms, and breakdown instead of the three-reading picker.
   All colors use design tokens only — no hex, no new tokens.
   =========================================================================== */

/* ── Agreed-upon want block ─────────────────────────────────────────────────── */
.pcard-agreed-want {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
}
.pcard-agreed-want__label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.pcard-agreed-want__text {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-primary);
}

/* ── Face container for steps + terms + breakdown + finish line ────────────── */
.pcard-informed-face {
    margin: var(--space-4) 0;
}
.pcard-informed-face .proposal-steps__label {
    margin-top: 0;
}
/* Terms row on the face gets the same visual treatment as in the dropdown,
   but without the pcard-more__section extra top margin. */
.pcard-informed-face .proposal-card__terms-row {
    margin-top: var(--space-4);
}

/* ── Approve proposal button ─────────────────────────────────────────────────
   Reuses .proposal-card__footer + .proposal-card__choose (already defined).
   No new rules needed — the existing .proposal-card__footer / __choose
   classes handle layout and color correctly for the informed-plan footer too.
   ─────────────────────────────────────────────────────────────────────────── */

/* ============ New-shape proposal pitch card (2026-07-31) ====================
   Rendered when p.pitch_title is present (Wave B 2.0 bids).
   All values use existing design tokens only - no new tokens introduced.
   =========================================================================== */

/* -- Pitch block: title + body + held-to goal -------------------------------- */
.pcard-pitch {
    margin: 0 0 var(--space-4);
}
.pcard-pitch__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-2xl);
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.pcard-pitch__body {
    margin: 0 0 var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--text-secondary);
}
.pcard-pitch__goal {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
}
.pcard-pitch__goal-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}
.pcard-pitch__goal-text {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-primary);
}

/* -- SELECT button variant ---------------------------------------------------
   Shares .pcard-pick-action and base .pcard-pick-action__btn styles.
   The --select modifier gives it a filled dark appearance to distinguish
   it from the legacy "Name as finalist" outline button.
   --------------------------------------------------------------------------- */
.pcard-pick-action__btn--select {
    background: var(--text-primary);
    color: var(--surface-primary, #fff);
    border-color: var(--text-primary);
}
.pcard-pick-action__btn--select:hover:not(:disabled) {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
    color: var(--surface-primary, #fff);
}

/* -- Rulings 2026-07-31 -------------------------------------------------------
   Ruling 3: plan-overview step list inside a proposal card.
   Reuses tp-plan classes from target-path.css (already loaded on want_detail).
   Only overrides needed to fit the narrower card context are listed here.
   Ruling 2: finalist-record expanders (reading/answers/original-bid collapsed)
             and the notifier strip shown instantly after send-back.
   --------------------------------------------------------------------------- */

/* Plan-overview wrapper: no top margin collision with the agreed-want block */
.pcard-step-overview {
    margin-top: var(--space-4);
}
.pcard-step-overview__title {
    font-size: var(--text-sm);
}

/* ── Step row: flush-left tight layout (Steven walkthrough 2026-08-05) ─────
   Override the base tp-plan__row 2-col grid: the number chip and title sit
   inline on one line; the subtitle bullets and the details expander run full
   width below with no left-gutter indent.
   Uses two-class specificity (.pcard-step-overview .tp-plan__row = 0-2-0)
   so it beats the single-class .tp-plan__row (0-1-0) in target-path.css,
   which loads after this file on want_detail.html.                          */
.pcard-step-overview .tp-plan__row {
    display: block;
    grid-template-columns: none;
    padding: var(--space-2) 0;
    border: none;
    gap: 0;
}
/* Tighten the gap between step rows */
.pcard-step-overview .tp-plan__list {
    gap: var(--space-1);
}
/* Dotted rule between steps (Steven 2026-08-12): the plan reads as rows
   separated by dotted lines, the same rhythm as the plan page. Higher
   specificity than the border:none reset on the row above. */
.pcard-step-overview .tp-plan__row + .tp-plan__row {
    border-top: 2px dotted var(--border-strong);
    padding-top: var(--space-3);
}
/* Row 1: chip + title on one line */
.pcard-step-overview__title-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
/* The number chip sits inline; cancel grid placement from target-path.css */
.pcard-step-overview .tp-plan__row .tp-plan__num {
    flex-shrink: 0;
    grid-column: unset;
    grid-row: unset;
    position: static;
}
/* Title: cancel grid placement, fill remaining flex space */
.pcard-step-overview .tp-plan__row .tp-plan__steptitle {
    flex: 1;
    display: inline;
}
/* Row 2: bullet list for the detail/subtitle -- flush left, no gutter */
.pcard-step-overview__bullets {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
}
.pcard-step-overview__bullets li {
    margin-bottom: var(--space-1);
    overflow-wrap: break-word;
}
.pcard-step-overview__bullets li:last-child {
    margin-bottom: 0;
}
/* A single-bullet sentence: suppress the bullet marker so it reads as prose */
.pcard-step-overview__bullets--single {
    list-style: none;
    padding-left: 0;
}

/* Per-step Details expander: flush left, no gutter */
.pcard-step-overview__expander {
    margin-top: var(--space-2);
}
.pcard-step-overview__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    padding: var(--space-1) 0;
}
.pcard-step-overview__summary::-webkit-details-marker { display: none; }
.pcard-step-overview__expander[open] .pcard-step-overview__summary {
    color: var(--text-primary);
}
.pcard-step-overview__meta,
.pcard-step-overview__approve,
.pcard-step-overview__note,
.pcard-step-overview__outcome {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.pcard-step-overview__approve {
    font-weight: 600;
    color: var(--text-primary);
}
.pcard-step-overview__outcome {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
}
.pcard-step-overview__examples {
    margin: var(--space-1) 0 0 var(--space-4);
    padding: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Finalist-record expanders (reading/answers behind collapsed details) */
.finalist-record__expander > summary {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    list-style: none;
    padding: var(--space-1) 0;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.finalist-record__expander > summary::-webkit-details-marker { display: none; }
.finalist-record__expander[open] > summary {
    color: var(--text-secondary);
}
.finalist-record__caret {
    font-size: 0.9em;
    transition: transform 0.15s;
}
.finalist-record__expander[open] .finalist-record__caret {
    transform: rotate(180deg);
}

/* Instant post-send-back notifier strip (Ruling 2) */
.finalist-notifier {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-top: 1px solid var(--border-soft);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}
.finalist-notifier__icon {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 1.1em;
    margin-top: 0.1em;
}

/* ============ Person cost disclosure (2026-08-01) ===========================
   Funding line on new-shape proposal cards: what the person pays out of
   pocket beyond the toll. First-class row, not a footnote.
   All tokens from tokens.css only — no new tokens.
   =========================================================================== */
.pcard-cost-disclosure {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
}
.pcard-cost-disclosure__label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pcard-cost-disclosure__range {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--text-primary);
    line-height: 1.2;
}
.pcard-cost-disclosure__note {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}
.pcard-cost-disclosure__note--plain {
    font-style: italic;
    color: var(--text-muted);
}

/* ---- Proposal arrival announcement (A. Loud proposal treatment) ----------
   Applies when proposal_count > 0 and next_step == 'Review proposals'.
   Both the want_card (list) and the target_trajectory_card (detail view)
   render this block immediately before their footer rule. When the banner
   renders the footer next-step chip and action are suppressed in the template,
   so the banner CTA is the only Review button on the card.

   Banner background is accent-primary (neon green). The CTA pill uses
   accent-tertiary (purple) to match the --ready footer action button on the
   trajectory card exactly -- same token, same color, cannot drift. Purple
   contrasts clearly on the green banner. The icon circle stays black/green.

   Tokens only: --accent-primary, --accent-tertiary, --color-black,
   --color-white, --space-*, --radius-*, --size-*, --font-heading,
   --font-body, --text-sm, --text-base, --font-semibold, --font-bold.
   No new tokens. No em-dashes. */

.want-proposal-arrival {
    /* GRID, not wrapping flex (Steven 2026-08-12). The old layout relied on
       the CTA's flex-basis:100% wrapping to a new flex line. Once the
       narrow-viewport block flips the container to column, WebKit resolves
       that percentage against the container's auto HEIGHT and wraps the CTA
       into a SECOND COLUMN instead -- the giant black blob off the card's
       right edge on every iPhone, immune to cache clears. Chromium happens to
       grow the column, which is why desktop checks kept passing. Grid rows
       are deterministic in both engines: icon | body on row one, CTA spanning
       the full second row. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--accent-primary);
}
.want-proposal-arrival__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--size-8);
    height: var(--size-8);
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--accent-primary);
    font-size: var(--text-base);
}
.want-proposal-arrival__body {
    flex: 1;
    min-width: 0;
}
.want-proposal-arrival__headline {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-black);
    line-height: 1.2;
}
.want-proposal-arrival__sub {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-black);
    opacity: 0.72;
    margin-top: 2px;
}
.want-proposal-arrival__cta {
    /* box-sizing is load-bearing (Steven 2026-08-11): the feed page does NOT
       load base.css's global `* { box-sizing: border-box }` reset, so without
       this the padded `flex: 0 0 100%` button measures 100% + padding, overflows
       the banner, and gets sheared off by the card's `overflow-x: clip` -- which
       read as a big black block shoved off the right edge. border-box + width
       + max-width keep it a clean full-width pill under the text. Sized to
       --size-10 / --text-sm to match the small action pills across the cards. */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    display: inline-flex;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-height: var(--size-10);
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    white-space: normal;
    text-align: center;
}
.want-proposal-arrival__cta:hover {
    opacity: 0.88;
}

/* Urgency modifier rules — must come AFTER the base block (equal specificity,
   source order wins). attention = person's move (green); calm = agent's move (gray). */
.want-proposal-arrival--attention {
    background: var(--accent-primary);
}
.want-proposal-arrival--calm {
    background: var(--surface-secondary);
}
.want-proposal-arrival--calm .want-proposal-arrival__icon {
    background: var(--color-gray-300);
    color: var(--color-gray-700);
}

/* In the small list card the announcement sits in the grid full-width
   between the probability row and the footer. */
.target-anchor .want-proposal-arrival {
    grid-column: 1 / -1;
}

/* In the large trajectory card the footer is display:contents at full size,
   so we need the announcement outside the footer. It inherits the grid gap
   naturally. */
.target-trajectory .want-proposal-arrival {
    /* nothing extra needed -- the parent grid places it */
}

/* ---- Plans redesign 2026-08-05 (Steven walkthrough) ---- */

/* Change 1: Large "Proposed plans" hero headline above the proposals list. */
.want-proposals__hero {
    margin: 0 0 var(--space-5);
}
.want-proposals__hero-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-2xl);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 var(--space-1);
}
.want-proposals__hero-sub {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2);
    line-height: 1.4;
}
.want-proposals__hero-count {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Change 2: Collapsible proposal cards.
   pcard-face is the always-visible toggle header.
   pcard-detail is the expandable body.
   pcard-collapsed-preview shows pitch title + clipped body text when collapsed.
   pcard-caret rotates when expanded. */
.pcard-face {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
/* Static cards (selected proposal) never show a cursor. */
.proposal-card:not([data-collapsible]) .pcard-face {
    cursor: default;
}
.pcard-face:focus-visible {
    outline: 2px solid var(--color-green-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* Keep pcard-face clickable but don't let sub-buttons (passport) steal the expand. */
.pcard-face [data-agent-passport-open] {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
.pcard-detail[hidden] { display: none; }
.pcard-collapsed-preview {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-1);
}
/* Preview stays visible when expanded so title+body remain readable. */
/* Also hide it for static (never collapsible) cards. */
.proposal-card:not([data-collapsible]) .pcard-collapsed-preview { display: none; }
.pcard-collapsed-preview__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.pcard-collapsed-preview__body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
    min-width: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* When expanded, body unclamps to full text. */
.proposal-card[data-expanded="1"] .pcard-collapsed-preview__body {
    -webkit-line-clamp: unset;
    overflow: visible;
}
/* When title is present, body sits under it (stack not flex-row). */
.pcard-collapsed-preview:has(.pcard-collapsed-preview__title) {
    flex-direction: column;
    gap: var(--space-1);
}
.pcard-collapsed-preview:has(.pcard-collapsed-preview__title) .pcard-collapsed-preview__body {
    flex: unset;
}
.pcard-caret {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: var(--text-base);
    transition: transform 180ms ease;
    align-self: center;
}
.proposal-card[data-expanded="1"] .pcard-caret { transform: rotate(180deg); }

/* Change 3: "Finalist selected" stamp — shown on the face above the collapsed
   preview, so it is visible without expanding the card.
   Prominent green confirmation block. */
.pcard-finalist-stamp {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-green-100);
    border: 1px solid var(--color-green-400);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-2) 0 var(--space-1);
}
.pcard-finalist-stamp__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-green-600);
    line-height: 1.2;
}
.pcard-finalist-stamp__sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-green-600);
    line-height: 1.35;
}
/* r174: expired/withdrawn finalist stamp — muted neutral treatment.
   The slot is open again; the green urgency no longer applies. */
.pcard-finalist-stamp--muted {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
}
.pcard-finalist-stamp--muted .pcard-finalist-stamp__title,
.pcard-finalist-stamp--muted .pcard-finalist-stamp__sub {
    color: var(--color-gray-600);
}


/* ── r173: Prior attempt history section ─────────────────────────────────────
   Visually quiet shelf below the plans section.  Existing tokens only.      */
.want-prior-attempts {
    margin: var(--space-6) 0 0;
    padding: var(--space-4);
    background: var(--color-surface-2, var(--color-gray-50));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.want-prior-attempts__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-4);
}
.want-prior-attempt + .want-prior-attempt {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.want-prior-attempt__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.want-prior-attempt__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-gray-200);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.want-prior-attempt__id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.want-prior-attempt__name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 1.2;
}
.want-prior-attempt__reg {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.want-prior-attempt__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    text-align: right;
}
.want-prior-attempt__cause {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--status-error);
}
.want-prior-attempt__when {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.want-prior-attempt__steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.want-prior-attempt__step {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-top: 1px solid var(--color-border-subtle, var(--color-gray-100));
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.want-prior-attempt__step:first-child { border-top: none; }
.want-prior-attempt__glyph {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: var(--text-base);
    line-height: 1;
}
.want-prior-attempt__step--completed .want-prior-attempt__glyph { color: var(--status-success); }
.want-prior-attempt__step--in_progress_at_failure .want-prior-attempt__glyph { color: var(--status-error); }
.want-prior-attempt__step--not_reached .want-prior-attempt__glyph { color: var(--text-muted); }
.want-prior-attempt__ring {
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: inline-block;
}
.want-prior-attempt__step-title {
    flex: 1;
    min-width: 0;
    color: var(--text-secondary);
    line-height: 1.4;
}
.want-prior-attempt__step--completed .want-prior-attempt__step-title { color: var(--text-primary); }
.want-prior-attempt__step--in_progress_at_failure .want-prior-attempt__step-title { color: var(--text-primary); }
.want-prior-attempt__step--not_reached .want-prior-attempt__step-title { color: var(--text-muted); }
.want-prior-attempt__failed-here {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--status-error);
    font-weight: 600;
}

/* ── Plans page: standalone Repost button (r135 / 2026-08-05) ───────────────
   When a target ended as agent_failed and the person has not yet reposted,
   a Repost button sits directly below the trajectory card on the Plans tab.
   The button itself reuses the existing .target-trajectory__action--repost
   shape (black pill, white text) from the card-list implementation.
   .want-repost-bar is only a spacing wrapper -- no new tokens. */
.want-repost-bar {
    margin-top: var(--space-3);
}
.want-repost-bar form {
    margin: 0;
}
.want-repost-bar__btn {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: var(--font-heading);
}
/* Auto-repost note above the Stop/Resume control -- existing tokens only. */
.want-repost-bar__note {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Want card three-dot action menu ────────────────────────────────────────
   Positioned top-right inside .target-anchor (position:relative).
   The trigger and dropdown sit above the stretched card-link (z-index:1+).
   No new tokens. */
.want-card-menu {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
}
.want-card-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8);
    height: var(--size-8);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-base);
    transition: background 0.1s, color 0.1s;
}
.want-card-menu__trigger:hover {
    background: var(--surface-secondary);
    color: var(--text-primary);
}
.want-card-menu__dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    min-width: 220px;
    padding: var(--space-1) 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
    z-index: var(--z-dropdown);
}
.want-card-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.want-card-menu__item:hover {
    background: var(--surface-secondary);
}
.want-card-menu__item--danger {
    color: var(--status-error);
}
.want-card-menu__item iconify-icon {
    flex: 0 0 auto;
    font-size: var(--text-base);
}

/* "Primary" chip inside the facts row */
.target-anchor__primary-chip {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    height: var(--size-5);
    border-radius: var(--radius-full);
    background: var(--status-success-subtle);
    color: var(--status-success);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Delete confirm modal ────────────────────────────────────────────────────
   Centered overlay, same token-only pattern as other site modals. */
.want-delete-modal[hidden] { display: none !important; }
.want-delete-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.want-delete-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.want-delete-modal__box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,.18));
}
.want-delete-modal__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.want-delete-modal__body {
    margin: 0 0 var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
/* Refusal reason inside the modal (Steven 2026-08-19): the server's "an
   agent is working this" answer shows in red where the person is looking. */
.want-delete-modal__error {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-red-50);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-red-600);
    line-height: 1.5;
}
.want-delete-modal__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}
.want-delete-modal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-10);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.want-delete-modal__btn--cancel {
    background: var(--surface-secondary);
    color: var(--text-primary);
}
.want-delete-modal__btn--cancel:hover { filter: brightness(0.97); }
.want-delete-modal__btn--confirm {
    background: var(--status-error);
    color: var(--color-white);
}
.want-delete-modal__btn--confirm:hover { filter: brightness(0.92); }
.want-delete-modal__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Original-bid notice: shown on finalist cards before the informed plan arrives */
.pcard-original-bid-notice {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: var(--space-3) 0 var(--space-2);
    padding: 0;
}

/* ---- Mobile layout pass 2026-08-07 ----------------------------------------
   Fix #1: odds row overflow at 390px.
   The probability row is flex-wrap:wrap (inherited), so pill + caption already
   wrap when they have to. The move sits at margin-left:auto which pushes it to
   the far right end of the CURRENT line. At 390px the pill alone is wide enough
   that the caption and move share almost no room, and the move clips the edge.
   Fix: at <=430px shrink the type one step via existing tokens and allow the
   move to drop to a second line (remove margin-left:auto so it wraps normally).
   Rounding logic is untouched -- this is layout only.
   Fix #3: board banner stacks vertically at narrow widths.
   At full width the banner is a flex row: icon | body | CTA. On phone the CTA
   button overflows beside a narrow text column. Fix: below 430px switch to
   column layout -- full-width text on top, CTA full-width below, bell hidden.
   --------------------------------------------------------------------------- */
@media (max-width: 430px) {
    /* Fix #1: odds row at narrow width */
    .target-trajectory__probability {
        gap: var(--space-2);
    }
    .target-trajectory__probability strong {
        font-size: var(--text-base);
        min-height: var(--size-8);
        padding: 0 var(--space-3);
    }
    .target-trajectory__caption {
        font-size: var(--text-sm);
    }
    .target-trajectory__move {
        font-size: var(--text-xs);
    }
    .target-trajectory__move-arrow {
        font-size: 1em;
    }

    /* Fix #3: banner vertical stack -- text first, CTA below, bell gone */
    .want-proposal-arrival {
        /* single column; the icon is hidden below and the CTA spans anyway */
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
        padding: var(--space-3);
    }
    .want-proposal-arrival__icon {
        display: none;
    }
    .want-proposal-arrival__body {
        flex: none;
    }
    .want-proposal-arrival__headline {
        font-size: var(--text-sm);
    }
    .want-proposal-arrival__cta {
        align-self: stretch;
        min-height: var(--size-10);
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        white-space: normal;
        text-align: center;
    }

    /* Fix #4 (2026-08-08): Compact pcard padding at narrow widths — reduces
       total horizontal gutter stack (page-padding + card-padding) from 48px
       to 32px so proposal card content has room at 390px. */
    .want-detail,
    .maker-profile {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
    .proposal-card {
        padding: var(--space-3) var(--space-2);
    }
    /* Tighten passport strip — keeps brand text + reg on one line */
    .pcard-passport-strip {
        gap: var(--space-1);
        margin-bottom: var(--space-2);
    }
    /* Allow toll meta ("180 days · N steps") to wrap rather than clip */
    .pcard-toll__meta {
        white-space: normal;
        word-break: break-word;
    }
    /* Tighter identity-row gap on very narrow screens */
    .pcard-identity-row {
        gap: var(--space-2);
        margin-bottom: var(--space-2);
    }
    /* Prevent toll block from overflowing — give identity info room */
    .pcard-toll {
        max-width: 42%;
    }
    /* Divider top margin tighter */
    .pcard-divider {
        margin-bottom: var(--space-3);
    }
}

/* ============================================================
   Plans grouped view — finalist slots, filter rail, group headers
   Added 2026-08-08 (plans-groups-1)
   ============================================================ */

/* --- Finalist slot pips --- */
.want-finalists-slots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.want-finalists-slots__pip {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-default);
    background: transparent;
    transition: background 0.15s, border-color 0.15s;
}
.want-finalists-slots__pip--filled {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
.want-finalists-slots__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* --- Filter rail --- */
.plans-filter-rail {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--space-3) 0 var(--space-2);
    margin-bottom: var(--space-2);
    position: sticky;
    /* Sit flush BELOW the sticky .toll-bench-header (a .utility-bar). The
       header height is content-driven: .toll-bench-brand/-header-action are
       --size-10 (40px) tall, plus utility-bar vertical padding, so the header
       renders 68px on desktop (14px pad) and 64px on mobile (12px pad, the
       <=767px --utility-bar-padding override). Match those exactly so no
       content peeks in a gap and the opaque rail bg clips content scrolling
       under it. The old top:48px (--size-12) assumed a phantom 48px strip and
       left the rail 16-20px UNDER the header, clipping the content between. */
    top: calc(var(--size-16) + var(--space-1)); /* 64 + 4 = 68px header height (desktop) */
    z-index: var(--z-sticky);
    background: var(--surface-primary);
}
@media (max-width: 767px) {
    /* Header padding drops to 12px each side at <=767px -> 40 + 24 = 64px. */
    .plans-filter-rail {
        top: var(--size-16); /* 64px */
    }
}
.plans-filter-rail::-webkit-scrollbar {
    display: none;
}

/* --- Filter chips --- */
.plans-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-default);
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}
.plans-filter-chip:hover {
    border-color: var(--color-gray-400);
    color: var(--text-primary);
}
.plans-filter-chip--active {
    border-color: var(--accent-primary);
    background: var(--accent-primary-subtle);
    color: var(--accent-primary-hover);
    font-weight: 600;
}
.plans-filter-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
}
.plans-filter-chip--active .plans-filter-chip__count {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary-hover);
}

/* --- Group containers --- */
.plans-group {
    margin-bottom: var(--space-6);
}

/* --- Group header row --- */
.plans-group__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.plans-group__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}
.plans-group__dot--green {
    background: var(--accent-primary);
}
.plans-group__dot--purple {
    background: var(--accent-tertiary);
}
.plans-group__dot--neutral {
    background: var(--color-gray-400);
}
.plans-group__rule {
    flex: 1 1 auto; /* stretches between label and count */
    height: 1px;
    background: var(--border-default);
    min-width: var(--space-3);
}
.plans-group__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    flex: 0 0 auto;
}
.plans-group__count {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    padding: 1px 7px;
}

/* --- Group helper text (open bids slot count) --- */
.plans-group__helper {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-default);
}

/* --- Colored ring on cards by group --- */
.plans-group--your-turn .proposal-card {
    box-shadow: inset 0 0 0 2px var(--accent-primary), var(--shadow-lift);
}
.plans-group--with-agent .proposal-card {
    /* Steven 2026-08-13: a REAL purple line around the with-agent card - the
       old inset shadow at 12% opacity read as no ring at all. */
    border: 1px solid var(--accent-tertiary);
    box-shadow: var(--shadow-lift);
}

/* --- Show more (open bids overflow) --- */
.plans-show-more {
    margin-top: var(--space-2);
}
.plans-show-more__btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-3);
    border: 1.5px dashed var(--border-default);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}
.plans-show-more__btn:hover {
    border-color: var(--color-gray-400);
    color: var(--text-primary);
}
/* ============================================================
   YOUR TURN card anatomy (variant='your_turn' in owner_proposal_card)
   Green header band + REFINED pill + Successful target block
   Added 2026-08-08 (plans-groups-2)
   ============================================================ */

/* Green header band */
.pcard-yt-band {
    position: relative;
    background: var(--accent-primary);
    /* Steven 2026-08-13: full-bleed - the green reaches the card edges with
       no white gutter (cancels .proposal-card's --space-4 padding); the
       green is the system token --accent-primary, nothing else. */
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
    padding: var(--space-4) var(--space-5) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.pcard-yt-band__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-xl);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--color-gray-900);
    text-wrap: pretty;
}

/* REFINED pill straddling band bottom edge */
.pcard-yt-refined-pill {
    position: absolute;
    left: var(--space-5);
    bottom: calc(-1 * var(--space-3));
    background: var(--highlight-yellow);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    box-shadow: 0 2px 6px rgba(44, 52, 68, 0.14);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--color-gray-900);
    text-transform: uppercase;
}

/* Successful target block */
.pcard-yt-success {
    padding: calc(var(--space-4) + var(--space-3)) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.pcard-yt-success__label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-lg);
    letter-spacing: -0.005em;
    color: var(--text-primary);
}
.pcard-yt-success__text {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* Open all / Collapse all toggle button */
.pcard-step-overview__toggle-all {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-tertiary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--accent-tertiary-subtle);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.pcard-step-overview__toggle-all:hover {
    background: var(--accent-tertiary-soft);
}

/* Your-turn card shell: the sections are laid out directly (no face wrapper),
   so the identity row, plan and footer carry their own horizontal padding. */
.pcard--your-turn {
    overflow: hidden;
    border-radius: var(--radius-md);
}
.pcard-yt-identity-row {
    align-items: center;
    padding: var(--space-4) var(--space-5) var(--space-3);
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-default);
}
/* Green-tinted avatar with a ring, matching the mockup */
.pcard-yt-avatar {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary-hover);
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}
/* Green finalist ordinal chip */
.pcard-yt-ordinal {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary-hover);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.pcard-yt-footer {
    padding: 0 var(--space-5) var(--space-4);
}
.pcard-yt-marks {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
/* Receipts / records affordance at the foot of the card */
.pcard-yt-receipts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border: none;
    border-top: 1px solid var(--border-default);
    background: transparent;
    cursor: pointer;
}
.pcard-yt-receipts__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.pcard-yt-receipts__caret {
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

/* The step plan and More-dropdown carry their own side padding in this card */
.pcard--your-turn .pcard-step-overview {
    padding: var(--space-4) var(--space-5);
}
.pcard--your-turn .pcard-more {
    padding: 0 var(--space-5) var(--space-4);
}


/* ============================================================
   WITH THE AGENT card (variant='with_agent')
   Purple ring + purple status header
   Added 2026-08-08 (plans-groups-3)
   ============================================================ */

/* Purple ring is already applied by .plans-group--with-agent .proposal-card */

.pcard--with-agent {
    overflow: hidden;
    border-radius: var(--radius-md);
}

/* Purple status header band. Steven 2026-08-13: FULL-BLEED - the band
   cancels the card's --space-4 padding so the purple fills the top with no
   white gutter; .pcard--with-agent's overflow:hidden clips the corners.
   Background = --accent-tertiary-subtle, the Details ball-with-agent wash. */
.pcard-wa-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--accent-tertiary-subtle);
    padding: var(--space-3) var(--space-4);
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
}
.pcard-wa-header__icon {
    font-size: var(--text-base);
    color: var(--accent-tertiary);
    flex-shrink: 0;
    margin-top: 2px;
}
.pcard-wa-header__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pcard-wa-header__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-base);
    line-height: 1.25;
    color: var(--accent-tertiary);
}
.pcard-wa-header__sub {
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Purple-tinted avatar */
.pcard-wa-avatar {
    background: var(--accent-tertiary-subtle);
    color: var(--accent-tertiary);
}

/* Purple finalist ordinal chip */
.pcard-wa-ordinal {
    background: var(--accent-tertiary-subtle);
    color: var(--accent-tertiary);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Body area */
.pcard-wa-body {
    padding: var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Plan title */
.pcard-wa-plan-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    line-height: 1.35;
    color: var(--text-secondary);
}

/* A short excerpt of the agent's pitch_body under the plan title. Serif to
   match .pcard-pitch__body; clamped to two lines so it previews the argument
   without dumping the whole plan. */
.pcard-wa-plan-snippet {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sent timestamp panel */
.pcard-wa-sent-panel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--accent-tertiary-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: inset 0 0 0 1px var(--accent-tertiary-subtle);
}
.pcard-wa-sent-panel__icon {
    font-size: var(--text-base);
    color: var(--accent-tertiary);
    flex-shrink: 0;
    margin-top: 1px;
}
.pcard-wa-sent-panel__text {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-secondary);
}

/* What you answered expander */
.pcard-wa-answered {
    border-radius: var(--radius-md);
    border: 1.5px solid var(--accent-tertiary-subtle);
    overflow: hidden;
}
.pcard-wa-answered__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-tertiary);
    background: var(--accent-tertiary-soft);
}
.pcard-wa-answered__summary::-webkit-details-marker { display: none; }
.pcard-wa-answered__caret {
    font-size: var(--text-sm);
    color: var(--accent-tertiary);
    flex-shrink: 0;
    transition: transform 0.15s;
}
.pcard-wa-answered[open] .pcard-wa-answered__caret {
    transform: rotate(180deg);
}
.pcard-wa-answered__list {
    padding: var(--space-3) var(--space-4) var(--space-3);
    margin: 0;
}
.pcard-wa-answered__empty {
    padding: var(--space-3) var(--space-4);
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.pcard-wa-marks {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ============================================================
   OPEN BIDS card (variant='open_bid')
   Compact white card, no ring
   Added 2026-08-08 (plans-groups-3)
   ============================================================ */

.pcard--open-bid {
    overflow: hidden;
    border-radius: var(--radius-md);
}

/* Neutral avatar */
.pcard-ob-avatar {
    background: var(--surface-secondary);
    color: var(--text-secondary);
}

/* Face / identity row (no border on face for open bids) */
.pcard-ob-face {
    cursor: pointer;
    border: none;
}
.pcard-ob-identity-row {
    border-bottom: 1px solid var(--border-default);
}

/* Pitch area inside face */
.pcard-ob-pitch {
    padding: var(--space-4) var(--space-4) 0;
}
.pcard-ob-pitch__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--text-primary);
}
.pcard-ob-pitch__body {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}
.pcard-ob-pitch__body--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Expanded: the one-ball pitch body unclamps to its full text. The --clamped
   class is baked in at render (Jinja {% if not expanded %}) and never removed
   by JS, so without this the pitch stayed cut off at 5 lines with an ellipsis
   even after the person expanded the card. Mirrors the
   .pcard-collapsed-preview__body unclamp rule. */
.proposal-card[data-expanded="1"] .pcard-ob-pitch__body--clamped {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Centered caret row */
.pcard-ob-caret-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) 0 var(--space-2);
}

/* HELD TO / BUDGET panels in expanded detail */
.pcard-ob-panel {
    margin: var(--space-4) var(--space-4) 0;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.pcard-ob-panel__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.pcard-ob-panel__value {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-primary);
}

/* Finalist button (full-width pill) */
.pcard-ob-finalist-gate {
    margin: var(--space-4) var(--space-4) 0;
}
.pcard-ob-finalist-btn {
    /* Steven 2026-08-13: one row - Fail on the LEFT of the answer button. */
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    align-items: center;
}
.pcard-ob-finalist-btn__pill {
    flex: 1;
    min-width: 0;
    justify-content: center;
}

/* Standalone "Fail & repost" (2026-08-11): the in-panel reject collapses to
   zero size while the questions panel is hidden, so an always-visible copy
   lives in the gate's pick-action row. Quiet danger link, tokens only. */
.finalist-gate__reject--standalone {
    align-self: center;
    /* Steven 2026-08-13: the Fail button always wears its red pill, not
       hover-only. */
    background: var(--color-red-50);
    color: var(--color-red-600);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s;
}
.finalist-gate__reject--standalone:hover {
    background: var(--color-red-100);
}
.finalist-gate__reject--standalone:focus-visible {
    outline: 2px solid var(--color-red-500);
    outline-offset: 2px;
}
/* Steven 2026-08-13: Fail leads the row on the left - no auto-push. */

/* Completed-want celebration emoji (Steven 2026-08-09): sits in the icon slot. */
.want-celebrate-emoji{font-size:1.1em;line-height:1;display:inline-flex;align-items:center;justify-content:center;}

/* ── Four-button proposal card footer (Steven 2026-08-11) ────────────────── */
/* The pcard-yt-footer--four modifier stacks the four action buttons in a
   2×2 grid on mobile and a single row on wider viewports. Uses only existing
   design tokens (tp-btn classes live in target-path.css). */
.pcard-yt-footer--four {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-4);
}
@media (min-width: 600px) {
    .pcard-yt-footer--four {
        grid-template-columns: repeat(4, auto);
        justify-content: stretch;
    }
    .pcard-yt-footer--four .pcard-action-btn {
        flex: 1 1 auto;
    }
}
/* Tip button: a ghost with a subtle highlight to signal it's a positive action. */
.tp-btn--tip {
    color: var(--color-green-600);
    border-color: var(--color-green-400);
}
.tp-btn--tip:hover {
    background: var(--color-green-50);
}

/* ── Tip composer panel (in step approve_control) ────────────────────────── */
/* Reuses .tp-woy-rchange token styles from target-path.css for layout;
   adds only the minimal wrappers needed for the tip-specific elements. */
.tp-woy-tip {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}
.tp-woy-tip__note {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.tp-woy-tip__amount {
    width: 100%;
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
}
.tp-woy-tip__fee {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-woy-tip__error {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--status-error);
}


/* == The tip popup (Steven 2026-08-13 mock): shared by Accept-and-tip on the
   proposal card and Send-a-tip on the Details pinbar. Tokens only. == */
.bohtip-modal { padding: 0; overflow: hidden; }
.bohtip-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}
.bohtip-modal__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bohtip-modal__title {
    margin: var(--space-1) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text-primary);
}
.bohtip-modal__body { padding: var(--space-4) var(--space-5); }
.bohtip-modal__amountrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.bohtip-modal__amountlabel {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-base);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}
.bohtip-modal__min {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bohtip-modal__amountctl { display: flex; gap: var(--space-2); align-items: center; }
.bohtip-modal__select {
    appearance: auto;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
}
.bohtip-modal__custom {
    width: 90px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
}
.bohtip-modal__feecard {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
}
.bohtip-modal__feerow {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.bohtip-modal__feemath { font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.bohtip-modal__feerow--total {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-default);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-base);
    color: var(--text-primary);
}
.bohtip-modal__reasonlabel {
    display: block;
    margin: var(--space-4) 0 var(--space-2);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.bohtip-modal__reason {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    resize: vertical;
}
.bohtip-modal__chip {
    display: inline-block;
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* Stripe Payment Element (card fields) inside the tip popup. The element
   themes its own inputs; we only frame it to match the reason box. */
.bohtip-modal__cardwrap {
    margin-top: var(--space-4);
}
.bohtip-modal__card {
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}
.bohtip-modal__attline {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.bohtip-modal__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-default);
    background: var(--surface-primary);
}
.bohtip-modal__totalblock { display: flex; flex-direction: column; margin-right: auto; }
.bohtip-modal__totallabel {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bohtip-modal__totalval {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--text-primary);
}
.bohtip-modal__cancel {
    border: none;
    background: none;
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    color: var(--text-secondary);
    cursor: pointer;
}
.bohtip-modal__go {
    /* Same type as every other button in the sheet (Steven 2026-08-13). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: var(--color-gray-900);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    cursor: pointer;
}
.bohtip-modal__go:disabled { opacity: .6; cursor: default; }
.bohtip-modal__err { margin-top: var(--space-2); }


/* == Public-answers opt-out checkbox in the finalist panel (2026-08-13) == */
.finalist-panel__public {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-1) 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}


/* == Delivered section on the want card (Steven 2026-08-14) == */
.want-delivered { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--status-success); border-radius: var(--radius-lg); background: var(--surface-primary); }
.want-delivered__stamp { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; color: var(--status-success); }
.want-delivered__text { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-primary); }
.want-delivered__stars { margin-top: var(--space-2); display: flex; gap: 2px; }
.want-delivered__star { color: var(--border-default); }
.want-delivered__star.is-on { color: var(--color-yellow-400); }

.timed-delivery-controls {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}
.target-anchor > .timed-delivery-controls {
    grid-column: 1 / -1;
    margin-top: 0;
    padding-top: var(--space-4);
}
.target-anchor > .timed-delivery-controls .timed-delivery-controls__timing {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}
.timed-delivery-controls__summary {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.timed-delivery-controls__state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--status-success);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
}
.timed-delivery-controls__state-dot {
    width: var(--space-2);
    height: var(--space-2);
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: currentColor;
}
.timed-delivery-controls--paused .timed-delivery-controls__state { color: var(--text-primary); }
.timed-delivery-controls--paused .timed-delivery-controls__state-dot { background: var(--color-yellow-500); }
.timed-delivery-controls--stopped .timed-delivery-controls__state { color: var(--text-muted); }
.timed-delivery-controls__timing {
    color: var(--text-primary);
    font-size: var(--text-sm);
}
.timed-delivery-controls__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-1);
}
.timed-delivery-controls__actions form { margin: 0; }
.timed-delivery-controls__button {
    display: inline-grid;
    width: var(--size-10);
    height: var(--size-10);
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--text-primary);
    cursor: pointer;
}
.timed-delivery-controls__button:hover {
    border-color: var(--text-primary);
    background: var(--surface-secondary);
}
.timed-delivery-controls__button:disabled {
    cursor: wait;
    opacity: 0.55;
}
.timed-delivery-controls__button--danger { color: var(--status-error); }
.timed-delivery-controls__button iconify-icon { font-size: var(--text-lg); }
.timed-delivery-controls > form { margin: 0; }
.timed-delivery-controls__repeat,
.timed-plan-delivery__repeat {
    display: inline-flex;
    min-height: var(--size-10);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-dark-900);
    border-radius: var(--radius-full);
    background: var(--color-dark-900);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    white-space: nowrap;
    cursor: pointer;
}
.timed-delivery-controls__repeat:hover,
.timed-plan-delivery__repeat:hover { background: var(--color-gray-800); }
.timed-delivery-controls__repeat:disabled,
.timed-plan-delivery__repeat:disabled { cursor: wait; opacity: 0.55; }
.timed-delivery-controls__repeat iconify-icon,
.timed-plan-delivery__repeat iconify-icon { font-size: var(--text-lg); }

/* Plans page resolved target: status, cadence and remaining delivery in one band. */
.timed-plan-delivery {
    width: calc(100% + var(--space-8) * 2);
    margin: 0 calc(var(--space-8) * -1) calc(var(--space-5) * -1);
    padding: var(--space-4) var(--space-8) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--feed-card-radius) var(--feed-card-radius);
    background: var(--surface-primary);
}
.timed-plan-delivery__status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.timed-plan-delivery__success,
.timed-plan-delivery__state {
    display: inline-flex;
    min-height: var(--size-10);
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
}
.timed-plan-delivery__success {
    background: var(--color-yellow-400);
    color: var(--text-primary);
}
.timed-plan-delivery__success iconify-icon {
    font-size: var(--text-lg);
    animation: timed-plan-target-spin 2s linear infinite;
}
.timed-plan-delivery__state {
    background: var(--surface-secondary);
    color: var(--text-primary);
}
.timed-plan-delivery__state .timed-delivery-controls__state-dot {
    background: var(--status-success);
}
.timed-delivery-controls--paused .timed-plan-delivery__state .timed-delivery-controls__state-dot,
.timed-delivery-controls--stopped .timed-plan-delivery__state .timed-delivery-controls__state-dot {
    background: var(--text-muted);
}
.timed-plan-delivery__cadence {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    text-transform: uppercase;
}
.timed-plan-delivery__progress-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-5);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}
.timed-plan-delivery__progress {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}
.timed-plan-delivery__progress progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--border-default);
    color: var(--color-yellow-400);
    appearance: none;
}
.timed-plan-delivery__progress progress::-webkit-progress-bar {
    border-radius: var(--radius-full);
    background: var(--border-default);
}
.timed-plan-delivery__progress progress::-webkit-progress-value {
    border-radius: var(--radius-full);
    background: var(--color-yellow-400);
}
.timed-plan-delivery__progress progress::-moz-progress-bar {
    border-radius: var(--radius-full);
    background: var(--color-yellow-400);
}
.timed-plan-delivery .timed-delivery-controls__actions { gap: var(--space-2); }
.timed-plan-delivery__progress-row > form { margin: 0; }
.timed-plan-delivery__repeat { min-height: var(--size-12); padding: 0 var(--space-5); }
.timed-plan-delivery .timed-delivery-controls__button {
    width: var(--size-12);
    height: var(--size-12);
}
@keyframes timed-plan-target-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .timed-plan-delivery__success iconify-icon { animation: none; }
}
@media (max-width: 600px) {
    .timed-plan-delivery {
        width: calc(100% + var(--space-5) * 2);
        margin: 0 calc(var(--space-5) * -1) calc(var(--space-4) * -1);
        padding: var(--space-4) var(--space-5);
    }
    .timed-plan-delivery__progress-row { align-items: center; }
    .timed-plan-delivery__progress-row { flex-wrap: wrap; }
    .timed-plan-delivery__progress-row > form,
    .timed-plan-delivery__repeat { width: 100%; }
    .timed-plan-delivery__success,
    .timed-plan-delivery__state { padding: 0 var(--space-3); }
}


/* == SuckScore + Top Tollers (Steven 2026-08-14) == */
.suckscore { margin: 0 0 var(--space-4); background: var(--color-dark-900); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.suckscore__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.suckscore__label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-cyan-400); }
.suckscore__live { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.1em; color: var(--status-success); }
.suckscore__live-dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--status-success); }
.suckscore__body { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; }
.suckscore__value { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: 800; line-height: 1; color: var(--color-white); }
.suckscore__pct { margin-left: 2px; font-size: var(--text-2xl); font-weight: 800; color: rgba(255, 255, 255, 0.45); }
.suckscore__wait { font-family: var(--font-serif); font-style: italic; font-size: var(--text-xl); color: rgba(255, 255, 255, 0.55); }
.suckscore__sub { margin: 0; padding: var(--space-2) var(--space-5) var(--space-4); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); }
.suckscore__sub strong { color: var(--status-success); }
.tollers { margin: var(--space-4) 0 0; padding: var(--space-4) var(--space-5); background: var(--surface-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tollers__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; }
.tollers__sub { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.tollers__row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.tollers__mark { flex: 0 0 auto; display: grid; place-items: center; width: var(--size-8); height: var(--size-8); border-radius: var(--radius-full); background: var(--color-yellow-400); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); }
.tollers__name { flex: 0 0 auto; min-width: 90px; font-size: var(--text-sm); font-weight: var(--font-semibold); }
.tollers__barwrap { flex: 1 1 auto; height: var(--size-4); border-radius: var(--radius-full); background: var(--surface-secondary); overflow: hidden; }
.tollers__bar { display: block; height: 100%; border-radius: var(--radius-full); background: var(--highlight-purple); }
.tollers__wins { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-bold); }

/* TIMED DELIVERY r190: notification toggles below schedule controls. */
.target-trajectory__delivering-notifications {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
}
.target-trajectory__delivering-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 2px 10px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface-sunken, #f0ede8);
  color: var(--color-text-secondary, #6b6b6b);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
}
.target-trajectory__delivering-toggle {
  display: inline;
}

@media (max-width: 520px) {
  .timed-delivery-controls { align-items: flex-end; }
  .timed-delivery-controls__summary { display: grid; gap: var(--space-1); }
}