/* THE OPERATOR REGISTRATION PAGE in the card look (card redesign step 12b,
   COO hands 2026-10-12). Page sheet for templates/agents/operator_register.html
   behind LAYOUT_CARDS; the card frame is static/cards/card.css, the fields
   keep agent-operator-recovery.css. Same fields, forms and words. */

.opr-cards-body .main-area { background: var(--surface-secondary); }

.opr-page {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-3, 12px) var(--space-3, 12px) 96px;
}

.opr-card .tb-card__art { min-height: 220px; }
.opr-card--taken .tb-card__art { min-height: 180px; }
.opr-card .tb-card__title { font-size: clamp(26px, 7vw, 32px); }
.opr-card .tb-card__label { white-space: nowrap; }
@media (max-width: 440px) { .opr-card__eyebrow { display: none; } }
.opr-card__eyebrow {
    padding-top: 6px;
    color: rgb(255 255 255 / 0.78);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.opr-card__panel { gap: 0; padding-bottom: var(--space-5, 20px); }
.opr-card__panel .tb-card__dashes { margin-bottom: var(--space-2, 8px); }
.opr-card__panel .aor-copy { font-size: 16px; }
.opr-card__panel .aor-copy:first-child,
.opr-card__panel .tb-card__dashes + .aor-copy { margin-top: var(--space-3, 12px); }

/* the fields: white cards on the panel's grey, the way the step sheets ask */
.opr-card .aor-field { margin-top: var(--space-4, 16px); }
.opr-card .aor-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 2px solid var(--border-default, #e5e8f0);
    border-radius: 16px;
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 17px;
}
.opr-card .aor-field input:focus { outline: none; border-color: var(--highlight-purple, #5534a5); }
.opr-card .opr-check {
    padding: var(--space-3, 12px);
    border-radius: 16px;
    background: var(--surface-secondary, #f1f5f9);
}
.opr-card .opr-check input { width: 20px; height: 20px; flex: none; accent-color: var(--highlight-purple, #5534a5); }
.opr-card .opr-error { border-radius: 14px; border-color: rgb(239 68 68 / 0.35); background: rgb(239 68 68 / 0.08); }
/* the line at the top when a link did not work, and the pasted link's error */
.opr-card .opr-link-note { margin-top: var(--space-3, 12px); }
.opr-card .aor-field input[aria-invalid="true"] { border-color: var(--status-error); }
.opr-card .aor-field + .opr-error { margin-top: var(--space-2, 8px); }
.opr-card .opr-actions.opr-skip { margin-top: var(--space-2, 8px); }

/* the buttons: the main one is the card's green button, the others quiet */
.opr-card .opr-actions { flex-direction: column; gap: var(--space-2, 8px); margin-top: var(--space-5, 20px); }
.opr-card .opr-actions .ds-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 0 var(--space-5, 20px);
    border-radius: 999px;
    font-family: var(--font-heading, sans-serif);
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}
.opr-card .opr-actions .ds-btn--primary { border: 0; background: var(--accent-neon, #33e658); color: #10231a; }
.opr-card .opr-actions .ds-btn--secondary {
    border: 2px solid var(--highlight-purple, #5534a5);
    background: var(--surface-primary, #fff);
    color: var(--highlight-purple, #5534a5);
    font-size: 17px;
}
.opr-card .opr-or { margin: var(--space-5, 20px) 0 0; }

/* the done page: the facts as the card's record tiles (agent across the top,
   then operator verified, agent linked, payouts ready) */
.opr-card .opr-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2, 8px);
    margin: var(--space-3, 12px) 0 var(--space-2, 8px);
    border: 0;
}
.opr-card .opr-facts li {
    flex-direction: column;
    justify-content: space-between; /* the Yes / No line up when a label wraps */
    gap: 2px;
    padding: var(--space-2, 8px);
    border: 0;
    border-radius: 14px;
    background: var(--surface-secondary, #f1f5f9);
    text-align: center;
    font-size: 12px;
    min-width: 0;
}
.opr-card .opr-facts li:first-child { grid-column: 1 / -1; }
.opr-card .opr-facts strong { font-family: var(--font-heading, sans-serif); font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }

/* THE AGENT'S PICTURE (Steven 2026-10-13): the operator's upload on the done
   page. The current picture in the round, the words beside it, the file
   field and Save as the card's green button, Remove quiet under it. */
.opr-card .opr-picture {
    margin-top: var(--space-5, 20px);
    padding-top: var(--space-4, 16px);
    border-top: 1px solid var(--border-default, #e5e8f0);
}
.opr-card .opr-picture__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading, sans-serif);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.opr-card .opr-picture__row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
}
/* The frame holds the picture, or the assigned face (agent-faces.js swaps
   that img for its moving SVG), cover-cropped in the round. */
.opr-card .opr-picture__frame {
    flex: none;
    display: block;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: var(--radius-full, 999px);
    background: var(--surface-secondary, #f1f5f9);
    box-shadow: 0 0 0 2px var(--surface-primary, #fff), 0 0 0 3px var(--border-default, #e5e8f0);
}
.opr-card .opr-picture__frame > img,
.opr-card .opr-picture__frame > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.opr-card .opr-picture__say { margin: 0; min-width: 0; }
.opr-card .opr-picture__field input[type="file"] {
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.3;
}
.opr-card .opr-picture__form .opr-actions { margin-top: var(--space-3, 12px); }
.opr-card .opr-picture__remove { margin-top: var(--space-2, 8px); }

/* THE AGENT'S MOVING PICTURES (Steven 2026-10-13): under the picture, one
   upload per slot of the media kit (pose, sad, win), each with its status
   chip: present green, processing and rough the info blue, missing quiet. */
.opr-card .opr-media {
    margin-top: var(--space-5, 20px);
    padding-top: var(--space-4, 16px);
    border-top: 1px solid var(--border-default, #e5e8f0);
}
.opr-card .opr-media__lead { margin: var(--space-2, 8px) 0 0; }
.opr-card .opr-media__slot {
    margin-top: var(--space-4, 16px);
    padding: var(--space-3, 12px);
    border-radius: 16px;
    background: var(--surface-secondary, #f1f5f9);
}
.opr-card .opr-media__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading, sans-serif);
    font-size: 16px;
}
.opr-card .opr-media__status {
    flex: none;
    padding: 2px 10px;
    border-radius: var(--radius-full, 999px);
    background: var(--surface-primary, #fff);
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.opr-card .opr-media__status--present { background: var(--status-success-subtle); color: var(--text-primary); }
.opr-card .opr-media__status--processing,
.opr-card .opr-media__status--rough { background: var(--status-info-subtle); color: var(--text-primary); }
.opr-card .opr-media__say { margin: var(--space-2, 8px) 0 0; }
.opr-card .opr-media__slot .aor-field { margin-top: var(--space-3, 12px); }
.opr-card .opr-media__form .opr-actions { margin-top: var(--space-3, 12px); }

/* THE AGENT'S OFFERS (Steven 2026-10-14 morning, the /shop Free Assistance
   shelf: "Free assistance should be a setting that the agents can set, that
   want it for getting a certification, on the shop page."): under the moving
   pictures, one grey card per offer with the fields the agent's own door
   takes, where it shows on the shop and why, its judged runs, the "Free
   while I earn my certification" switch, and an outlined white one to add.
   Tokens only. */
.opr-card .opr-offers {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}
.opr-card .opr-offers__lead { margin: var(--space-2) 0 0; }
.opr-card .opr-offer {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
}
.opr-card .opr-offer--new {
    border: 1px dashed var(--border-strong);
    background: var(--surface-primary);
}
.opr-card .opr-offer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-base);
}
.opr-card .opr-offer__head b { min-width: 0; overflow-wrap: anywhere; }
.opr-card .opr-offer__status {
    flex: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.opr-card .opr-offer__status--on { background: var(--status-success-subtle); color: var(--text-primary); }
.opr-card .opr-offer__status--off { background: var(--surface-primary); color: var(--text-secondary); }
.opr-card .opr-offer__why,
.opr-card .opr-offer__runs { margin: var(--space-2) 0 0; }
.opr-card .opr-offer__form { margin-top: 0; }
.opr-card .opr-offer .aor-field { margin-top: var(--space-3); }
.opr-card .opr-offer textarea {
    box-sizing: border-box;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px 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);
    line-height: 1.4;
    resize: vertical;
}
.opr-card .opr-offer textarea:focus { outline: none; border-color: var(--highlight-purple); }
.opr-card .opr-offer__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.opr-card .opr-offer__pair .aor-field { min-width: 0; }
.opr-card .opr-offer .opr-offer__switch {
    margin-top: var(--space-3);
    background: var(--surface-primary);
}
.opr-card .opr-offer--new .opr-offer__switch { background: var(--surface-secondary); }
.opr-card .opr-offer .opr-actions { margin-top: var(--space-3); }
.opr-card .opr-offer__remove { margin-top: var(--space-2); }

/* CREATE A FLOW (Steven 2026-10-16, spoken ~22:45 PDT): the field under the
   cards, and the flow's state in place once a want is sent -- want posted,
   waiting, the plan card (feed/_want_cards.html's own macro, not rebuilt
   here). Tokens only. */
.opr-card .opr-flow {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}
.opr-card .opr-flow__lead,
.opr-card .opr-flow__want { margin: var(--space-2) 0 0; }
.opr-card .opr-flow__want {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-secondary);
}
.opr-card .opr-flow .aor-field { margin-top: var(--space-3); }
.opr-card .opr-flow textarea {
    box-sizing: border-box;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px 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);
    line-height: 1.4;
    resize: vertical;
}
.opr-card .opr-flow textarea:focus { outline: none; border-color: var(--highlight-purple); }
.opr-card .opr-flow .opr-actions { margin-top: var(--space-3); }
.opr-card .opr-flow .target-trajectory { margin-top: var(--space-4); }
.opr-card .opr-flow__publish { margin-top: var(--space-4); }
.opr-card .opr-flow__publish-note { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-sm); }

/* THE PLAN AND ITS VERSION (Steven 2026-10-17, "you should be able to look
   at the plan and version and edit it by talking to your agent through our
   interface"): the filed plan's steps in plain words, under the trajectory
   card, with a quiet "Talk to your agent" field below. Tokens only. */
.opr-card .opr-flow__plan {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}
.opr-card .opr-flow__plan-title {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
}
.opr-card .opr-flow__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}
.opr-card .opr-flow__step {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-secondary);
}
.opr-card .opr-flow__step-num {
    flex: none;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
}
.opr-card .opr-flow__step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* A step's heading in full up to two lines, nothing to tap (Steven
   2026-10-18, "two lines is fine"; the cap at the source,
   app/services/step_title_cap.py). */
.opr-card .opr-flow__step-heading {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
    color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere;
}
.opr-card .opr-flow__step-who {
    margin-left: var(--space-2);
    color: var(--highlight-purple);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
}
.opr-card .opr-flow__step-delivers { color: var(--text-secondary); font-size: var(--text-sm); }
.opr-card .opr-flow__pending { margin: var(--space-3) 0 0; color: var(--text-secondary); }
.opr-card .opr-flow__revise-form { margin-top: var(--space-3); }

/* THE OFFER'S OWN VERSION LINE (Steven 2026-10-17, "all of these are a
   version"): a quiet line under the judged-runs count. Tokens only. */
.opr-card .opr-offer__version { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-sm); }

/* AVAILABLE TOOLS (Steven 2026-10-16 addendum): links on the right side,
   done page only. Another lane writes agents/_tools_rail.html; a missing or
   empty rail leaves the shell at one column. Tokens only. */
.opr-shell { display: block; width: 100%; }
.opr-rail { margin-top: var(--space-5, 20px); }
@media (min-width: 900px) {
    .opr-shell:has(.opr-rail > *) {
        display: grid;
        grid-template-columns: minmax(0, 560px) minmax(220px, 280px);
        align-items: start;
        gap: var(--space-6, 24px);
        max-width: 880px;
        margin: 0 auto;
    }
    .opr-shell:has(.opr-rail > *) .opr-page,
    .opr-shell:has(.opr-rail > *) .aor-page {
        margin: 0;
        max-width: none;
    }
    .opr-shell:has(.opr-rail > *) .opr-rail { margin-top: 0; }
}

/* "OPERATOR > AGENT > FLOW" (Steven 2026-10-17, "I should just be looking
   at the card, for each one, for each agent: Operator > Agent > Flow >
   unpublished and published."): the done page's quiet subtitle and the way
   back to /operators/agents. Tokens only. */
.opr-card .opr-crumb {
    margin: 0 0 var(--space-2, 8px);
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.opr-card .opr-crumb a { color: var(--text-muted); text-decoration: underline; }
.opr-card .opr-back { margin: 0 0 var(--space-3, 12px); }
.opr-card .opr-back a {
    color: var(--highlight-purple, #5534a5);
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
}

/* ONE FLOW ROW'S ONE CONTROL (Steven 2026-10-17, then on the morning review:
   "I couldn't tell that was a switch, I tapped it and it unpublished my
   storybook offer"): the title/price row, and on its OWN row below -- never
   beside "Free" again -- a real track-and-dot switch (action=flow_toggle,
   flips `active` and nothing else, no edit form, no second button). Tokens
   only: --border-strong (gray track, off), --status-success (green track,
   on), --surface-primary (the dot). */
.opr-card .opr-offer__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.opr-card .opr-offer__row .opr-offer__head { flex: 1 1 auto; min-width: 0; }
.opr-card .opr-offer__price {
    margin-left: var(--space-2);
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    font-weight: 700;
}
.opr-card .opr-offer__switch-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-2);
}
.opr-card .opr-offer__toggle-form { flex: none; margin: 0; }
.opr-card .opr-offer__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.opr-card .opr-offer__toggle-track {
    position: relative;
    display: inline-block;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: var(--radius-full, 999px);
    background: var(--border-strong, #9aa3b2);
    transition: background var(--transition-fast, 0.15s ease);
}
.opr-card .opr-offer__toggle-dot {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full, 999px);
    background: var(--surface-primary, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform var(--transition-fast, 0.15s ease);
}
.opr-card .opr-offer__toggle-label {
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.opr-card .opr-offer__toggle--on .opr-offer__toggle-track { background: var(--status-success); }
.opr-card .opr-offer__toggle--on .opr-offer__toggle-dot { transform: translateX(16px); }
.opr-card .opr-offer__toggle--on .opr-offer__toggle-label { color: var(--text-primary); }

/* THE OPERATOR HOME, /operators/agents (Steven 2026-10-17): one card per
   agent -- face, handle, model, N published / M unpublished -- linking to
   that agent's done page and its Passport. Same sheet width and tokens as
   the registration card. */
.opa-page {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-4, 16px) var(--space-3, 12px) 96px;
}
.opa-crumb {
    margin: 0 0 var(--space-2, 8px);
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.opa-title {
    margin: 0 0 var(--space-4, 16px);
    color: var(--text-primary);
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 800;
    overflow-wrap: anywhere;
}
.opa-list { display: flex; flex-direction: column; gap: var(--space-3, 12px); margin: 0; padding: 0; list-style: none; }
.opa-card {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-secondary, #f1f5f9);
}
.opa-card__link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-3, 12px);
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.opa-card__face {
    flex: none;
    display: block;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--radius-full, 999px);
    background: var(--surface-primary, #fff);
    box-shadow: 0 0 0 2px var(--surface-primary, #fff), 0 0 0 3px var(--border-default, #e5e8f0);
}
.opa-card__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.opa-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opa-card__name {
    color: var(--text-primary);
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-base);
    font-weight: 800;
    overflow-wrap: anywhere;
}
.opa-card__sub, .opa-card__counts { color: var(--text-secondary); font-size: var(--text-sm); }
.opa-card__passport {
    flex: none;
    padding: var(--space-1) var(--space-3);
    border: 2px solid var(--highlight-purple, #5534a5);
    border-radius: var(--radius-full, 999px);
    color: var(--highlight-purple, #5534a5);
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.opa-empty { color: var(--text-secondary); }
.opa-empty a { color: var(--highlight-purple, #5534a5); font-weight: 700; }
@media (max-width: 420px) {
    .opa-card { flex-wrap: wrap; }
    .opa-card__passport { margin-left: 68px; }
}

/* THE ASSISTANCE SLOT on the operator home (Steven 2026-10-18): a request
   for help the agent filed draws on its card as THE HELD ALERT, the same
   macro and classes as the recipient hold (templates/targets/_path_macros.html
   held_alert; "held states are alerts", 2026-10-06), with a Needs you badge
   in the card body. The box is the site's own alert block (design-system.css
   .ds-alert .ds-alert--warning); target-path.css stacks it on the step page
   and is not loaded here, so its .tp-alert layer is repeated below, scoped to
   the card, word for word in what it does. Existing tokens only. */
.opa-note {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}
.opa-card--assist { flex-wrap: wrap; }
.opa-card.is--focus { box-shadow: 0 0 0 2px var(--highlight-purple); }
/* one ring: when the link names the request, the request wears it */
.opa-card.is--focus:has(.opa-assist.is--focus) { box-shadow: none; }
.opa-card__badge { align-self: flex-start; margin-top: var(--space-1); }
.opa-card .opa-assist { flex: 1 0 100%; min-width: 0; }
.opa-card .ds-alert.tp-alert {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    color: var(--tb-ink);
    overflow-wrap: anywhere;
}
.opa-card .tp-alert__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
}
.opa-card .tp-alert__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--tb-mark, var(--surface-secondary));
    color: var(--tb-ink, var(--text-primary));
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    white-space: nowrap;
}
.opa-card .tp-alert__badge iconify-icon { flex-shrink: 0; font-size: var(--text-sm); }
.opa-card .tp-alert__reason {
    flex: 1 1 0%;
    min-width: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
}
.opa-card .tp-alert .tp-alert__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.opa-card .opa-assist.is--focus .tp-alert { box-shadow: 0 0 0 2px var(--highlight-purple); }
.opa-assist__line {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
}
.opa-assist__label {
    margin-right: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
}
.opa-assist__form { margin: var(--space-3) 0 0; }
.opa-assist__field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.opa-assist__field textarea {
    box-sizing: border-box;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    resize: vertical;
}
.opa-assist__field textarea[name="act"] { font-family: var(--font-mono); }
.opa-assist__field textarea:focus { outline: none; border-color: var(--highlight-purple); }
.opa-assist__hint { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
.opa-assist__go,
.opa-assist__quiet {
    min-height: 40px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}
.opa-assist__go { border: 2px solid var(--highlight-purple); background: var(--highlight-purple); color: var(--surface-primary); }
.opa-assist__quiet { border: 2px solid var(--border-default); background: var(--surface-primary); color: var(--text-primary); }