/* Tinted status pills derive from the shared --status-* tokens (ordavant-ui):
   a pale tint for the fill, a darkened token for the text. */
:root {
    --status-success-tint: color-mix(in srgb, var(--status-success) 16%, transparent);
    --status-success-ink:  color-mix(in srgb, var(--status-success) 70%, black);
    --status-warning-tint: color-mix(in srgb, var(--status-warning) 16%, transparent);
    --status-warning-ink:  color-mix(in srgb, var(--status-warning) 62%, black);
    --status-neutral-tint: color-mix(in srgb, var(--status-neutral) 16%, transparent);
    --status-neutral-ink:  color-mix(in srgb, var(--status-neutral) 70%, black);
}
/* dashboard.html */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    padding: 1rem;
    border: 2px dashed var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    text-align: center;
    margin-bottom: 0.4rem;
}
.dropzone:hover { border-color: var(--pico-primary); }
.dropzone.dragover { border-color: var(--pico-primary); background: color-mix(in srgb, var(--pico-primary) 12%, transparent); }
.dropzone input[type="file"] {
    /* Visually hidden but kept in the DOM so the form submit serializes
       its files. Click-to-browse uses the wrapping label semantics below. */
    position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.dropzone-prompt { font-size: 0.95rem; color: var(--pico-muted-color); }
.dropzone-files { display: block; margin-top: 0.4rem; font-size: 0.85rem; word-break: break-word; }
.dropzone-files:empty { display: none; }
.dropzone.has-files .dropzone-prompt { font-size: 0.8rem; opacity: 0.7; }


/* RSS Feed panel — feed-health checklist + status badge. */
.validation-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.validation-list li { padding: 0.25rem 0; font-size: 0.95rem; }
.validation-list li.ok { color: var(--status-success, #059669); }
.validation-list li.warn { color: var(--status-warning, #b45309); }
.validation-list .validation-fix-link { font-size: 0.85rem; margin-left: 0.4rem; }
/* Distribution platform cards — vertical content cards (not .sort-card, which is a horizontal flex row). */
.dist-card { border: 1px solid var(--pico-muted-border-color, #d8dee4); border-radius: var(--pico-border-radius); padding: 1rem 1.25rem; margin-bottom: 0.75rem; }
.dist-card-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; }
.dist-card-head strong { font-size: 1.05rem; }
.dist-status { font-size: 0.78rem; padding: 0.12rem 0.55rem; border-radius: 1rem; background: var(--status-neutral-tint); color: var(--status-neutral-ink); white-space: nowrap; }
.dist-status.warn { background: var(--status-warning-tint); color: var(--status-warning-ink); }
.dist-status.ok { background: var(--status-success-tint); color: var(--status-success-ink); }
.dist-note { font-size: 0.9rem; color: var(--pico-muted-color, #5b6470); margin: 0 0 0.55rem; }
.dist-code { background: var(--status-success-tint); color: var(--status-success-ink); padding: 0.4rem 0.65rem; border-radius: var(--pico-border-radius); font-size: 0.92rem; margin: 0 0 0.6rem; word-break: break-all; }
.dist-steps { margin: 0.2rem 0 0.8rem 1.15rem; padding: 0; font-size: 0.9rem; color: var(--pico-muted-color, #5b6470); }
.dist-steps li { margin: 0.18rem 0; }
.dist-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dist-actions .btn-sm, .dist-actions .btn-xs { margin: 0; }
.rss-status-badge { display: inline-block; padding: 0.3rem 0.7rem; border-radius: var(--pico-border-radius); font-size: 0.9rem; font-weight: 500; margin: 0.5rem 0; }
.rss-status-badge.ok { background: var(--status-success-tint); color: var(--status-success-ink); }
.rss-status-badge.warn { background: var(--status-warning-tint); color: var(--status-warning-ink); }
#rss-feed-url { font-family: var(--pico-font-family-monospace); font-size: 0.9rem; }

/* Cohost's own dialogs render the <dialog> itself as the card, rather than the
   Pico `dialog > article` structure the other products use.

   This began as a workaround: ordavant.confirmDialog() used to inject
   <h3>/<p>/<div> straight into the dialog with no <article>, and since Pico
   styles a bare <dialog> as a flex centering box, its children strung out
   across one row. The workaround was applied to `.narratory-confirm-dialog` —
   the shared component's own class — and Cohost's own dialogs then adopted
   that class to inherit it.

   The shared helper was fixed on 2026-07-25 and now emits a proper <article>.
   Leaving these rules on `.narratory-confirm-dialog` would have given every
   Cohost confirm a card inside a card, so they move to a Cohost-owned class.
   The shared class belongs to the shared component — see design_standards.md
   §6, which now says so explicitly.

   The two dialogs below (#channel-create-dialog and the progress monitor built
   in openProgressMonitor) still deviate from the §6 `dialog > article`
   structure. That is deliberate for now: converting the 184-line multi-step
   create flow is a visual change worth making on its own, not as a side effect
   of unblocking the shared fix. */
dialog.cohost-card-dialog {
    display: block;
    position: fixed;
    inset: 0;
    width: calc(100% - 2rem);
    max-width: 28rem;
    height: fit-content;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    margin: auto;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    color: var(--pico-color);
}
dialog.cohost-card-dialog:not([open]) { display: none; }
dialog.cohost-card-dialog h3 { margin-top: 0; }

/* approve.html */
#proper-names-table { width: 100%; border-collapse: collapse; }
#proper-names-table th, #proper-names-table td { padding: 0.4rem 0.6rem; vertical-align: middle; border-bottom: 1px solid var(--pico-muted-border-color); }
#proper-names-table td.transcribed { color: var(--pico-muted-color); font-family: var(--pico-font-family-monospace); font-size: 0.85rem; }
#proper-names-table input[type="text"], #proper-names-table select { margin: 0; padding: 0.2rem 0.4rem; font-size: 0.85rem; }
#proper-names-table th { text-align: left; font-size: 0.8rem; color: var(--pico-muted-color); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
.toggle-grid label { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.toggle-grid label input[type="radio"],
.toggle-grid label input[type="checkbox"] { flex-shrink: 0; }
.mode-cards { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.mode-card { display: block; padding: 0.75rem 1rem; background: var(--pico-card-background-color); border-left: 3px solid transparent; border-radius: 0 4px 4px 0; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; margin: 0; }
.mode-card:hover { background: var(--pico-secondary-background); }
.mode-card:has(input:checked) { border-left-color: var(--pico-primary); }
.mode-card.is-disabled { opacity: 0.5; cursor: not-allowed; }
.mode-card .mode-card-row { display: flex; align-items: baseline; gap: 0.5rem; }
.mode-card .mode-card-row input[type="radio"] { flex-shrink: 0; }
.mode-card .mode-card-desc { display: block; margin: 0.25rem 0 0 1.5rem; font-size: 0.9rem; color: var(--pico-muted-color); }
.section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); }
.section h2 { margin-top: 0.5rem; }
.first-episode-notice { padding: 0.75rem 1rem; background: var(--pico-card-background-color); border-left: 3px solid var(--pico-primary); margin-bottom: 1rem; }
.disabled-block { opacity: 0.45; pointer-events: none; }

/* preview.html */
.preview-meta { background: var(--pico-card-background-color); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.preview-meta dt { font-size: 0.8rem; text-transform: uppercase; color: var(--pico-muted-color); letter-spacing: 0.04em; margin-top: 0.75rem; }
.preview-meta dt:first-child { margin-top: 0; }
.preview-meta dd { margin: 0.15rem 0 0 0; }
.action-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
details.transcript-details > summary { cursor: pointer; padding: 0.5rem 0; font-weight: 500; }
.transcript-block { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.5; background: var(--pico-card-background-color); padding: 1rem; max-height: 50vh; overflow-y: auto; }
/* package.html */
.package-card { background: var(--pico-card-background-color); padding: 1.25rem; margin-bottom: 1rem; border-left: 3px solid var(--pico-primary); }
.copy-field { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.5rem; }
.copy-field textarea, .copy-field input { flex: 1; margin: 0; font-family: var(--pico-font-family-monospace); font-size: 0.85rem; }
.copy-btn { white-space: nowrap; }
.download-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
.download-row a { display: inline-flex; gap: 0.4rem; align-items: center; }
.unavailable { color: var(--pico-muted-color); font-size: 0.85rem; }
.deep-link { margin-top: 1.5rem; padding: 0.75rem 1rem; background: var(--pico-card-background-color); display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.help-text { margin-top: 0.25rem; }