/* ============================================================
   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));
    width: 100%;
    min-height: var(--size-12);
    margin-bottom: 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);
}

.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 {
    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);
}
.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; }

/* ============================================================
   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);
}
.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, baseline-aligned. Shared by the big card and the list card.
   Steven 2026-08-09: Toll Bench branding -- the bullseye now sits inside a
   YELLOW circle (--highlight-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);
    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(--highlight-yellow);
    color: var(--color-black);
    font-size: 0.72em;
    vertical-align: -0.25em;
}
.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 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}
.target-trajectory__move-arrow {
    display: flex;
    align-items: center;
    font-size: var(--text-base);
}
.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); }
.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(--border-strong);
    border-top-style: dotted;
}
/* 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-default);
    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(--border-strong);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 0.001 12;
}
.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;
}

.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 */
.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); }

/* 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-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; }

/* 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;
}
.want-plan-stack .target-trajectory {
    border-bottom: 0;
    border-radius: var(--feed-card-radius) var(--feed-card-radius) 0 0;
    box-shadow: none;
}
.want-plan-stack .want-path-embed {
    margin: 0 0 var(--space-5);
}
.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; }
.proposal-card--failed { border-color: var(--border-default); 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);
}
/* 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 {
    display: flex;
    align-items: center;
    gap: 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 {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: none;
    min-height: var(--size-12);
    align-items: center;
    justify-content: center;
    padding: 0 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-base);
    font-weight: var(--font-semibold);
    text-decoration: none;
    white-space: nowrap;
}
.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);
}

/* ── 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;
}
.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-base);
        margin-left: 0;
    }
    .target-trajectory__move-arrow {
        font-size: var(--text-sm);
    }

    /* Fix #3: banner vertical stack -- text first, CTA below, bell gone */
    .want-proposal-arrival {
        flex-direction: column;
        align-items: stretch;
        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;
    top: var(--size-12); /* sits below the 48px toll-tabs strip */
    z-index: var(--z-sticky);
    background: var(--surface-primary);
}
.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 {
    box-shadow: inset 0 0 0 2px var(--accent-tertiary-subtle), 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);
    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 */
.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);
}
.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);
}

/* 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;
}

/* 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 {
    display: flex;
}
.pcard-ob-finalist-btn__pill {
    width: 100%;
    justify-content: center;
}

/* 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;}