/* =================================================================
 * UI.Runner.Components — shared Runner component styles
 *
 * Served at /_content/UI.Runner.Components/runner.css
 * Both UI.Portal and UI.Runner link this file.
 *
 * All colors / borders / radii reference --theme-* variables that
 * the host supplies. This file MUST NOT hard-code any palette values
 * so the same components render correctly under every host's theme.
 * ================================================================= */


/* ── Step capture chrome ─────────────────────────────────────────── */

.wf-step-capture {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wf-step-iteration {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--theme-primary-soft, #dbeafe);
    color: var(--theme-primary, #2563eb);
    border-radius: 999px;
    align-self: flex-start;
}

.wf-step-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-emphasis, var(--theme-text));
    line-height: 1.35;
}

.wf-step-title {
    font-size: 0.9rem;
    color: var(--theme-text-muted, #6b7280);
    line-height: 1.5;
    margin-top: -0.25rem;
}

/* Step description — clamped inline so long instructions never crowd the
   capture controls; the "Details" button opens the full text in an overlay. */
.wf-step-desc {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: -0.25rem;
}

.wf-step-desc-text {
    flex: 1 1 auto;
    font-size: 0.9rem;
    color: var(--theme-text-muted, #6b7280);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wf-step-desc-more {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--theme-primary, #2563eb);
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
}

.wf-step-desc-more:hover {
    text-decoration: underline;
}

/* Full-screen dismissable instructions overlay. */
.wf-instructions-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10000;
    cursor: zoom-out;
}

.wf-instructions-panel {
    position: relative;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text, #111827);
    border-radius: 0.75rem;
    max-width: min(100%, 36rem);
    max-height: 85%;
    overflow: auto;
    padding: 1.5rem 1.5rem 1.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    cursor: default;
}

.wf-instructions-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0;
    background: var(--theme-surface-muted, #f3f4f6);
    color: var(--theme-text, #111827);
    cursor: pointer;
}

.wf-instructions-close:hover {
    background: var(--theme-border, #e5e7eb);
}

.wf-instructions-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-right: 2rem;
    line-height: 1.35;
}

.wf-instructions-body {
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--theme-text, #374151);
}


/* ── Capture inputs ──────────────────────────────────────────────── */

.wf-capture-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wf-text-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--theme-background-raised, #fff);
    border: 1px solid var(--theme-border, #d0d4da);
    border-radius: var(--theme-radius-button, 6px);
    color: var(--theme-text, #222);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.wf-text-input:focus {
    border-color: var(--theme-primary, #2563eb);
}

.wf-text-input.wf-input-invalid {
    border-color: var(--theme-danger, #dc3545);
}

.wf-capture-error {
    font-size: 0.85rem;
    color: var(--theme-danger, #dc3545);
    padding: 0 0.25rem;
}

/* The honest optional-skip hint beside a validation error - an optional
   question with invalid text must say HOW to skip, not feel mandatory. */
.wf-capture-hint {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #6c757d);
    padding: 0 0.25rem;
}

/* ── Ride-alongs (photo + note beside the answer) ────────────────── */

.wf-capture-image,
.wf-capture-note {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--theme-border, #d1d5db);
}

.wf-capture-image-label,
.wf-capture-note-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-muted, #6b7280);
}

.wf-capture-image-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1rem;
    background: var(--theme-background-raised, #fff);
    border: 1px solid var(--theme-border, #d1d5db);
    border-radius: 6px;
    cursor: pointer;
    width: fit-content;
}

.wf-capture-image-pick input[type="file"] {
    display: none;
}

.wf-capture-image-busy {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--theme-text-muted, #6b7280);
}

.wf-capture-image-filled {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.wf-capture-image-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--theme-border, #d1d5db);
}

.wf-capture-image-icon {
    font-size: 1.5rem;
    color: var(--theme-text-muted, #6b7280);
}

.wf-capture-image-name {
    flex: 1;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-capture-image-remove {
    background: none;
    border: none;
    color: var(--theme-danger, #dc3545);
    cursor: pointer;
    padding: 0.25rem;
}

.wf-note-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--theme-background-raised, #fff);
    border: 1px solid var(--theme-border, #d1d5db);
    border-radius: 6px;
    resize: vertical;
    font: inherit;
}

.wf-note-input:focus {
    border-color: var(--theme-primary, #2563eb);
}

.wf-capture-unsupported {
    padding: 0.75rem 1rem;
    background: var(--theme-warning-muted, #fef9c3);
    border-radius: 6px;
    color: var(--theme-warning, #b45309);
    font-size: 0.875rem;
}


/* ── Info step ───────────────────────────────────────────────────── */

.wf-info-step {
    padding: 1rem;
    background: var(--theme-background-subtle, #f8f9fa);
    border-radius: 6px;
    color: var(--theme-text, #222);
    font-size: 0.95rem;
    line-height: 1.6;
    border-left: 3px solid var(--theme-primary, #2563eb);
}

.wf-info-body {
    line-height: 1.6;
}

.wf-info-default {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--theme-border-light, #e5e7eb);
    font-size: 0.875rem;
}

.wf-info-default-label {
    color: var(--theme-text-muted, #6b7280);
    font-weight: 500;
}

.wf-info-default-value {
    font-family: var(--theme-font-mono, ui-monospace, "Cascadia Code", "Consolas", monospace);
    color: var(--theme-text, #222);
    background: var(--theme-surface, #fff);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    border: 1px solid var(--theme-border-light, #e5e7eb);
}


/* ── Options list (Choice, Loop) ─────────────────────────────────── */

.wf-options-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* wf-option-row is used by CaptureChoice on <li> elements;
   the combined selector keeps Choice and Loop visually identical. */
.wf-options-list li,
.wf-option-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6875rem 1rem;
    background: var(--theme-background-raised, #fff);
    border: 1px solid var(--theme-border, #d0d4da);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--theme-text, #222);
    transition: background 100ms ease, border-color 100ms ease;
    user-select: none;
}

.wf-options-list li:hover:not(.wf-option-disabled),
.wf-option-row:hover:not(.wf-option-disabled) {
    background: var(--theme-background-hover, #f3f4f6);
    border-color: var(--theme-border-subtle, #b0b7bf);
}

.wf-options-list li.wf-option-selected,
.wf-option-row.wf-option-selected {
    background: var(--theme-primary-soft, #dbeafe);
    border-color: var(--theme-primary, #2563eb);
    color: var(--theme-primary, #2563eb);
    font-weight: 500;
}

.wf-option-indicator {
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
    font-size: 0.8rem;
}

.wf-option-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.wf-option-required {
    color: var(--theme-danger, #b91c1c);
    margin-left: 0.15rem;
}

.wf-option-status-complete {
    color: var(--theme-success, #16a34a);
    font-weight: 700;
}

.wf-option-status-started {
    color: var(--theme-warning, #b45309);
}

/* Loop leg accent */
.wf-options-list.wf-loop li.wf-option-selected {
    background: var(--theme-primary-muted, rgba(37, 99, 235, 0.1));
    border-color: var(--theme-primary, #2563eb);
    color: var(--theme-primary, #2563eb);
}


/* ── Options list with alphabet jump rail ────────────────────────── */

.wf-options-with-rail {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    position: relative;
}

.wf-options-with-rail .wf-options-list {
    flex: 1 1 auto;
    min-width: 0;
}

.wf-options-list li.wf-options-section {
    display: block;
    padding: 0.5rem 0 0.25rem 0.25rem;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: default;
    user-select: none;
    scroll-margin-top: 0.5rem;
}

.wf-options-list li.wf-options-section:hover {
    background: transparent;
    border-color: transparent;
}

.wf-options-rail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    padding: 0.25rem 0.125rem;
    position: sticky;
    top: 0.5rem;
    align-self: flex-start;
    max-height: calc(100vh - 8rem);
    overflow: hidden;
}

.wf-rail-letter {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 1rem;
    height: 0.875rem;
    line-height: 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--theme-primary, #2563eb);
    cursor: pointer;
    user-select: none;
    text-align: center;
    border-radius: 2px;
}

.wf-rail-letter:hover:not(.wf-rail-inactive) {
    background: var(--theme-primary-soft, #dbeafe);
}

.wf-rail-letter.wf-rail-inactive {
    color: var(--theme-text-muted, #9ca3af);
    opacity: 0.4;
    cursor: default;
}


/* ── Split options ───────────────────────────────────────────────── */

.wf-split-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.25rem 0;
}

.wf-split-option {
    width: 100%;
    padding: 0.7rem 1.25rem;
    border: 1.5px solid var(--theme-border, #d0d4da);
    border-radius: 1.5rem;
    background: var(--theme-background-raised, #fff);
    color: var(--theme-text, #222);
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.wf-split-option:hover {
    background: var(--theme-background-hover, #f3f4f6);
    border-color: var(--theme-border-subtle, #b0b7bf);
}

.wf-split-option:active {
    background: var(--theme-background-active, #e5e7eb);
}

.wf-split-option-selected {
    background: var(--theme-primary-muted, rgba(37, 99, 235, 0.1));
    border-color: var(--theme-primary, #2563eb);
    color: var(--theme-primary, #2563eb);
    box-shadow: 0 0 0 1px var(--theme-primary, #2563eb),
                0 0 14px rgba(var(--theme-primary-rgb, 37 99 235), 0.22);
}

.wf-split-option-selected:hover {
    background: var(--theme-primary-muted, rgba(37, 99, 235, 0.1));
    border-color: var(--theme-primary, #2563eb);
}


/* ── Choice options ────────────────────────────────────────────── */

.wf-choice-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.25rem 0;
}

.wf-choice-option {
    width: 100%;
    padding: 0.7rem 1.25rem;
    border: 1.5px solid var(--theme-border, #d0d4da);
    border-radius: 1.5rem;
    background: var(--theme-background-raised, #fff);
    color: var(--theme-text, #222);
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
}

.wf-choice-option-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 1.25rem;
    line-height: 1;
}

.wf-choice-option-label {
    flex: 1 1 auto;
}

.wf-choice-option-proceed {
    border-color: color-mix(in srgb, var(--theme-success, #198754) 35%, var(--theme-border, #d0d4da));
}

.wf-choice-option-proceed .wf-choice-option-badge {
    color: var(--theme-success, #198754);
}

.wf-choice-option-proceed:hover {
    background: color-mix(in srgb, var(--theme-success, #198754) 6%, var(--theme-background-raised, #fff));
    border-color: var(--theme-success, #198754);
}

.wf-choice-option-blocked {
    border-color: color-mix(in srgb, var(--theme-danger, #dc3545) 25%, var(--theme-border, #d0d4da));
    cursor: not-allowed;
    opacity: 0.85;
}

.wf-choice-option-blocked .wf-choice-option-badge {
    color: var(--theme-danger, #dc3545);
}

.wf-choice-option-blocked:hover {
    background: var(--theme-background-raised, #fff);
}

.wf-choice-option-exit {
    border-color: color-mix(in srgb, var(--theme-warning, #fd7e14) 35%, var(--theme-border, #d0d4da));
}

.wf-choice-option-exit .wf-choice-option-badge {
    color: var(--theme-warning, #fd7e14);
}

.wf-choice-option-exit:hover {
    background: color-mix(in srgb, var(--theme-warning, #fd7e14) 6%, var(--theme-background-raised, #fff));
    border-color: var(--theme-warning, #fd7e14);
}

.wf-choice-option-exit-selected {
    background: color-mix(in srgb, var(--theme-warning, #fd7e14) 10%, var(--theme-background-raised, #fff));
    border-color: var(--theme-warning, #fd7e14);
    box-shadow: 0 0 0 1px var(--theme-warning, #fd7e14);
}

.wf-choice-option-selected {
    background: color-mix(in srgb, var(--theme-success, #198754) 10%, var(--theme-background-raised, #fff));
    border-color: var(--theme-success, #198754);
    box-shadow: 0 0 0 1px var(--theme-success, #198754);
}


/* ── MultiSplit checkboxes ───────────────────────────────────────── */

.wf-multisplit-check-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.25rem 0;
}

.wf-multisplit-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--theme-border, #d0d4da);
    border-radius: 4px;
    cursor: pointer;
    background: var(--theme-surface, #fff);
}

.wf-multisplit-check:hover {
    background: var(--theme-surface-hover, #f3f4f6);
}

.wf-multisplit-check.wf-option-selected {
    background: var(--theme-primary-soft, #dbeafe);
    border-color: var(--theme-primary, #2563eb);
}

.wf-multisplit-check-label {
    flex: 1;
}


/* ── Loop iteration badge ────────────────────────────────────────── */

.wf-loop-iteration {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-primary, #2563eb);
    background: var(--theme-primary-soft, #dbeafe);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.5rem;
}


/* ── Entity summary (CaptureEntitySummary + PickerItemReview) ────── */

.wf-entity-summary {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
}

.wf-entity-summary-header {
    margin-bottom: 0.5rem;
}

.wf-entity-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--theme-text, #222);
}

.wf-entity-summary-empty {
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

.wf-property-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
}

.wf-property-row + .wf-property-row {
    border-top: 1px solid var(--theme-border, #d0d4da);
}

.wf-property-label {
    flex: 0 0 auto;
    min-width: 9rem;
    color: var(--theme-text-muted, #6b7280);
    font-weight: 500;
    font-size: 0.875rem;
}

.wf-property-value {
    flex: 1;
    font-weight: 500;
    color: var(--theme-text, #222);
    font-size: 0.875rem;
    font-family: var(--theme-font-mono, ui-monospace, "Cascadia Code", "Consolas", monospace);
}

.wf-entity-summary-edit {
    flex: 0 0 auto;
    margin-left: auto;
    background: transparent;
    border: none;
    padding: 0.25rem 0.375rem;
    color: var(--theme-text-muted, #6b7280);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: color 120ms ease, background 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

.wf-entity-summary-edit:hover {
    color: var(--theme-primary, #2563eb);
    background: var(--theme-background-hover, #f3f4f6);
}


/* ── Property list (PickerItemForm review table) ─────────────────── */

.wf-property-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0.25rem 0;
}

.wf-property-list dt {
    font-weight: 500;
    color: var(--theme-text-muted, #6b7280);
}

.wf-property-list dd {
    margin: 0;
    font-family: var(--theme-font-mono, ui-monospace, "Cascadia Code", "Consolas", monospace);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wf-value-text {
    font-weight: 500;
}


/* ── Picker intermediate review ──────────────────────────────────── */

.wf-picker-review-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text, #222);
    margin-bottom: 0.75rem;
}

.wf-picker-empty,
.wf-picker-no-results {
    padding: 0.75rem 0;
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.95rem;
    text-align: center;
}


/* ── Picker record list ──────────────────────────────────────────── */

.wf-picker-search {
    margin-bottom: 0.6rem;
}

.wf-picker-search-input {
    width: 100%;
    padding: 0.5rem 0.85rem;
    border: 1.5px solid var(--theme-border, #d0d4da);
    border-radius: 0.5rem;
    background: var(--theme-background-raised, #fff);
    color: var(--theme-text, #222);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 150ms ease;
}

.wf-picker-search-input:focus {
    border-color: var(--theme-primary, #2563eb);
}

.wf-picker-options {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.25rem 0;
}

.wf-picker-record {
    border: 1.5px solid var(--theme-border, #d0d4da);
    border-radius: 0.75rem;
    background: var(--theme-background-raised, #fff);
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wf-picker-record-selected {
    border-color: var(--theme-primary, #2563eb);
    box-shadow: 0 0 0 1px var(--theme-primary, #2563eb),
                0 0 14px rgba(var(--theme-primary-rgb, 37 99 235), 0.18);
}

.wf-picker-item {
    display: flex;
    align-items: stretch;
}

.wf-picker-item-label {
    flex: 1;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    color: var(--theme-text, #222);
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.wf-picker-record-selected .wf-picker-item-label {
    color: var(--theme-primary, #2563eb);
    background: var(--theme-primary-muted, rgba(37, 99, 235, 0.07));
}

.wf-picker-item-label:hover {
    background: var(--theme-background-hover, #f3f4f6);
}

.wf-picker-item-edit {
    padding: 0 0.85rem;
    border: none;
    border-left: 1px solid var(--theme-border, #d0d4da);
    background: transparent;
    color: var(--theme-text-muted, #6b7280);
    font-size: 1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 150ms ease, color 150ms ease;
}

.wf-picker-item-edit:hover {
    background: var(--theme-background-hover, #f3f4f6);
    color: var(--theme-text, #222);
}

.wf-picker-item-details {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--theme-border, #d0d4da);
    background: var(--theme-primary-muted, rgba(37, 99, 235, 0.04));
}

.wf-picker-add-btn {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    border: 1.5px dashed var(--theme-border, #d0d4da);
    border-radius: 1.5rem;
    background: transparent;
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.wf-picker-add-btn:hover {
    border-color: var(--theme-primary, #2563eb);
    color: var(--theme-primary, #2563eb);
    background: var(--theme-primary-muted, rgba(37, 99, 235, 0.06));
}


/* ── Picker step-by-step form header + navigation ────────────────── */

.wf-picker-form-tabs {
    display: flex;
    margin-bottom: 1rem;
    border: 1.5px solid var(--theme-border, #d0d4da);
    border-radius: 1.5rem;
    overflow: hidden;
}

.wf-picker-form-tab {
    flex: 1;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.wf-picker-form-tab:hover:not(.wf-picker-form-tab-active) {
    background: var(--theme-surface-hover, #f3f4f6);
}

.wf-picker-form-tab-active {
    background: var(--theme-primary, #2563eb);
    color: #fff;
}

.wf-picker-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.wf-picker-form-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text, #222);
}

.wf-picker-form-cancel-x {
    padding: 0.2rem 0.55rem;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #6b7280);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.wf-picker-form-cancel-x:hover {
    background: var(--theme-surface-hover, #f3f4f6);
    color: var(--theme-text, #222);
}

.wf-picker-form-step-count {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #6b7280);
    margin-bottom: 0.5rem;
}

.wf-picker-step-footer {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}

.wf-picker-step-footer .wf-nav-back {
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--theme-border, #d0d4da);
    border-radius: 1.5rem;
    background: transparent;
    color: var(--theme-text-muted, #6b7280);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.wf-picker-step-footer .wf-nav-back:hover:not(:disabled) {
    border-color: var(--theme-text-muted, #6b7280);
    color: var(--theme-text, #222);
}

.wf-picker-step-footer .wf-nav-back:disabled {
    opacity: 0.4;
    cursor: default;
}

.wf-picker-step-footer .wf-nav-next {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 1.5rem;
    background: var(--theme-primary, #2563eb);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.wf-picker-step-footer .wf-nav-next:hover {
    background: var(--theme-primary-dark, #1d4ed8);
}


/* ── Picker add / edit form ──────────────────────────────────────── */

.wf-picker-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0;
}

.wf-picker-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wf-picker-form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text, #222);
}

.wf-picker-form-required {
    margin-left: 0.2rem;
    color: var(--theme-danger, #dc2626);
}

.wf-picker-form-actions {
    display: flex;
    gap: 0.6rem;
    padding-top: 0.25rem;
}

.wf-picker-form-save {
    flex: 1;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 1.5rem;
    background: var(--theme-primary, #2563eb);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.wf-picker-form-save:hover {
    background: var(--theme-primary-dark, #1d4ed8);
}

.wf-picker-form-cancel {
    padding: 0.65rem 1.25rem;
    border: 1.5px solid var(--theme-border, #d0d4da);
    border-radius: 1.5rem;
    background: transparent;
    color: var(--theme-text-muted, #6b7280);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.wf-picker-form-cancel:hover {
    border-color: var(--theme-text-muted, #6b7280);
    color: var(--theme-text, #222);
}


/* ── Date / time numpad ──────────────────────────────────────────── */

.wf-date-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--theme-background-raised, #fff);
    border: 1px solid var(--theme-border, #d0d4da);
    border-radius: 6px;
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--theme-text, #222);
}

.wf-date-segment {
    color: var(--theme-text-muted, #6b7280);
    transition: color 120ms ease;
}

.wf-date-segment-active {
    color: var(--theme-primary, #2563eb);
}

.wf-date-sep {
    color: var(--theme-border, #d0d4da);
    font-weight: 400;
}

.wf-date-sep-dash {
    margin: 0 0.25rem;
    color: var(--theme-text-muted, #6b7280);
    font-weight: 400;
}

.wf-date-display-datetime {
    font-size: 1.3rem;
    gap: 0.2rem;
}

.wf-ampm-indicator {
    margin-left: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--theme-text-muted, #6b7280);
    align-self: flex-end;
    padding-bottom: 0.1rem;
}

.wf-numpad {
    display: grid;
    grid-template-areas:
        "n7 n8 n9 ca"
        "n4 n5 n6 ca"
        "n1 n2 n3 cc"
        "n0 n0 sl cc";
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 3.25rem);
    gap: 0.5rem;
}

.wf-numpad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 500;
    background: var(--theme-background-raised, #fff);
    border: 1px solid var(--theme-border, #d0d4da);
    border-radius: 6px;
    color: var(--theme-text, #222);
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease, opacity 100ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.wf-numpad-btn:hover:not(:disabled) {
    background: var(--theme-background-hover, #f3f4f6);
    border-color: var(--theme-border-subtle, #b0b7bf);
}

.wf-numpad-btn:active:not(:disabled) {
    background: var(--theme-background-active, #e5e7eb);
}

.wf-numpad-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.wf-numpad-action {
    background: var(--theme-background-subtle, #f8f9fa);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.wf-numpad-action:hover:not(:disabled) {
    background: var(--theme-background-active, #e5e7eb);
}

.wf-numpad-sep {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--theme-text-muted, #6b7280);
}

.wf-numpad.wf-numpad-num {
    grid-template-areas:
        "n7 n8 n9 ca"
        "n4 n5 n6 ca"
        "n1 n2 n3 cc"
        "dp n0 n0 cc";
}

.wf-numpad.wf-numpad-time {
    grid-template-areas:
        "n7 n8 n9 am"
        "n4 n5 n6 pm"
        "n1 n2 n3 md"
        "n0 n0 sl cc";
}

.wf-numpad-btn.wf-ampm-active {
    background: var(--theme-primary, #2563eb);
    color: #fff;
    border-color: var(--theme-primary, #2563eb);
}

.wf-numpad-btn.wf-ampm-active:hover {
    background: var(--theme-primary-hover, #1d4ed8);
    border-color: var(--theme-primary-hover, #1d4ed8);
}

.wf-num-display {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--theme-background-raised, #fff);
    border: 1px solid var(--theme-border, #d0d4da);
    border-radius: 6px;
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--theme-text, #222);
    min-height: 3.25rem;
    word-break: break-all;
}

.wf-num-display-empty {
    color: var(--theme-text-muted, #6b7280);
}

.wf-shortcut-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.625rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--theme-border, #d0d4da);
    border-radius: 6px;
    background: var(--theme-background-raised, #fff);
    color: var(--theme-text-muted, #6b7280);
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.wf-shortcut-btn:hover {
    background: var(--theme-background-hover, #f3f4f6);
    color: var(--theme-text, #222);
}

.wf-shortcut-btn:active {
    background: var(--theme-background-active, #e5e7eb);
}


/* ── Nav buttons (also used by wf-picker-step-footer above) ──────── */

.wf-nav-back,
.wf-nav-next {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    font-family: inherit;
    font-size: var(--theme-font-size-base, 1rem);
    font-weight: 500;
    border-radius: var(--theme-radius-button, 6px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 120ms ease;
    user-select: none;
}

.wf-nav-back {
    background: var(--theme-background-active);
    border-color: var(--theme-border-subtle, var(--theme-border));
    color: var(--theme-text);
}

.wf-nav-back:hover:not(:disabled) {
    background: var(--theme-background-hover);
    border-color: var(--theme-text-muted);
}

.wf-nav-next {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-text-on-primary, #fff);
}

.wf-nav-next:hover:not(:disabled) {
    background: var(--theme-primary-hover, var(--theme-primary));
    border-color: var(--theme-primary-hover, var(--theme-primary));
}

.wf-nav-back:disabled,
.wf-nav-next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ── Review — step header layout ────────────────────────────────── */

.wf-step-header-left {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

/* ── Review — Info step acknowledgement ─────────────────────────── */

.wf-info-acknowledged {
    font-size: 0.85rem;
    color: var(--theme-text-muted, #6b7280);
    font-style: italic;
}

/* ── Review — split / choice readonly radio group ───────────────── */

.wf-split-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wf-split-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--theme-text-muted, #6b7280);
    cursor: default;
}

.wf-split-radio.wf-option-selected {
    color: var(--theme-text, #222);
    font-weight: 500;
}

.wf-split-radio input[type="radio"] {
    accent-color: var(--theme-primary, #2563eb);
    cursor: default;
}

/* The multi-select option story renders the same rows as CHECKBOXES
   (several selections checked) — same accent, same readonly cursor. */
.wf-split-radio input[type="checkbox"] {
    accent-color: var(--theme-primary, #2563eb);
    cursor: default;
}

.wf-split-radio-label {
    flex: 1;
}


/* ── Review — shell (step cards, header row, pencil, group bands) ──
   The one styling source for the shared <WorkflowReview> across the
   web runner, the Portal test runner, and Mobile. These rules lived
   only in UI.Portal/wwwroot/css/runner.css, so Mobile and the
   standalone runner rendered the review unstyled — default-flow
   headers (name and pencil wrapping onto separate lines) and a bare
   browser button for the pencil. */

.wf-review {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wf-review-header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-border, #d0d4da);
}

.wf-review-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-text, #222);
}

.wf-review-subtitle {
    font-size: 0.875rem;
    color: var(--theme-text-muted, #6b7280);
    margin-top: 0.2rem;
}

.wf-review-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}

.wf-review-duration::before {
    content: "·";
    margin-right: 0.75rem;
}

.wf-review-abandoned {
    opacity: 0.55;
    border-top: 1px dashed var(--theme-border, #d0d4da);
    padding-top: 0.75rem;
}

.wf-review-abandoned-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-muted, #6b7280);
    margin-bottom: 0.5rem;
}

.wf-review-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--theme-text, #222);
}

.wf-review-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-muted, #6b7280);
    padding: 0 0 0.25rem;
}

.wf-review-nested {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--theme-border, #d0d4da);
}

.wf-step {
    border: 1px solid var(--theme-border, #d0d4da);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--theme-surface, #fff);
    color: var(--theme-text, #222);
}

.wf-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wf-step-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-step-duration {
    font-size: 0.8em;
    color: var(--theme-text-muted, #6b7280);
    white-space: nowrap;
}

.wf-step-edit {
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 0.2rem 0.35rem;
    font-size: 0.95em;
    line-height: 1;
    color: var(--theme-text-muted, #6b7280);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
}

.wf-step-edit:hover {
    opacity: 1;
    background: var(--theme-surface-hover, #f3f4f6);
}

/* Touch devices have no hover to reveal the half-faded pencil, and a
   0.2rem hit area is a fat-thumb miss — show it plainly and give it a
   real tap target. */
@media (pointer: coarse) {
    .wf-step-edit {
        opacity: 0.85;
        padding: 0.35rem 0.55rem;
        font-size: 1.05em;
    }
}

.wf-step-value {
    font-size: 0.9rem;
    color: var(--theme-text, #222);
}

.wf-step-entity {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}


/* ── Mobile adjustments ─────────────────────────────────────────── */

@media (max-width: 480px) {
    .wf-nav-back,
    .wf-nav-next {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* ── Review diagnostics (test-runner aid) ─────────────────────────────────── */

.wf-review-diagnostics {
    margin-top: 1.5rem;
    padding: 0.75rem;
    border: 1px dashed var(--theme-border, #d0d4da);
    border-radius: 4px;
    background: var(--theme-surface-muted, #f6f7f9);
}

.wf-review-diagnostics > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted, #6b7280);
}

.wf-review-diagnostics-json {
    margin: 0.5rem 0 0 0;
    padding: 0.5rem 0.75rem;
    max-height: 480px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.45;
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #d0d4da);
    border-radius: 3px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* =================================================================
   MediaPanel — workflow media thumbnails + lightbox
   ================================================================= */

.wf-media-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-border-subtle, rgba(0, 0, 0, 0.08));
}

.wf-media-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: transparent;
    border: 1px solid var(--theme-border-subtle, rgba(0, 0, 0, 0.1));
    border-radius: 0.375rem;
    cursor: zoom-in;
    transition: border-color 0.15s, transform 0.05s;
    max-width: 7rem;
}

.wf-media-thumb:hover {
    border-color: var(--theme-primary);
}

.wf-media-thumb:active {
    transform: scale(0.98);
}

.wf-media-thumb-img {
    width: 100%;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.25rem;
    display: block;
}

.wf-media-thumb-icon {
    width: 100%;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--theme-text-muted, #6b7280);
}

.wf-media-thumb-caption {
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
    color: var(--theme-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Lightbox overlay — fills the nearest positioned ancestor (the phone-frame
   .phone-screen in the Portal test panel, the runner page root in standalone
   UI.Runner). Image scales to that container's bounds, not the viewport, so
   the test panel keeps the lightbox inside its phone mockup. */
.wf-media-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10000;
    cursor: zoom-out;
    overflow: hidden;
}

.wf-media-lightbox {
    position: relative;
    max-width: min(100%, 90rem);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
    min-height: 0;
    width: 100%;
}

.wf-media-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.25rem;
    display: block;
    min-height: 0;
}

/* ── MediaView — universal renderer (image / video / audio / pdf / file) ── */

.wf-media-view-img,
.wf-media-view-video {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.25rem;
    display: block;
}

.wf-media-view-pdf {
    width: 100%;
    height: 80vh;
    overflow: auto;
    border-radius: 0.25rem;
    background: var(--theme-background-hover, #f3f4f6);
}

/* PDF.js paints one canvas per page; stack them centered + scrollable. */
.wf-media-view-pdf-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

.wf-media-view-pdf-pages canvas.wf-pdf-page {
    width: 100%;
    max-width: 900px;
    height: auto;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.wf-media-view-audio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    color: #fff;
}

.wf-media-view-audio i {
    font-size: 3rem;
    opacity: 0.3;
}

.wf-media-view-audio audio {
    width: min(100%, 32rem);
}

.wf-media-view-file {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 2rem;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    font-size: 1.125rem;
}

.wf-media-view-file i {
    font-size: 1.5rem;
}

.wf-media-lightbox-link {
    display: inline-flex;
    align-items: center;
    padding: 1.5rem 2rem;
    background: var(--theme-surface, #fff);
    color: var(--theme-text);
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 1.125rem;
}

.wf-media-lightbox-link i {
    font-size: 1.5rem;
}

.wf-media-lightbox-caption {
    margin-top: 0.75rem;
    color: #fff;
    font-size: 0.875rem;
    text-align: center;
    max-width: 100%;
    padding: 0 0.5rem;
    flex-shrink: 0;
}

/* Title + description stack — both shown on the overlay. */
.wf-media-lightbox-title {
    font-weight: 600;
    font-size: 1rem;
}

.wf-media-lightbox-desc {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    opacity: 0.8;
    line-height: 1.35;
}

/* Close button sits inside the lightbox container at top-right so it stays
   visible regardless of how tight the parent's bounds are (small phone-screen
   in the test panel was clipping the earlier negative-top placement). */
.wf-media-lightbox-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 1;
}

.wf-media-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.8);
}


/* ── Files step (StepTypeId=12) — placeholder ─────────────────────── */

.wf-files-capture {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.wf-files-placeholder-banner {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #6b7280);
    background: var(--theme-background-subtle, #f8f9fa);
    border: 1px dashed var(--theme-border-light, #d1d5db);
    border-radius: 4px;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.25rem;
}

.wf-files-slot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--theme-background-subtle, #f8f9fa);
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 6px;
}

.wf-files-slot-label {
    font-size: 0.95rem;
    color: var(--theme-text, #222);
    font-weight: 500;
}

.wf-files-required {
    color: var(--theme-danger, #dc3545);
    margin-left: 0.15rem;
}

.wf-files-busy {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--theme-text-muted, #6b7280);
}

.wf-files-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1rem;
    background: var(--theme-background-raised, #fff);
    border: 1px solid var(--theme-border, #d1d5db);
    border-radius: 6px;
    cursor: pointer;
    width: fit-content;
}

.wf-files-pick input[type="file"],
.wf-files-replace input[type="file"] {
    display: none;
}

.wf-files-filled {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.wf-files-preview {
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--theme-border, #d1d5db);
    flex-shrink: 0;
}

.wf-files-preview .wf-media-view-img,
.wf-files-preview .wf-media-view-video {
    width: 56px;
    height: 56px;
    object-fit: cover;
    max-height: none;
}

.wf-files-icon {
    font-size: 1.5rem;
    color: var(--theme-text-muted, #6b7280);
}

.wf-files-name {
    flex: 1;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-files-replace {
    cursor: pointer;
    color: var(--theme-text-muted, #6b7280);
    padding: 0.25rem;
}

.wf-files-remove {
    background: none;
    border: none;
    color: var(--theme-danger, #dc3545);
    cursor: pointer;
    padding: 0.25rem;
}

.wf-files-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: var(--theme-primary, #2563eb);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.wf-files-upload-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.wf-files-upload-btn:not(:disabled):hover {
    background: var(--theme-primary-hover, #1d4ed8);
}

/* ── AssetItem step (StepTypeId=10) — present/browse assets ───────────── */

.wf-assetitem {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wf-assetitem-loading,
.wf-assetitem-empty {
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

/* Grid — responsive tiles. */
.wf-assetitem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.75rem;
}

/* List — vertical rows. */
.wf-assetitem-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wf-assetitem-list .wf-assetitem-tile {
    flex-direction: row;
    align-items: center;
}

.wf-assetitem-list .wf-assetitem-media {
    width: 4rem;
    height: 4rem;
    flex: 0 0 auto;
}

/* Carousel — horizontal scroll. */
.wf-assetitem-carousel {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
}

.wf-assetitem-carousel .wf-assetitem-tile {
    flex: 0 0 12rem;
    scroll-snap-align: start;
}

/* Single — one large HERO asset, centered + front-and-center. */
.wf-assetitem-single {
    display: flex;
    justify-content: center;
}

.wf-assetitem-single .wf-assetitem-tile {
    flex: 0 0 auto;
    width: 100%;
    max-width: 34rem;
    border: none;
    background: transparent;
}

.wf-assetitem-single .wf-assetitem-media {
    aspect-ratio: 16 / 10;
    border-radius: 0.75rem;
    box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.14);
}

.wf-assetitem-single .wf-assetitem-footer {
    justify-content: center;
    padding-top: 0.5rem;
    font-size: 1rem;
}

.wf-assetitem-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--theme-surface, #fff);
}

.wf-assetitem-selectable {
    cursor: pointer;
}

.wf-assetitem-selectable:hover {
    border-color: var(--theme-primary, #2563eb);
}

.wf-assetitem-selected {
    border-color: var(--theme-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--theme-primary, #2563eb) inset;
}

.wf-assetitem-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--theme-surface-muted, #f3f4f6);
    overflow: hidden;
}

.wf-assetitem-media img,
.wf-assetitem-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A PDF renders its pages tall and can't be object-fit cropped without cutting the
   page. Let the box grow to the content and scroll past a cap instead of clipping
   mid-page inside the fixed image aspect box. */
.wf-assetitem-media.wf-assetitem-media-doc {
    aspect-ratio: auto;
    height: auto;
    max-height: 22rem;
    overflow-y: auto;
    align-items: flex-start;
    background: var(--theme-surface, #fff);
}

.wf-assetitem-single .wf-assetitem-media.wf-assetitem-media-doc {
    max-height: 70vh;
}

.wf-assetitem-media-doc .wf-media-view-pdf,
.wf-assetitem-media-doc .wf-media-view-pdf-pages {
    width: 100%;
}

.wf-assetitem-icon {
    font-size: 2rem;
    color: var(--theme-text-muted, #6b7280);
}

.wf-assetitem-check {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--theme-primary, #2563eb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Full-screen affordance on an image / PDF tile (top-left, opposite the select check). */
.wf-assetitem-expand {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: 1.6rem;
    height: 1.6rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    cursor: pointer;
    z-index: 2;
    transition: background 0.12s ease;
}

.wf-assetitem-expand:hover {
    background: rgba(0, 0, 0, 0.78);
}

/* A PDF title rendered as a full-screen trigger - reads like the name but tappable. */
.wf-assetitem-name-link {
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--theme-primary, #2563eb);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wf-assetitem-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
}

/* Name + description stack, so the download stays right-aligned. */
.wf-assetitem-text {
    flex: 1 1 auto;
    min-width: 0;               /* lets the children ellipsis inside a flex row */
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.wf-assetitem-name {
    font-size: 0.8rem;
    color: var(--theme-text, #374151);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Caption under the title - smaller + muted, single-line ellipsis when long. */
.wf-assetitem-desc {
    font-size: 0.72rem;
    color: var(--theme-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-assetitem-single .wf-assetitem-desc {
    white-space: normal;        /* the hero has room - wrap the caption */
}

.wf-assetitem-download {
    flex: 0 0 auto;
    color: var(--theme-primary, #2563eb);
    text-decoration: none;
}

.wf-assetitem-agree {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--theme-text, #374151);
    cursor: pointer;
}

.wf-assetitem-agree input {
    margin-top: 0.2rem;
}

/* ── CaptureSignature — the DataType 8 canvas pad ───────────────────── */

.wf-capture-signature {
    margin-top: 0.75rem;
}

.wf-signature-pad-wrap {
    position: relative;
    border: 1px dashed var(--theme-border, #c4cad8);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.wf-signature-pad {
    display: block;
    width: 100%;
    height: 180px;
    touch-action: none; /* pointer events own the strokes - no scroll fight */
    cursor: crosshair;
}

.wf-signature-hint {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: var(--theme-text-muted, #8a92a6);
    pointer-events: none;
    user-select: none;
}

.wf-signature-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.wf-signature-clear,
.wf-signature-accept {
    flex: 0 0 auto;
    font: inherit;
    font-size: 0.9rem;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.wf-signature-clear {
    background: transparent;
    border: 1px solid var(--theme-border, #c4cad8);
    color: var(--theme-text, #1a1a2e);
}

.wf-signature-accept {
    flex: 1 1 auto;
    background: var(--theme-primary, #1e6091);
    border: 1px solid var(--theme-primary, #1e6091);
    color: var(--theme-on-primary, #ffffff);
    font-weight: 600;
}

.wf-signature-clear:disabled,
.wf-signature-accept:disabled {
    opacity: 0.6;
    cursor: default;
}

.wf-signature-thumb {
    max-height: 72px;
    max-width: 200px;
    border: 1px solid var(--theme-border, #c4cad8);
    border-radius: 6px;
    background: #ffffff;
}

/* ── Payment capture (StepType 13 — Stripe Payment Element) ─────────────── */
.wf-capture-payment {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 30rem;
    margin: 0 auto;
    width: 100%;
}

/* Amount-due banner: the number is the hero. */
.wf-payment-amount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    background: var(--theme-surface, #f6f8fb);
    border: 1px solid var(--theme-border, #c4cad8);
    font-size: 0.95rem;
    color: var(--theme-text-muted, #8a92a6);
    font-weight: 500;
}

.wf-payment-amount strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--theme-text, #1a1a2e);
    letter-spacing: -0.01em;
    line-height: 1;
}

.wf-payment-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--theme-text-muted, #8a92a6);
    padding: 1.25rem 0;
}

/* The Stripe Element sits in a soft, contained card - feels secure + premium. */
.wf-payment-element:not(:empty) {
    min-height: 1px; /* the Stripe iframe paints its own height once mounted */
    padding: 1rem;
    border-radius: 14px;
    background: var(--theme-card-bg, #ffffff);
    border: 1px solid var(--theme-border, #c4cad8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wf-payment-element:focus-within {
    border-color: var(--theme-primary, #1e6091);
    box-shadow: 0 0 0 3px var(--theme-primary-soft, rgba(30, 96, 145, 0.15));
}

/* The pay button: elevated, lockup, satisfying press. Big tap target for mobile. */
.wf-payment-pay {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 12px;
    padding: 0.95rem 1rem;
    min-height: 3.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-primary, #1e6091);
    border: 1px solid var(--theme-primary, #1e6091);
    color: var(--theme-on-primary, #ffffff);
    box-shadow: 0 2px 8px var(--theme-primary-soft, rgba(30, 96, 145, 0.28));
    transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.wf-payment-pay:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 4px 14px var(--theme-primary-soft, rgba(30, 96, 145, 0.35));
}

.wf-payment-pay:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 5px var(--theme-primary-soft, rgba(30, 96, 145, 0.28));
}

.wf-payment-pay:disabled {
    opacity: 0.65;
    cursor: default;
    box-shadow: none;
}

/* Success receipt: a calm, confident confirmation card with an animated check. */
.wf-payment-receipt {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    border: 1px solid var(--theme-success, #2e7d32);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    background: var(--theme-success-bg, #e9f6ec);
}

.wf-payment-receipt-icon {
    font-size: 1.75rem;
    color: var(--theme-success, #2e7d32);
    line-height: 1;
    animation: wf-pay-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

@keyframes wf-pay-pop {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.wf-payment-receipt-amount {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--theme-text, #1a1a2e);
    letter-spacing: -0.01em;
}

.wf-payment-receipt-card {
    font-size: 0.9rem;
    color: var(--theme-text-muted, #8a92a6);
    margin-top: 0.1rem;
}

.wf-payment-receipt-link {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-primary, #1e6091);
    text-decoration: none;
}

.wf-payment-receipt-link:hover {
    text-decoration: underline;
}

/* ────────────────────────────────────────────────────────────────────────────
   E1 — Confirm-to-complete banner. The "review your answers, then confirm"
   gate that the user crosses to fire WorkflowCompleted. Themed via the
   existing --theme-* token set (web + mobile both consume this RCL).
   ──────────────────────────────────────────────────────────────────────── */
.wf-review-confirm {
    margin: 0 0 1rem 0;
    padding: 0.85rem 1rem;
    background: var(--theme-background-subtle, #f3f6fa);
    border: 1px solid var(--theme-border, #d8dde5);
    border-left: 4px solid var(--theme-primary, #1e6091);
    border-radius: 6px;
}
.wf-review-confirm-hint {
    margin: 0;
    color: var(--theme-text, #1a1a2e);
    font-size: 0.95rem;
    line-height: 1.4;
}
.wf-review-confirm-hint strong {
    color: var(--theme-primary, #1e6091);
}
.wf-review-done {
    border-left-color: #2e7d32;
}
.wf-review-done .wf-review-confirm-hint strong {
    color: #2e7d32;
}

/* ============================================================================
   Answer Story - the AnswerStoryView review tree (lifted from UI.Portal's
   app-cards.css so the shared RCL carries its own styling). Renders on Portal
   (Answer Center) AND Mobile (JobDetail Review modal) AND the printable proof
   packet - all three load this RCL's runner.css. The Answer-Center PAGE chrome
   (.ansc-jobcard / .ansc-jobhead / .ansc-grid) and the proof-packet .ansc-print*
   rules stay in UI.Portal/app-cards.css - they are not part of this component.
   ============================================================================ */
.ansc-story { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.25rem 0; }

.ansc-story-header {
    border-bottom: 2px solid var(--theme-primary);
    padding-bottom: 0.55rem;
    margin-bottom: 0.35rem;
}
.ansc-story-name { font-size: 1.2rem; margin: 0 0 0.35rem; color: var(--theme-text-emphasis); font-weight: 700; display: flex; align-items: center; }
.ansc-story-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--theme-text-secondary); align-items: center; }
.ansc-story-meta .badge { font-size: 0.72rem; }

/* Loop-iteration / multisplit-leg band */
.ansc-band {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius, 0.5rem);
    overflow: hidden;
    background: color-mix(in oklch, var(--theme-primary) 3%, transparent);
}
.ansc-band.is-abandoned { opacity: 0.6; }
.ansc-band-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: color-mix(in oklch, var(--theme-primary) 10%, transparent);
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-emphasis); font-size: 0.9rem;
}
.ansc-band-title { font-weight: 700; }
.ansc-band-unit {
    margin-left: auto;
    background: var(--theme-primary); color: var(--theme-on-primary, #fff);
    padding: 0.12rem 0.6rem; border-radius: 1rem;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
.ansc-band-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem; }

/* Step card */
.ansc-step {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius, 0.5rem);
    background: var(--theme-surface, #fff);
}
.ansc-step.is-abandoned { opacity: 0.6; }
.ansc-step.is-internal {
    background: color-mix(in oklch, var(--theme-warning, #f0ad4e) 12%, var(--theme-surface, #fff));
    border-color: color-mix(in oklch, var(--theme-warning, #f0ad4e) 45%, var(--theme-border));
}

.ansc-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.ansc-step-headline { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; min-width: 0; }
.ansc-step-icon { font-size: 0.9rem; }
.ansc-step-name { font-weight: 700; color: var(--theme-text-emphasis); font-size: 1rem; }
.ansc-step-stamp { flex: 0 0 auto; font-size: 0.74rem; color: var(--theme-text-secondary); white-space: nowrap; }

.ansc-internal-badge {
    background: var(--theme-warning, #f0ad4e); color: var(--theme-warning-text, #3a2c00);
    padding: 0.05rem 0.45rem; border-radius: 0.25rem;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}

.ansc-step-desc { color: var(--theme-text-secondary); font-size: 0.85rem; margin: 0.15rem 0 0.3rem; }
.ansc-step-answer { color: var(--theme-text-emphasis); font-size: 0.97rem; word-break: break-word; margin-top: 0.15rem; }
.ansc-step-answer .ansc-chosen, .ansc-chosen { color: var(--theme-success, #198754); font-weight: 600; }
.ansc-prop em { color: var(--theme-text-secondary); }

.ansc-note {
    margin-top: 0.4rem;
    padding: 0.3rem 0.55rem;
    border-left: 3px solid var(--theme-accent, var(--theme-primary));
    background: color-mix(in oklch, var(--theme-accent, var(--theme-primary)) 5%, transparent);
    color: var(--theme-text-emphasis);
    font-size: 0.88rem; font-style: italic;
    border-radius: 0 0.3rem 0.3rem 0;
}

/* Entity rollup card */
.ansc-entity-card {
    border: 1px solid var(--theme-border);
    border-radius: 0.4rem;
    padding: 0.5rem 0.65rem;
    background: color-mix(in oklch, var(--theme-text-emphasis) 2%, transparent);
    margin-top: 0.15rem;
}
.ansc-entity-title { font-weight: 600; color: var(--theme-text-emphasis); font-size: 0.85rem; margin-bottom: 0.35rem; }
.ansc-entity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.3rem 1rem; }
.ansc-entity-cell { display: flex; flex-direction: column; font-size: 0.9rem; }
.ansc-entity-label { color: var(--theme-text-secondary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ansc-entity-val { color: var(--theme-text-emphasis); }

/* Media grid */
.ansc-media-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.ansc-tile {
    margin: 0;
    border: 1px solid var(--theme-border);
    border-radius: 0.45rem;
    background: var(--theme-surface, #fff);
    overflow: hidden;
    width: 150px;
}
.ansc-tile img { display: block; width: 100%; height: 110px; object-fit: cover; }
.ansc-tile figcaption {
    font-size: 0.7rem; color: var(--theme-text-secondary);
    padding: 0.22rem 0.4rem; text-align: center;
    border-top: 1px solid var(--theme-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ansc-filechip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.6rem; text-decoration: none; color: var(--theme-text-emphasis);
}
.ansc-filechip:hover { background: color-mix(in oklch, var(--theme-primary) 6%, transparent); }

/* AssetItem audit rows — icon + title/description, proof chips. Compact and
   classy by design: the presented assets are curated tenant content, so the
   report shows WHAT was shown + agreed/selected, never the raw media. */
.ansc-assetitems {
    display: flex; flex-direction: column; gap: 0.3rem;
    margin-top: 0.45rem;
}
.ansc-assetitem {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.4rem;
    background: color-mix(in oklch, var(--theme-text) 2%, transparent);
}
.ansc-assetitem > i {
    font-size: 1.05rem;
    color: var(--theme-text-secondary);
    flex: 0 0 auto;
}
.ansc-assetitem-picked {
    border-color: color-mix(in oklch, var(--theme-success, #198754) 45%, var(--theme-border));
    background: color-mix(in oklch, var(--theme-success, #198754) 5%, transparent);
}
.ansc-assetitem-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ansc-assetitem-name { font-weight: 600; font-size: 0.9rem; color: var(--theme-text-emphasis); }
.ansc-assetitem-desc {
    font-size: 0.82rem; color: var(--theme-text-secondary);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ansc-assetitem-chip { flex: 0 0 auto; font-size: 0.82rem; white-space: nowrap; }

/* AssetItem audit on the RUN review (web + mobile) — same doctrine, wf- tokens. */
.wf-step-assetitems {
    display: flex; flex-direction: column; gap: 0.3rem;
    margin-top: 0.45rem;
}
.wf-assetitem-agreed {
    color: var(--theme-success, #198754); font-weight: 600; font-size: 0.9rem;
}
.wf-assetitem-row {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.4rem;
}
.wf-assetitem-row > i {
    font-size: 1.05rem;
    color: var(--theme-text-secondary);
    flex: 0 0 auto;
}
.wf-assetitem-picked {
    border-color: color-mix(in oklch, var(--theme-success, #198754) 45%, var(--theme-border));
    background: color-mix(in oklch, var(--theme-success, #198754) 5%, transparent);
}
.wf-assetitem-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wf-assetitem-name { font-weight: 600; font-size: 0.9rem; color: var(--theme-text-emphasis); }
.wf-assetitem-desc {
    font-size: 0.82rem; color: var(--theme-text-secondary);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wf-assetitem-chip {
    flex: 0 0 auto; font-size: 0.82rem; white-space: nowrap;
    color: var(--theme-success, #198754); font-weight: 600;
}

.ansc-edit-pencil { color: var(--theme-text-secondary); font-size: 0.85rem; line-height: 1; }
.ansc-edit-pencil:hover { color: var(--theme-primary); }

.ansc-story-abandoned { margin-top: 0.4rem; }
.ansc-story-abandoned summary { cursor: pointer; padding: 0.4rem 0.55rem; }
.ansc-story-abandoned-body { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.4rem; }

@media print {
    .ansc-step, .ansc-band { break-inside: avoid; }
    .ansc-internal-badge { border: 1px solid var(--theme-warning-text, #3a2c00); }
}

/* ── RenderAs visual pickers (canvasStyle cards / list) ─────────────────────
   Tap-to-pick tiles over a bundle-sourced list: image (or themed letter
   placeholder), label, authored detail line, UsedPrior badge, selected ring.
   Multi-select properties make tiles checkable (aria-multiselectable). */

.wf-ra-tiles {
    display: grid;
    gap: 0.6rem;
}

.wf-ra-tiles--cards {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.wf-ra-tiles--list {
    grid-template-columns: 1fr;
}

.wf-ra-tile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem;
    text-align: left;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text, #111827);
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: var(--theme-radius, 10px);
    cursor: pointer;
    position: relative;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.wf-ra-tiles--cards .wf-ra-tile {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 0;
    overflow: hidden;
}

.wf-ra-tile:hover {
    border-color: var(--theme-primary, #2563eb);
}

.wf-ra-tile--selected {
    border-color: var(--theme-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--theme-primary-soft, #dbeafe);
}

.wf-ra-tile-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: calc(var(--theme-radius, 10px) - 4px);
    background: var(--theme-surface-muted, #f3f4f6);
    overflow: hidden;
}

.wf-ra-tiles--cards .wf-ra-tile-media {
    width: 100%;
    height: 96px;
    border-radius: 0;
}

.wf-ra-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wf-ra-tile-letter {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-primary, #2563eb);
}

.wf-ra-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.wf-ra-tiles--cards .wf-ra-tile-body {
    padding: 0.45rem 0.55rem 0.6rem;
    align-items: center;
}

.wf-ra-tile-label {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-ra-tile-detail {
    font-size: 0.82rem;
    color: var(--theme-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-ra-tile-used {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--theme-surface-muted, #f3f4f6);
    color: var(--theme-text-muted, #6b7280);
    border: 1px solid var(--theme-border, #e5e7eb);
}

.wf-ra-tiles--cards .wf-ra-tile-used {
    align-self: center;
}

.wf-ra-tile-check {
    display: none;
    color: var(--theme-primary, #2563eb);
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.wf-ra-tiles--cards .wf-ra-tile-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--theme-primary, #2563eb);
    color: var(--theme-surface, #ffffff);
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.wf-ra-tile--selected .wf-ra-tile-check {
    display: flex;
}

/* ── Review — media constraints + the document row ──────────────────
   The review is a RECAP: inline media (image/video/audio) stays in a
   constrained box on any screen; documents render as an icon + title +
   open link (never inlined - the 200-page-handbook lesson). */

.wf-step-media-item {
    max-width: 480px;
}

.wf-step-media-item img,
.wf-step-media-item video,
.wf-step-media-item audio,
.wf-step-media-item canvas,
.wf-step-media-item iframe {
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
}

.wf-review-doc-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-border, #e2e6eb);
    border-radius: var(--theme-radius, 8px);
    background: var(--theme-background-subtle, #f6f7f9);
    color: var(--theme-text, #1f2328);
    text-decoration: none;
    max-width: 100%;
}

.wf-review-doc-row:hover {
    border-color: var(--theme-primary, #2563eb);
    color: var(--theme-primary, #2563eb);
}

.wf-review-doc-row > i:first-child {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.wf-review-doc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.wf-review-doc-open {
    flex-shrink: 0;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* ═══ THE CANVAS — the run-surface presentation skin (hero + background) ═══
   Painted by the host shells from WorkflowRunner.GetPresentation(): portal
   RunHost renders the hero SPLIT (image column beside the content, flipping
   for heroRight, collapsing to a top banner on small widths); mobile RunPage
   renders the hero BANNER above the step. The hero swaps per step via
   renderAs.hero — "the step tells the canvas: use this background now." */

.wf-hero-split {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: min(100%, 1400px);
    min-height: 0;
    gap: 1.25rem;
}

.wf-hero-split.wf-hero-off .wf-hero-side {
    display: none;
}

.wf-hero-side {
    flex: 1 1 44%;
    max-width: 46%;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--theme-radius, 14px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}

.wf-hero-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wf-hero-right .wf-hero-side {
    order: 2;
}

.wf-hero-content {
    flex: 1 1 56%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

@media (max-width: 900px) {
    /* Small widths: the hero image collapses to a TOP HEADER band. */
    .wf-hero-split {
        flex-direction: column;
        gap: 0.75rem;
    }

    .wf-hero-side,
    .wf-hero-right .wf-hero-side {
        order: 0;
        flex: 0 0 auto;
        max-width: 100%;
        height: 160px;
    }
}

/* The mobile / small-surface hero BANNER (above the step content). The image
   SHRINKS TO FIT (contain, natural height up to the cap) - never an odd crop
   through the middle of the art. */
.wf-hero-banner {
    flex: 0 0 auto;
    max-height: 320px;
    overflow: hidden;
}

.wf-hero-banner img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    display: block;
}

/* WIDE viewports honor the skin's hero SPLIT on the mobile shell too: the
   banner becomes a full-height side column beside the step (heroRight flips
   it), mirroring the portal RunHost's wf-hero-split. Under 900px the rules
   above keep the phone's top-band look. */
@media (min-width: 900px) {
    .wf-run-page.wf-hero-layout-left,
    .wf-run-page.wf-hero-layout-right {
        display: flex;
        align-items: stretch;
        min-height: 100dvh;
    }

    .wf-run-page.wf-hero-layout-left .wf-hero-banner,
    .wf-run-page.wf-hero-layout-right .wf-hero-banner {
        flex: 1 1 44%;
        max-width: 46%;
        max-height: none;
        min-width: 0;
    }

    .wf-run-page.wf-hero-layout-left .wf-hero-banner img,
    .wf-run-page.wf-hero-layout-right .wf-hero-banner img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
    }

    .wf-run-page.wf-hero-layout-right .wf-hero-banner {
        order: 2;
    }

    .wf-run-page.wf-hero-layout-left .wf-run-body,
    .wf-run-page.wf-hero-layout-right .wf-run-body {
        flex: 1 1 56%;
        min-width: 0;
    }
}

/* Canvas background tokens (Workflow.PresentationJson "background"). */
.wf-canvas-bg-subtle {
    background: var(--theme-background-subtle);
}

.wf-canvas-bg-primary {
    background: color-mix(in srgb, var(--theme-primary) 10%, var(--theme-background));
}

.wf-canvas-bg-transparent {
    background: transparent;
}