@import url("../components/probability-card.css?v=20260923-numeric-56-responsive-1");
@import url("../components/agent-identity.css?v=20260908-identity-2");

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

/* Grey paper behind the Targets / Plans / Detail pages (Steven 2026-08-25).
   These are drawer pages (body.want-detail-body); the drawer surface is
   white (--drawer-surface = --surface-primary) for Shop/Messages/Backpack, so
   we override the surface ONLY on this body class — the cards on the page stay
   white and read as floating on grey, exactly like /feed and /wants. Scoped by
   body.want-detail-body so no other drawer page is touched. */
body.want-detail-body .drawer-panel,
body.want-detail-body .drawer-panel--right,
body.want-detail-body .drawer-container,
body.want-detail-body .main-area,
body.wants-page-body .drawer-panel,
body.wants-page-body .drawer-panel--right,
body.wants-page-body .drawer-container,
body.wants-page-body .main-area {
    background: var(--surface-app);
}

/* SPA path: Targets/Plans/Detail also open inside the shared slide-in
   .fullscreen-panel (body.fullscreen-panel-body-lock), whose default surface is
   WHITE (--surface-primary) for Shop/Messages/Backpack. On PROD the grey rule
   above never reached it, so a want opened as an overlay showed a white panel
   instead of grey paper (Steven 2026-08-25). Grey the panel + its scroll body
   ONLY when it is hosting a wants surface (.want-detail = Detail/Step Detail,
   .wants-page = Targets/Plans), so no other drawer page is touched. The cards
   inside keep their own white background and read as floating on grey. */
.fullscreen-panel:has(.want-detail),
.fullscreen-panel:has(.wants-page),
.fullscreen-panel__body:has(.want-detail),
.fullscreen-panel__body:has(.wants-page) {
    background: var(--surface-app);
}

.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));
    /* Earlier levels extend underneath the selected pill as connected layers. */
    width: auto;
    min-height: var(--size-12);
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
    gap: 0;
    /* Keep the pills touching the card below on every view. */
    padding: var(--space-3) var(--space-4) 0;
    border: 0;
}
.toll-tab {
    position: relative;
    isolation: isolate;
    z-index: 0;
    display: inline-flex;
    min-width: 0;
    min-height: var(--size-10);
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface-tertiary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    text-decoration: none;
}
/* Each ancestor's background reaches behind the rounded left edge of the
   next pill. Pointer events stay on the original, equal-width controls. */
.toll-tab:has(~ .toll-tab--active)::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--size-10)) 0 0;
    z-index: -1;
    border-radius: var(--radius-full);
    background: var(--surface-tertiary);
    pointer-events: none;
}
.toll-tab:nth-child(2):has(~ .toll-tab--active) {
    z-index: 1;
    background: var(--border-strong);
}
.toll-tab:nth-child(2):has(~ .toll-tab--active)::before {
    background: var(--border-strong);
}
.toll-tab--active {
    z-index: 2;
    background: var(--slate);
    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 {
    background: transparent;
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 1;
}
.toll-tab iconify-icon {
    display: none;
}

.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-overlay);
    overflow: hidden;
}
.wants-filter__menu[hidden] { display: none; }
.wants-filter__opt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid var(--border-soft);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}
.wants-filter__opt:first-child { border-top: none; }
.wants-filter__opt:hover { background: var(--surface-secondary); }
.wants-filter__opt .wants-filter__check {
    width: 1.1em;
    color: var(--color-green-600);
    flex-shrink: 0;
}
.wants-filter__opt .wants-filter__count { margin-left: auto; color: var(--text-muted); font-size: var(--text-sm); }

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

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

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

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

/* 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-neon);
    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-neon);
    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 {
    background: var(--surface-secondary);
    color: var(--text-secondary);
}
/* Two actions instead of one: View left, Repost right. They sit exactly where
   the single pill sat, on the right of the footer, so flex: none keeps them
   from stretching across the row. Repost wears the black/white emphasis the
   trajectory card gives it; View stays the quiet grey it already was, so the
   pair carries one emphasis, not two. Repost is the way FORWARD, so it must
   not wear danger red. */
.target-anchor__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
}
.target-anchor__repost-form {
    position: relative;
    z-index: 1;
    display: inline-flex;
    margin: 0;
}
.target-anchor__action--repost {
    border: 0;
    background: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
}

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

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

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

.target-trajectory {
    display: grid;
    gap: var(--space-4);
    padding: var(--feed-card-padding);
    border: var(--feed-card-border);
    border-radius: var(--feed-card-radius);
    background: var(--feed-card-bg);
    box-shadow: var(--tb-card-shadow);
    /* Steven 2026-08-09: nothing inside the card may bleed past its right edge
       on a narrow phone. min-width:0 lets the grid track shrink below the
       chart's intrinsic width; overflow-x:clip cuts any horizontal spill
       (a wide label halo, the scaled SVG) without clipping the odds labels
       that lift vertically clear of the dots. */
    min-width: 0;
    overflow-x: clip;
}
.target-trajectory__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-style: italic;
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}
/* Target glyph before the want text (Steven 2026-08-03): inline at text
   start. Shared by the big detail card (.target-trajectory__title) and the
   list/feed card (.target-anchor__title).
   Steven 2026-08-09: Toll Bench branding -- the bullseye now sits inside a
   YELLOW circle (--color-yellow-400, the Toll Bench yellow) with a dark glyph so it is instantly
   identifiable everywhere a want appears. Only the iconify glyph gets the
   circle; the completed-want celebration emoji (.want-celebrate-emoji span)
   is deliberately left uncircled. */
.target-trajectory__title-icon,
.target-anchor__title-icon {
    margin-right: var(--space-2);
    /* Applies to the completed-want celebration emoji span; the iconify disc
       overrides vertical-align below to its own optical-center value. */
    vertical-align: -0.1em;
    color: inherit;
}
iconify-icon.target-trajectory__title-icon,
iconify-icon.target-anchor__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: var(--radius-full);
    background: var(--color-yellow-400);
    color: var(--color-black);
    font-size: 0.72em;
    /* Steven 2026-08-11: center the disc on the FIRST title line's optical
       center (both cards render the disc inline before the text now). Measured
       live on staging against the serif-italic title at leading-tight: the
       disc's geometric middle lands on the line-box center at ~0.10em; nudged
       to 0.14em so the disc sits a hair higher, on the OPTICAL center of the
       cap-to-baseline text mass rather than the leading-padded line box. em so
       it scales with every title size (2xl detail / xl+ list). Holds on wrap:
       an inline disc rides line 1 regardless of how many lines follow. */
    vertical-align: 0.14em;
    flex-shrink: 0;
}
.target-trajectory__probability {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.target-trajectory__probability strong {
    display: inline-flex;
    min-height: var(--size-10);
    align-items: center;
    padding: 0 var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--accent-neon);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
}
/* Steven 2026-08-03: this caption rule used to be a bare
   `.target-trajectory__probability span`, which also matched the move spans
   and out-specified every `.target-trajectory__move*` rule below, so the
   move printed serif-italic-slate on some surfaces. Scoped by class, the
   move keeps its own face at every viewport. */
.target-trajectory__caption {
    color: var(--slate);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-style: italic;
    font-weight: var(--font-medium);
}
.target-trajectory__move {
    /* Steven 2026-08-10: inline after caption text — not pinned right.
       Sits on the same line as "Probability of success", small and tight. */
    display: inline-flex;
    align-items: center;
    gap: 0.1em;
    margin-left: 0.35em;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}
.target-trajectory__move-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 1em;
}
/* Steven 2026-09-17: the up box wears the BRAND green -- the same
   --accent-primary the Take action band (.ob-strip) and the card Approve
   button wear -- not the muted --status-success it shipped with. */
.target-trajectory__move--up { background: var(--accent-primary); color: var(--color-black); }
.target-trajectory__move--down { background: var(--status-error); color: var(--color-white); }
/* Steven 2026-09-17: the move is a box. Up = green box, black text; down =
   red box, white text; no move = black box, white text, no arrow. Still
   never disappears once a probability exists. */
.target-trajectory__move--flat { background: var(--color-black); color: var(--color-white); }
.target-trajectory__move--flat .target-trajectory__move-arrow { display: none; }
/* Item 2 rule 3: the move number carries a visible unit word ("pts" for
   percentage points, "odds" for a 1-in-N denominator change) so no bare
   mystery number ever trails the odds. */
.target-trajectory__move-unit {
    margin-left: 0.15em;
    font-size: var(--text-xs);
    font-weight: 600;
}
.target-chart {
    min-width: 0;
    /* Horizontal clamp only: the scaled SVG can never push past the card,
       but vertically-lifted odds labels still paint (overflow:visible on the
       svg below). */
    overflow-x: clip;
    /* Steven 2026-07-28: tighten the gap between the odds pill and the chart.
       The grid gap above already separates them; the chart's own top padding
       was doubling it. */
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--border-default);
}
/* The agent cap supplies the single divider beneath this chart. */
.target-trajectory:has(.target-trajectory__agent-cap) .target-chart {
    border-bottom: 0;
}
.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-neon);
}
.target-chart__key-line--target {
    border-color: var(--text-muted);
    border-top-style: dotted;
    border-top-width: 4px;
}
/* Difficulty band chip in the chart key (Steven 2026-08-09): one word for how
   hard the want was at the outset. Escalating tint: Easy green, Hard blue,
   Moonshot red -- all existing status tokens, no new colors. */
.target-chart__band {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.target-chart__band--easy {
    background: var(--status-success-subtle);
    color: var(--status-success);
}
.target-chart__band--hard {
    background: var(--status-warning-subtle);
    color: var(--status-warning);
}
.target-chart__band--moonshot {
    background: var(--status-error-subtle);
    color: var(--status-error);
}
.target-chart__svg {
    display: block;
    width: 100%;
    aspect-ratio: 64 / 21;
    min-height: 160px;
    overflow: visible;
}
.target-chart__grid {
    stroke: var(--border-strong);
    stroke-width: 1;
}
.target-chart__actual-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--accent-neon);
    stroke-width: 5;
}
/* The path to the outcome target. Round dots need BOTH the near-zero dash and
   the round linecap; either one alone draws dashes. */
.target-chart__target-path {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 0.001 10;
}
.target-chart__actual-point {
    fill: var(--accent-neon);
    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-neon);
    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-neon wash. */
.target-trajectory--failed .target-trajectory__probability strong {
    background: var(--status-error);
    color: var(--color-white);
}


.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 {
    background: var(--surface-secondary);
    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-neon);
    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;
    /* Circular, image-capable tile (2026-08-26): the same shape as the
       proposal-card company logo, so every agent mark reads as one format. */
    border-radius: var(--radius-full);
    background: var(--surface-app);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}
.target-trajectory__agent-glyph-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.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);
}
/* The intelligence (LLM) driving the agent, named beside its name
   (Steven 2026-08-28). Subtle line under the name; the muted "declared"
   claim mirrors the board's tb-claim treatment. Tokens only. */
.target-trajectory__agent-model {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-snug);
}
.target-trajectory__agent-model-claim {
    margin-left: var(--space-1);
    color: var(--text-muted);
    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-handle {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.target-trajectory__agent-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--status-success-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}
.target-trajectory__agent-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--status-success);
    flex-shrink: 0;
}
/* ── percent-complete ring ── */
.target-trajectory__agent-ring-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}
/* inner div scopes the label's absolute positioning to the 60×60 ring only,
   so top:50% references the ring height, not the taller flex column */
.target-trajectory__ring-inner {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.target-trajectory__agent-ring {
    display: block;
    width: 60px;
    height: 60px;
}
.target-trajectory__ring-track {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 4;
}
.target-trajectory__ring-fill {
    fill: none;
    stroke: var(--status-success);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease;
}
.target-trajectory__ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 1px;
    pointer-events: none;
}
.target-trajectory__ring-unit {
    font-size: 0.6em;
    line-height: 1;
    color: var(--text-secondary);
}
.target-trajectory__ring-chip-wrap {
    display: flex;
    justify-content: center;
}
.target-trajectory__ring-chip {
    font-size: 0.65rem;
    padding: 2px var(--space-2);
    gap: 3px;
    white-space: nowrap;
}
.target-trajectory__ring-chip iconify-icon {
    font-size: 10px;
}

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

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

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

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

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

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

/* ---- Proposal card (macro; gallery-only until Phase B) ---- */
.proposal-card {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.proposal-card__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.proposal-card__avatar {
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    display: grid; place-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
    overflow: hidden;
}
.proposal-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.proposal-card__id { min-width: 0; flex: 1; }
.proposal-card__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
    text-decoration: none;
}
a.proposal-card__name:hover,
.proposal-card__name--button:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}
.proposal-card__name--button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.proposal-card__agent {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-2);
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    vertical-align: middle;
}
.proposal-card__meta { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.proposal-card__tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: var(--space-3) 0;
    line-height: 1.4;
}
.proposal-steps__label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: var(--space-3) 0 var(--space-2);
}
.proposal-steps { list-style: none; margin: 0; padding: 0; counter-reset: pstep; }
.proposal-step {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-soft);
}
.proposal-step:first-child { border-top: none; }
.proposal-step__row { display: flex; align-items: baseline; gap: var(--space-2); }
.proposal-step__num {
    counter-increment: pstep;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
    width: 1.2em;
}
.proposal-step__num::before { content: counter(pstep); }
.proposal-step__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}
.proposal-step__dur { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.proposal-step__approve {
    display: inline-flex;
    align-items: center;
    background: var(--color-green-100);
    color: var(--color-green-600);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    margin: var(--space-1) 0 0 calc(1.2em + var(--space-2));
}
.proposal-step__note {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 2px 0 0 calc(1.2em + var(--space-2));
    line-height: 1.4;
}
/* THE CHAIN before signing (2026-09-10): the person's links, all pending. */
.proposal-step__actions { margin: var(--space-2) 0 0; padding-left: var(--space-5); list-style: none; font-size: var(--text-sm); color: var(--text-secondary); }
.proposal-step__actions li { position: relative; }
.proposal-step__actions li::before { content: '\25CB'; position: absolute; left: calc(-1 * var(--space-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);
    }
    /* Match the tabs' edge extension to the mobile page padding. */
    .wants-page > .toll-tabs,
    .want-detail > .toll-tabs {
        margin-left: calc(-1 * var(--space-3));
        margin-right: calc(-1 * var(--space-3));
    }
    .wants-section-head {
        align-items: center;
    }
    .wants-section-head__meta {
        display: none;
    }
    .wants-filter {
        width: min(168px, 58%);
    }

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

/* Non-docked odds card: the form owns the card surface and the odds panel
   joins the flow inside it, so the card is exactly as tall as its content
   and --start-card-height stops mattering here. */
.wants-compose__flow.start-home--future .start-hero__entry:not(.start-hero__entry--docked) .start-hero__form {
    width: 100%;
    padding: var(--space-3) var(--space-6) var(--space-4);
    background: var(--feed-card-bg);
    border: var(--feed-card-border);
    border-radius: var(--feed-card-radius);
    box-shadow: var(--feed-card-shadow);
}
.wants-compose__flow.start-home--future .start-hero__entry:not(.start-hero__entry--docked) .start-card__odds {
    position: static;
    justify-self: stretch;
    margin-top: var(--space-2);
}

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

/* The docked compact card keeps its straddle pills in the composer —
   standalone hides them there, but Steven wants the card to read as a
   card everywhere in the embed. */
.wants-compose__flow .start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__pills { display: flex; }
/* And the TARGET pill shifts left so the overlapping close X never sits
   on top of it. */
/* Both expanded and initial cards have their border at the entry top. */
.wants-compose__flow .start-hero__entry .start-card__pills {
    top: calc((var(--size-6) + var(--space-1)) / -2);
    left: var(--space-6);
    right: calc(var(--space-6) + var(--size-9, 36px));
}
/* The form/face already supplies the shared content inset. */
.wants-compose__flow .start-card__want { padding-inline: 0; }

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

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

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


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

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

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

.proposal-card__head--owner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(112px, auto) minmax(104px, auto) auto;
    align-items: center;
    gap: var(--space-3);
}
.proposal-card__head--owner .proposal-card__avatar {
    width: var(--size-12);
    height: var(--size-12);
    border: 2px solid var(--color-green-500);
    background: var(--color-green-50);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}
.proposal-card__specimen {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-blue-500);
    border-radius: var(--radius-sm);
    color: var(--color-blue-600);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    padding: var(--space-1) var(--space-2);
    text-transform: uppercase;
}
.proposal-card__operator { color: var(--text-muted); }
/* r44/r50 disclosures -- AI notice and money sentence on the proposal face */
.proposal-card__disclosure {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    border-top: 1px solid var(--border-soft);
}
.proposal-card__disclosure--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.pcard-fail-inline {
    flex-shrink: 0;
    padding: 2px var(--space-3);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    color: var(--color-danger, #c0392b);
    background: none;
    border: 1px solid var(--color-danger, #c0392b);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
}
.pcard-fail-inline:hover {
    background: var(--color-danger, #c0392b);
    color: #fff;
}
.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; }
/* Card at signing (2026-09-24): the Stripe Payment Element that funds a paid
   deal mounts here. Stripe themes its own inputs; this only frames them. */
.want-accept__card { margin: 0 0 var(--space-4); }
.want-accept__cardlabel {
    display: block; margin-bottom: var(--space-2);
    font-size: var(--text-xs); font-weight: var(--font-bold);
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.want-accept__cardmount {
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
}

/* ---- 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) ==================
   Naming opens the agent's four questions in a focused modal. The overlay is
   deliberately opaque: the card behind it is not part of this decision.
   ======================================================================== */
.finalist-gate {
    margin-top: 0;
}

body.finalist-modal-open {
    overflow: hidden;
}

.finalist-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-fullscreen);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--surface-app);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.finalist-modal[hidden] {
    display: none;
}
.finalist-modal__dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--feed-card-max-width);
    max-height: calc(100dvh - var(--space-8));
    min-height: 0;
    overflow: hidden;
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
}
.finalist-modal__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    background: var(--surface-primary);
    border-bottom: 1px solid var(--border-subtle);
}
.finalist-modal__eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.finalist-modal__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--text-primary);
}
.finalist-modal .finalist-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: var(--space-5);
    overflow-y: auto;
    background: var(--surface-primary);
    border: 0;
    border-radius: 0;
}
.finalist-modal .finalist-gate__actions {
    position: sticky;
    bottom: 0;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    background: var(--surface-primary);
    border-top: 1px solid var(--border-subtle);
}
.finalist-gate__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    background: var(--surface-secondary);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}
.finalist-gate__cancel:hover {
    background: var(--border-soft);
}

@media (max-width: 640px) {
    .finalist-modal {
        align-items: stretch;
        padding: 0;
    }
    .finalist-modal__dialog {
        max-width: none;
        max-height: none;
        min-height: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

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

/* ---- The person taps, they do not type (contract 2.37) ----
   A finalist question is a HAR block now, so the modal draws the control the
   block names: radios for a choice, two buttons for a yes/no, named fields for
   a form. Same token set as the step renderer; no new tokens, no new colours. */
.finalist-question__help {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.45;
}
.finalist-q-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.finalist-q-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.finalist-q-choice:hover {
    border-color: var(--border-strong);
}
.finalist-q-choice input {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.finalist-q-choice__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.finalist-q-choice__name {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.4;
}
.finalist-q-choice__detail {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}
.finalist-q-other {
    margin-top: var(--space-2);
}
.finalist-q-select {
    appearance: auto;
}
.finalist-q-yesno {
    display: flex;
    gap: var(--space-2);
}
.finalist-q-yesno__btn {
    flex: 1 1 0;
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
}
.finalist-q-yesno__btn:hover {
    border-color: var(--border-strong);
}
.finalist-q-yesno__btn[aria-pressed="true"] {
    background: var(--color-green-100);
    border-color: var(--color-green-400);
    color: var(--color-green-600);
}
.finalist-q-number {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.finalist-q-number__input {
    flex: 1 1 auto;
    min-width: 0;
}
.finalist-q-number__unit {
    flex-shrink: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.finalist-q-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.finalist-q-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.finalist-q-form__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.4;
}
.finalist-q-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.finalist-q-rank__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}
.finalist-q-rank__place {
    flex-shrink: 0;
    width: 64px;
    padding: var(--space-1) var(--space-2);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.finalist-q-rank__label {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.4;
    min-width: 0;
}

/* ---- 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;
}
/* One agent-name treatment across open, refined, accepted, and closed cards. */
.pcard-identity-row__name,
.pcard-ob-byline__name {
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}
.pcard-identity-row__name { text-decoration: none; }
.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); }
/* Price in the toll meta line: "Free" wears the subtle yellow highlighter. */
.pcard-toll__free {
    background: var(--color-yellow-100);
    color: var(--text-primary);
    font-weight: 700;
    padding: 1px var(--space-1);
    border-radius: var(--radius-xs);
}
.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: color-mix(in srgb, var(--accent-neon) 12%, transparent);
    border-color: var(--accent-neon);
}
.pcard-pick-action__btn:focus-visible {
    outline: 2px solid var(--accent-neon);
    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-neon);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.pcard-more__caret {
    flex-shrink: 0;
    transition: transform 0.2s;
}
details.pcard-more[open] .pcard-more__caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pcard-more__caret { transition: none; } }
.pcard-more__section { margin-top: var(--space-3); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Urgency modifier rules — must come AFTER the base block (equal specificity,
   source order wins). attention = person's move (green); calm = agent's move (gray). */
.want-proposal-arrival--attention {
    background: var(--accent-neon);
}
.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;
}
.pcard-odds-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
    font-family: var(--font-body);
}
.pcard-odds-path__label {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 700;
}
.pcard-odds-path__point {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
}
.pcard-odds-path__point strong {
    color: var(--text-primary);
    font-size: var(--text-sm);
}
.pcard-odds-path__point small {
    color: var(--text-muted);
    font-size: var(--text-xs);
}
.pcard-odds-path__point--up small { color: var(--status-success); }
.pcard-odds-path__point--down small { color: var(--status-error); }
.pcard-odds-path__arrow {
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.pcard-odds-path__note {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    margin: 0;
}
/* 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);
}
/* r97 withdrawal notice on the history card: the reason the agent gave
   travels with the sunk attempt (owner-only; attached in the route). */
.want-prior-attempt__notice {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
}
.want-prior-attempt__notice-msg {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.want-prior-attempt__notice-msg + .want-prior-attempt__notice-msg {
    margin-top: var(--space-2);
}
.want-prior-attempt__steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.want-prior-attempt__step {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-top: 1px solid var(--color-border-subtle, var(--color-gray-100));
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.want-prior-attempt__step:first-child { border-top: none; }
.want-prior-attempt__glyph {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: var(--text-base);
    line-height: 1;
}
.want-prior-attempt__step--completed .want-prior-attempt__glyph { color: var(--status-success); }
.want-prior-attempt__step--in_progress_at_failure .want-prior-attempt__glyph { color: var(--status-error); }
.want-prior-attempt__step--not_reached .want-prior-attempt__glyph { color: var(--text-muted); }
.want-prior-attempt__ring {
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: inline-block;
}
.want-prior-attempt__step-title {
    flex: 1;
    min-width: 0;
    color: var(--text-secondary);
    line-height: 1.4;
}
.want-prior-attempt__step--completed .want-prior-attempt__step-title { color: var(--text-primary); }
.want-prior-attempt__step--in_progress_at_failure .want-prior-attempt__step-title { color: var(--text-primary); }
.want-prior-attempt__step--not_reached .want-prior-attempt__step-title { color: var(--text-muted); }
.want-prior-attempt__failed-here {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--status-error);
    font-weight: 600;
}

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

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

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

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

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

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

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

    /* Fix #4 (2026-08-08): Compact pcard padding at narrow widths — reduces
       total horizontal gutter stack (page-padding + card-padding) from 48px
       to 32px so proposal card content has room at 390px. */
    .want-detail,
    .maker-profile {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
    .want-detail > .toll-tabs {
        margin-left: calc(-1 * var(--space-2));
        margin-right: calc(-1 * 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-neon);
    border-color: var(--accent-neon);
}
.want-finalists-slots__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    text-transform: uppercase;
}

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

/* --- Filter chips --- */
.plans-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-default);
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}
.plans-filter-chip:hover {
    border-color: var(--color-gray-400);
    color: var(--text-primary);
}
.plans-filter-chip--active {
    border-color: var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 12%, transparent);
    color: var(--accent-neon);
    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: color-mix(in srgb, var(--accent-neon) 12%, transparent);
    color: var(--accent-neon);
}

/* --- 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-neon);
}
.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-neon), var(--shadow-lift);
}
.plans-group--with-agent .proposal-card,
.proposal-card.pcard--with-agent:not(.proposal-card--failed) {
    /* Steven 2026-09-04: the purple line belongs to the with-agent card
       itself, including when it renders outside the legacy group wrapper.
       Failed selections remain red through the excluded failed variant. */
    border: 1px solid var(--accent-tertiary);
    box-shadow: var(--shadow-lift);
}

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

/* Green header band */
/* The green band + straddling REFINED pill are gone (2026-08-26): the card
   opens with the shared open-bid head, and REFINED is an inline chip. */
.pcard-refined-chip {
    background: var(--highlight-yellow);
    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;
    color: var(--color-gray-900);
    text-transform: uppercase;
    vertical-align: middle;
}

/* Successful target block: quiet panel, same voice as the PLAN box. */
.pcard-yt-success {
    margin-top: var(--space-4);
    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-yt-success__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.pcard-yt-success__text {
    margin: 0;
    font-size: var(--text-sm);
    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: brand-curved (2026-08-26); sections sit inside the
   card's own --space-4 padding, like the open-bid face. */
.pcard--your-turn {
    overflow: hidden;
    border-radius: var(--radius-xl);
}
/* Green finalist ordinal chip */
.pcard-yt-ordinal {
    background: color-mix(in srgb, var(--accent-neon) 12%, transparent);
    color: var(--accent-neon);
    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 sit inside the card's own padding now. */
.pcard--your-turn .pcard-step-overview {
    padding: var(--space-4) 0;
}
.pcard--your-turn .pcard-more {
    padding: 0 0 var(--space-2);
}


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

/* Purple ring is applied by the with-agent variant selector above. */

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

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

/* Purple 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: the head/stat block above carry the card's own padding, so the
   body only spaces itself vertically (plan title + snippet now live in the
   shared open-bid head). */
.pcard-wa-body {
    padding: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* 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;
    /* Brand-curved corners (Steven 2026-08-26 mock), soft shadow, white on the
       grey page. Article padding zeroed: the face and each detail row carry
       their own space-5 inset so the ruled rows can span the card. */
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 0;
}

/* Face (no border on face for open bids). Redesigned 2026-08-25: company logo
   top-left, big pitch title + byline, pitch body, Toll/Probability pills, then
   a footer meta row. */
.pcard-ob-face {
    cursor: pointer;
    border: none;
    padding: var(--space-5);
}

/* Header: company logo tile + title + byline */
.pcard-ob-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
/* Circular company logo: a real image when the passport/operator has one,
   else a circular lettermark tile from the company initial. The base
   .pcard-identity-row__avatar already gives 44px + radius-full + overflow. */
.pcard-ob-logo {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: var(--text-lg);
}
.pcard-ob-logo--img { background: var(--surface-secondary); }
.pcard-ob-logo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pcard-ob-head__text {
    flex: 1;
    min-width: 0;
}
.pcard-ob-pitch__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-xl);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
/* Byline: monospace grey, middot-separated (agent · model · company). */
.pcard-ob-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    line-height: 1.5;
}
button.pcard-ob-byline__name:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}
.pcard-ob-byline__dot { color: var(--text-muted); }

/* Capability badges (Steven 2026-08-27): reach FACTS proved by a code round
   trip. Quiet mono chips under the byline; never a score, never a gate. */
.pcard-ob-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}
.pcard-ob-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-soft);
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    line-height: 1.5;
}
/* The honest zero (2026-09-02): an agent that declared no tools prints this
   dashed chip, visually distinct from a real declaration. */
.pcard-ob-badge--none {
    border-style: dashed;
    background: transparent;
}
/* The meeting block (Steven 2026-09-04): an honest positive mark that a
   plan arranges the meeting through the platform, calendar-aware. Tokens only. */
.pcard-ob-badge--meeting {
    border-color: var(--accent-tertiary);
    background: var(--accent-tertiary-subtle);
    color: var(--text-primary);
}

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

/* Predicted probability | Predicted toll stat block (Steven's 2026-08-26 mock,
   replaces the pill row): two ruled columns, mono small-caps labels, big dark
   numbers, hairlines above and below, a vertical rule between. */
.pcard-ob-stats {
    display: flex;
    margin-top: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.pcard-ob-stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.pcard-ob-stat + .pcard-ob-stat {
    border-left: 1px solid var(--border-soft);
    padding-left: var(--space-5);
}
.pcard-ob-stat__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pcard-ob-stat__value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-2xl);
    line-height: 1.1;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Footer meta row: price · time · steps + collapse chevron */
.pcard-ob-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
/* Expanded: the toll breakdown row carries the same three facts, so the
   collapsed meta row hides -- the facts print exactly once either way. */
.proposal-card[data-expanded="1"] .pcard-ob-face .pcard-ob-meta {
    display: none;
}
.pcard-ob-meta__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
/* "Free" wears the brand-yellow pill (Steven 2026-08-26 mock). */
.pcard-ob-meta__free {
    background: var(--color-yellow-400);
    color: var(--text-primary);
    font-weight: 700;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
}
.pcard-ob-meta__icon {
    font-size: var(--text-base);
    color: var(--text-muted);
}
.pcard-ob-meta__sep { color: var(--text-muted); }

/* Circular light-grey expand/collapse button, shared by the collapsed action
   row (chevron-down) and the expanded toll breakdown row (chevron-up). */
.pcard-ob-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: var(--text-base);
    flex-shrink: 0;
    cursor: pointer;
}
.pcard-ob-caret:hover { color: var(--text-primary); }

/* ── Action row (Steven's 2026-08-26 mock): the card's last row, collapsed and
   expanded alike. Chevron left while collapsed; Fail swaps in expanded. ── */
.pcard-ob-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-5);
}
.pcard-ob-actions__spacer { flex: 1 1 auto; }
.pcard-ob-actions__choose,
.pcard-ob-actions__finalist,
.pcard-ob-actions__fail {
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
@media (max-width: 420px) {
    .pcard-ob-actions__choose,
    .pcard-ob-actions__finalist,
    .pcard-ob-actions__fail {
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-3);
    }
}
.pcard-ob-actions__choose {
    background: var(--surface-secondary);
    color: var(--text-primary);
}
.pcard-ob-actions__choose:hover { background: var(--border-soft); }
/* Name finalist: the BRAND green button tokens (green, dark text; purple on
   hover) -- not the generic green ramp. */
.pcard-ob-actions__finalist {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
}
.pcard-ob-actions__finalist:hover {
    background: var(--btn-primary-bg-hover);
    color: var(--btn-primary-color-hover);
}
.pcard-ob-actions__fail {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-color);
}
.pcard-ob-actions__fail:hover { background: var(--btn-danger-bg-hover); }
/* Collapsed: chevron shows, Fail hides. Expanded: the reverse (the toll
   breakdown row owns the collapse chevron). Scoped to the open-bid card:
   the your-turn footer reuses the Fail pill class and has no
   data-expanded state, so an unscoped :not() would hide it there. */
.pcard--open-bid[data-expanded="1"] .pcard-ob-actions__caret { display: none; }
.pcard--open-bid:not([data-expanded="1"]) .pcard-ob-actions__fail { display: none; }

/* ── Toll breakdown row: yellow target medallion, TOLL + number, the three
   facts, collapse chevron on the right. ── */
.pcard-ob-tollrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.pcard-ob-tollrow__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-yellow-400);
    color: var(--text-primary);
    font-size: var(--text-base);
    flex-shrink: 0;
}
.pcard-ob-tollrow__label {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.pcard-ob-tollrow__value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-base);
    color: var(--text-primary);
}
.pcard-ob-tollrow__caret { margin-left: auto; }

/* ── COST / TIME / EFFORT component rows: mono label+points, three dash
   glyphs weighted by which axis carries the toll, fact sentence. ── */
.pcard-ob-comps {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5) 0;
    border-top: 1px solid var(--border-soft);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
}
.pcard-ob-comp {
    display: grid;
    grid-template-columns: 7em 3.5em 1fr;
    gap: var(--space-3);
    align-items: baseline;
}
.pcard-ob-comp__label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.pcard-ob-comp__dashes {
    display: inline-flex;
    gap: var(--space-1);
    align-self: center;
}
.pcard-ob-comp__dashes i {
    width: 12px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--border-soft);
}
.pcard-ob-comp__dashes--heavy i { background: var(--text-primary); }
.pcard-ob-comp__dashes--mid i   { background: var(--text-muted); }
.pcard-ob-comp__note {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ── PLAN box: lavender panel, mono PLAN label on a pale blue highlight. ── */
.pcard-ob-plan {
    margin: var(--space-4) var(--space-5) var(--space-4);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.pcard-ob-plan__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: var(--color-blue-100);
    padding: 1px var(--space-1);
    border-radius: var(--radius-xs);
}
.pcard-ob-plan__text {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* HELD TO / BUDGET panels in expanded detail */
.pcard-ob-panel {
    margin: var(--space-4) var(--space-5) 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 gate (questions panel). Its Fail/select row moved to the card's
   own action row (Steven 2026-08-26); side inset matches the face padding. */
.pcard-ob-finalist-gate {
    margin: var(--space-4) var(--space-5) 0;
}

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

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

/* ── Proposal card action footer (Steven 2026-08-11) ─────────────────────── */
/* Born with four buttons; Accept and tip left on 2026-09-24 (Steven: the only
   tip is at the very end), so it carries three: Send back, Fail, Accept. A
   2-column grid on mobile and a single row on wider viewports. Uses only
   existing design tokens (tp-btn classes live in target-path.css). */
.pcard-yt-footer--four {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3) 0 0;
}
@media (min-width: 600px) {
    .pcard-yt-footer--four {
        grid-template-columns: repeat(3, auto);
        justify-content: stretch;
    }
    .pcard-yt-footer--four .pcard-action-btn {
        flex: 1 1 auto;
    }
}
/* == The tip popup (Steven 2026-08-13 mock). Since Steven 2026-09-24 its
   one door is the finish's "Yes, and tip": no mid-deal tip, no saving.
   Tokens only. == */
.bohtip-modal { padding: 0; overflow: hidden; }
.bohtip-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}
.bohtip-modal__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bohtip-modal__title {
    margin: var(--space-1) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text-primary);
}
.bohtip-modal__body { padding: var(--space-4) var(--space-5); }
.bohtip-modal__amountrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.bohtip-modal__amountlabel {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-base);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}
.bohtip-modal__min {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bohtip-modal__amountctl { display: flex; gap: var(--space-2); align-items: center; }
.bohtip-modal__select {
    appearance: auto;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
}
.bohtip-modal__custom {
    width: 90px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
}
.bohtip-modal__feecard {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
}
.bohtip-modal__feerow {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.bohtip-modal__feemath { font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.bohtip-modal__feerow--total {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-default);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-base);
    color: var(--text-primary);
}
.bohtip-modal__reasonlabel {
    display: block;
    margin: var(--space-4) 0 var(--space-2);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.bohtip-modal__reason {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    resize: vertical;
}
.bohtip-modal__chip {
    display: inline-block;
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* Stripe Payment Element (card fields) inside the tip popup. The element
   themes its own inputs; we only frame it to match the reason box. */
.bohtip-modal__cardwrap {
    margin-top: var(--space-4);
}
.bohtip-modal__card {
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}
.bohtip-modal__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-default);
    background: var(--surface-primary);
}
.bohtip-modal__totalblock { display: flex; flex-direction: column; margin-right: auto; }
.bohtip-modal__totallabel {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bohtip-modal__totalval {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--text-primary);
}
.bohtip-modal__cancel {
    border: none;
    background: none;
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    color: var(--text-secondary);
    cursor: pointer;
}
.bohtip-modal__go {
    /* Same type as every other button in the sheet (Steven 2026-08-13). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent-neon);
    color: var(--color-gray-900);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    cursor: pointer;
}
.bohtip-modal__go:disabled { opacity: .6; cursor: default; }
.bohtip-modal__err { margin-top: var(--space-2); }


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


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

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

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


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

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

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

/* ── Feed Response Queue: the "Your Move" GROUPS (Steven 2026-08-27).
 *    NO masthead, NO counter. One group per want: a compact want header
 *    (canonical trajectory classes), then the REAL Detail-page action cards
 *    joined by vertical dashed connectors. The spectacle layer stamps the
 *    moment on an acted card, then the card (or the whole group, on the last
 *    card / a deal-ending act) collapses out. Design tokens only. ── */

.frq {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

/* One want's group: header card + dashed spine + action cards. */
.frq-group {
  display: flex;
  flex-direction: column;
  transition: opacity 0.4s ease, height 0.45s ease, margin 0.45s ease;
}

/* The compact want header: rides the canonical .target-trajectory card box;
 * only the group-specific chrome is added here. */
.frq-ghead {
  position: relative;
}

.frq-ghead__surface {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.frq-ghead__managed {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-left: var(--space-1);
}

/* The vertical dashed connector between the connected cards of one group. */
.frq-connect {
  width: 0;
  height: 22px;
  margin: 0 auto;
  border-left: 2px dashed var(--border-strong);
}

/* The action card wrapper: the REAL detail render plus feed chrome. The
 * spectacle stamp positions against this box. */
.frq-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: opacity 0.4s ease, height 0.45s ease, margin 0.45s ease;
}

/* ONE take-action piece (Steven 2026-08-27 sketch): the green band is the
 * top of the box, the detail cards flatten into sections divided by lines,
 * and the action row closes the same box. It wears the FEED-CARD tokens -
 * the exact chrome every brand feed card wears, no hand-picked values. */
.frq-item--step {
  gap: 0;
  background: var(--feed-card-bg);
  border: var(--feed-card-border);
  border-radius: var(--feed-card-radius);
  box-shadow: var(--feed-card-shadow);
  overflow: hidden;
}

/* The band reuses .ob-strip (target-path.css); inside the piece it loses the
 * page margins and rounds with the box top. */
.frq-item__strip {
  margin: 0;
  border-radius: var(--feed-card-radius) var(--feed-card-radius) 0 0;
}

/* The detail render wears the standard page-card chrome
 * (.want-step-detail.tp-page). Inside the piece that drew a card inside
 * the card - stripped here; the piece is the ONLY box. */
.frq-item--step .frq-item__page {
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  animation: none;
  overflow: visible;
}

/* The detail cards lose their own chrome inside the piece; a hairline
 * divides each section instead of card borders and gaps. The negative
 * horizontal margin bleeds the divider to the box edges while the matching
 * padding keeps every section's content on one shared width. */
.frq-item--step .frq-item__page .tp-dcard {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.frq-item--step .frq-item__page > .tp-dcard:first-child {
  border-top: 0;
}

/* The details page's cards become flat SECTIONS here (Steven 2026-08-27
 * sketch): the gray attach zone and the inner white boxes lose ALL their
 * chrome; the hairline between sections is the only divider. */
.frq-item--step .tp-woy-attached {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.frq-item--step .tp-woy-attached__label {
  display: none;
}

.frq-item--step .tp-woy-attached__fulltext {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-2) 0 0;
}

/* No section pills here (Steven 2026-08-27): the green band alone carries
 * the step context; sections open with their own natural heads. */

/* The ticket wrapper loses its page breathing room inside the piece
 * (Steven 2026-08-27): its space-4 side padding indented everything below
 * the overview one level deeper. Sections share ONE left edge. */
.frq-item--step .tp-detail.tp-ticket {
  padding: 0;
}

/* Ask moved into the agent-band dropdown (Steven sketch 2026-08-27): the
 * top-right Ask row and the red this-is-not-working section are hidden in
 * the piece; the ask modal and fail dialog stay in the DOM for the menu. */
.frq-item--step .frq-item__page {
  position: relative;
}

.frq-item--step .tp-ac-askrow,
.frq-item--step .tp-fail {
  display: none;
}

/* The action row (Steven sketch 2026-08-27): Request changes quiet on the
 * left, then Details and the green Approve as buttons on the right. */
.frq-item--step .frq-item__foot {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.frq-item--step .frq-item__foot .tp-dcard__request {
  order: 1;
  margin-right: auto;
}

.frq-item--step .frq-item__open {
  order: 2;
  margin-right: 0;
  margin-left: 0;
}

.frq-item--step .frq-item__foot form[data-card-approve] {
  order: 3;
}

/* The agent band (Steven sketch 2026-08-27): the proposal card's agent
 * strip, bottom of the piece, carrying the overflow menu. */
.frq-item__agent {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.frq-item__more {
  margin-left: auto;
  flex: none;
  background: none;
  border: 0;
  padding: var(--space-2);
  color: var(--text-secondary);
  cursor: pointer;
}

.frq-item__menu {
  position: absolute;
  right: var(--space-3);
  bottom: calc(100% + var(--space-1));
  min-width: 140px;
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  border: var(--feed-card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--feed-card-shadow);
  padding: var(--space-1);
  z-index: 20;
}

.frq-item__menu[hidden] {
  display: none;
}

.frq-item__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.frq-item__menu-item:hover {
  background: var(--surface-secondary);
}

.frq-item__menu-item--fail {
  color: var(--status-error);
}

/* The action row is the bottom of the piece, divided by the same hairline. */
.frq-item--step .frq-item__foot {
  border-top: 1px solid var(--border-soft);
  padding: var(--space-3) var(--space-4);
}

/* Collapse-out (spectacle end state): JS pins the height first, then flips
 * this class so the box animates shut. Works on cards AND whole groups. */
.frq-item.is-collapsing,
.frq-group.is-collapsing {
  height: 0 !important;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The spectacle layer: the stamp naming the moment ("Approved", "Sent back",
 * "Failed"...). Covers the acted card while it holds its beat. */
.frq-stamp {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-lg);
  animation: frq-stamp-in 0.25s ease;
}

@keyframes frq-stamp-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.frq-stamp__label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.frq-stamp__sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 34ch;
}

.frq-item.is-stamped > :not(.frq-stamp) {
  filter: grayscale(0.4);
}

/* Inside the feed card, the detail render loses its page-only chrome: the
 * "Back to plan" footer and the JS-driven elapsed marker (no page script). */
.frq-item .tp-detail-foot,
.frq-item .tp-woy-elapsed {
  display: none;
}

/* The detail render is a page layout elsewhere; inside the card it sits flush. */
.frq-item__page {
  min-height: 0;
}

.frq-item__owner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-secondary);
  border: 1px solid var(--border-soft);
  padding: 2px var(--space-2);
  border-radius: var(--radius-md);
}

.frq-item__owner iconify-icon {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Surface row below the card: open-full-detail (step items) + dismiss. */
.frq-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-2);
}

.frq-item__foot:only-child,
.frq-item__foot:last-child {
  justify-content: flex-end;
}

.frq-item__open {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-secondary);
  text-decoration: none;
  margin-right: auto;
}

.frq-item__open:hover {
  text-decoration: underline;
}

/* The Tip door (own wants only; managed groups never render it). */
.frq-item__tip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.frq-item__tip:hover {
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.frq-item__dismiss {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.frq-item__dismiss:hover {
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

.frq-item__dismiss:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The green band replaces the shaded step breadcrumb inside the piece, the
 * same swap the step page makes (the strip is the top). */
.frq-item--step .tp-stepband {
  display: none;
}

/* The finalist counter chip on the Name-finalist button. */
.pcard-ob-actions__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  opacity: 0.8;
  margin-left: var(--space-1);
}

/* SELECT-AND-GO polish (Steven 2026-08-27): inside a proposal card the
 * step plan is SECTIONS, not a card - the dotted step dividers stay, the
 * rounded tp-plan box around them goes. */
.proposal-card .tp-plan.pcard-step-overview {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* ── SELECTION HOLD (Steven 2026-09-02) ─────────────────────────────────────
 * Three small pieces, existing tokens only:
 *   .pcard-wa-clock          the honest clock under the purple band, with the
 *                            Fail door sitting on it.
 *   .pcard-ob-feedback-chip  which side of the person's feedback a returned
 *                            bid was written on.
 *   .pcard-fail-reason       the person's own words, read back to them under
 *                            a failed bid, because that is what the returned
 *                            agents were handed.
 */
.pcard-wa-clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: calc(-1 * var(--space-3)) 0 var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
}
.pcard-wa-clock__text {
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text-secondary);
}
.pcard-wa-clock__fail {
  margin-left: auto;
}

.pcard-ob-feedback-chip {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-300);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.pcard-ob-feedback-chip--revised {
  border-color: var(--color-orange-400);
  background: var(--color-orange-100);
  color: var(--color-orange-600);
}

.pcard-fail-reason {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-red-400);
  background: var(--color-red-100);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* List pager (page budget, 2026-09-02): the rest of the want cards load on
   approach; this holds the fallback button while they do. Sits inside
   .wants-list so the 50s poller swap carries it. Existing tokens only. */
.wants-list__more { display: flex; justify-content: center; padding: var(--space-2) 0 var(--space-4); }
.wants-list__more-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-9); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-primary); font-weight: var(--font-bold); font-size: var(--text-sm); cursor: pointer; }
.wants-list__more-btn[disabled] { opacity: 0.6; cursor: default; }

/* THE ENDING CARD (rules 214/215, Steven 2026-09-02). Every ending that is not
   a success wears one card with the way forward on it. Pill straddles the top
   edge, the unified feed base law the one-ball cards already follow. Existing
   tokens only. */
.want-ending {
  position: relative;
  margin: var(--space-5) 0 var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
}
.want-ending__pills {
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--space-3);
  transform: translateY(-50%);
}
.want-ending__pill {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  min-height: calc(var(--size-6) + var(--space-1));
  border-radius: var(--radius-full);
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.want-ending--out-of-time .want-ending__pill,
.want-ending--agent-failed .want-ending__pill {
  background: var(--color-red-100);
  border-color: var(--color-red-400);
  color: var(--color-red-600);
}
.want-ending__title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}
.want-ending__line {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.want-ending__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.want-ending__form { margin: 0; }
.want-ending__cta {
  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);
  background: var(--text-primary);
  color: var(--surface-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  cursor: pointer;
}
.want-ending__state,
.want-ending__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.want-ending__link { text-decoration: underline; }

/* ── WALK-LIVE region wrappers (2026-09-04) ───────────────────────────────
   Each auto-updating region on the want detail page is wrapped in
   .wd-live[data-live-region] so walk-live-pages.js has one element to swap.
   display:contents makes the wrapper invisible to layout: the regions' own
   children stay direct participants of .want-detail's block flow, exactly as
   they were before the wrappers existed. Do not give this class any other
   property -- it must never be able to move anything. */
.wd-live { display: contents; }

/* =========================================================================
   THE BID HOMEWORK (rule 226, Steven 2026-09-04)
   Five blocks every bid must fill in before it can be filed. STRATEGY and
   WINS ride the card face (Steven: "make sure strategy and wins shows up on
   there"); CAPABILITIES, RESEARCH and WHAT THEY LOOKED UP sit in the expanded
   detail. All of it reuses the PLAN box idiom -- mono small-caps label on a
   pale highlight, secondary body text -- so the card reads as one thing and
   no new tokens are invented.
   ========================================================================= */
.pcard-ob-hw {
    margin: var(--space-3) 0 0;
}
.pcard-ob-hw--face {
    margin-top: var(--space-4);
}
.pcard-ob-hw__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: var(--color-blue-100);
    padding: 1px var(--space-1);
    border-radius: var(--radius-xs);
}
.pcard-ob-hw__text {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}
/* Strategy clamps on the resting card and opens with it, mirroring the pitch
   body rule above -- the class is baked in at render and never toggled by JS,
   so without the expanded override it stays cut off after the card opens. */
.pcard-ob-hw__text--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.proposal-card[data-expanded="1"] .pcard-ob-hw__text--clamped {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* WINS -- finished walks. The green check is the only colour in the block: it
   marks a fact the platform verified (that deal ended resolved), not a claim
   the agent typed, and that difference is the whole reason wins exist. */
.pcard-ob-hw__wins {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.pcard-ob-hw__win {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}
.pcard-ob-hw__win-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--color-green-600);
}
.pcard-ob-hw__win-want {
    color: var(--text-primary);
    font-weight: 600;
}
/* The honest zero. An agent new to the bench SAYS it is new -- silence here
   would read the same as an agent withholding its record. */
.pcard-ob-hw__zero {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

/* Detail half: capabilities, research links, skill research. */
.pcard-ob-hwpanel {
    margin: var(--space-4) var(--space-5) 0;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.pcard-ob-hwpanel .pcard-ob-hw:first-child {
    margin-top: 0;
}
.pcard-ob-hw__chips {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.pcard-ob-hw__chip {
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    padding: 2px var(--space-2);
}
.pcard-ob-hw__links {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.pcard-ob-hw__link {
    font-size: var(--text-sm);
    line-height: 1.5;
}
.pcard-ob-hw__link-a {
    color: var(--text-link);
    font-weight: 600;
    word-break: break-word;
}
.pcard-ob-hw__link-a:hover {
    color: var(--text-link-hover);
}
.pcard-ob-hw__details { margin-top: var(--space-4); }
.pcard-ob-hw__details > summary { cursor: pointer; color: var(--text-link); font-size: var(--text-sm); font-weight: 600; }
.pcard-ob-hw__details[open] > summary { margin-bottom: var(--space-3); }
.pcard-ob-hw__details .pcard-ob-hw__link + .pcard-ob-hw__link { padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.pcard-ob-hw__link-note {
    display: block;
    color: var(--text-secondary);
}

/* THE PREVIOUS-ATTEMPT CARD (2026-09-10): the failed-proposal card inside the history section. */
.want-prior-attempt--card > .proposal-card { margin-bottom: var(--space-3); }
.want-prior-attempt--card .want-prior-attempt__notice { margin-top: var(--space-2); }

/* Failed plan notice uses the shared card surface; red identifies the status. */
.want-plan-failed {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
  padding: var(--feed-card-padding);
  border: var(--feed-card-border);
  border-radius: var(--feed-card-radius);
  background: var(--feed-card-bg);
  box-shadow: var(--tb-card-shadow);
}
.want-plan-failed__face {
  display: block;
  flex: 0 0 auto;
  width: var(--size-10);
  height: var(--size-10);
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-tertiary);
}
.want-plan-failed__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.want-plan-failed__who {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-red-600);
}
.want-plan-failed__icon {
  font-size: var(--text-base);
  line-height: 1;
  flex: 0 0 auto;
}
.want-plan-failed__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.want-plan-failed__headline {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  line-height: 1.35;
  color: var(--text-primary);
}
.want-plan-failed__sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}


/* Outside money the person hands to a service directly, never through our
   checkout (spec section 6, ruled 2026-09-11). Sits beside the agent's price
   inside the funding disclosure so the total is known before the first tap. */
.pcard-cost-disclosure__outside {
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 1.5;
  color: var(--text-primary);
}

/* ── THE 'DO' ASK (rule 244, the fifth ask: you do this) ───────────────────
   A step the PERSON does in the outside world: a link, a Done button, and the
   money it costs them, shown BEFORE the tap. Drawn like the outside-act Allow
   card, because that is what it is from the person's side. */
.step-do-ask {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}
.step-do-ask__cost {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}
.step-do-ask__note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.step-do-ask__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* -- WHAT THIS COSTS YOU (Steven, spec section 6, 2026-09-11) --------------
   Two pockets and their sum, above the plan the person is being asked to
   allow. Quiet card, existing tokens only: the same surface, border and
   radius the funding disclosure and the do-ask box already wear, so the
   money on this page reads as one family. */
.want-plan-costs {
  margin: var(--space-4) 0 var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
}
.want-plan-costs__label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.want-plan-costs__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.want-plan-costs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.want-plan-costs__row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}
.want-plan-costs__key {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.want-plan-costs__value {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  line-height: 1.5;
  color: var(--text-primary);
}
.want-plan-costs__row--total .want-plan-costs__key,
.want-plan-costs__row--total .want-plan-costs__value {
  color: var(--text-primary);
  font-weight: var(--font-bold);
}
.want-plan-costs__note {
  margin: var(--space-3) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.want-plan-costs__list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.want-plan-costs__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.want-plan-costs__item-step {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.want-plan-costs__item-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary);
}
.want-plan-costs__item-cost {
  font-weight: var(--font-bold);
  color: var(--text-primary);
}
.want-plan-costs__item-note {
  flex: 1 0 100%;
  color: var(--text-secondary);
}

/* Canonical probability: failure marks the endpoint; earned dots stay earned. */
.target-chart__failure { fill: none; stroke: var(--status-error); stroke-width: 3; stroke-linecap: round; }
.target-chart__forecast-point { fill: var(--surface-primary, white); stroke: var(--text-muted); stroke-width: 2; }

/* One explanation below the chart stays readable on narrow touch screens. */
.target-chart__explanation {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}
.target-chart [data-chart-explanation] { cursor: pointer; pointer-events: all; }
.target-chart [data-chart-explanation]:focus {
  outline: none;
  stroke: var(--text-primary);
  stroke-width: 3;
}