/* ============================================================
   Target Path — Phase 1 render layer
   /targets/<id> Path screen + step card (feed view) + four chips.
   Design-token-only (static/css/tokens.css). No new tokens, no new
   fonts, no ad-hoc colors/spacing/radii/shadows. Cards-first.
   Mobile-first: holds at 375px, scales to desktop.
   ============================================================ */

/* Standalone shell pages need their own box-sizing reset. */
.tp-page, .tp-page * { box-sizing: border-box; }

.tp-page {
    /* Explicit width: this can mount inside a flex column (utility panel /
       feed rail) where margin:0 auto on a flex item cancels stretch and the
       page falls back to min-content, overflowing on mobile. */
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-16);
    font-family: var(--font-body);
    color: var(--text-primary);
}

.tp-path { width: 100%; }

/* ── Deal header ─────────────────────────────────────────── */
.tp-head {
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}
.tp-head__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: var(--space-3);
}
.tp-head__back:hover { color: var(--text-primary); }
.tp-head__back iconify-icon { font-size: 1em; }

.tp-head__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
    overflow-wrap: break-word;
}
.tp-head__agent,
.tp-ctx__agent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-2);
}
.tp-head__agent-label {
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
}
.tp-head__agent-record { color: var(--text-secondary); }
.tp-agent-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 30px;
    padding: 2px var(--space-2) 2px 3px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}
.tp-agent-link:hover,
.tp-agent-link:focus-visible {
    border-color: var(--accent-tertiary);
    outline: none;
}
.tp-agent-link__mark {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0;
}
.tp-agent-link iconify-icon {
    font-size: 0.8em;
    color: var(--text-muted);
}

.tp-head__deal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.tp-head__summary {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}
.tp-head__money,
.tp-head__clocks {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.tp-head__money { margin-bottom: var(--space-1); }

/* ── Header state pill: on schedule · behind · ended ─────── */
.tp-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}
.tp-state__dot { font-size: 0.85em; }
.tp-state.is--on        { color: var(--status-success); }
.tp-state.is--behind    { color: var(--warning); }
.tp-state.is--completed { color: var(--status-success); }
.tp-state.is--lapsed    { color: var(--text-muted); }
.tp-state.is--ended     { color: var(--text-muted); }

/* ── Path body ───────────────────────────────────────────── */
.tp-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

/* ── Collapsed receipt (done step) ───────────────────────── */
.tp-receipt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-secondary);
    transition: background 0.15s ease;
}
.tp-receipt:hover { background: var(--surface-sunken); }
.tp-receipt__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--status-success-subtle);
    color: var(--status-success);
    font-size: var(--text-xs);
}
.tp-receipt__num {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.tp-receipt__title {
    font-size: var(--text-sm);
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-receipt__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.tp-receipt__meta iconify-icon { font-size: 0.9em; }

/* ── Dimmed preview (future + queued step) ───────────────── */
.tp-preview {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    opacity: 0.5;
    color: inherit;
    text-decoration: none;
}
.tp-preview--link:hover,
.tp-preview--link:focus-visible {
    opacity: 0.72;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    outline: none;
}
.tp-preview__ring {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-full);
}
.tp-preview__num {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.tp-preview__title {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-preview__detail {
    margin-left: auto;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ── Step card (expanded current step / feed view) ───────── */
.tp-step {
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    margin: var(--space-1) 0;
}
.tp-step__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.tp-step__unread {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--accent-tertiary);
    align-self: center;
    flex-shrink: 0;
}
.tp-step__count {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.tp-step__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

/* ── The four status chips ───────────────────────────────── */
.tp-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}
.tp-chip.is--waiting {
    color: var(--accent-tertiary);
    background: var(--accent-tertiary-subtle);
}
.tp-chip.is--agent {
    color: var(--text-secondary);
    background: var(--surface-sunken);
}
.tp-chip.is--approved {
    color: var(--status-success);
    background: var(--status-success-subtle);
}
.tp-chip.is--ended {
    color: var(--text-muted);
    background: var(--surface-secondary);
}

.tp-step__thumb {
    margin: var(--space-1) 0 var(--space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-default);
}
.tp-step__thumb img { display: block; width: 100%; height: auto; }

.tp-step__detail {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 var(--space-3);
}
.tp-step__ask {
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}
.tp-step__ask-label { font-weight: 600; }
.tp-step__round {
    display: inline-block;
    margin-left: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.tp-step__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.tp-step__due {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-step__open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-white);
    background: var(--accent-tertiary);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    white-space: nowrap;
}
.tp-step__open:hover { background: var(--color-black); color: var(--color-white); }
.tp-step__open iconify-icon { font-size: 0.9em; }

/* ── Footer links ────────────────────────────────────────── */
/* r135: agent-failed repost block */
.tp-repost {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
}
.tp-repost__msg {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
}
.tp-repost__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.tp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}
.tp-foot__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
}
.tp-foot__link:hover { color: var(--text-primary); }
.tp-foot__link iconify-icon { font-size: 0.85em; }

/* ── Scale up on wider screens ───────────────────────────── */
@media (min-width: 700px) {
    .tp-head__title { font-size: var(--text-3xl); }
    .tp-step { padding: var(--space-5); }
}

/* ============================================================
   Target Path — Phase 2: the details page (spec §4) + APPROVE ask (§5.1)
   Context strip + four-section spine + the approve control.
   Same rules: design-token-only, cards-first, mobile-first (375px).
   ============================================================ */

/* ── Context strip (§4): always first, one glance orients ── */
.tp-ctx {
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* Looser header: more room to breathe (Steven 2026-08-25). Horizontal
       padding stays --space-4 so the full-bleed cap/footer strips (which
       negate --space-4) still run to the card edges. */
    padding: 0 var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}
.tp-ctx__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: var(--space-3);
}
.tp-ctx__back:hover { color: var(--text-primary); }
.tp-ctx__back iconify-icon { font-size: 1em; }
.tp-ctx__title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-style: italic;
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    /* More air above and below the want title (Steven 2026-08-25). */
    margin: var(--space-5) 0 var(--space-3);
    overflow-wrap: anywhere;
}
/* Target glyph before the want text in the context strip — same law as the
   probability card: inline at text start, baseline-aligned, inherits color. */
.tp-ctx__title-icon {
    margin-right: var(--space-2);
    vertical-align: -0.1em;
    color: inherit;
}
.tp-ctx__line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}
.tp-ctx__sep { color: var(--text-muted); }
.tp-ctx__money { color: var(--text-secondary); }
.tp-ctx__clocks {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── Card bookends: the cap and footer share the same quiet surface.
   Keep this paired with the trajectory agent cap in wants.css so Target,
   Plan, and Detail cards all use one visual grammar. ── */
.tp-ctx__cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    /* Bleed to card edges: negate the card's horizontal padding */
    margin: 0 calc(var(--space-4) * -1);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
}
.tp-ctx__cap-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.tp-ctx__cap-number {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Odds row inside the context strip ──
   Reuses target-trajectory__probability classes; just needs spacing. */
.tp-ctx__odds {
    margin-bottom: var(--space-1);
}

/* ── Footer strip inside tp-ctx ── */
.tp-ctx__footer {
    display: flex;
    align-items: center;
    /* Bleed to card edges */
    margin: var(--space-3) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-card);
    border-top: 1px solid var(--border-subtle);
}
.tp-ctx__footer-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Cap strip on the trajectory card (Plans tab only) ──
   Sits as first child inside .target-trajectory which is a CSS grid.
   Needs to span full width and bleed to the card edges.
   --feed-card-padding is a shorthand (top h bottom), so we use the
   individual space tokens for the bleed math. Desktop: 20px top, 32px h. */
.target-trajectory__cap {
    /* grid child: span full width */
    align-self: start;
    /* Bleed to card edges (desktop: space-5 top, space-8 horizontal) */
    margin: calc(var(--space-5) * -1) calc(var(--space-8) * -1) 0;
    /* Inherit rounded top corners from the card */
    border-radius: var(--feed-card-radius) var(--feed-card-radius) 0 0;
}
@media (max-width: 600px) {
    .target-trajectory__cap {
        /* Mobile: feed-card-padding-mobile uses space-4 top, space-5 horizontal */
        margin: calc(var(--space-4) * -1) calc(var(--space-5) * -1) 0;
    }
}

/* ── Details article ── */
.tp-detail { width: 100%; }
.tp-detail__stephead {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-default);
}
.tp-detail__steptitle { color: var(--text-primary); }

/* ── Detail-page step band (2026-08-08, replaces .tp-steprow) — the step's own
   plan-list section rendered standalone at the top of the step detail page.
   Steven's ruling: NOT a dashed-outline box — a full-width state-coloured band
   that fills the card edge to edge and shows the SAME information as the
   plan-list row (same _two_beats body, same elapsed time, same state chip).
   Full-bleed: the band negates the .tp-page horizontal padding (--space-4) so
   the wash runs to the card edges, then restores that padding inside so the
   28px number column lines up with the spine sections below. */
.tp-stepband {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--space-1) var(--space-3);
    align-items: start;
    /* Bleed to card edges: negate the .tp-page horizontal padding, then
       restore it as internal padding so the band content stays aligned. */
    margin: 0 calc(var(--space-4) * -1) var(--space-4);
    padding: var(--space-4);
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-subtle);
}
/* "You are here" — the working step gets the full-width purple wash. */
.tp-stepband.is--current {
    background: var(--accent-tertiary-soft);
    border-bottom-color: var(--accent-tertiary);
}
/* Approved / terminal steps read neutral; the green check + approved chip
   carry the state, matching how the plan list styles a done row. */
.tp-stepband.is--done {
    background: var(--surface-secondary);
    border-bottom-color: var(--border-subtle);
}
.tp-stepband__num {
    grid-column: 1;
    grid-row: 1;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
}
.tp-stepband__num.is--done {
    border-color: var(--status-success);
    color: var(--status-success);
}
.tp-stepband__num.is--current {
    border-color: var(--accent-tertiary);
    background: var(--accent-tertiary);
    color: var(--color-white);
}
.tp-stepband__body {
    grid-column: 2;
    min-width: 0;
}
.tp-stepband__chip { margin-top: var(--space-2); }

/* ── A spine section (INFORMATION / OUTCOME / REPLY) ── */
.tp-sec {
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.tp-sec__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.tp-sec__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    align-self: center;
}
.tp-sec__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}
.tp-sec__sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── 1 INFORMATION ── */
.tp-info__text {
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0 0 var(--space-3);
}
.tp-info__text:last-child { margin-bottom: 0; }
.tp-info__dealcard {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    border-left: 3px solid var(--border-default);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}
/* r187 -- the four numbers on the deal receipt (posting / signing / agent /
   outcome). Tokens only. */
.tp-info__odds4 {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    border-left: 3px solid var(--border-default);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.tp-info__odds4-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.tp-info__odds4-row dt {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tp-info__odds4-row dd {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}
.tp-attach {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.tp-attach__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.tp-attach__file { color: var(--text-secondary); font-size: 1.1em; flex-shrink: 0; }
.tp-attach__name { color: var(--text-primary); flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.tp-attach__hash {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-shrink: 0;
}
.tp-attach__hash.is--ok { color: var(--status-success); }

/* ── 2 OUTCOME ── */
.tp-outcome__none {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--text-muted);
    margin: 0;
}
/* The 99designs grid — 2 to 9 items; holds one column at 375px. */
.tp-outcome__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.tp-outcome__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    min-width: 0;
}
.tp-outcome__thumb {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-default);
    margin-bottom: var(--space-1);
    aspect-ratio: 4 / 3;
    background: var(--surface-secondary);
}
.tp-outcome__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Clickable image thumbnail (agent-uploaded image outcome). A <button> reset
   so the whole tile is the click target; cursor + subtle hover lift signal it
   opens the lightbox. */
.tp-outcome__thumb--img {
    display: block;
    width: 100%;
    padding: 0;
    cursor: zoom-in;
    background: var(--surface-secondary);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.tp-outcome__thumb--img:hover { border-color: var(--accent-tertiary); }
.tp-outcome__thumb--img:focus-visible {
    outline: 2px solid var(--accent-tertiary);
    outline-offset: 2px;
}
.tp-outcome__thumb--img .tp-outcome__img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Lightbox: one full-screen viewer per page, hidden until JS opens it. */
.tp-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 400);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.tp-lightbox[hidden] { display: none; }
.tp-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
}
.tp-lightbox__img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.tp-lightbox__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-size: var(--text-xl);
    cursor: pointer;
    box-shadow: var(--shadow-md);
}
.tp-lightbox__close:hover { background: var(--surface-secondary); }
.tp-outcome__thumb--text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--text-3xl);
}
.tp-outcome__itemlabel {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tp-outcome__itemsub {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.4;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tp-outcome__read {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-tertiary);
    text-decoration: none;
}
.tp-outcome__read iconify-icon { font-size: 0.85em; }
/* On-page text disclosure — a text outcome renders its FULL text HERE (§4
   decide-on-the-card): no navigation, JS-free <details>. The reader tile spans
   the whole grid so long text stays readable. */
.tp-outcome__reader { margin-top: var(--space-1); min-width: 0; }
.tp-outcome__reader > summary.tp-outcome__read {
    cursor: pointer;
    list-style: none;
    margin-top: 0;
}
.tp-outcome__reader > summary.tp-outcome__read::-webkit-details-marker { display: none; }
.tp-outcome__reader[open] > summary.tp-outcome__read iconify-icon { transform: rotate(90deg); }
.tp-outcome__reader > summary.tp-outcome__read iconify-icon { transition: transform 0.15s ease; }
.tp-outcome__item:has(.tp-outcome__reader[open]) { grid-column: 1 / -1; }
.tp-outcome__fulltext {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    min-width: 0;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
}
.tp-outcome__fulltext img {
    max-width: 100%;
    height: auto;
}
.tp-outcome__item--prev { background: transparent; }
.tp-outcome__prevhead {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-2);
}
.tp-outcome__caption {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}
.tp-outcome__prev { margin-bottom: var(--space-2); }
.tp-outcome__prevlink {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: underline;
    margin-right: var(--space-3);
}
.tp-outcome__prevlink:hover { color: var(--text-primary); }
.tp-outcome__gate { margin-top: var(--space-2); }

/* ── The one gate-wrapped off-site link block (never required) ── */
.tp-gate {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-sunken);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
}
.tp-gate:hover { border-color: var(--accent-tertiary); }
.tp-gate__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.tp-gate__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tp-gate__label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.tp-gate__host { font-size: var(--text-xs); color: var(--text-muted); }
.tp-gate__go { color: var(--text-muted); flex-shrink: 0; font-size: 0.9em; }

/* ── Layer 2 preview-first (item 6b): the content brought to the card ──
   A passed link with a cached preview renders a screenshot thumbnail + title
   + summary above the gated "open ▸" row. The 99designs moment on-site. Tokens
   only — no new tokens. */
.tp-linkprev {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}
.tp-linkprev__shot {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--surface-secondary);
}
.tp-linkprev__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.tp-linkprev__summary {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}
.tp-linkprev__host {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* ── 3 REPLY (the thread) ── */
.tp-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.tp-msg {
    padding: var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    max-width: 90%;
    align-self: flex-start;
}
.tp-msg.is--you {
    align-self: flex-end;
    background: var(--accent-tertiary-subtle);
}
.tp-msg__who {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.tp-msg__body {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
    overflow-wrap: break-word;
    white-space: pre-line;
}
.tp-msg__img {
    margin-top: var(--space-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-default);
}
.tp-msg__img img { display: block; width: 100%; height: auto; }
.tp-reply {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.tp-reply__input {
    width: 100%;
    resize: vertical;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    line-height: 1.5;
}
.tp-reply__input:focus { outline: none; border-color: var(--accent-tertiary); }
/* send anchors to the right */
.tp-reply__send { align-self: flex-end; }

/* ── 4 APPROVAL (the approve control §5.1) ── */
.tp-approve {
    background: var(--surface-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.tp-approve__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.tp-approve__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    align-self: center;
}
.tp-approve__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}
.tp-approve__lineitem {
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
}
.tp-approve__round {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}
.tp-approve__kind {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-4);
}
.tp-approve__kind iconify-icon { flex-shrink: 0; font-size: 1.1em; margin-top: 0.1em; color: var(--text-secondary); }
.tp-approve__kind strong { color: var(--text-primary); }
.tp-approve__kind--ack iconify-icon { color: var(--warning); }

.tp-approve__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.tp-btn iconify-icon { font-size: 0.9em; }
.tp-btn--primary {
    color: var(--color-white);
    background: var(--accent-tertiary);
}
.tp-btn--primary:hover { background: var(--color-black); color: var(--color-white); }
.tp-btn--ghost {
    color: var(--text-primary);
    background: var(--surface-card);
    border-color: var(--border-strong);
    font-weight: 600;
    font-size: var(--text-sm);
}
.tp-btn--ghost:hover { background: var(--surface-sunken); }
.tp-btn--danger {
    color: var(--text-secondary);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 600;
}
.tp-btn--danger:hover { color: var(--status-error); }

/* ── Satisfaction 1–10 selector (final step only) ── */
.tp-satisfaction {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: 0 0 var(--space-3);
    background: var(--surface-sunken);
}
.tp-satisfaction__legend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 var(--space-1);
}
.tp-satisfaction__legend iconify-icon { color: var(--warning); }
.tp-satisfaction__scale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.tp-satisfaction__opt { cursor: pointer; }
.tp-satisfaction__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.tp-satisfaction__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}
.tp-satisfaction__opt input:checked + .tp-satisfaction__box {
    background: var(--accent-tertiary);
    border-color: var(--accent-tertiary);
    color: var(--color-white);
}
.tp-satisfaction__note {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: var(--space-2) 0 0;
}

/* ── The held math + stale warning ── */
.tp-approve__held {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.tp-approve__stale {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    margin: 0;
}
.tp-approve__stale iconify-icon { flex-shrink: 0; color: var(--warning); margin-top: 0.15em; }

/* ── Scale up on wider screens ── */
@media (min-width: 700px) {
    .tp-ctx__title { font-size: var(--text-3xl); }
    .tp-outcome__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tp-approve__buttons { flex-direction: row; flex-wrap: wrap; }
    .tp-btn--primary { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   TARGET PATH — Phase 3: the CHOOSE ask (§5.2) + the PROVIDE ask (§5.3)
   Tokens only. Mirrors the tp-* section/approve conventions above.
   ══════════════════════════════════════════════════════════════════════ */

/* ── section heads shared with §4 tp-sec__head look ── */
.tp-choose__head,
.tp-provide__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}
.tp-choose__num,
.tp-provide__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.tp-choose__label,
.tp-provide__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
.tp-choose__count {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: 600;
}
.tp-choose__prompt,
.tp-provide__intro {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-4);
}

/* ── CHOOSE: the 99designs grid of readable options ── */
.tp-choose__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}
.tp-choose__opt {
    display: block;
    cursor: default;
}
.tp-choose__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tp-choose__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-card);
    border: 2px solid var(--color-border, var(--surface-sunken));
    border-radius: var(--radius-card);
}
.tp-choose__radio:checked + .tp-choose__card {
    border-color: var(--accent-primary);
}
.tp-choose__card--none {
    background: var(--surface-sunken);
    border-style: dashed;
}
.tp-choose__thumb {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-sunken);
}
.tp-choose__thumb img { display: block; width: 100%; height: auto; }
.tp-choose__opthead {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.tp-choose__optlabel {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
}
.tp-choose__optsub {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-choose__body {
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    white-space: pre-line;
}
.tp-choose__body--preview {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-choose__read {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-link);
    text-decoration: none;
    align-self: flex-start;
}
.tp-choose__noneconseq {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.tp-choose__noneconseq iconify-icon { flex-shrink: 0; margin-top: 0.15em; color: var(--warning); }
.tp-choose__pick {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: transparent;
    border: 2px solid var(--color-border, var(--surface-sunken));
}
.tp-choose__radio:checked + .tp-choose__card .tp-choose__pick {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--color-white);
}
.tp-choose__buttons,
.tp-provide__upload {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

/* ── PROVIDE: the named list + the real upload + reuse ── */
.tp-provide__list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.tp-provide__item {
    padding: var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--color-border, var(--surface-sunken));
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.tp-provide__itemhead {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.tp-provide__itemlabel {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
}
.tp-provide__req {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.1em 0.5em;
    border-radius: var(--radius-full);
}
.tp-provide__req.is--required { background: var(--warning); color: var(--color-white); }
.tp-provide__req.is--optional { background: var(--surface-sunken); color: var(--text-muted); }
.tp-provide__why {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.tp-provide__upload { margin: 0 0 var(--space-3); }
.tp-provide__drop {
    flex: 1 1 auto;
    display: block;
    cursor: pointer;
    border: 2px dashed var(--color-border, var(--surface-sunken));
    border-radius: var(--radius-card);
    background: var(--surface-sunken);
    padding: var(--space-5);
    text-align: center;
}
.tp-provide__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tp-provide__dropinner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
}
.tp-provide__dropinner iconify-icon { font-size: 1.25em; color: var(--accent-primary); }
.tp-provide__recall-notice {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    border-left: 3px solid var(--status-warning-subtle);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-3);
}
.tp-provide__caps {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 var(--space-4);
}
.tp-provide__reuse {
    padding: var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}
.tp-provide__reusehead {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.tp-provide__reuselist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tp-provide__reuseopt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.tp-provide__reuseicon { color: var(--text-muted); flex-shrink: 0; }
.tp-provide__reusename { color: var(--text-primary); font-weight: 600; }
.tp-provide__reusemeta { color: var(--text-muted); font-size: var(--text-xs); }
.tp-provide__reusehash {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── wider screens: the CHOOSE grid opens to the 99designs matrix ── */
@media (min-width: 700px) {
    .tp-choose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-choose__grid[data-count="1"] { grid-template-columns: 1fr; }
}

/* =====================================================================
   Phase 6 — the Link Gate: interstitial (Layer 3) + dead gate (Layer 0)
   Tokens only. Appended for target-path-build §11.
   ===================================================================== */

/* A gate with no passed LinkObject renders as DEAD text — same anatomy, no
   href, no hover affordance. It reads as a link that isn't one. */
.tp-gate--dead {
    cursor: default;
    opacity: 0.7;
    border-style: dotted;
}
.tp-gate--dead:hover { border-color: var(--border-strong); }

/* ── the interstitial page ── */
.tp-linkout-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}
.tp-linkout {
    width: 100%;
    max-width: 480px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.tp-linkout__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.tp-linkout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: var(--text-lg);
}
.tp-linkout__icon--held {
    background: var(--surface-sunken);
    color: var(--text-muted);
}
.tp-linkout__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: var(--leading-snug);
}
.tp-linkout__facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.tp-linkout__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.tp-linkout__key {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    margin: 0;
}
.tp-linkout__val {
    font-size: var(--text-base);
    color: var(--text-primary);
    margin: 0;
    word-break: break-word;
}
.tp-linkout__checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}
.tp-linkout__check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
}
.tp-linkout__check.is--ran { color: var(--text-primary); }
.tp-linkout__check.is--ran iconify-icon { color: var(--status-success); font-size: 0.9em; }
.tp-linkout__check.is--unrun { color: var(--text-muted); font-style: italic; }
.tp-linkout__sep { color: var(--text-muted); }

.tp-linkout__teach {
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.tp-linkout__teach p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}
.tp-linkout__teach p:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

.tp-linkout__reason {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: var(--leading-normal);
}
.tp-linkout__stewardnote {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.tp-linkout__actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}
.tp-linkout__go { flex: 1 1 auto; }

/* ═══════════════════════════════════════════════════════════════════
   TARGET PATH — Phase 7: the GRANT card (§5.4) + the Access drawer (§10)
   Tokens only; mirrors .tp-approve. No new tokens, no ad-hoc values.
   ═══════════════════════════════════════════════════════════════════ */
.tp-grant {
    background: var(--surface-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.tp-grant__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.tp-grant__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
}
.tp-grant__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}
.tp-grant__lane {
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    background: var(--surface-sunken);
}
.tp-grant__lane.is--lane2 {
    color: var(--status-success);
    border-color: var(--status-success);
    background: var(--status-success-subtle);
}
.tp-grant__lane.is--lane3 {
    color: var(--accent-tertiary);
    border-color: var(--accent-tertiary);
    background: var(--accent-tertiary-subtle);
}
.tp-grant__round {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    width: 100%;
}
.tp-grant__prime {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-4);
}
.tp-grant__prime iconify-icon {
    flex-shrink: 0;
    font-size: 1.1em;
    margin-top: 0.1em;
    color: var(--status-success);
}
.tp-grant__lines {
    margin: 0 0 var(--space-4);
    padding: 0;
}
.tp-grant__line {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-default);
}
.tp-grant__line:last-child { border-bottom: 0; }
.tp-grant__linekey {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    margin: 0;
    padding-top: 0.15em;
}
.tp-grant__lineval {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    margin: 0;
}
.tp-grant__never { color: var(--text-muted); }
.tp-grant__cost {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.tp-grant__yours {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: var(--status-success-subtle);
    border-radius: var(--radius-md);
}
.tp-grant__exposure {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}
.tp-grant__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── the Access drawer ── */
.tp-access {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}
.tp-access__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.tp-access__icon { font-size: 1.2em; color: var(--text-secondary); }
.tp-access__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.tp-access__sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
    width: 100%;
}
.tp-access__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
}
.tp-access__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-elevated);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
}
.tp-access__chip.is--off {
    color: var(--text-secondary);
    opacity: 0.7;
}
.tp-access__chipstate {
    font-weight: 500;
    color: var(--text-muted);
}
.tp-access__empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    padding: var(--space-2) 0;
}
.tp-access__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.tp-access__grant {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--surface-elevated);
}
.tp-access__grant.is--revoked,
.tp-access__grant.is--expired {
    opacity: 0.7;
    background: var(--surface-sunken);
}
.tp-access__granthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.tp-access__lane {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-secondary);
}
.tp-access__lane.is--lane2 { color: var(--status-success); }
.tp-access__lane.is--lane3 { color: var(--accent-tertiary); }
.tp-access__status {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--text-muted);
}
.tp-access__status.is--active {
    color: var(--status-success);
    background: var(--status-success-subtle);
}
.tp-access__lines {
    margin: 0 0 var(--space-2);
    padding: 0;
}
.tp-access__line {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}
.tp-access__line dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    margin: 0;
}
.tp-access__line dd {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    margin: 0;
}
.tp-access__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-default);
}
.tp-access__granted,
.tp-access__ended {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-access__revoke { margin-left: auto; }
.tp-pulse {
  margin: 12px 0 0;
  padding: 12px;
  border-left: 3px solid #23745d;
  background: #edf7f2;
  color: #1d332c;
}
.tp-pulse.is-overdue {
  border-left-color: #b44335;
  background: #fff1ed;
  color: #4b2722;
}
.tp-pulse__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.tp-pulse dl {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 4px 10px;
  margin: 10px 0 0;
}
.tp-pulse dt { color: #687078; }
.tp-pulse dd { margin: 0; overflow-wrap: anywhere; }

/* Accepted-plan progress sits directly beside the responsible agent. */
.tp-head__overview {
    display: grid;
    grid-template-columns: minmax(150px, 0.65fr) minmax(0, 1.35fr);
    align-items: end;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}
.tp-head__progress {
    min-width: 0;
}
.tp-head__progress-label {
    margin-bottom: var(--space-1);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
}
.tp-head__progress-label strong {
    color: var(--text-primary);
    font-size: var(--text-base);
}
.tp-head__progress-bar {
    position: relative;
    width: 100%;
    height: var(--size-8);
}
.tp-head__progress-meter {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    appearance: none;
    border: 1px solid var(--status-success);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
}
.tp-head__progress-meter::-webkit-progress-bar {
    background: var(--surface-secondary);
}
.tp-head__progress-meter::-webkit-progress-value {
    background: var(--status-success);
}
.tp-head__progress-meter::-moz-progress-bar {
    background: var(--status-success);
}
.tp-head__progress-state {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    pointer-events: none;
}
.tp-head__progress-state--left {
    right: auto;
    left: var(--space-2);
}
.tp-head__progress-state .tp-state {
    color: var(--text-primary);
}
.tp-head__overview .tp-head__agent {
    margin-bottom: 0;
}
@media (max-width: 520px) {
    .tp-head__overview {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
}

/* ── tp-info__more: collapsed details disclosure (state-aware info + outcome promise) ── */
/* Design-token-only. No new tokens. */
.tp-info__more {
    margin-top: var(--space-2);
}
.tp-info__more-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    padding: 0;
    user-select: none;
}
.tp-info__more-summary::-webkit-details-marker { display: none; }
.tp-info__more-summary::after {
    content: '›';
    display: inline-block;
    transition: transform 0.15s ease;
}
.tp-info__more[open] > .tp-info__more-summary::after {
    transform: rotate(90deg);
}
.tp-info__more-body {
    margin-top: var(--space-2);
    padding-left: var(--space-3);
    border-left: 2px solid var(--border-muted, var(--border));
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.tp-info__more-body p { margin: 0 0 var(--space-1); }
.tp-info__more-body p:last-child { margin-bottom: 0; }

/* ── tp-msg__pulse-details: the pulse details disclosure inside a thread message ── */
.tp-msg__pulse-details {
    margin-top: var(--space-1);
}

/* ── tp-reply__hint: helper text below the reply textarea (mono-caps microcopy) ── */
.tp-reply__hint {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ============================================================
   Target Path — Plans-tab rebuild (2026-07-28)
   Hero card REMOVED 2026-07-31 (ruling): deal-terms card · N-step plan card ·
   chosen-agent card. Same rules: design-token-only (tokens.css),
   no inline styles, cards-first, mobile-first (holds at 375px).
   ============================================================ */

/* Probability increase — soft green explainer inside the active step Details expander */
.tp-prob {
    background: var(--status-success-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: 0 0 var(--space-3);
}
.tp-prob__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.tp-prob__icon {
    font-size: 1em;
    color: var(--status-success);
    flex-shrink: 0;
}
.tp-prob__title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--status-success);
}
.tp-prob__body {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* ── 2. Deal terms — money + clock disclosures ────────────── */
.tp-terms {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
}
.tp-terms__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.tp-terms__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
}
.tp-terms__lines { margin: 0; padding: 0; }
.tp-terms__line {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}
.tp-terms__line dt {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}
.tp-terms__line dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
/* Stacked dd: two lines in the Time row on an ended deal */
.tp-terms__dd--stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tp-terms__sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── 3. The plan card — one card, every step a row ────────── */
.tp-plan {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
}
.tp-plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.tp-plan__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.tp-plan__count { margin-left: auto; }
.tp-plan__sub {
    margin: var(--space-1) 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
}
.tp-plan__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.tp-plan__row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3);
    /* Every step is its own dashed-outline box (ruling 2026-08-08). */
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}
/* "You are here" — the current step keeps its faint purple wash, but the dashed
   lines run STRAIGHT ACROSS the full width of the plan card (dashed rule above
   and below), NOT a dashed border wrapping the step in a rounded box
   (ruling 2026-08-11, Steven). Side borders and the box radius are dropped and
   negative side margins pull the band edge-to-edge inside the plan padding. */
.tp-plan__row.is--current {
    background: var(--accent-tertiary-soft);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px dashed var(--accent-tertiary);
    border-bottom: 1px dashed var(--accent-tertiary);
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
/* Approved steps read neutral-dashed; the green check + chip carry the state. */
.tp-plan__row.is--done {
    border-color: var(--border-strong);
}
.tp-plan__num {
    grid-column: 1;
    grid-row: 1;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
}
.tp-plan__num.is--done {
    border-color: var(--status-success);
    color: var(--status-success);
}
.tp-plan__num.is--current {
    border-color: var(--accent-tertiary);
    background: var(--accent-tertiary);
    color: var(--color-white);
}
.tp-plan__body {
    grid-column: 2;
    min-width: 0;
}
.tp-plan__steptitle {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.tp-plan__detail {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.tp-plan__chip { margin-top: var(--space-2); }
.tp-plan__actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.tp-plan__btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

/* ── Plan toggle chevron button (ruling 2026-07-31) ─────────── */
.tp-plan__toggle {
    /* Button reset */
    appearance: none;
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    transition: background 0.15s ease, color 0.15s ease;
    margin-left: var(--space-2);
    flex-shrink: 0;
}
.tp-plan__toggle:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
}
.tp-plan__toggle:focus-visible {
    outline: 2px solid var(--accent-tertiary);
    outline-offset: 2px;
}
/* Rotate chevron when list is collapsed */
.tp-plan__toggle[aria-expanded="false"] iconify-icon {
    transform: rotate(-90deg);
}
.tp-plan__toggle iconify-icon {
    font-size: var(--text-base);
    transition: transform 0.2s ease;
}
/* Steven 2026-08-13 (third pass): the green count pill is GONE. The subtitle
   line carries the count as plain text ("4 of 8 steps complete") and IS the
   fold control the pill used to be: same data-tp-plan-toggle contract, same
   folded-by-default behavior, chevron points right while closed. It keeps
   the .tp-plan__sub look (size, color, margins) with only a button reset. */
.tp-plan__sub--toggle {
    appearance: none;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-plan__sub--toggle:hover { color: var(--text-primary); }
.tp-plan__sub--toggle:focus-visible {
    outline: 2px solid var(--accent-tertiary);
    outline-offset: 2px;
}
.tp-plan__sub--toggle iconify-icon {
    font-size: var(--text-sm);
    transition: transform 0.2s ease;
}
.tp-plan__sub--toggle[aria-expanded="false"] iconify-icon {
    transform: rotate(-90deg);
}
/* Folded (default): only the COMPLETED rows hide — the active step stays on
   top of the visible list, future steps below it. */
#tp-plan-list.is--folded .us-row.is--done { display: none; }
/* The count chip no longer needs margin-left:auto when the toggle is present;
   the toggle sits at far right via the flex justify-content:space-between on
   tp-plan__head. Remove the auto margin to avoid double-spacing. */
.tp-plan__head .tp-plan__count {
    margin-left: 0;
}
/* Hidden list state (toggled by JS) */
.tp-plan__list[hidden] {
    display: none;
}

/* Resolved Plans view: a concise, immutable readback of the signed plan. */
.tp-achieved {
    overflow: hidden;
    margin-bottom: var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--feed-card-radius);
    background: var(--surface-primary);
    box-shadow: var(--shadow-md);
}
.tp-achieved__banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--accent-primary); /* Steven 2026-08-26: achieved reads GREEN, same rail as TAKE ACTION */
    color: var(--color-black);
}
.tp-achieved__seal {
    display: grid;
    width: var(--size-12);
    height: var(--size-12);
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--text-primary);
    color: var(--color-yellow-400);
}
.tp-achieved__seal iconify-icon { font-size: var(--text-2xl); }
.tp-achieved__banner-copy {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}
.tp-achieved__banner-copy strong {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}
.tp-achieved__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    text-transform: uppercase;
}
.tp-achieved__intro { padding: var(--space-6); }
.tp-achieved__intro > .tp-achieved__eyebrow { color: var(--text-muted); }
.tp-achieved__intro h2 {
    margin: var(--space-3) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}
.tp-achieved__intro p {
    margin: var(--space-3) 0 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}
.tp-achieved__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-subtle);
}
.tp-achieved__step {
    display: grid;
    grid-template-columns: var(--size-8) var(--size-10) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 92px;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}
.tp-achieved__check {
    display: grid;
    width: var(--size-7);
    height: var(--size-7);
    place-items: center;
    border: 2px solid var(--status-success);
    border-radius: var(--radius-full);
    color: var(--status-success);
}
.tp-achieved__check iconify-icon { font-size: var(--text-base); }
.tp-achieved__step-number {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: 0;
    text-transform: uppercase;
}
.tp-achieved__step-body {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}
.tp-achieved__step-body > strong {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}
.tp-achieved__step-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
}
.tp-achieved__release {
    color: var(--status-success);
}
.tp-achieved__details {
    display: inline-flex;
    min-height: var(--size-10);
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-decoration: none;
}
.tp-achieved__details:hover { border-color: var(--text-primary); }
.tp-achieved__details:focus-visible {
    outline: 2px solid var(--accent-tertiary);
    outline-offset: 2px;
}
.tp-achieved__footer {
    display: flex;
    align-items: flex-end;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
}
.tp-achieved__footer > span { display: grid; gap: var(--space-1); }
.tp-achieved__footer .tp-achieved__eyebrow { color: var(--text-muted); }
.tp-achieved__footer strong { font-weight: var(--font-medium); }
.tp-achieved__footer .tp-achieved__details { margin-left: auto; }

@media (max-width: 640px) {
    .tp-achieved__banner,
    .tp-achieved__intro,
    .tp-achieved__footer { padding: var(--space-4); }
    .tp-achieved__banner-copy strong,
    .tp-achieved__intro h2 { font-size: var(--text-xl); }
    .tp-achieved__step {
        grid-template-columns: var(--size-6) var(--size-8) minmax(0, 1fr);
        gap: var(--space-2);
        padding: var(--space-4);
    }
    .tp-achieved__step .tp-achieved__details {
        grid-column: 3;
        justify-self: start;
        min-height: var(--size-8);
    }
    .tp-achieved__footer { align-items: flex-start; flex-wrap: wrap; }
    .tp-achieved__footer .tp-achieved__details { margin-left: 0; }
}

/* ── 4. Chosen agent card — dark slate, mirrors the Agent Passport ── */
/* The whole card is a <button> that opens the passport dialog.
   No separate "Agent passport" button; the card itself is the control. */
.tp-agentcard {
    /* Button reset */
    appearance: none;
    border: none;
    cursor: pointer;
    text-align: left;
    /* Dark surface echoing .ap-card: top of the passport gradient, solid */
    background: var(--color-dark-700);
    border: 1px solid rgba(0, 243, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
    color: var(--gallery-text-primary);
    /* Full-width tap target */
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* Transition for hover/focus feedback */
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tp-agentcard:hover {
    background: color-mix(in srgb, var(--color-dark-700) 92%, white 8%);
    border-color: rgba(0, 243, 255, 0.22);
}
.tp-agentcard:focus-visible {
    outline: 2px solid var(--accent-tertiary);
    outline-offset: 2px;
}
.tp-agentcard__id {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;
}
/* Square identicon — mirrors .ap-glyph exactly, scaled to 56px for card context */
.tp-agentcard__mark {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    /* Diagonal white gradient + faint cyan wash, matching .ap-glyph */
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
        rgba(0, 243, 255, 0.08);
    border: 1px solid rgba(0, 243, 255, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    /* Mono uppercase initials, matching .ap-glyph__letters */
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 1;
}
.tp-agentcard__who {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1 1 auto;
}
/* Kicker — dim mono label, matching .ap-passport-label treatment */
.tp-agentcard__kicker {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.45);
}
/* Name — bright white, heading weight, readable on dark */
.tp-agentcard__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--gallery-text-primary);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
/* Operator / org — secondary gallery tone (no @handle on either card) */
.tp-agentcard__meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--gallery-text-secondary);
    overflow-wrap: break-word;
}
/* Chevron — the tappable affordance replacing the old separate button */
.tp-agentcard__chevron {
    flex-shrink: 0;
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.38);
    transition: color 0.15s ease;
}
.tp-agentcard:hover .tp-agentcard__chevron,
.tp-agentcard:focus-visible .tp-agentcard__chevron {
    color: rgba(255, 255, 255, 0.72);
}

/* ── "Current target" eyebrow on the step detail context strip ── */
.tp-ctx__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

/* ── Compact identity strip (step detail page only) ──────────
   Dark slate row: square identicon + name (bold) + operator (muted).
   No kicker, no @handle. The whole row opens the passport dialog.
   Replaces the heavier tp-agentcard block that 4847ebd65 introduced. ── */
.tp-ctx__strip {
    /* Button reset */
    appearance: none;
    border: none;
    cursor: pointer;
    text-align: left;
    /* Dark surface — same palette as tp-agentcard */
    background: var(--color-dark-700);
    border: 1px solid rgba(0, 243, 255, 0.08);
    border-radius: var(--radius-lg);
    /* Lighter structure: horizontal row, compact padding */
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
    color: var(--gallery-text-primary);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tp-ctx__strip:hover {
    background: color-mix(in srgb, var(--color-dark-700) 92%, white 8%);
    border-color: rgba(0, 243, 255, 0.22);
}
.tp-ctx__strip:focus-visible {
    outline: 2px solid var(--accent-tertiary);
    outline-offset: 2px;
}
/* Square identicon — same glyph style, reduced to 40px for compactness */
.tp-ctx__strip-mark {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
        rgba(0, 243, 255, 0.08);
    border: 1px solid rgba(0, 243, 255, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-white);
    line-height: 1;
}
.tp-ctx__strip-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.tp-ctx__strip-name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--gallery-text-primary);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.tp-ctx__strip-op {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--gallery-text-secondary);
    overflow-wrap: break-word;
}
.tp-ctx__strip-chevron {
    flex-shrink: 0;
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.38);
    transition: color 0.15s ease;
}
.tp-ctx__strip:hover .tp-ctx__strip-chevron,
.tp-ctx__strip:focus-visible .tp-ctx__strip-chevron {
    color: rgba(255, 255, 255, 0.72);
}

/* ── Step detail footer — "Back to plan" always; "View receipts" only when
   the step is complete. Two-button row that stays readable as a single
   button when the receipts link is absent. ── */
.tp-detail-foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}
.tp-detail-foot__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.tp-detail-foot__receipts {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
}

/* ── 5. Access — the white "Access details" reveal ────────── */
.tp-access__more { margin-top: var(--space-3); }
.tp-access__toggle {
    display: flex;
    width: 100%;
    list-style: none;
}
.tp-access__toggle::-webkit-details-marker { display: none; }
.tp-access__more[open] .tp-access__toggle { margin-bottom: var(--space-3); }

/* ── Scale up on wider screens ────────────────────────────── */
@media (min-width: 700px) {
    /* .tp-next hero card removed 2026-07-31 */
}

/* ══════════════════════════════════════════════════════════════════════
   FAIL THIS STEP — the person-side abort, on every step in both courts.
   Quiet by default: it sits below the decision controls and reads as a
   warning block, not a second primary action. Tokens only.
   ══════════════════════════════════════════════════════════════════════ */
.tp-fail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-3);
    background: var(--surface-sunken);
    border-left: 3px solid var(--status-error);
    border-radius: var(--radius-sm);
}
.tp-fail__head {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.tp-fail__head iconify-icon {
    flex-shrink: 0;
    font-size: 1.1em;
    color: var(--status-error);
}
.tp-fail__label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}
.tp-fail__note {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}
.tp-fail__btn {
    align-self: flex-start;
    padding-left: 0;
    padding-right: 0;
}

/* ── The confirm dialog. Native <dialog>, same shell shape as .ap-dialog. ── */
.tp-faildlg {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--space-3);
    border: 0;
    background: transparent;
    z-index: var(--z-modal);
    overflow: hidden;
}
.tp-faildlg[open] {
    display: grid;
    place-items: center;
    outline: none;
}
.tp-faildlg::backdrop {
    background: rgba(0, 0, 0, 0.66);
}
.tp-faildlg__stage {
    position: relative;
    width: min(100%, 480px);
    max-height: calc(100dvh - var(--space-6));
}
.tp-faildlg__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    color: var(--text-secondary);
    cursor: pointer;
}
.tp-faildlg__close:hover,
.tp-faildlg__close:focus-visible {
    color: var(--status-error);
    border-color: var(--border-strong);
}
.tp-faildlg__close-fallback {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1;
}
.tp-faildlg__close iconify-icon:defined + .tp-faildlg__close-fallback {
    display: none;
}
.tp-faildlg__frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    box-sizing: border-box;
    width: 100%;
    max-height: calc(100dvh - var(--space-6));
    overflow: auto;
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}
.tp-faildlg__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}
.tp-faildlg__lede {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}
.tp-faildlg__label {
    margin-top: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
}
.tp-faildlg__req {
    margin-left: var(--space-1);
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--status-error-subtle);
    color: var(--status-error);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tp-faildlg__input {
    box-sizing: border-box;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: vertical;
}
.tp-faildlg__input:focus-visible {
    outline: 2px solid var(--status-error);
    outline-offset: 1px;
}
.tp-faildlg__hint {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-faildlg__error {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--status-error-subtle);
    color: var(--status-error);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.tp-faildlg__error[hidden] { display: none; }
.tp-faildlg__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.tp-faildlg__confirm {
    background: var(--status-error-subtle);
    color: var(--status-error);
}
.tp-faildlg__confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (min-width: 700px) {
    .tp-faildlg__buttons { flex-direction: row-reverse; justify-content: flex-end; }
}

/* ── r114 FLAGS section ──────────────────────────────────────────────────── */
/* Shown only when an agent filed at least one flag on this step.
   Uses existing tokens only (no new values). */
.tp-sec--flags {
    border-color: var(--status-warning-border, var(--border-default));
    background: var(--status-warning-subtle, var(--surface-elevated));
}
.tp-flag {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-default);
}
.tp-flag:first-of-type { border-top: none; padding-top: 0; }
.tp-flag__when {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}
.tp-flag__blocked,
.tp-flag__assuming {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.55;
    margin: 0 0 var(--space-1);
    overflow-wrap: anywhere;
}
.tp-flag__assuming { color: var(--text-secondary); }

/* ── Ball-per-step model (2026-07-31) ──────────────────────────────────── */
/* Agent glyph: dark slate square matching .tp-agentcard__mark, 28px */
.tp-ball {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    line-height: 1;
}
.tp-ball--agent {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
        rgba(0, 243, 255, 0.08);
    border: 1px solid rgba(0, 243, 255, 0.28);
    background-color: var(--color-dark-600);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}
.tp-ball--person {
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-default);
    background: var(--surface-sunken, #f4f6fb);
    object-fit: cover;
    width: 28px;
    height: 28px;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-secondary);
}

/* Elapsed time strip on the active plan row (ruling 2026-07-31: moved from hero card) */
.tp-plan__elapsed {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}


/* Plan row: number in first column, body in second (avatars removed 2026-08-07) */
.tp-plan__row {
    grid-template-columns: 28px 1fr;
}
.tp-plan__body {
    grid-column: 2;
}
.tp-plan__actions {
    grid-column: 2;
}

/* ── Wave H2: two-face step detail (agent-working + waiting-on-you) ────────── */

/* Wrapper for each face */
.tp-detail-face {
    width: 100%;
}

/* Banner — prominent working/waiting card at top of face */
.tp-detail-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    margin-bottom: var(--space-5);
    background: var(--surface-secondary);
}

/* Agent working — green tint */
.tp-detail-banner--working {
    background: var(--accent-primary-subtle);
    border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

/* Waiting on you — accent tint */
.tp-detail-banner--waiting {
    background: var(--accent-tertiary-subtle);
    border-color: color-mix(in srgb, var(--accent-tertiary) 30%, transparent);
}

.tp-detail-banner__icon {
    font-size: var(--text-2xl);
    color: var(--accent-primary);
    line-height: 1;
}

.tp-detail-banner--working .tp-detail-banner__icon {
    color: var(--color-green-600);
}

.tp-detail-banner__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tp-detail-banner__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
    line-height: var(--leading-snug);
}

.tp-detail-banner__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--accent-tertiary);
    margin-bottom: var(--space-1);
}

.tp-detail-banner__heading {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    line-height: var(--leading-snug);
}

.tp-detail-banner__elapsed {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* "Nothing needed" green box */
.tp-detail-nothing-needed {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-green-100);
    color: var(--color-green-600);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border: 1px solid color-mix(in srgb, var(--color-green-500) 20%, transparent);
}

.tp-detail-nothing-needed iconify-icon {
    flex-shrink: 0;
    font-size: 1.1em;
}

/* Current action card */
.tp-detail-current-action {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    background: var(--surface-primary);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.tp-detail-current-action__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    line-height: var(--leading-snug);
}

.tp-detail-current-action__detail {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
    line-height: var(--leading-relaxed);
}

.tp-detail-current-action__working {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-normal);
}

.tp-detail-current-action__working iconify-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Meta row — expected return, etc. */
.tp-detail-meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.tp-detail-meta-row iconify-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Outcome promise — what agent will return with */
.tp-detail-promise {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    border: 1px solid var(--border-soft);
    margin-bottom: var(--space-4);
}

.tp-detail-promise__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
}

.tp-detail-promise__text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-relaxed);
}

/* Face info block */
.tp-detail-face__info {
    margin-bottom: var(--space-4);
}

/* Accordion — details/summary pattern */
.tp-detail-accordion {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--surface-primary);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.tp-detail-accordion--danger {
    border-color: color-mix(in srgb, var(--status-error, #ef4444) 25%, transparent);
}

.tp-detail-accordion__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
    position: relative;
}

.tp-detail-accordion__summary::-webkit-details-marker { display: none; }

.tp-detail-accordion__summary::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    margin-left: auto;
    transition: transform 0.15s ease;
}

details[open] > .tp-detail-accordion__summary::after {
    transform: rotate(-135deg);
}

.tp-detail-accordion__summary--danger {
    color: var(--status-error, #ef4444);
}

.tp-detail-accordion__summary--danger iconify-icon {
    color: var(--status-error, #ef4444);
}

.tp-detail-accordion__body {
    padding: 0 var(--space-5) var(--space-4);
}

/* Thread inside accordion */
.tp-detail-accordion .tp-thread {
    padding: 0 var(--space-5) var(--space-4);
}

.tp-detail-accordion .tp-reply {
    padding: 0 var(--space-5) var(--space-4);
    margin: 0;
    border-top: 1px solid var(--border-soft);
}

/* HAR block — individual action block */
.tp-har-block {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.tp-har-block__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-soft);
}

.tp-har-block__number {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-muted);
    min-width: 1.5rem;
}

.tp-har-block__title {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
}

.tp-har-block__body {
    padding: var(--space-4);
}

.tp-har-block__help {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
    line-height: var(--leading-relaxed);
}

/* Format type pill */
.tp-har-format-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.03em;
    background: var(--surface-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    white-space: nowrap;
}

.tp-har-required-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    background: var(--accent-primary-subtle);
    color: var(--color-green-600);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.tp-har-optional-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--surface-tertiary);
    border: 1px solid var(--border-default);
}

.tp-har-blocks-footer {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}

/* Responsive */
@media (min-width: 640px) {
    .tp-detail-banner {
        flex-direction: row;
        align-items: flex-start;
    }

    .tp-detail-banner__icon {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .tp-detail-banner__body {
        flex: 1 1 auto;
    }

    .tp-detail-nothing-needed {
        flex-shrink: 0;
        align-self: flex-start;
    }
}

/* ── HAR block sub-element styles (Wave H2b) ── */

.tp-har-blocks {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: var(--space-4) 0;
}

.tp-har-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.tp-har-status {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

.tp-har-block__error {
    font-size: var(--text-xs);
    color: var(--color-red-600);
    margin-top: var(--space-1);
}

.tp-har-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tp-har-choice-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--surface-secondary);
    transition: border-color 0.1s;
}

.tp-har-choice-label:hover {
    border-color: var(--accent-primary);
}

.tp-har-choice-label input {
    flex-shrink: 0;
    accent-color: var(--accent-primary);
}

/* yes_no: two fixed platform buttons (2026-08-28) — reuse the choice-label look */
.tp-har-yesno {
    display: flex;
    gap: var(--space-2);
}

.tp-har-yesno__btn {
    flex: 1 1 0;
    justify-content: center;
    font: inherit;
    text-align: center;
    background: var(--surface-secondary);
}

.tp-har-yesno__btn[aria-pressed="true"] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* number: numeric input with a unit label beside it (2026-08-28) */
.tp-har-number {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tp-har-number__input {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-har-number__unit {
    flex-shrink: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.tp-har-rank {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tp-har-rank__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    font-size: var(--text-sm);
    cursor: grab;
}

.tp-har-rank__item iconify-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.tp-har-struct-form {
    display: grid;
    gap: var(--space-3);
}

.tp-har-struct-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tp-har-struct-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tp-har-code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.tp-har-signature {
    font-family: var(--font-sharpie, var(--font-serif));
    font-size: var(--text-xl);
}

.tp-har-terms {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    max-height: 200px;
    overflow-y: auto;
}

.tp-har-confirm-content {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

/* ── Inline document reader (r169, 2026-08-05) ── */
.tp-har-doc-reader {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    max-height: 360px;
    overflow-y: auto;
}

.tp-har-doc-title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-default);
}

.tp-har-doc-heading {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--space-4) 0 var(--space-1) 0;
}

.tp-har-doc-heading:first-child {
    margin-top: 0;
}

.tp-har-doc-para {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-3) 0;
}

.tp-har-doc-list {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-3) var(--space-4);
    padding: 0;
}

.tp-har-doc-list li {
    margin-bottom: var(--space-1);
}

.tp-har-doc-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.tp-har-doc-img-placeholder {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.tp-har-doc-img-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* "I have read this" gate checkbox */
.tp-har-read-confirm {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.tp-har-review-btns {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.tp-har-download-return {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tp-har-external {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tp-har-connect,
.tp-har-invite,
.tp-har-schedule {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tp-har-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Dropdown select for HAR choice blocks */
.tp-har-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%236b7280' d='m213.66 101.66-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}

/* Other free-text reveal row */
.tp-har-other-row {
    margin-top: var(--space-2);
}

.tp-har-other-row--hidden {
    display: none;
}

.tp-har-other-input {
    width: 100%;
}



/* ══════════════════════════════════════════════════════════════════════
   WAITING-ON-YOU FACE REDESIGN (2026-08-06)
   New layout: state-label row + bold heading + attached-for-review inset
   + open activity section + danger footer.
   All tokens only; no new values.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. State label row ── */
.tp-woy-state-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.tp-woy-state-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--accent-tertiary);
    text-transform: uppercase;
}
.tp-woy-step-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── 2. Step heading ── */
.tp-woy-heading {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    line-height: var(--leading-snug);
}
.tp-woy-elapsed {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

/* ── 3. ATTACHED FOR REVIEW inset ── */
.tp-woy-attached {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.tp-woy-attached__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}
.tp-woy-attached__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-default);
    max-width: 100%;
    min-width: 0;
}
.tp-woy-attached__row:first-of-type {
    border-top: none;
    padding-top: 0;
}
.tp-woy-attached__icon {
    flex-shrink: 0;
    font-size: 3rem;
    color: var(--text-muted);
    width: 3rem;
    height: 3rem;
}
.tp-woy-attached__meta {
    flex: 1 1 auto;
    min-width: 0;
}
.tp-woy-attached__name {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.tp-woy-attached__sub {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}
.tp-woy-attached__none {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}
.tp-woy-attached__reader {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
details.tp-woy-attached__reader[open] {
    flex-basis: 100%;
    width: 100%;
}
.tp-woy-attached__read {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--accent-tertiary);
    cursor: pointer;
    list-style: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-tertiary) 30%, transparent);
    text-decoration: none;
    white-space: nowrap;
}
.tp-woy-attached__read::-webkit-details-marker { display: none; }
.tp-woy-attached__read iconify-icon {
    font-size: 0.85em;
    transition: transform 0.15s ease;
}
details.tp-woy-attached__reader[open] .tp-woy-attached__read iconify-icon {
    transform: rotate(90deg);
}
.tp-woy-attached__fulltext {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}
.tp-woy-attached__fulltext img {
    max-width: 100%;
    height: auto;
}
.tp-woy-attached__prev {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}

/* "What changed" note on a re-filed outcome (Steven 2026-08-10). Marks the
   fresh reply so a look-alike previous version can't be mistaken for it. */
.tp-woy-revised {
    background: var(--accent-tertiary-subtle);
    border: 1px solid var(--accent-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}
.tp-woy-revised__badge {
    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.06em;
    text-transform: uppercase;
    color: var(--accent-tertiary);
}
.tp-woy-revised__badge iconify-icon {
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.tp-woy-revised__note {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.tp-woy-revised__asked {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-primary);
}

/* ── 4. HAR form section — kept intact, no structural change ── */
/* The tp-har-blocks form renders as-is inside the waiting_on_you face. */

/* ── 5. Activity section — open, not accordion ── */
.tp-woy-activity {
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.tp-woy-activity__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-default);
}
.tp-woy-activity__head iconify-icon {
    font-size: var(--text-base);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.tp-woy-activity__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--text-primary);
    text-transform: uppercase;
}
.tp-woy-activity__sub {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    margin-top: var(--space-4);
}
.tp-woy-activity__sub:first-of-type {
    margin-top: 0;
}
.tp-woy-activity .tp-thread {
    margin-bottom: var(--space-4);
}
/* You bubble: mint-tinted highlight */
.tp-woy-activity .tp-msg.is--you {
    background: var(--accent-tertiary-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-left: var(--space-4);
}
/* Ask composer inside activity section */
.tp-woy-activity .tp-reply {
    margin-top: var(--space-2);
}

/* ── 6. Danger footer inside activity section ── */
.tp-woy-danger {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}
.tp-woy-danger__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.tp-woy-danger__head iconify-icon {
    font-size: var(--text-base);
    color: var(--color-red-500);
    flex-shrink: 0;
}
.tp-woy-danger__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--color-red-500);
    text-transform: uppercase;
}

/* Responsive: larger screens */
@media (min-width: 640px) {
    .tp-woy-heading { font-size: var(--text-2xl); }
    .tp-woy-attached__fulltext { font-size: var(--text-base); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENT-COURT FACE (agent_working / queued) — tp-ac-* components
   Added 2026-08-06 alongside commit 20260806-step-detail-2
   ═══════════════════════════════════════════════════════════════════════════ */

/* State label modifier: green mono caps for "WITH <AGENT>" */
.tp-woy-state-label--green {
    color: var(--status-success);
    display: flex;
    align-items: center;
    gap: var(--space-1-5, 0.375rem);
}
.tp-woy-state-label--green::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-success);
    flex-shrink: 0;
}

/* ── Calm / nothing-needed banner (mint-green tint) ── */
.tp-ac-calm {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--status-success) 25%, transparent);
    background: var(--status-success-subtle);
    margin-bottom: var(--space-5);
}
.tp-ac-calm__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.tp-ac-calm__icon {
    font-size: 1.15em;
    color: var(--status-success);
    flex-shrink: 0;
}
.tp-ac-calm__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-green-600);
    margin: 0;
    line-height: var(--leading-snug);
}
.tp-ac-calm__sub {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-green-600);
    opacity: 0.8;
    padding-left: calc(1.15em + var(--space-2));
}

/* ── ATTACHMENT PENDING inset (muted, always-present empty-state) ── */
.tp-ac-pending {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    opacity: 0.72;
}
.tp-ac-pending__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}
.tp-ac-pending__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.tp-ac-pending__file-icon {
    font-size: 3rem;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
}
.tp-ac-pending__meta {
    flex: 1 1 auto;
    min-width: 0;
}
.tp-ac-pending__name {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.tp-ac-pending__sub {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}
.tp-ac-pending__hourglass {
    font-size: var(--text-lg);
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.6;
}

/* ── WHAT AGENT WILL RETURN WITH block ── */
.tp-ac-promise {
    margin-bottom: var(--space-4);
}
.tp-ac-promise__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.tp-ac-promise__text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* ── Disabled decision row ── */
.tp-ac-decision {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.tp-ac-decision__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.tp-ac-decision__approve {
    /* Disabled Approve pill — grayed */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.55;
    text-decoration: none;
}
.tp-ac-decision__ask {
    /* Active outlined Ask button */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong, var(--border-default));
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tp-ac-decision__ask:hover {
    background: var(--surface-secondary);
    border-color: var(--text-muted);
}
.tp-ac-decision__micro {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Collapsed activity accordion (agent-court variant) ── */
.tp-ac-activity {
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
    overflow: hidden;
}
.tp-ac-activity > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.tp-ac-activity > summary::-webkit-details-marker { display: none; }
.tp-ac-activity__bolt {
    font-size: var(--text-base);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.tp-ac-activity__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--text-primary);
    text-transform: uppercase;
    flex: 1 1 auto;
}
.tp-ac-activity__count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    padding: 0 var(--space-2);
    color: var(--text-muted);
    min-width: 1.4em;
    text-align: center;
    flex-shrink: 0;
}
.tp-ac-activity__chevron {
    font-size: 0.85em;
    color: var(--text-muted);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
details.tp-ac-activity[open] .tp-ac-activity__chevron {
    transform: rotate(180deg);
}
.tp-ac-activity__body {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-default);
}
.tp-ac-activity__sub {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    margin-top: var(--space-4);
}
.tp-ac-activity__sub:first-child {
    margin-top: 0;
}
.tp-ac-activity .tp-thread {
    margin-bottom: var(--space-4);
}
.tp-ac-activity .tp-msg.is--you {
    background: var(--accent-tertiary-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-left: var(--space-4);
}
.tp-ac-activity .tp-reply {
    margin-top: var(--space-2);
}

/* Compact flat entries inside the activity accordion:
   agent entries are NOT card-boxed; person's own messages keep the mint bubble.
   Attribution line is mono-caps muted. */
.tp-ac-activity .tp-msg {
    background: none;
    border-radius: 0;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-soft);
    max-width: 100%;
}
.tp-ac-activity .tp-msg:first-child {
    border-top: none;
    padding-top: 0;
}
.tp-ac-activity .tp-msg.is--you {
    background: var(--accent-tertiary-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-left: var(--space-4);
    border-top: none;
}
.tp-ac-activity .tp-msg__who {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

/* Responsive */
@media (min-width: 640px) {
    .tp-ac-calm__title { font-size: var(--text-lg); }
}

/* ═══════════════════════════════════════════════════════════════
   STEP DETAIL CONFORMANCE PASS — 2026-08-06
   A. Perforations  B. Compact agent line  C. WOY reorder
   D. Flags in activity  E. review_approve restyling
   ═══════════════════════════════════════════════════════════════ */

/* ── A. Perforated tear-line between ticket zones ── */
.tp-perf {
    position: relative;
    height: 24px;
    margin: 0 calc(var(--space-4) * -1);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.tp-perf::before {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    border-top: 2px dashed var(--border-default);
}
/* Left notch */
.tp-perf::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--surface-app, var(--surface-primary));
    border: 2px dashed var(--border-default);
}
/* Right notch via child span */
.tp-perf__notch {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--surface-app, var(--surface-primary));
    border: 2px dashed var(--border-default);
    pointer-events: none;
}

/* ── B. Compact agent line (step-detail compact mode) ── */
.tp-ctx__agent-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-1);
    text-decoration: none;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    transition: background 0.12s ease;
    appearance: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.tp-ctx__agent-line:hover {
    background: var(--surface-secondary);
}
.tp-ctx__agent-chip {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-inverse, var(--text-primary));
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--surface-primary);
    line-height: 1;
}
.tp-ctx__agent-text {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── C4. review_approve HAR block restyling ── */
/* Hide block header chrome for review_approve */
.tp-har-block[data-har-slug="review_approve"] .tp-har-block__header {
    display: none;
}
/* Remove outer block card styling */
.tp-har-block[data-har-slug="review_approve"] {
    border: none;
    padding: 0;
    background: none;
    box-shadow: none;
    margin-bottom: 0;
}
.tp-har-block[data-har-slug="review_approve"] .tp-har-block__body {
    padding-top: 0;
}
/* The "I have read this" checkbox stays above buttons */
.tp-har-block[data-har-slug="review_approve"] .tp-har-read-confirm {
    margin-bottom: var(--space-3);
}
/* Row layout for the two choice pills */
.tp-har-block[data-har-slug="review_approve"] .tp-har-review-btns {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0;
}
/* Approve button: green pill */
.tp-har-block[data-har-slug="review_approve"] [data-har-review-choose="approve"] {
    background: var(--color-green-600, #16a34a);
    color: var(--color-white, #fff);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 0.15s ease;
}
.tp-har-block[data-har-slug="review_approve"] [data-har-review-choose="approve"]:hover {
    background: var(--color-green-700, #15803d);
}
.tp-har-block[data-har-slug="review_approve"] [data-har-review-choose="approve"]:disabled,
.tp-har-block[data-har-slug="review_approve"] [data-har-review-choose="approve"][aria-disabled="true"] {
    background: var(--color-green-300, #86efac);
    cursor: not-allowed;
}
/* Request changes: outlined pill */
.tp-har-block[data-har-slug="review_approve"] [data-har-review-choose="request_changes"] {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.tp-har-block[data-har-slug="review_approve"] [data-har-review-choose="request_changes"]:hover {
    border-color: var(--text-secondary);
}
/* When review_approve is present, hide the generic save/send row */
.tp-har-blocks:has(.tp-har-block[data-har-slug="review_approve"]) .tp-har-actions {
    display: none;
}

/* ── C5. Request-changes composer (WOY face) ── */
.tp-woy-rchange {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.tp-woy-rchange[hidden] { display: none; }
.tp-woy-rchange__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}
.tp-woy-rchange__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tp-woy-rchange__round {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.tp-woy-rchange__micro {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
}
.tp-woy-rchange__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.tp-woy-rchange__cancel {
    appearance: none;
    border: none;
    background: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tp-woy-rchange__cancel:hover {
    color: var(--text-secondary);
}
.tp-woy-rchange__save {
    font-size: var(--text-xs);
}

/* ── Plan card: promise text under step title (Steven 2026-08-06) ──────── */
.tp-plan__promise {
    margin: var(--space-1) 0 0;
}
.tp-plan__promise-summary {
    /* Reset summary default arrow */
    list-style: none;
    display: block;
    cursor: pointer;
    position: relative;
}
.tp-plan__promise-summary::-webkit-details-marker { display: none; }
.tp-plan__promise-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.tp-plan__promise-dots {
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: var(--space-1);
    letter-spacing: 0.05em;
    vertical-align: bottom;
}
/* Settled by promise-more.js (Steven 2026-09-03): a promise that fits in
   two lines has nothing to open; one that overflows by less than a line just
   shows the third line. Only a promise with a real remainder keeps the dots. */
.tp-plan__promise.is--fits .tp-plan__promise-dots,
.tp-plan__promise.is--unclamped .tp-plan__promise-dots {
    display: none;
}
.tp-plan__promise.is--fits .tp-plan__promise-summary,
.tp-plan__promise.is--unclamped .tp-plan__promise-summary {
    cursor: default;
    pointer-events: none;
}
.tp-plan__promise.is--unclamped .tp-plan__promise-text {
    -webkit-line-clamp: unset;
}
/* When expanded: hide the clamp + dots, show the full paragraph */
.tp-plan__promise[open] .tp-plan__promise-text {
    display: none;
}
.tp-plan__promise[open] .tp-plan__promise-dots {
    display: none;
}
.tp-plan__promise-full {
    display: none;
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.tp-plan__promise[open] .tp-plan__promise-full {
    display: block;
}

/* ── Step detail: Previous proposals section (Steven 2026-08-06) ──────── */
.tp-prev-prop__pitch-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.tp-prev-prop__pitch-body {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.tp-prev-prop__steps {
    margin-top: var(--space-2);
}
.tp-prev-prop__steps-toggle {
    list-style: none;
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tp-prev-prop__steps-toggle::-webkit-details-marker { display: none; }
.tp-prev-prop__step-list {
    margin: var(--space-2) 0 0;
    padding: 0 0 0 var(--space-4);
}
.tp-prev-prop__step-item {
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
}
.tp-prev-prop__step-item strong {
    color: var(--text-primary);
}

/* ── Plan card: two-beat row layout (Steven 2026-08-06, updated 2026-08-07) ──────
   Each step renders two alternating beats: Beat A (agent sentence, numbers and
   words only) and Beat B (You sentence only). No avatars or identicons in plan rows.
   Text is full-width: wraps to the full body column, not confined to a narrow column.
   No em-dashes anywhere in copy.
────────────────────────────────────────────────────────────────────────────── */
.tp-beat {
    display: block;
    margin-top: var(--space-2);
}
.tp-beat:first-child {
    margin-top: 0;
}
.tp-beat__title {
    display: inline;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
/* You-beat title is a touch lighter to keep the agent beat as the lead */
.tp-beat--you .tp-beat__title {
    font-weight: 500;
    color: var(--text-secondary);
}
/* Promise expander attached under Beat A, full width */
.tp-beat .tp-plan__promise {
    margin-top: var(--space-1);
}

/* ==========================================================================
   ONE BALL task cards (spec /static/one-ball-plan.html, Steven 2026-08-12).
   The cards that live in the new Details feed. P2 = gallery mockups only;
   P3+ re-houses the live controls inside these shells.
   Laws: in-target cards are FLAT (no drop shadow, ever); pills straddle the
   top edge (left = step number + ask + check circle, right = the want tail);
   edge-to-edge at --feed-card-gutter-mobile with mobile-tight text; a card
   with nothing to do is an info card and carries no check circle.
   ========================================================================== */

/* Gallery-only phone column */
#one-ball-cards .ob-demo-phone { width: min(400px, 100%); max-width: 400px; margin: 0 auto; }
.ob-stream {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-6) var(--feed-card-gutter-mobile, 3px);
    background: var(--surface-app);
    border-radius: var(--radius-xl);
}
.ob-specimen { display: flex; flex-direction: column; gap: var(--space-2); }
/* CARD TOP law (Steven 2026-08-13): no machine label may float ABOVE a card,
   or it reads as card chrome. The format slug is gallery catalog chrome, not
   card content, so it sorts BELOW its specimen card (flex order) as a small
   muted caption, visually detached from the card by a hairline above it. */
.ob-slug {
    order: 1;
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    padding-left: var(--space-2);
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .05em;
    color: var(--text-muted);
}

/* The card. Flat: border only, no shadow. */
.ob-card {
    position: relative;
    overflow: visible;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
    box-shadow: none;
    padding: var(--space-6) var(--space-4) var(--space-4);
}
.ob-card--info { background: var(--surface-secondary); }
.ob-card--done { opacity: .6; }
.ob-card--done .ob-card__title { color: var(--text-secondary); }

/* Pills straddle the top edge (unified feed base law) */
.ob-card__pills {
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--space-3);
    right: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    transform: translateY(-50%);
    pointer-events: none;
}
.ob-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    min-height: calc(var(--size-6) + var(--space-1));
    border-radius: var(--radius-full);
    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;
}
.ob-pill--step { background: var(--accent-tertiary); color: var(--color-white); } /* purple = the stage color, Steven 2026-08-12 */
.ob-pill--note { background: var(--surface-tertiary); color: var(--text-secondary); border: 1px dashed var(--border-strong); }
.ob-pill--want {
    background: var(--surface-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    max-width: 50%;
    overflow: hidden;
}
.ob-pill--want .ob-pill__txt { overflow: hidden; text-overflow: ellipsis; }

/* The check circle on the step pill: checks when the task completes */
.ob-check {
    flex: none;
    box-sizing: border-box;
    width: var(--size-4);
    height: var(--size-4);
    border-radius: var(--radius-full);
    border: 2px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ob-check svg { width: 10px; height: 10px; display: none; }
.ob-check--done { background: var(--status-success); border-color: var(--status-success); color: var(--color-white); }
.ob-check--done svg { display: block; }

/* Text: mobile-tight, close to the card edges */
.ob-card__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}
.ob-card__help {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}
.ob-card__body-text {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

/* Controls */
.ob-opts { display: flex; flex-direction: column; gap: var(--space-2); }
.ob-opt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.ob-card--info .ob-opt,
.ob-card--done .ob-opt { background: var(--surface-tertiary); }
.ob-opt input { flex: none; }
.ob-opt__handle { flex: none; color: var(--text-muted); display: inline-flex; }
.ob-opt__num { flex: none; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-muted); min-width: 1.1em; }
.ob-input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--size-10);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
}
textarea.ob-input { min-height: auto; resize: vertical; }
.ob-fieldrow { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); }
.ob-fieldrow label { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-mono); }

/* Document tile (r184: review steps deliver sectioned documents) */
.ob-doc {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    margin: 0 0 var(--space-3);
}
.ob-doc__glyph {
    flex: none;
    width: var(--size-10);
    height: var(--size-10);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.ob-doc__main { min-width: 0; flex: 1; }
.ob-doc__name { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-primary); }
.ob-doc__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

/* Actions */
/* CTAs always right-aligned, primary at the far right (Steven 2026-08-12).
   row-reverse keeps primary-first markup while painting it rightmost. */
.ob-actions { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-4); }
.ob-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-10);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--accent-tertiary); /* purple, Steven 2026-08-12 */
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    cursor: pointer;
}
.ob-btn--ghost { background: var(--surface-secondary); border: 1px solid var(--border-strong); color: var(--text-primary); }
.ob-btn--sm { min-height: var(--size-8, 32px); padding: 0 var(--space-4); }
.ob-done-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--status-success-subtle, rgba(51, 230, 88, .15));
    color: var(--status-success);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* The agent presents (Steven 2026-08-12): no ask, nothing to complete.
   Solid pill = you act; subtle pill = the agent is presenting. */
.ob-pill--agent { background: var(--accent-tertiary-subtle); color: var(--accent-tertiary); }
.ob-img {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--surface-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 var(--space-2);
}
.ob-card__caption { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.ob-card__stamp { margin: var(--space-3) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ==========================================================================
   ONE BALL P1 skeleton layout (spec /static/one-ball-plan.html).
   Only renders behind ?oneball=1 on want_detail.
   ========================================================================== */
.ob-shell { display: flex; flex-direction: column; }
.ob-want-title {
    margin: var(--space-2) var(--space-2) var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-2xl, 24px);
    font-weight: 800;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}
.ob-dashes { border-top: 2px dashed var(--border-strong); margin: 0 var(--space-2); }
.ob-banner {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: 0 var(--space-2);
    padding: var(--space-4);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--accent-tertiary-subtle);
}
.ob-banner__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8, 32px);
    height: var(--size-8, 32px);
    border-radius: var(--radius-full);
    background: var(--accent-tertiary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 800;
}
.ob-banner__main { min-width: 0; flex: 1; }
.ob-banner__title { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; line-height: var(--leading-snug); color: var(--text-primary); }
.ob-banner__beat { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.ob-chip {
    display: inline-flex;
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ob-chip--you { background: var(--accent-tertiary); color: var(--color-white); }
.ob-chip--agent { background: var(--surface-tertiary); color: var(--text-secondary); }
.ob-chip--agent[aria-label="agent working"] { background: var(--color-white); color: var(--color-black); }
/* THE STRIP IS THE TOP (Steven 2026-08-12): at a your-action moment the step
   banner is GONE — this skinny green strip replaces it as the top of the
   screen, task cards stacked directly below. Brand green + black text is the
   btn-primary action language everywhere else on the site. */
.ob-strip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--accent-primary);
    color: var(--color-black);
    text-decoration: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.ob-strip__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8, 32px);
    height: var(--size-8, 32px);
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--accent-primary);
    font-family: var(--font-heading);
    font-weight: 800;
}
.ob-strip__label {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ob-strip__ask {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 800;
    line-height: var(--leading-snug);
}
.ob-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding: 0 var(--feed-card-gutter-mobile, 3px) var(--space-6);
}

/* ══ THE UNIFIED STRIP (Steven 2026-08-12, spec Part 5 + approved ASCII) ══
   One token for a plan step on the bid card, the Plans page and the Details
   banner. No boxes: dotted rules straight across between strips; number
   circle + check circle; state pill right; buttons right; the promise
   expander carries the agent's own words verbatim. */
.us-plan { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.us-row { border-top: 2px dotted var(--border-strong); padding: var(--space-3) var(--space-1); }
/* WHO HOLDS THE BALL, IN COLOR (Steven 2026-08-13, final same-day ruling):
   the agent's stage row wears the LIGHT PURPLE wash (Fable is purple), and
   the your-action row turns the Details-strip GREEN with a black disc and a
   black Take action button when it is the person's turn. Rows never change
   size. */
/* Steven 2026-08-13 second pass: the EXACT Details banner recipe
   (.ob-banner): the -subtle purple wash, the 32px solid-purple number,
   top-aligned. -soft still read too light beside the Details page. */
.us-row.is--current { background: var(--accent-tertiary-subtle); }
.us-row--action.us-action--live { background: var(--accent-primary); }
.us-action--live .us-action__num { background: var(--color-black); color: var(--color-white); }
.us-action--live .us-action__txt { color: var(--color-black); }
/* Steven 2026-08-13: the strip button speaks sentence case like every other
   pill (Details); it must not inherit the quiet row's uppercase mono voice. */
.us-action__btn {
    margin-left: auto;
    text-transform: none;
    letter-spacing: normal;
}
.us-action--live .us-action__btn { background: var(--color-black); color: var(--color-white); border: 0; }
.us-plan > li:last-child { border-bottom: 2px dotted var(--border-strong); }
/* Steven 2026-08-13 (third pass): on the plan card the dotted rules run EDGE
   TO EDGE — the card's own space-4 padding was cutting every separator short
   ("strange padding"). Each row bleeds across the padding (the same negative-
   margin edge-bleed the trajectory cap strip uses in wants.css) and takes the
   padding back as its own, so the text column does not move and the current-
   step wash runs full width with its rules. Scoped to .tp-plan so the bid
   card and the Details banner strips keep their own geometry. */
.tp-plan .us-row {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: calc(var(--space-4) + var(--space-1));
    padding-right: calc(var(--space-4) + var(--space-1));
}
.us-head { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.us-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 32px = the Details banner's number circle (--size-8), Steven 2026-08-13 */
    width: var(--size-8, 32px);
    height: var(--size-8, 32px);
    border-radius: var(--radius-full);
    background: var(--surface-tertiary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-sm);
}
.us-num.is--current { background: var(--accent-tertiary); color: var(--color-white); }
.us-num.is--done { background: var(--color-green-600); color: var(--color-white); }
.us-num.is--done svg, .us-check svg { width: 12px; height: 12px; }
.us-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-strong);
    color: transparent;
    background: none;
}
.us-check.is--done { border-color: var(--color-green-600); background: var(--color-green-600); color: var(--color-white); }
.us-check--sm { width: 16px; height: 16px; margin-left: auto; }
.us-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    /* Steven 2026-08-13: same size as the Detail page step title
       (.ob-card__title = text-lg / 800) so the two surfaces read alike. */
    font-weight: 800;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}
.us-row.is--done .us-title { color: var(--text-secondary); }
.us-chip-right { margin-left: auto; flex: none; }
/* Steven 2026-08-13: state pill BELOW the details, left-aligned with the
   text column, matching the Detail page. */
.us-detail { margin: var(--space-1) 0 0 calc(var(--size-8, 32px) + var(--space-2)); font-size: var(--text-sm); color: var(--text-secondary); }
/* Check circle removed 2026-08-13: bullets indent back to the title column. */
.us-bullets { margin: var(--space-2) 0 0; padding-left: calc(var(--size-8, 32px) + var(--space-2)); font-size: var(--text-sm); color: var(--text-secondary); }
.us-bullets li { margin: 2px 0; }
.us-promise { margin: var(--space-2) 0 0 calc(var(--size-8, 32px) + var(--space-2)); }
.us-promise__summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.us-promise__summary::-webkit-details-marker { display: none; }
/* Steven 2026-08-13: no OPEN word. The promise shows its first two lines in
   italics, then "... more"; tapping expands the agent's words verbatim. */
.us-promise__preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.us-promise__more {
    flex: none;
    align-self: flex-end;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-accent);
    white-space: nowrap;
}
.us-promise[open] .us-promise__preview,
.us-promise[open] .us-promise__more { display: none; }
/* Settled by promise-more.js (Steven 2026-09-03): same rule as the plan card. */
.us-promise.is--fits .us-promise__more,
.us-promise.is--unclamped .us-promise__more { display: none; }
.us-promise.is--fits .us-promise__summary,
.us-promise.is--unclamped .us-promise__summary { cursor: default; pointer-events: none; }
.us-promise.is--unclamped .us-promise__preview { -webkit-line-clamp: unset; }
.us-promise__full { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-style: italic; color: var(--text-primary); line-height: var(--leading-relaxed); }
.us-promise__extras { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.us-promise__extras p { margin: 2px 0; }
.us-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* == DELIVERY CARDS (D1-D3, Steven 2026-08-13, plan #delivery-cards) ==
   One card per delivered item; the agent's note card leads. */
.tp-dcard {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
    /* Looser breathing room on the step cards (Steven 2026-08-25). */
    padding: var(--space-4);
    margin-top: var(--space-4);
}
/* Step overview card: plain white, same border as every card
   (Steven 2026-08-13). */
.tp-dcard--note {
    background: var(--surface-primary);
}
.tp-dcard__kicker {
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tp-dcard__notetext {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}
.tp-dcard__standing {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-dcard__imgwrap { display: block; margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); }
.tp-dcard__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.tp-dcard__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.tp-dcard__icon { flex: none; font-size: var(--text-2xl); color: var(--text-secondary); }
.tp-dcard__meta { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.tp-dcard__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.tp-dcard__sub { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.tp-dcard__btns { flex: none; display: flex; gap: var(--space-1); }
.tp-dcard__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-9, 36px);
    height: var(--size-9, 36px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-size: var(--text-base);
    text-decoration: none;
}
.tp-dcard__btn:hover { background: var(--surface-sunken); color: var(--text-primary); }

/* == D4: answered cards gray out; a sent-back card turns purple; answers
   batch to the agent at step end (plan #delivery-cards). == */
.tp-dcard { position: relative; }
.tp-dcard--approved, .tp-dcard--changed { overflow: hidden; }
.tp-dcard--approved > *:not(.tp-dcard__submitted),
.tp-dcard--changed > *:not(.tp-dcard__submitted) { opacity: .45; }
.tp-dcard--changed { background: var(--accent-tertiary-subtle); border-color: var(--accent-tertiary); }
.tp-dcard__submitted {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}
.tp-dcard__submitted-label {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}
.tp-dcard--changed .tp-dcard__submitted-label { background: var(--accent-tertiary); }
.tp-dcard__answer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.tp-dcard__approve {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--status-success);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}
.tp-dcard__request {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
    text-decoration: underline;
}

/* == D5: the item page - the thing on top, the change thread below, the
   changes-left counter where the vote arrows sit on a channel card. == */
.tp-item-page { display: flex; flex-direction: column; }
.tp-item__head { display: flex; align-items: center; gap: var(--space-3); }
.tp-item__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    overflow-wrap: anywhere;
}
.tp-item__changes {
    flex: none;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--status-success-subtle);
    color: var(--status-success);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.tp-item__changes--spent { background: var(--surface-secondary); color: var(--text-muted); }
.tp-item__sub { margin: var(--space-1) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.tp-item__body { margin-top: var(--space-4); }
.tp-item__img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-default); }
.tp-item__text { font-size: var(--text-base); color: var(--text-primary); line-height: var(--leading-relaxed); white-space: pre-wrap; }
.tp-item__doc-h { margin: var(--space-4) 0 var(--space-1); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; }
.tp-item__doc-p { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-relaxed); }
.tp-item__doc-ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); font-size: var(--text-sm); color: var(--text-primary); }
.tp-item__download { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); }
.tp-item__pending {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
}
.tp-item__pending-badge {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-secondary);
}
.tp-item__pending-note { margin: var(--space-1) 0 0; font-style: italic; color: var(--text-primary); }
.tp-item__thread { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.tp-item__msg { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.tp-item__msg--you { background: var(--surface-secondary); }
.tp-item__msg-who { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; color: var(--text-muted); }
.tp-item__msg-body { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-primary); }
.tp-item__form { margin-top: var(--space-4); }
.tp-item__input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    resize: vertical;
}
.tp-item__form-row { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.tp-item__spent { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }

/* State pill rides the bottom buttons line, pushed to the left. */
.us-actions__state { margin-right: auto; flex: none; }
/* The skinny your-action strips in the plan rhythm */
.us-row--action { padding: var(--space-2) var(--space-1); }
.us-action--quiet {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
}
.us-action__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--surface-tertiary);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    /* Steven 2026-08-13: this 20px circle centers inside the same 32px
       column the step rows' us-num circles occupy, so every number in the
       plan sits on one vertical line and the text column starts level. */
    margin: 0 calc((var(--size-8, 32px) - 20px) / 2);
}
.us-row--action .ob-strip { margin: 0; border-radius: var(--radius-md); }

/* ══ P3b-lite (Steven 2026-08-12): the stage holds MULTIPLE cards ══
   The stage card is NOT a box around the work. The wrapper goes transparent
   and each work zone inside stands as its own flat card, per the one-ball
   card gallery (/static/one-ball-cards.html). A control card keeps its
   button at the bottom of ITS card, right-aligned. */
.is--oneball .ob-card--work {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}
.is--oneball .ob-card--work > .ob-card__pills {
    position: static;
    transform: none;
    margin: 0 var(--space-3) var(--space-2);
    pointer-events: auto;
}
.is--oneball .ob-card--work .tp-woy-attached,
.is--oneball .ob-card--work .tp-har-blocks,
.is--oneball .ob-card--work .tp-approve,
.is--oneball .ob-card--work form.tp-reply {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
    padding: var(--space-4);
    margin-top: var(--space-3);
}
.is--oneball .ob-card--work .tp-har-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
/* The topper speaks the Plans page reading: toll-context block, tightened
   margins for the sticky topper. Loads after wants.css so this wins. */
.ob-topper__context { margin: 0 var(--space-2) var(--space-3); }
/* Choice options carry their descriptions (Steven 2026-08-12). The base
   row styling lives above (~3309); two-line options top-align the radio. */
.tp-har-choice-label { align-items: flex-start; }
.tp-har-choice-text { display: flex; flex-direction: column; min-width: 0; }
.tp-har-choice-name { font-weight: var(--font-semibold, 600); }
.tp-har-choice-detail { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); }
.ob-zone { display: flex; flex-direction: column; gap: var(--space-5); }
.ob-zone__marker {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) 0;
    border-top: 2px dotted var(--border-strong);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
/* Completed steps are history, not disabled content. Keep the record at full
   contrast; the controls inside it carry their own disabled treatment. */
.ob-zone--past { opacity: 1; }
.ob-pinbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-app);
    border-top: 1px solid var(--border-default);
}
.ob-meter {
    margin-left: auto;
    display: inline-flex;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--surface-tertiary);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* One-ball Detail page mode (Steven 2026-08-12): the outer ticket card is
   REMOVED — content sits on the app surface. overflow:visible is required
   for the sticky topper below. */
.want-step-detail.tp-page.is--oneball {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    /* toll-detail-enter fills BOTH, so it retains an identity transform
       forever — a transform ancestor turns position:fixed into
       position:relative-to-it, which un-pinned the bottom bar. */
    animation: none;
}
body.drawer-layout:has(.want-step-detail.is--oneball) .drawer-panel {
    background: var(--surface-app);
}
/* THE TOPPER DOES NOT STICK (Steven 2026-09-11). It used to be pinned under
   the Toll Bench header at its own rank, which is how the green take-action
   band could ride up and paint OVER that header once the tape settled. The
   band is printed inside the step card now, in flow, so the topper is just a
   band of paper: nothing in the sheet sticks except the want title card. */
.ob-topper {
    background: var(--surface-app);
    padding: var(--space-2) 0;
}
.ob-dashes--bottom { margin-top: var(--space-3); }

/* Topper polish (Steven 2026-08-12, screenshot): tabs sit flush against the
   toll-bench header (no gap), the dotted line under the title runs all the
   way to the edges, and the bottom edge below the banner is one SOLID line. */
.want-detail:has(.want-step-detail.is--oneball) {
    padding-top: 0;
    /* Normalize side padding to space-4 on every viewport: the one-ball
       full-bleed cancellations assume 16px, but .want-detail drops to 12px
       on mobile, which bled the cards 1px past the screen edge and knocked
       the number circles out of alignment. */
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.is--oneball .ob-topper {
    margin: 0 calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.is--oneball .ob-topper .ob-dashes {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
}
.ob-dashes--bottom { border-top-style: solid; }

/* Banner fills the whole square (Steven 2026-08-12): full-bleed purple, no
   rounding, flush against the dashed line above and the solid line below —
   same as the current-step wash on the Plans page. */
.is--oneball .ob-banner {
    margin: 0 calc(-1 * var(--space-4));
    border-radius: 0;
}
.is--oneball .ob-strip {
    margin: 0 calc(-1 * var(--space-4));
    border-radius: 0;
}
.is--oneball .ob-topper .ob-dashes { margin-bottom: 0; }
.is--oneball .ob-dashes--bottom { margin-top: 0; }

/* The duo pill (Steven 2026-08-12): the step number in a circle matching the
   banner circle, with the action pill attached directly to it (no dot
   separators, no zone marker rows). The want pill reads in the title font so
   you can see what it is you want. */
.ob-duo { display: inline-flex; align-items: center; }
.ob-duo__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--size-6) + var(--space-1));
    height: calc(var(--size-6) + var(--space-1));
    border-radius: var(--radius-full);
    background: var(--accent-tertiary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-xs);
}
/* Touching, not overlapping (Steven 2026-08-12): the circle sits flush against
   the pill, both at the standard token size. */
.ob-duo > .ob-pill { margin-left: -2px; }
.ob-pill--want {
    font-family: var(--font-heading);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

/* Pinned bar is FIXED to the bottom layer whenever you are in the detail
   (Steven 2026-08-12): it never slides up. The feed gets clearance so the
   last card is never hidden behind it. Fail agent is red. */
.is--oneball .ob-pinbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0;
}
@media (min-width: 768px) {
    .is--oneball .ob-pinbar {
        left: calc(var(--layout-rail-width, 88px) + var(--layout-sidebar-width, 280px));
    }
}
.is--oneball .ob-feed { padding-bottom: calc(var(--size-16, 64px) + var(--space-6)); }
.ob-btn--danger {
    background: var(--btn-danger-bg, var(--status-error));
    color: var(--btn-danger-color, var(--color-white));
    border: 0;
}

/* Wider cards + aligned circles (Steven 2026-08-12): the feed cancels the
   page side padding so cards sit at the 3px feed gutter from the screen
   edge, and the duo number circle lines up with the banner number circle
   (banner: full bleed + space-4 padding = 16px; card: 3px edge + 13px pill
   inset = 16px). */
.is--oneball .ob-feed {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
}
.is--oneball .ob-card__pills {
    /* minus the 1px card border: absolute offsets are border-box relative */
    left: calc(var(--space-4) - var(--feed-card-gutter-mobile, 3px) - 1px);
    right: calc(var(--space-4) - var(--feed-card-gutter-mobile, 3px) - 1px);
}

/* NAV always up top (Steven 2026-08-12): in one-ball mode the Targets/Plans/
   Detail tabs stick right under the toll-bench header and never slide away;
   the topper sticks below THEM. Extra space between the nav and the title is
   removed. */
.want-detail:has(.want-step-detail.is--oneball) .toll-tabs {
    position: sticky;
    top: var(--size-16); /* 64px mobile header */
    z-index: 7;
    background: var(--surface-app);
    margin-bottom: 0;
}
/* The one-ball topper does not stick (Steven 2026-09-11): on the Detail
   sheet the green band is printed inside the step card, in flow, and a
   second sticky box under the header is what let it paint over the header. */
.is--oneball .ob-topper {
    padding-top: 0;
    position: static;
    top: auto;
    z-index: auto;
}
@media (min-width: 768px) {
    .want-detail:has(.want-step-detail.is--oneball) .toll-tabs {
        top: calc(var(--size-16) + var(--space-1)); /* 68px desktop header */
    }
}

/* P3 (2026-08-12): the real work zone (details_page) renders INSIDE the
   current stage card. Strip the embedded ticket chrome — the ob-card is the
   surface — and hide the stepband breadcrumb (the banner above carries it). */
.is--oneball .ob-card--work .tp-detail.tp-ticket {
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    animation: none;
}
.is--oneball .ob-card--work .tp-stepband { display: none; }
.is--oneball .ob-card--work .tp-perf { display: none; }

/* ══ P3b full (B4, 2026-08-13): ONE CARD PER UNIT OF WORK ══════════════════
   The stage's work zone splits so EACH HAR block, EACH attached deliverable,
   and EACH typed presentation block is its own flat ob-card wearing the CARD
   TOP treatment. The wiring is unchanged; the JS enhancer in _one_ball.html
   adds the ob-card classes + the straddling pills in place (it never moves a
   form field). These rules dress the split.

   The stage's single top pill (on .ob-card--work) is redundant once every unit
   carries its own — hide it. */
.is--oneball .ob-card--work[data-ob-split="1"] > .ob-card__pills { display: none; }

/* The HAR form is now a bare container: no card box around the whole set. Each
   .tp-har-block INSIDE it is the card. This supersedes the P3b-lite rule that
   card-ified the whole form. */
.is--oneball .ob-card--work form.tp-har-blocks {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    margin-top: 0;
}
/* The attached zone becomes a bare container too; each row is a card. */
.is--oneball .ob-card--work .tp-woy-attached {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    margin-top: 0;
}
/* The zone's uppercase machine-ish label ("ATTACHED FOR REVIEW") is dropped —
   each deliverable now stands on its own presentation card. */
.is--oneball .ob-card--work .tp-woy-attached__label { display: none; }

/* Each HAR block, carded: flat ob-card look, overflow visible so the pills can
   straddle the top edge, room at the top for the pill row. Resets the base
   .tp-har-block chrome (rounded md + hidden overflow) to the ob-card shape. */
.is--oneball .ob-card--work .tp-har-block.ob-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
    overflow: visible;
    margin: var(--space-5) 0 0;
    padding: var(--space-6) var(--space-4) var(--space-4);
}
/* The machine format header (number + "single_choice · CHOOSE" style pill +
   Required/Optional chips) dies in one-ball mode — the CARD TOP pill carries
   the ask + count, the required state rides the block itself. */
.is--oneball .ob-card--work .tp-har-block.ob-card .tp-har-block__header { display: none; }
.is--oneball .ob-card--work .tp-har-block.ob-card .tp-har-block__body { padding: 0; }

/* Each attached deliverable row, carded (AGENT PRESENTS: presentation card,
   subtle pill, no check circle). Reset the row flex to a card block. */
.is--oneball .ob-card--work .tp-woy-attached__row.ob-card {
    display: block;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
    overflow: visible;
    margin: var(--space-5) 0 0;
    padding: var(--space-6) var(--space-4) var(--space-4);
}
.is--oneball .ob-card--work .tp-woy-attached__row.ob-card:first-of-type { border-top: 1px solid var(--border-default); padding-top: var(--space-6); }
/* The row's inline icon/meta stack flows under the pill on the card. */
.is--oneball .ob-card--work .tp-woy-attached__row.ob-card .tp-woy-attached__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
}

/* The final decision keeps its own card (approve / choice submit / request
   changes). Under P3b-lite the whole approve zone was a card; keep that. The
   reply "ask a question" stays its own card too (P3b-lite rule holds). */
.is--oneball .ob-card--work .tp-approve,
.is--oneball .ob-card--work form.tp-reply {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    margin-top: var(--space-5);
}

/* The checked state on a completed action card: the CARD TOP check circle
   fills green, the card recedes a touch (Steven: completion never deletes; the
   card flips to its completed state). */
.is--oneball .ob-card--checked .ob-check {
    background: var(--status-success);
    border-color: var(--status-success);
    color: var(--color-white);
}
.is--oneball .ob-card--checked .ob-check svg { display: block; }

/* ── Typed presentation block bodies (Block Law shapes) ──────────────────────
   NOTE reuses .ob-card__body-text (already defined). CHOICE reuses .ob-opts /
   .ob-opt (already defined). These dress CHECKLIST, KEY_FACTS, STEPS, NEED. */
.ob-card--block { margin: var(--space-5) 0 0; }
.ob-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ob-checklist__item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-snug); }
.ob-checklist__box {
    flex: none;
    box-sizing: border-box;
    width: var(--size-4);
    height: var(--size-4);
    margin-top: 1px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: var(--surface-secondary);
}
.ob-facts { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ob-facts__row { display: flex; gap: var(--space-3); align-items: baseline; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-soft); }
.ob-facts__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ob-facts__label {
    flex: none;
    min-width: 40%;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.ob-facts__value { margin: 0; font-size: var(--text-sm); color: var(--text-primary); }
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ob-steps__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.ob-steps__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    border-radius: var(--radius-full);
    background: var(--surface-tertiary);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
}
.ob-steps__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-steps__title { font-size: var(--text-sm); font-weight: var(--font-semibold, 600); color: var(--text-primary); }
.ob-steps__time,
.ob-steps__approve { font-size: var(--text-xs); color: var(--text-muted); }
.ob-needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ob-needs__row { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-primary); }
.ob-needs__icon { flex: none; color: var(--accent-tertiary); margin-top: 2px; }

/* Stage meter LIT state (P5): the last completion lights it (Steven). */
.ob-meter.is--lit {
    background: var(--status-success-subtle, rgba(51, 230, 88, .15));
    color: var(--status-success);
}

/* FAIL POPUP (Steven 2026-08-13): failing an agent asks what happened first,
   in the person's words, then the person picks the ending - fail and repost
   (r180, back on the bench) or fail and abandon (the want closes for good).
   Bottom sheet over the pinbar; tokens only. */
.ob-failmodal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center; }
.ob-failmodal[hidden] { display: none; }
.ob-failmodal__scrim { position: absolute; inset: 0; background: var(--color-black); opacity: .5; }
.ob-failmodal__sheet {
    position: relative;
    width: min(480px, calc(100% - var(--space-4)));
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.ob-failmodal__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); color: var(--text-primary); }
.ob-failmodal__help, .ob-failmodal__foot { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.ob-failmodal__err { margin: 0; font-size: var(--text-sm); color: var(--status-error); }
.ob-failmodal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* ── Details rebuild (Steven 2026-08-13): history scroll + statement card +
   Ask popup. Additive rules only. ─────────────────────────────────────── */

/* The agent-working simple card: the promise as a plain statement. */
.tp-ac-statement {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text-primary);
}
.tp-ac-askrow { display: flex; }

/* The Ask popup — same sheet pattern as the one-ball fail popup. */
.tp-askmodal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center; }
.tp-askmodal[hidden] { display: none; }
.tp-askmodal__scrim { position: absolute; inset: 0; background: var(--color-black); opacity: .5; }
.tp-askmodal__sheet {
    position: relative;
    width: min(480px, calc(100% - var(--space-4)));
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.tp-askmodal__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); color: var(--text-primary); }
.tp-askmodal__hint { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.tp-askmodal__form { display: flex; flex-direction: column; gap: var(--space-3); }
.tp-askmodal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* History: the done step's full content stays fully readable. Links and
   artifact viewers remain live; only form controls are disabled by the
   <fieldset disabled> wrapper and action buttons are removed. */
.tp-detail.is--history { opacity: 1; }
.tp-history-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tp-detail.is--history .tp-har-actions,
.tp-detail.is--history .tp-choose__buttons,
.tp-detail.is--history .tp-woy-rchange,
.tp-detail.is--history .tp-woy-tip,
.tp-detail.is--history .tp-har-review-btns,
.tp-detail.is--history .tp-har-block__error { display: none; }

/* The done card carries full content now. Status colors distinguish history;
   opacity must not wash out the title, metadata, or readable record. */
.ob-card--done.ob-card--history { opacity: 1; }
.ob-card--history > .ob-card__pills,
.ob-card--history > .ob-card__title,
.ob-card--history > .ob-card__stamp { opacity: 1; }
.ob-card--history > .ob-card__title { color: var(--text-primary); }


/* == The GREEN complete-the-step pinbar (Steven 2026-08-13) == */
.ob-pinbar--go {
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ob-pinbar__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8, 32px);
    height: var(--size-8, 32px);
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--accent-primary);
    font-family: var(--font-heading);
    font-weight: 800;
}
.ob-pinbar__label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-base);
    color: var(--color-gray-900);
    white-space: nowrap;
}
.ob-pinbar__spacer { flex: 1; }
.ob-pinbar--go .ob-meter { display: inline-flex; gap: 6px; align-items: center; }
.ob-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-gray-900);
    background: transparent;
    display: inline-block;
}
.ob-dot.is--done { background: var(--color-gray-900); }
/* THIS IS NOT WORKING leaves the one-ball page: the pinbar's Fail agent is
   the one fail door (Steven 2026-08-13). The step page macro is untouched. */
.is--oneball .tp-fail { display: none; }


/* == The PLAN cap on the plan card (Steven 2026-08-13). == */
.tp-plan__cap {
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid var(--border-subtle);
}

/* == The agent-working letter wave (Steven 2026-08-13): each letter lifts in
   turn, the wave runs through the pill, rests a beat, runs again. Renders
   ONLY in agent-court states - a your-action surface never shows it. == */
.ob-chip--pulse { white-space: pre; }
.ob-chip--pulse i {
    font-style: normal;
    display: inline-block;
    animation: bohLetterWave 2.4s infinite;
    animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes bohLetterWave {
    0%, 14%, 100% { transform: translateY(0); }
    7% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .ob-chip--pulse i { animation: none; }
}

/* == Pinbar, agent-court state: white bar, the step number in the purple
   disc the banner wears, the pulsing agent-working pill. == */
.ob-pinbar--agent {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-primary);
    border-top: 1px solid var(--border-default);
}
.ob-pinbar__num--agent {
    background: var(--accent-tertiary);
    color: var(--color-white);
}


/* == Card answer row v2 (Steven 2026-08-13): bubble+text, eye, download,
   green Approve on the right. == */
.tp-dcard__answer { justify-content: flex-start; }
.tp-dcard__request { display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; }
.tp-dcard__answer form { margin-left: auto; }
.tp-dcard__approve iconify-icon { font-size: var(--text-base); }

/* == Pinbar done state == */
.ob-pinbar.is--done { opacity: .65; }
.ob-pinbar.is--done .ob-btn--danger { pointer-events: none; opacity: .5; }

/* == Item page v2: big back link, zoom lightbox with the giant X == */
.tp-item__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
}
.tp-item__zoom { flex: none; }
.tp-item__img { cursor: zoom-in; }
.tp-item__form-row { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }
.tp-item__lightbox {
    position: fixed;
    inset: 0;
    z-index: 10200;
    background: rgba(10, 10, 14, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}
.tp-item__lightbox[hidden] { display: none; }
.tp-item__lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-lg); }
.tp-item__lightbox-x {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: var(--size-12, 48px);
    height: var(--size-12, 48px);
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-black);
    font-size: var(--text-3xl);
    line-height: 1;
    cursor: pointer;
}


/* == The document ON its card (one card, one action - Steven 2026-08-13) == */
.tp-dcard__doc {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}
.tp-dcard__doc-h { margin: var(--space-3) 0 var(--space-1); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; color: var(--text-primary); }
.tp-dcard__doc-h:first-child { margin-top: 0; }
.tp-dcard__doc-p { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-relaxed); }
.tp-dcard__doc-ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); font-size: var(--text-sm); color: var(--text-primary); }
.tp-dcard__doc-ul li { margin: 2px 0; }
.tp-dcard__doc-img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-default); margin: var(--space-2) 0; }

/* == RULE 233 (Steven 2026-09-05) - THE CARDS BLOCK ==========================
   One card per thing the agent hands back, each named field a label and a
   value. ONE class set for all three readers (the step card, the outcome
   reader and the item page), because a shape written three times drifts three
   ways - the odds card already taught us that. */
.tp-cards { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: var(--space-2); }
.tp-cards__title { margin: var(--space-3) 0 var(--space-1); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; color: var(--text-primary); }
.tp-cards__title:first-child { margin-top: 0; }
.tp-cards__item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface-secondary); }
.tp-cards__row { display: flex; gap: var(--space-2); align-items: baseline; margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.tp-cards__row:last-child { margin-bottom: 0; }
.tp-cards__label { flex: 0 0 auto; min-width: 92px; color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-cards__val { flex: 1 1 auto; color: var(--text-primary); line-height: var(--leading-relaxed); overflow-wrap: anywhere; }
@media (max-width: 480px) {
    .tp-cards__row { display: block; }
    .tp-cards__label { min-width: 0; display: block; }
}


/* == Repost state row under the chart legend (Steven 2026-08-13): quiet
   "Active" + a small light-gray Stop reposting on the right. == */
.target-trajectory__repostrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.target-trajectory__repost-state {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--status-success);
}
.target-trajectory__stopbtn {
    border: none;
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}
.target-trajectory__stopbtn:hover { background: var(--surface-sunken); color: var(--text-primary); }


/* == Questions on the promise card (Steven 2026-08-13) == */
.tp-dcard__asked {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
}
.tp-dcard__asked-q { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--text-primary); }
.tp-dcard__asked-note { margin: var(--space-1) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.tp-dcard__asked-a { margin: 0 0 var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--text-primary); font-style: italic; }


/* Back-to-step anchors land clear of the sticky topper (2026-08-13). */
.ob-zone__anchor { display: block; position: relative; top: -140px; height: 0; }


/* == The proper green Approve on cards (Steven 2026-08-13) == */
.tp-dcard__approve {
    background: var(--accent-primary);
    color: var(--color-gray-900);
}

/* == Tip/Save: black, white text, purple on hover == */
.boh-tipbtn {
    /* Same metrics as .ob-btn--sm so the pinbar pair match exactly
       (Steven 2026-08-13: the two buttons wore different sizes and fonts). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--size-8, 32px);
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.boh-tipbtn:hover { background: var(--accent-tertiary); color: var(--color-white); }
/* the pinbar Tip wears the same coat */
.ob-pinbar .ob-btn--ghost { background: var(--color-black); color: var(--color-white); border: none; }
.ob-pinbar .ob-btn--ghost:hover { background: var(--accent-tertiary); color: var(--color-white); }


/* == FLAGS fold: closed by default, just the word and a chevron
   (Steven 2026-08-13). == */
.tp-flags-fold__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}
.tp-flags-fold__summary::-webkit-details-marker { display: none; }
.tp-flags-fold__chev { margin-left: auto; font-size: var(--text-base); color: var(--text-muted); transition: transform 0.2s ease; }
.tp-flags-fold[open] .tp-flags-fold__chev { transform: rotate(180deg); }
.tp-flags-fold .tp-flag { margin-top: var(--space-3); }


/* == Person Stripe connect (Steven 2026-08-13) == */
/* RULE 236: a settled account row reads as done and stays quiet -- the card
   is about the action, and a row that is finished should not shout. */
.tp-har-connect__settled {
  color: var(--text-secondary);
}
.tp-har-connect__live {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-weight: 600;
    color: var(--status-success);
}
.tp-har-connect__btn { display: inline-flex; align-items: center; gap: var(--space-2); }

/* == RULE 236 (Steven 2026-09-07): THE THREE DOORS ON ONE ROW ==
   Steven drew them side by side under the row -- your own account, a new
   one, or the agent's -- because a person who has no Gmail must SEE the way
   through, not find it in a paragraph. Door one is the filled button; the
   other two are outlined, so the row reads as one choice with a default and
   not as three equal commands. */
.tp-har-doors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.tp-har-doors__door { flex: 0 1 auto; }
/* The service marks (2026-09-10): one button per service, its logo on it,
   replacing the select. Tokens only. */
.tp-har-service__marks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.tp-har-service__mark {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-card); color: var(--text-primary);
    font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.tp-har-service__mark:hover { background: var(--bg-hover); }
.tp-har-service__mark.is--current { border-color: var(--border-strong); background: var(--surface-secondary); cursor: default; }
.tp-har-service__mark:disabled { opacity: .6; cursor: progress; }
.tp-har-service__logo { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; border-radius: var(--radius-xs); }
.tp-har-service__one { display: inline-flex; align-items: center; gap: var(--space-2); }
.tp-har-doors__door .tp-har-service__logo { width: 1.1rem; height: 1.1rem; }
.tp-har-connect .tp-har-doors .tp-btn--ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}
.tp-har-connect .tp-har-doors .tp-btn--ghost:hover {
    background: var(--surface-secondary);
    color: var(--text-primary);
}
/* == THE KEY LANE (Steven 2026-09-09): the paste box ==
   A service that opens with a pasted key has no sign-in screen to send
   anybody to, so door one opens this instead, in place, under the row. It
   stays closed (the hidden attribute) until it is asked for. */
.tp-har-key {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.tp-har-key__input { max-width: 44ch; font-family: var(--font-mono, monospace); }
.tp-har-key__save { align-self: flex-start; margin-top: var(--space-2); }
.tp-har-key__status { color: var(--text-secondary); }
/* The service the row runs on. A select only when there is more than one
   service to pick; one option prints as plain help text instead. */
.tp-har-service {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.tp-har-service__select { max-width: 24ch; }

/* == WHICH SHEET? (2026-09-09) -- the resource pick on a connected row. The
   account is linked and the row still owes an answer, so this sits under the
   green "Connected ... pick the sheet" line and reads as part of that row,
   not as a second card. == */
.tp-har-resource {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.tp-har-resource__select { max-width: 32ch; }
.tp-har-resource__paste,
.tp-har-resource__new {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    flex-wrap: wrap;
}
.tp-har-resource__paste .tp-har-input,
.tp-har-resource__new .tp-har-input { max-width: 32ch; }


/* == Connector buttons: black, purple on hover, white text
   (Steven 2026-08-13). == */
.tp-har-connect .tp-btn,
.tp-har-connect__btn {
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    transition: background 0.15s ease;
}
.tp-har-connect .tp-btn:hover,
.tp-har-connect__btn:hover {
    background: var(--accent-tertiary);
    color: var(--color-white);
}


/* == Video blocks (Steven's embed law, 2026-08-13): 16:9, on the card == */
.tp-dcard__doc-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: var(--space-2) 0 var(--space-3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-black);
}
.tp-dcard__doc-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Click-to-load YouTube facade: a thumbnail + play button that mounts the
   real iframe only on tap. A 30-day delivery = ~30 video blocks; mounting a
   live player for each OOM-kills mobile tabs, so we defer every player. */
.tp-ytfacade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
}
.tp-ytfacade__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tp-ytfacade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--space-12, 48px);
    height: var(--space-12, 48px);
    border-radius: var(--radius-full);
    background: var(--color-black);
    opacity: 0.82;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.tp-ytfacade__play::before {
    content: "";
    display: block;
    margin-left: var(--space-1, 4px);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--color-white);
}


/* == Day dividers inside a time-bound document (Daily Cards P1) == */
.tp-dcard__day {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-1);
    padding-top: var(--space-3);
    border-top: 2px dotted var(--border-strong);
}
.tp-dcard__day:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.tp-dcard__day-ord {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-tertiary);
}
.tp-dcard__day-title { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-base); color: var(--text-primary); }
.tp-dcard__day-date { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }


/* == Finish rating card (Steven 2026-08-14): 1-5 stars ride the last approve == */
.tp-dcard--rate { border: 1px solid var(--border-default); }
.tp-rate { display: flex; gap: var(--space-2); padding: var(--space-2) 0; }
.tp-rate__opt { cursor: pointer; position: relative; }
.tp-rate__opt input { position: absolute; opacity: 0; pointer-events: none; }
.tp-rate__star { font-size: var(--text-2xl); color: var(--border-default); transition: color 120ms ease, transform 120ms ease; }
.tp-rate__opt:hover .tp-rate__star { color: var(--color-yellow-400); }
.tp-rate__opt.is-on .tp-rate__star { color: var(--color-yellow-400); transform: scale(1.06); }
.tp-rate__note { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); }
.tp-dcard--rate-flash { animation: tpRateFlash 0.8s ease 2; }
@keyframes tpRateFlash { 50% { box-shadow: 0 0 0 3px var(--color-yellow-400); } }
.tp-satisfaction__box iconify-icon { color: var(--color-yellow-400); }


/* == PDF read-in-place + calendar invites (Steven 2026-08-14) == */
.tp-dcard__pdf { width: 100%; height: 420px; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.tp-dcard__calbtn { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-primary); text-decoration: none; }
.tp-dcard__calbtn:hover { color: var(--accent-primary); }

/* TIMED DELIVERY (r188/r189): the offer block inside the approval card.
   Tokens only. */
.tp-daily-offer {
  margin: var(--space-3, 12px) 0;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-surface-sunken, #f0ede8);
  border: 1px solid var(--color-border, #e5e2dc);
  border-radius: var(--radius-md, 10px);
}
.tp-daily-offer__head {
  margin: 0 0 var(--space-1, 4px);
  font-family: var(--font-heading, sans-serif);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
.tp-daily-offer__sub {
  margin: 0 0 var(--space-2, 8px);
  color: var(--color-text-secondary, #6b6b6b);
  font-size: var(--text-sm, 0.875rem);
}
.tp-daily-offer__opt {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: var(--space-1, 4px) 0;
  font-size: var(--text-sm, 0.875rem);
}

/* Exact email approval rides the normal step Details card pipeline. */
.tp-email-approval__meta dt {
  color: var(--accent-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-bold, 700);
  letter-spacing: 0;
  text-transform: uppercase;
}
.tp-email-approval__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3, 12px);
  margin: var(--space-3, 12px) 0 0;
}
.tp-email-approval__meta div {
  min-width: 0;
}
.tp-email-approval__meta dd {
  margin: var(--space-1, 4px) 0 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}
.tp-email-approval__body {
  margin: var(--space-3, 12px) 0 0;
  padding: var(--space-3, 12px);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-primary);
  font: inherit;
  line-height: 1.5;
}
/* RULE 235: the lane under the From line, and the one sentence about where a
   reply lands. Existing tokens only. */
.tp-email-approval__lane {
  color: var(--text-tertiary, var(--text-secondary));
}
.tp-email-approval__note {
  margin: var(--space-2, 8px) 0 0;
  color: var(--text-secondary);
}
.tp-email-approval__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
}
.tp-email-approval__actions form {
  margin: 0;
}
/* Reject-with-feedback: full row under the approve button; the textarea and
   the Reject button stack so the feedback box reads as part of the action. */
.tp-email-approval__reject {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  align-items: flex-start;
}
.tp-email-approval__reject .tp-reply__input {
  width: 100%;
  box-sizing: border-box;
}
.tp-btn--danger {
  color: var(--color-error, #c0392b);
  border-color: var(--color-error, #c0392b);
}
.tp-btn--danger:hover {
  background: var(--color-error, #c0392b);
  color: #fff;
}
.tp-contact-edit {
  margin-top: var(--space-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.tp-contact-edit__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-bold, 700);
  text-transform: uppercase;
  color: var(--accent-tertiary);
}
.tp-contact-edit__input {
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  box-sizing: border-box;
}
.tp-contact-edit__textarea {
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  resize: vertical;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .tp-email-approval__meta {
    grid-template-columns: 1fr;
  }
}

/* History receipts read as flat sections at full card width (Steven
 * 2026-08-27): a done step in the details scroll no longer wraps its
 * INFORMATION / OUTCOME in boxed cards-inside-the-card; the content runs
 * out to the same edges the current step overview uses, with a hairline
 * between sections. */
.tp-ticket.is--history .tp-sec {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-3) 0;
  margin-bottom: 0;
  border-top: 1px solid var(--border-soft);
}

.tp-ticket.is--history .tp-sec:first-child {
  border-top: 0;
  padding-top: 0;
}

/* The conversation inside the Ask sheet (Steven 2026-08-27): replies read
 * where questions are written. Scrolls when long; composer stays put. */
.tp-askmodal__thread {
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: var(--space-3);
}


/* == r210 see-what-you-grant card (Nango middle wiring, 2026-09-02) ==
   Renders before any connect button and before the Grant control: provider,
   plain-words scopes from the registry, agent's intended use, revoke path.
   Raw provider scope URLs are small print only. */
.tp-grant-see {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}
.tp-grant-see__provider {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.tp-grant-see__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}
.tp-grant-see__scopes {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.tp-grant-see__scope {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.tp-grant-see__scope iconify-icon {
    color: var(--status-success);
    flex-shrink: 0;
    margin-top: var(--space-1);
}
.tp-grant-see__scope--destructive iconify-icon { color: var(--status-error); }
.tp-grant-see__use,
.tp-grant-see__limit,
.tp-grant-see__revoke {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.tp-grant-see__revoke { margin-bottom: 0; }
.tp-grant-see__raw {
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════════════
   r211 — THE ONE ASK-CARD SHELL
   Every card the person answers wears the same chrome: pill, title, lede,
   body, the agent's words (quoted + attributed), actions, one foot line.
   Design tokens only.
   ══════════════════════════════════════════════════════════════════════ */
.tp-askcard { container-type: inline-size; }

/* PILLS STRADDLE THE TOP EDGE — the unified feed base law (see
   .ob-card__pills above). The category pill rides the card's top border on
   the left; the context chip rides the same line on the right. Steven
   2026-09-02: they were sitting INSIDE the card, which is not the pattern
   every other card on the site uses. */
.tp-askcard {
    /* Every ask card is a CARD -- a pill can only straddle an edge that
       exists. tp-choose and tp-provide had no box of their own, so their
       pill floated over nothing and the card below it collided. */
    position: relative;
    background: var(--surface-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6) var(--space-4) var(--space-4);
    margin-bottom: var(--space-5);
}
.tp-askpills {
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--space-3);
    right: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    transform: translateY(-50%);
    pointer-events: none;
}
/* ONE stage colour for every ask pill -- purple, the same colour the
   numbered block pills wear on the details page (ob-pill--step). The pill
   says WHAT KIND of moment this is; it is not a status light, so it does not
   change colour per ask. */
.tp-pill.is--connect,
.tp-pill.is--yourturn,
.tp-pill.is--approve,
.tp-pill.is--choose,
.tp-pill.is--provide {
    background: var(--accent-tertiary);
    color: var(--color-white);
}
.tp-pill--meta {
    background: var(--surface-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-heading);
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-askhead { margin-bottom: var(--space-3); }
.tp-askhead__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}
.tp-askhead__lede {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* THE AGENT'S WORDS ARE A TEXT MESSAGE — its picture, a bubble, in quotes,
   word for word (Steven 2026-09-02). It has to LOOK like someone else
   talking, because under r211 it is the only agent-written text on the card. */
.tp-says {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}
.tp-says__avatar { flex-shrink: 0; padding-top: var(--space-4); }
.tp-says__col { min-width: 0; flex: 1; }
.tp-says__who {
    margin: 0 0 var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
}
.tp-says__bubble {
    position: relative;
    margin: 0;
    padding: var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    border-top-left-radius: var(--radius-xs);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-primary);
}
/* the little tail, so it reads as a message and not a note box */
.tp-says__bubble::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -7px;
    width: 12px;
    height: 12px;
    background: var(--surface-sunken);
    border-left: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    transform: rotate(45deg);
}
.tp-says__line { display: block; }
.tp-says__line + .tp-says__line { margin-top: var(--space-2); }
.tp-says__by {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-ball--img { object-fit: cover; }

/* CAN / CANNOT — both halves derived from the registry */
.tp-cando {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}
.tp-cando__head {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.tp-cando__list { list-style: none; margin: 0; padding: 0; }
.tp-cando__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-primary);
}
.tp-cando__row iconify-icon { flex-shrink: 0; margin-top: 2px; font-size: 1em; }
.tp-cando__row.is--can iconify-icon { color: var(--status-success); }
.tp-cando__row.is--careful iconify-icon { color: var(--status-warning); }
.tp-cando__row.is--cant { color: var(--text-muted); }
.tp-cando__row.is--cant iconify-icon { color: var(--status-error); }
.tp-cando__row.is--cant span { text-decoration: line-through; text-decoration-thickness: 1px; }
.tp-cando__note { color: var(--text-muted); }
.tp-cando__why {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-muted);
}
.tp-cando--notice { background: var(--surface-elevated); }

/* THE AGENT'S WORDS — quoted, attributed, never chrome (r211) */
/* THE FOOT — the small print, one line */
.tp-askfoot {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-default);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-muted);
}
.tp-askfoot__dot { color: var(--border-strong); }

.tp-grant__cap,
.tp-grant-see__lede {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.tp-grant-see__more { margin-top: var(--space-2); }
.tp-grant-see__more summary {
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-btn--quietdecline { color: var(--text-secondary); }

/* The card is fluid: it fills the column it is given, on a phone and on a
   desktop alike. Nothing here pins it to a phone width. */
.tp-askcard { width: 100%; }
@container (max-width: 380px) {
    .tp-askhead__metas { margin-left: 0; width: 100%; }
    .tp-askhead__title { font-size: var(--text-base); }
}

/* The HAR step's shell is its own small card, so its pill has a real edge to
   straddle. The numbered blocks below keep their own pills on their own
   edges -- the rhythm on the details page Steven pointed at. */
.tp-askcard--intro {
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-4) var(--space-4);
    margin-bottom: var(--space-4);
}
.tp-askcard--intro .tp-askhead { margin-bottom: 0; }

/* A long button label ("Connect with Google Calendar") crowded its own edges
   on a phone. Let ask-card buttons wrap instead of squeezing. */
@media (max-width: 430px) {
    .tp-askcard .tp-btn {
        white-space: normal;
        line-height: 1.25;
        text-align: center;
    }
}

/* The connect step's success moment (Steven 2026-09-02): the connection
   landed, the step finished itself, the agent is on it. */
.tp-connect-success {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    opacity: 0;
    transform: translateY(6px) scale(.98);
    transition: opacity 260ms ease, transform 260ms ease;
}
.tp-connect-success.is--in { opacity: 1; transform: none; }
.tp-connect-success__mark {
    display: grid; place-items: center;
    width: 72px; height: 72px;
    border-radius: var(--radius-full);
    background: var(--status-success);
    color: var(--color-white);
    font-size: var(--text-2xl, 2rem);
    font-weight: 700;
    box-shadow: var(--shadow-md);
}
.tp-connect-success__title {
    margin: var(--space-2) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-2xl, 1.75rem);
    font-weight: 700;
    color: var(--text-primary);
}
.tp-connect-success__sub { margin: 0; font-size: var(--text-base); color: var(--text-secondary); }

/* Access drawer: the live connection leads (2026-09-02) */
.tp-access__conn { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--text-primary); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.tp-access__can { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }

/* ACT cards on the step (rule 212) */
.tp-acts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tp-acts__row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken); }
.tp-acts__row.is--careful { border-color: var(--status-warning); }
.tp-acts__row.is--done { opacity: .6; }
.tp-acts__what { display: grid; gap: 2px; min-width: 0; }
.tp-acts__kind { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.tp-acts__detail { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.tp-acts__buttons { display: flex; gap: var(--space-2); }
.tp-acts__status { grid-column: 1 / -1; margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.tp-acts__status.is--error { color: var(--status-error); }
@media (max-width: 480px) { .tp-acts__row { grid-template-columns: 1fr; } }

/* The person approves what they can see (Steven 2026-09-03): a family act
   card is one sentence, the artifact it will make, and Details folded. */
.tp-acts__sentence { margin: var(--space-3, 12px) 0 0; color: var(--text-primary); line-height: 1.5; }
.tp-acts__note { margin: var(--space-2, 8px) 0 0; color: var(--text-secondary); font-size: var(--text-sm, 0.875rem); }
.tp-slots { margin: var(--space-3, 12px) 0 0; }
.tp-slots__lead { margin: 0 0 var(--space-1, 4px); font-weight: var(--font-bold, 700); color: var(--text-primary); }
.tp-slots__list { margin: 0; padding-left: var(--space-4, 16px); color: var(--text-primary); line-height: 1.6; }
.tp-slots__change { margin-top: var(--space-2, 8px); font-size: var(--text-sm, 0.875rem); }
.tp-slots__change > summary,
.tp-acts__fold > summary { cursor: pointer; color: var(--accent-tertiary); font-weight: var(--font-bold, 700); }
.tp-acts__fold { margin-top: var(--space-2, 8px); font-size: var(--text-sm, 0.875rem); }
.tp-slots__day { margin: var(--space-2, 8px) 0 var(--space-1, 4px); font-family: var(--font-mono); font-size: var(--text-xs, 0.75rem); font-weight: var(--font-bold, 700); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.tp-slots__grid { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px); }
.tp-slots__opt { display: inline-flex; align-items: center; gap: var(--space-1, 4px); padding: var(--space-1, 4px) var(--space-2, 8px); border: 1px solid var(--border-subtle); border-radius: var(--radius-full, 999px); background: var(--surface-primary); font-size: var(--text-xs, 0.75rem); cursor: pointer; }
.tp-slots__opt:has(input:checked) { border-color: var(--accent-tertiary); background: var(--accent-tertiary-subtle); }
.tp-slots__hint { margin: var(--space-2, 8px) 0; color: var(--text-secondary); font-size: var(--text-xs, 0.75rem); }
.tp-slots__status { margin-left: var(--space-2, 8px); color: var(--text-secondary); font-size: var(--text-xs, 0.75rem); }
/* Closed steps fold under the green strip (Steven 2026-09-03). */
.ob-fold { margin: 0 0 var(--space-3, 12px); }
.ob-fold__sum { cursor: pointer; padding: var(--space-2, 8px) var(--space-1, 4px); font-family: var(--font-mono); font-size: var(--text-xs, 0.75rem); font-weight: var(--font-bold, 700); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); list-style: none; }
.ob-fold__sum::-webkit-details-marker { display: none; }
.ob-fold[open] > .ob-fold__sum::after { content: " (hide)"; }
.tp-slots__note { display: block; margin: var(--space-2, 8px) 0; font-size: var(--text-xs, 0.75rem); color: var(--text-secondary); }
.tp-slots__note textarea { display: block; width: 100%; margin-top: var(--space-1, 4px); padding: var(--space-2, 8px); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 4px); background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm, 0.875rem); }
/* The meeting block (Steven 2026-09-04): the recipe list and the no-calendar
   give-times control. Tokens only. */
/* THE GENERAL STEP (2026-09-09): one row per call on a `calls` card. Design
   tokens only -- this is the acts card's own type scale, one indent deeper. */
.tp-runs { margin: var(--space-3, 12px) 0 0; padding: 0; list-style: none; }
.tp-runs__row { position: relative; margin: 0 0 var(--space-3, 12px); padding: 0 0 0 var(--space-4, 16px); border-left: 2px solid var(--border-subtle); }
.tp-runs__row.is--done { border-left-color: var(--border-strong); }
.tp-runs__what { margin: 0; color: var(--text-primary); font-size: var(--text-sm, 0.875rem); line-height: 1.5; }
.tp-runs__where { margin: var(--space-1, 4px) 0 0; color: var(--text-tertiary, var(--text-secondary)); font-size: var(--text-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-runs__args { margin: var(--space-2, 8px) 0 0; display: grid; gap: var(--space-1, 4px); }
.tp-runs__args > div { display: flex; gap: var(--space-2, 8px); font-size: var(--text-xs, 0.75rem); }
.tp-runs__args dt { flex: 0 0 auto; color: var(--text-tertiary, var(--text-secondary)); }
.tp-runs__args dd { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; white-space: pre-line; }
.tp-runs__source { margin: var(--space-2, 8px) 0 0; color: var(--text-secondary); font-size: var(--text-xs, 0.75rem); line-height: 1.5; overflow-wrap: anywhere; }
.tp-acts__recipe { margin: var(--space-2, 8px) 0 0; padding-left: var(--space-4, 16px); color: var(--text-secondary); font-size: var(--text-sm, 0.875rem); line-height: 1.6; }
.tp-slots--give .tp-slots__give-row { display: block; margin: var(--space-2, 8px) 0; font-size: var(--text-xs, 0.75rem); color: var(--text-secondary); }
.tp-slots--give .tp-slots__give-row input { display: block; width: 100%; margin-top: var(--space-1, 4px); padding: var(--space-2, 8px); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 4px); background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm, 0.875rem); }

/* Private outreach identity: one clear card, two name fields, explicit lock. */
.tp-identity-card {
    font-family: var(--font-body);
    padding: var(--space-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
    box-shadow: var(--shadow-sm);
}
.tp-identity-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.tp-identity-card__header .tp-slots__lead { margin: 0; font-family: var(--font-heading); }
.tp-identity-card__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--accent-tertiary-subtle);
    color: var(--accent-tertiary);
    font-size: var(--text-xl);
}
.tp-identity-card__intro {
    margin: 0 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.tp-identity-card__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.tp-identity-card__fields .tp-slots__give-row {
    flex: 1 1 calc(var(--space-16) * 3);
    min-width: 0;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}
.tp-identity-card__fields input { box-sizing: border-box; }
.tp-identity-card__consent { align-items: flex-start; border-radius: var(--radius-md); }
.tp-identity-card__consent input { flex-shrink: 0; }

/* Steven 2026-09-04: the grant choice rows were gray-on-gray ("I couldn't see
   it"). They read as a choice now: strong border, primary text, a real radio,
   and the picked row wears the accent. Tokens only. */
.tp-har-choice-label {
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-bold, 700);
    color: var(--text-primary);
    border: 2px solid var(--border-strong);
    background: var(--surface-primary);
}
.tp-har-choice-label input[type="radio"] {
    width: 22px;
    height: 22px;
    flex: none;
    accent-color: var(--accent-tertiary);
}
.tp-har-choice-label:has(input:checked) {
    border-color: var(--accent-tertiary);
    background: var(--accent-tertiary-subtle);
}

/* THE FINISH FOLDS INTO THE LAST APPROVAL (Steven 2026-09-04): the finish
   question rides the last approve card, above the form's own buttons. */
.tp-finish--folded {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}
.tp-finish--folded .tp-finish__q { margin-bottom: var(--space-2); }

/* ── RULE 230 / 231 (Steven 2026-09-05) — the typed deliverable ───────────
   The plan card prints what the person actually ends up with, and the step
   card prints whether it is here. Every value below is an existing token; no
   new token is invented for this. */

/* The plan strip's two platform lines: "Delivers: MP4 video" and the access
   stamp. They sit in the same gutter as .us-detail so the plan reads as one
   column. */
.us-promises {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-2) 0 0 calc(var(--size-8, 32px) + var(--space-2));
}
.us-delivers,
.us-access {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.us-delivers iconify-icon,
.us-access iconify-icon { font-size: var(--text-sm); flex: 0 0 auto; }
/* Already connected is the quiet, good state: it costs the person nothing. */
.us-access--onetap { color: var(--status-success); }

/* The promise with nothing on it yet. Present including zero, so an empty
   hand-over and a real one are tellable apart. */
.tp-nofile {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface-secondary);
}

/* The agent's copy is gone. Honest state, the fingerprint, and what happens
   next. Never a dead link. */
.tp-deadcopy {
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    border: 1px solid var(--status-error);
    border-radius: var(--radius-md);
    background: var(--status-error-subtle);
}
.tp-deadcopy__line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.tp-deadcopy__fp {
    margin: var(--space-1) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.tp-deadcopy__next {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* here.now: live 24 hours, and the claim link is the person's job inside the
   day. BOTH addresses print in full and never shortened. */
.tp-herenow {
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
}
.tp-herenow--expired {
    border-color: var(--status-error);
    background: var(--status-error-subtle);
}
.tp-herenow__clock {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.tp-herenow__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--space-2) 0 0;
    min-width: 0;
}
.tp-herenow__label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tp-herenow__url {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    word-break: break-all;
}
a.tp-herenow__url { color: var(--text-primary); text-decoration: underline; }

/* The approve is off while the promised file is missing, and says why. */
.tp-approve__blocked {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    border: 1px solid var(--status-error);
    border-radius: var(--radius-md);
    background: var(--status-error-subtle);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.tp-approve__buttons.is--blocked .tp-btn--primary { opacity: .45; cursor: not-allowed; }


/* ══════════════════════════════════════════════════════════════════════
   THE DETAIL TAPE (Steven 2026-09-09, with his sketch). One vertical tape:
   every done step frozen above, one live card below, no future card. The
   transition is action-card-live.js; the frozen cards are rendered by
   templates/targets/_one_ball.html. Frozen means LOCKED, not faint: the
   words keep full contrast, only the colour is pulled back a little (the
   same grayscale the feed's stamped card wears).
   ══════════════════════════════════════════════════════════════════════ */

/* Locked, not faint: the tape never fades a done card. */
.tb-detail-sheet .ob-card--done { opacity: 1; }
.tb-detail-sheet .ob-card--done .ob-card__title { color: var(--text-primary); }

/* The feed's Approved cover (.frq-stamp, wants.css), worn as the BAND at the
   top of a frozen card instead of over its whole face, so the record under
   it stays readable. It sticks under the want pill exactly where the live
   card's take-action band sits, so a long done card scrolls under its
   "Approved" the way a long live card scrolls under "Take action". */
.tb-detail-sheet .frq-stamp--tape {
    position: sticky;
    top: calc(var(--size-16) + var(--size-12) + var(--tb-hair) + var(--tb-detail-card-height, var(--size-24)));
    inset-inline: auto;
    bottom: auto;
    z-index: 4;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--space-3);
    box-sizing: border-box;
    width: auto;
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--tb-hair) solid var(--tb-ink);
    border-radius: 0;
    text-align: left;
    animation: none;
}
@media (min-width: 768px) {
    .tb-detail-sheet .frq-stamp--tape {
        top: calc(var(--size-16) + var(--space-1) + var(--size-12) + var(--tb-hair) + var(--tb-detail-card-height, var(--size-24)));
    }
}
.tb-detail-sheet .frq-stamp--tape .frq-stamp__label { font-size: var(--text-base); }
.tb-detail-sheet .frq-stamp--tape .frq-stamp__sub {
    max-width: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--tb-meta);
}
/* The live freeze lands the cover with the feed's own entrance. Inside the
   spent take-action band it fills the band's box (same height as the strip it
   replaces, set inline by the script), so nothing below it moves. */
.tb-detail-sheet .frq-stamp--tape.is--in { animation: frq-stamp-in var(--duration-slow) var(--ease-out); }
.tb-detail-sheet .ob-topper.is--spent .frq-stamp--tape {
    position: static;
    margin: 0;
    width: calc(100% - var(--tb-sheet-inset) * 2);
    margin-inline: auto;
    border: var(--tb-hair) solid var(--tb-ink);
    border-top: 0;
}

/* Frozen: colour pulled back (the feed's stamped-card grayscale), the words
   at full contrast, every button gone, every field disabled by the history
   render. A delivered file's link stays a link. */
/* the gray lands only on what holds no artifact; see THE ARTIFACT CARD below */
.tb-tape-frozen button:not([data-lightbox]),
.tb-tape-frozen .tp-btn:not(a),
.tb-tape-frozen .tp-approve__buttons,
.tb-tape-frozen .tp-har-actions,
.tb-tape-frozen .tp-dcard__answer { display: none; }

/* The live card at the moment of freezing (before the settle lands the real
   frozen card): the same colour pull, the controls held in place but dead, so
   the card does not change shape under the person's eyes. */
.tb-tape-freezing { pointer-events: none; }
.tb-tape-freezing .ob-card--work > :not(.frq-stamp) { filter: grayscale(0.4); }
.tb-tape-freezing button,
.tb-tape-freezing .tp-btn { visibility: hidden; }

/* The spent stage above the arriving one: no blank runway between the two
   cards (min-height was there so the live card could reach the lip), and the
   "Back to plan" row does not sit between two steps of one receipt. */
.tb-detail-focus.is--spent { min-height: 0; }
.tb-detail-focus.is--spent .tb-detail-back { display: none; }

/* The next card fades in below, attached. */
.tb-detail-focus.tb-tape-arriving {
    opacity: 0;
    transition: opacity var(--reveal-duration-open) var(--ease-out);
}
.tb-detail-focus.tb-tape-arriving.is--in { opacity: 1; }

/* A late tap or a re-render after a send-back: already-frozen cards take a
   brief glaze and stay frozen. */
.tb-tape-frozen.is--glazed { animation: tb-tape-glaze var(--duration-normal) var(--ease-out); }
@keyframes tb-tape-glaze {
    from { box-shadow: inset 0 0 0 var(--space-1) var(--tb-mark); }
    to   { box-shadow: inset 0 0 0 0 transparent; }
}

/* While the tape moves, the browser's own scroll anchoring must not add a
   second correction on top of the script's. */
.want-detail.tb-tape-busy { overflow-anchor: none; }

@media (prefers-reduced-motion: reduce) {
    .tb-detail-sheet .frq-stamp--tape.is--in,
    .tb-tape-frozen.is--glazed { animation: none; }
    .tb-detail-focus.tb-tape-arriving { transition: none; }
}

/* == THE ROW AS STEVEN DREW IT (2026-09-10, two sketches) ==
   "Select service" with the service's mark and a Linked / Not linked word
   beside it; one closed "Connection details" fold holding every sentence
   the row used to print loose; the doors as buttons, the refusal a plain
   link; a dotted rule between one link and the next. Tokens only. */
.tp-har-service__label { margin: 0; }
.tp-har-service__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.tp-har-service__status {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}
.tp-har-service__status.is--linked {
    color: var(--status-success);
    font-weight: var(--font-medium);
}
.tp-har-connect__details {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.tp-har-connect__details > summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    list-style: disclosure-closed;
}
.tp-har-connect__details[open] > summary { list-style: disclosure-open; }
.tp-har-connect__details-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.tp-har-connect__details-body .tp-har-block__help { margin: 0; }
.tp-har-connect__details-body .tp-grant-see { margin: 0; }
.tp-har-connect__details--plan { margin: var(--space-2) 0; }
/* The refusal is a link, not a third button: it is a door, not a command. */
.tp-har-connect .tp-har-doors .tp-har-doors__decline {
    flex-basis: 100%;
    margin-top: var(--space-1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}
.tp-har-connect .tp-har-doors .tp-har-doors__decline:hover {
    background: transparent;
    color: var(--text-primary);
}
/* One dotted rule between this link and the next, as drawn. */
.tp-act-rows .tp-har-block {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px dotted var(--border-strong);
}
/* The chain heading ("Your action: Connect your email") names the row; the
   block's own header would say it twice. */
.tb-action-heading-host[data-har-slug="connect_account"] > .tp-har-block__header { display: none; }

/* ====================================================================
   THE ARTIFACT CARD (Steven 2026-09-10, with his screenshot).
   templates/targets/_artifact.html. One shape for everything the walk
   leaves behind: the kind's icon, a title, a small state line, an expand
   mark, the body. The site's card radius and default border. On desktop it
   sticks out past the step's border on both sides; on a phone it stays
   inside the gutter so the page never scrolls sideways. In the frozen tape
   it keeps full contrast while the controls around it gray.
   ==================================================================== */
.tb-artifact {
    position: relative;
    box-sizing: border-box;
    margin: var(--space-4) 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    overflow-wrap: anywhere;
}
.tb-artifact__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.tb-artifact__icon { flex: none; font-size: var(--text-2xl); color: var(--text-secondary); margin-top: var(--space-1); }
.tb-artifact__titles { flex: 1 1 auto; min-width: 0; }
.tb-artifact__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-semibold); line-height: var(--leading-tight); }
.tb-artifact__sub { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; }
.tb-artifact__status {
    flex: none;
    align-self: flex-start;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    white-space: nowrap;
}
.tb-artifact.is--go .tb-artifact__status { background: var(--tb-go, var(--surface-secondary)); color: var(--tb-ink, var(--text-primary)); }
.tb-artifact.is--stop .tb-artifact__status { background: var(--tb-stop, var(--surface-secondary)); color: var(--tb-ink, var(--text-primary)); }
.tb-artifact.is--held .tb-artifact__status { background: var(--tb-mark, var(--surface-secondary)); color: var(--tb-ink, var(--text-primary)); }
.tb-artifact__expand {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--text-lg);
}
.tb-artifact__expand:hover, .tb-artifact__expand:focus-visible { background: var(--surface-secondary); color: var(--text-primary); outline: none; }
.tb-artifact__body > :first-child { margin-top: 0; }
.tb-artifact__body > :last-child { margin-bottom: 0; }
.tb-artifact__line { margin: 0 0 var(--space-2); }
.tb-artifact .tp-email-approval__meta { margin-top: 0; }
.tb-artifact .tp-dcard__head { display: none; }

/* Sticking out: past the owning unit's padding and the step card's padding
   and border, on both sides (Steven's screenshot). The distance is the sum
   of what the artifact sits inside; each host names its own. */
.tb-detail-sheet .ob-card .tb-artifact { margin-inline: calc(-1 * (var(--space-4) + 1px + var(--space-3))); }
.tb-detail-sheet .ob-card .tp-dcard .tb-artifact,
.tb-detail-sheet .ob-card .tp-acts__row .tb-artifact,
.tb-detail-sheet .ob-card .tp-outcome__item .tb-artifact { margin-inline: calc(-1 * (var(--space-4) + 1px + var(--space-4) + 1px + var(--space-3))); }
@media (max-width: 640px) {
    .tb-detail-sheet .ob-card .tb-artifact,
    .tb-detail-sheet .ob-card .tp-dcard .tb-artifact,
    .tb-detail-sheet .ob-card .tp-acts__row .tb-artifact,
    .tb-detail-sheet .ob-card .tp-outcome__item .tb-artifact { margin-inline: calc(-1 * var(--space-2)); }
}

/* A receipt row or an outcome item that holds an artifact is no longer a
   box of its own: the artifact is the box. */
.tp-acts__row:has(> .tb-artifact) { display: block; padding: 0; border: 0; background: none; }
.tp-outcome__item:has(> .tb-artifact) { display: block; padding: 0; border: 0; background: none; }
.tp-outcome__item:has(> .tb-artifact) > .tb-artifact .tp-outcome__thumb { margin-bottom: var(--space-3); }

/* THE FROZEN TAPE: the controls gray, the artifacts do not (Steven
   2026-09-10: "you should be able to see the artifacts even if you can't
   see the blurred out stuff that's on the steps"). A filter on an ancestor
   would gray the artifact with it, so the gray lands only on things that
   hold no artifact, and on the siblings beside one. */
.tb-tape-frozen > :not(.frq-stamp):not(:has(.tb-artifact)) { filter: grayscale(0.4); }
.tb-tape-frozen :has(> .tb-artifact) > :not(.tb-artifact) { filter: grayscale(0.4); }
.tb-tape-frozen .tb-artifact { filter: none; opacity: 1; }
.tb-tape-frozen .tb-artifact .tb-artifact__expand { pointer-events: auto; }

/* THE SHEET: the same card, full-screen, with a close. No animation on
   purpose (reduced motion needs nothing switched off). */
.tb-artifact-sheet {
    box-sizing: border-box;
    width: min(100vw - var(--space-8), 60rem);
    max-height: calc(100vh - var(--space-8));
    margin: auto;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.tb-artifact-sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
.tb-artifact-sheet__frame { position: relative; max-height: calc(100vh - var(--space-8)); overflow: auto; padding: var(--space-5); }
.tb-artifact-sheet__close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--text-lg);
}
.tb-artifact-sheet__content .tb-artifact { margin: 0; box-shadow: none; border: 0; padding: var(--space-2) 0 0; }
.tb-artifact-sheet__content .tb-artifact .tp-dcard__pdf { min-height: 70vh; }
.tb-artifact-sheet__content .tb-artifact .tp-email-approval__body { max-height: none; }


/* ══════════════════════════════════════════════════════════════════════
   RULE 244 — THE STEP YOU DO YOURSELF (Steven 2026-09-11).
   WHAT FORCED IT: on a live prod walk step 5 was the person's own errand and
   the card drew a generic Approve, no Open and no cost line. "I wanna just
   click, click, click" — so the card is Open and Done, side by side, and the
   money it costs is said above them, before the tap. Existing tokens only.
   ══════════════════════════════════════════════════════════════════════ */
.tp-do__cost {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.tp-do__cost iconify-icon { flex-shrink: 0; color: var(--text-secondary); }
.tp-do__cost-label { font-weight: var(--font-semibold); }
.tp-do__cost-note { color: var(--text-secondary); }

.tp-do__filed {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--status-success);
    border-radius: var(--radius-md);
    background: var(--status-success-subtle);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.tp-do__filed iconify-icon { flex-shrink: 0; color: var(--status-success); }
.tp-do__filed-link { color: var(--text-primary); text-decoration: underline; }

.tp-do__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
@media (min-width: 480px) {
    .tp-do__buttons { flex-direction: row; flex-wrap: wrap; }
    .tp-do__buttons .tp-btn { flex: 1 1 auto; }
}

.tp-do__proof {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}
.tp-do__proof-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tp-do__proof-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--status-error);
    border-radius: var(--radius-md);
    background: var(--status-error-subtle);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.tp-do__proof-error[hidden] { display: none; }

/* Connection feedback starts with the tap and lasts through provider sign-in. */
.tp-connect-busy::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tp-connect-spin 0.8s linear infinite;
}
@keyframes tp-connect-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tp-connect-busy::before { animation: none; }
}