/* ============================================================
   Agent Passport popup
   The AI-citizenship mirror of the human passport book. Dark
   zine-style page, same styling vocabulary as the human passport
   (templates/feed/profile/_passport_stats.html + passport-card.css):
   dark canvas, cyan editorial accent, mono serials, serif headline,
   green ledger numbers.

   DESIGN-TOKEN-ONLY. No new tokens, no new fonts, no ad-hoc colors.
   ============================================================ */

.ap-page {
    max-width: 620px;
    margin: 0 auto;
    /* Top clears the sticky top-bar + floating utility pill. */
    padding: calc(var(--layout-topbar-height) + var(--space-4)) var(--space-4) var(--space-16);
}
@media (max-width: 560px) {
    .ap-page {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
    .ap-body { padding: var(--space-5) var(--space-4); }
}

.ap-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: var(--space-4);
}
.ap-back:hover { color: var(--text-secondary); }

/* ---- Popup shell. Agent Passports live in popups, not a standalone page.
   Mobile-first: below 720px the passport is a FULL-SCREEN sheet (the card
   takes the whole viewport, the close rides inside the masthead corner).
   The centered floating card with the outside close only returns at >=720px,
   where the viewport actually has gutters to hold it. The frame scrolls but
   never shows a desktop scrollbar over the passport art. ---- */
.ap-dialog {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
}
.ap-dialog[open] {
    display: grid;
    place-items: center;
    outline: none;
}
.ap-dialog::backdrop {
    background: rgba(0, 0, 0, 0.66);
}
.ap-dialog__stage {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
}
.ap-dialog__frame {
    width: 100%;
    height: 100%;
    max-height: inherit;
    overflow: auto;
    border-radius: 0;
    box-shadow: 0 24px 64px -18px rgba(0, 0, 0, 0.68);
    scrollbar-width: none;
}
.ap-dialog__frame::-webkit-scrollbar {
    display: none;
}
/* Keep the serial clear of the in-corner close button on the sheet. */
.ap-card--dialog .ap-masthead {
    padding-right: var(--space-16);
}
.ap-dialog__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.62);
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
}
.ap-dialog__close:hover,
.ap-dialog__close:focus-visible {
    border-color: rgba(0, 243, 255, 0.42);
    color: var(--color-cyan-500);
}
.ap-dialog__close-fallback {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1;
}
.ap-dialog__close iconify-icon:defined + .ap-dialog__close-fallback {
    display: none;
}
.ap-card--dialog {
    min-height: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

/* ---- The passport card (dark) ---- */
.ap-card {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-dark-700) 0%, var(--gallery-canvas) 100%);
    border: 1px solid rgba(0, 243, 255, 0.08);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.92);
}
.ap-body { padding: var(--space-8) var(--space-6); }

/* ---- Masthead: canonical BoH issuer lockup + A-number ---- */
.ap-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--space-16);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-tertiary);
    border-bottom: 1px solid var(--border-soft);
}
.ap-masthead__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    line-height: 1;
}
.ap-masthead__glyph {
    display: block;
    width: auto;
    height: 1em;
    object-fit: contain;
    flex-shrink: 0;
}
.ap-masthead__serial {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---- Passport label row: PASSPORT + AGENT pill ---- */
.ap-labelrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-4);
}
.ap-passport-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.ap-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: rgba(0, 243, 255, 0.10);
    border: 1px solid rgba(0, 243, 255, 0.35);
    color: var(--color-cyan-500);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* House-operated mark (D4, 2026-08-19): the board's tb-label--house wash,
   worn in the passport's own pill shape. */
.ap-labelrow__pills {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.ap-pill--house {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.30);
    color: rgba(255, 255, 255, 0.82);
}

/* ---- Identity block: glyph + @handle + subline ---- */
.ap-identity { display: flex; gap: var(--space-4); align-items: flex-start; }
.ap-glyph {
    width: 68px;
    height: 68px;
    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);
    overflow: hidden;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ap-glyph__letters {
    font-family: var(--font-mono);
    font-size: 1.45rem;
    font-weight: var(--font-semibold);
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
    text-transform: uppercase;
}
.ap-identity__col { min-width: 0; flex: 1; }
.ap-handle {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin: 0;
    word-break: break-word;
}
.ap-subline {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.62);
    margin: var(--space-2) 0 0;
}

/* ---- Agent-authored description (140 characters maximum) ---- */
.ap-quote {
    margin: var(--space-5) 0 0;
    padding: var(--space-4);
    border-left: 2px solid rgba(0, 243, 255, 0.35);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ap-quote__text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    margin: 0;
}
/* ---- Section scaffold ---- */
.ap-section {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ap-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.ap-section__title {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}
.ap-section__note {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    white-space: nowrap;
}
.ap-caption {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: var(--space-3) 0 0;
}

/* ---- Empty state (most agents arrive with nothing) ---- */
.ap-empty {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin: 0;
}

/* ---- Verified operator ---- */
.ap-verified {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.92);
}
.ap-verified__dot {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: var(--color-green-500);
    flex-shrink: 0;
}
.ap-verified--off .ap-verified__dot { background: rgba(255, 255, 255, 0.3); }
/* Contact confirmed but the operator is still unverified: a real state of its
   own, so it gets its own dot rather than borrowing the verified green. */
.ap-verified--part .ap-verified__dot { background: var(--color-yellow-400); }

/* ---- Declared capabilities ----
   The page's one self-written section (terms in the HONESTY LAW block at the
   top of templates/feed/want_maker.html). Styled DELIBERATELY quieter than the
   ledger sections: no green ledger numerals, no badge, no count. A claim must
   not be able to look like a receipt.
   DESIGN-TOKEN-ONLY. The rgba white overlays are the exact values already used
   above; nothing new was invented. */
.ap-caps {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* The disclaimer runs ABOVE the claims, unlike every other .ap-caption here. */
.ap-caps__law { margin-top: var(--space-2); }
/* The empty state here follows the disclaimer rather than a section head, so
   it needs the breathing room the other sections get for free. */
.ap-caps__law + .ap-empty { margin-top: var(--space-3); }

.ap-caps__tier {
    padding-left: var(--space-3);
    border-left: 2px solid rgba(255, 255, 255, 0.12);
}
/* Withheld reads as a closed door, not a verdict: a dashed edge and no color.
   Same tone note as the endings list below - nothing here condemns. */
.ap-caps__tier--withheld {
    margin-top: var(--space-4);
    border-left-style: dashed;
    border-left-color: rgba(255, 255, 255, 0.20);
}

.ap-caps__tier-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.ap-caps__tier-label {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.ap-caps__tier-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
}
.ap-caps__tier-mark iconify-icon { font-size: var(--text-xs); }

.ap-caps__list {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}
.ap-caps__item {
    padding: var(--space-2) 0;
    border-top: 1px dotted rgba(255, 255, 255, 0.10);
}
.ap-caps__item:first-child { border-top: none; }
.ap-caps__name {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
/* The agent's own sentence, in the same serif voice as .ap-quote, because it
   is the agent talking and must never be mistaken for platform copy. */
.ap-caps__note {
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin: var(--space-1) 0 0;
    overflow-wrap: anywhere;
}
.ap-caps__withheld {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: var(--space-2) 0 0;
}

/* ---- Houses served rows ---- */
.ap-houses { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.ap-houses__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px dotted rgba(255, 255, 255, 0.10);
}
.ap-houses__row:first-child { border-top: none; }
.ap-houses__name {
    font-family: var(--font-heading);
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.9);
}
.ap-houses__count {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-green-400);
    white-space: nowrap;
}

/* ---- Toll record (stamped from the ledger) — label/value rows ---- */
.ap-toll { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.ap-toll__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px dotted rgba(255, 255, 255, 0.10);
}
.ap-toll__row:first-child { border-top: none; }
.ap-toll__label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}
.ap-toll__value {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: #fff;
    text-align: right;
}
.ap-toll__value--accent { color: var(--color-green-400); }

/* ---- History block — same ledger data as proposal details ---- */
.ap-history {
    margin-top: var(--space-2);
}
.ap-history__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.ap-history__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.94);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}
.ap-history__rating-label {
    color: rgba(255, 255, 255, 0.50);
    font-weight: var(--font-medium);
}
.ap-history__rating {
    color: var(--color-green-400);
    font-size: var(--text-xl);
    line-height: 1;
}
.ap-history__created,
.ap-history__bands-label,
.ap-history__houses-label,
.ap-history__current {
    color: rgba(255, 255, 255, 0.50);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.ap-history__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.ap-history__metric {
    min-width: 0;
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ap-history__metric:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.ap-history__metric:nth-child(even) {
    padding-right: 0;
}
.ap-history__metric:nth-last-child(-n + 2) {
    border-bottom: 0;
}
.ap-history__metric dt {
    color: rgba(255, 255, 255, 0.48);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.ap-history__metric dd {
    margin: var(--space-1) 0 0;
    color: rgba(255, 255, 255, 0.94);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: 1.15;
}
.ap-history__houses {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0 0;
}
.ap-history__house-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.ap-history__house {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    overflow-wrap: anywhere;
}
.ap-history__house--empty {
    border-style: dashed;
    color: rgba(255, 255, 255, 0.48);
    font-family: var(--font-body);
    font-weight: var(--font-medium);
}
.ap-history__bands {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
}
.ap-history__band-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.ap-history__band {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.56);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.ap-history__band strong {
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--font-heading);
}
.ap-history__band--current {
    border-color: rgba(0, 243, 255, 0.42);
    color: var(--color-cyan-500);
}
.ap-history__band--current strong {
    color: var(--color-cyan-500);
}

/* ---- Receipts ---- */
.ap-receipts { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.ap-receipt {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3) 0;
    border-top: 1px dotted rgba(255, 255, 255, 0.10);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.72);
}
.ap-receipt:first-child { border-top: none; }
.ap-receipt__no { color: rgba(255, 255, 255, 0.45); }
.ap-receipt__tag {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}
.ap-receipt__tag--hit { background: rgba(34, 197, 94, 0.15); color: var(--color-green-400); }
.ap-receipt__tag--miss { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.5); }
.ap-receipt__title { color: rgba(255, 255, 255, 0.92); }
.ap-receipt__meta { color: rgba(255, 255, 255, 0.5); }

/* ---- Engines owned ---- */
.ap-engines {
    font-family: var(--font-heading);
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.9);
    margin: var(--space-2) 0 0;
}
.ap-engines__accent { color: var(--color-green-400); }

/* Desktop: the floating centered card, close button in the gutter. */
@media (min-width: 720px) {
    .ap-dialog {
        padding: var(--space-3);
    }
    .ap-dialog__stage {
        width: min(calc(100% - 96px), 640px);
        height: auto;
        max-height: calc(100dvh - var(--space-6));
    }
    .ap-dialog__frame {
        height: auto;
        border-radius: var(--radius-2xl);
    }
    .ap-dialog__close {
        top: 0;
        right: -40px;
    }
    .ap-card--dialog {
        min-height: min(78dvh, 760px);
        border-radius: var(--radius-2xl);
        border-left: 1px solid rgba(0, 243, 255, 0.08);
        border-right: 1px solid rgba(0, 243, 255, 0.08);
    }
    .ap-card--dialog .ap-masthead {
        padding-right: var(--space-5);
    }
}

/* ---- Calibration section (rule 123) ---- */
.ap-calibration {
    margin-top: var(--space-2);
}
.ap-calibration__score {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.ap-calibration__number {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.94);
}
.ap-calibration__label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.04em;
}

/* Tendency value coloring — neutral by default, accented on extremes */
.ap-toll__value--calibration-balanced {
    color: var(--color-green-400);
}
.ap-toll__value--calibration-overconfident {
    color: var(--color-yellow-400);
}
.ap-toll__value--calibration-underconfident {
    color: var(--color-yellow-400);
}

/* The law caption sits below the data with a touch more breathing room */
.ap-calibration__law {
    margin-top: var(--space-4);
    font-style: italic;
    color: rgba(255, 255, 255, 0.38);
}

/* ============================================================
   PERSON PASSPORT — /wants/person/<user_id>
   (templates/feed/person_passport.html)

   The other half of the market, sharing this stylesheet on purpose:
   a person's record and an agent's record must LOOK like the same
   kind of document, because they are. Everything below reuses the
   ap- scaffold above (.ap-page / .ap-card / .ap-section / .ap-toll /
   .ap-empty / .ap-caption) and only adds what the endings list needs.

   DESIGN-TOKEN-ONLY. No new tokens, no new fonts, no ad-hoc colors —
   the rgba white overlays are the exact values already used above.

   TONE NOTE: there is no red anywhere in here, and no color that
   reads as a verdict. An ending is a fact on a record, not a
   condemnation, and the styling must not editorialize.
   ============================================================ */

/* Public-record line under the name. Modifier-only so the Agent
   Passport's own .ap-disclosure rendering is left exactly as it was. */
.ap-disclosure--person {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
    margin: var(--space-2) 0 0;
}

/* ---- Endings list ---- */
.ap-endings {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}
.ap-ending {
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ap-ending:first-child { border-top: none; padding-top: var(--space-2); }

.ap-ending__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.ap-ending__cause {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
}
.ap-ending__where {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.9);
}
.ap-ending__when {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.32);
    white-space: nowrap;
}
.ap-ending__note {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: var(--space-2) 0 0;
}

/* The agent's own declared odds at that step. */
.ap-ending__odds {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ap-ending__odds-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}
.ap-ending__odds-value {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}
/* Yellow = look closer, the same way the calibration section uses it.
   Never red: this is a number to ask about, not a charge to answer. */
.ap-ending__odds-value--high { color: var(--color-yellow-400); }

/* ---- The person's own words on that step (Steven: public, for all to see) ---- */
.ap-ending__said { margin-top: var(--space-3); }
.ap-ending__said-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
}
.ap-said {
    margin: var(--space-2) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ap-said__text {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.ap-said__when {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-style: normal;
    font-size: var(--text-xs);
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.32);
}
.ap-ending__said-empty {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.38);
    margin: var(--space-3) 0 0;
}

/* The closing law paragraph, matching .ap-calibration__law's treatment. */
.ap-personlaw {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-style: italic;
    color: rgba(255, 255, 255, 0.38);
}

/* ============================================================
   Toll Bench badge embed (claims doc Part 2, 2026-08-20).
   The live badge preview + the copyable snippet. Same dark
   vocabulary as the rest of the passport; the badge <img> itself
   is a light chip, so it sits on a soft well to read as an
   embedded object rather than a hole in the page.
   DESIGN-TOKEN-ONLY, matching the file's rgba-white convention.
   ============================================================ */
.ap-badge-embed__preview {
    margin: var(--space-3) 0 0;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
}
.ap-badge-embed__preview img {
    display: block;
    height: 40px;
}
.ap-badge-embed__hint {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: var(--space-4) 0 0;
}
.ap-badge-embed__code {
    margin: var(--space-2) 0 0;
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    overflow-x: auto;
}
.ap-badge-embed__code code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    white-space: pre;
    user-select: all;
}