/* Asset Readiness Agent -- additions on top of scva.css (Social Compass).

   Only what Social Compass has no equivalent for lives here: the fifth
   deliverable state (partially delivered), the visible pipeline, the
   creative files drop box and the inline inputs form. Everything else is the shared
   vocabulary in scva.css. See docs/design-reference.md. */

/* -- Brand ----------------------------------------------------------------- */
/* Brand palette (Tim, 2026-10-08): deep blue #1428A0, bright blue #3C90EF,
   ice #EAF8FC. Deep blue carries buttons and links (white text passes AA;
   the bright blue doesn't), bright blue is the highlight, ice is the page.
   The header is solid deep blue. Neutrals take a cool blue cast to match. */
:root {
    --brand-deep: #1428a0;
    --brand-bright: #3c90ef;
    --brand-ice: #eaf8fc;
    /* Secondary pastels: too pale for white text, so deep-blue text on them.
       Mint = pass/complete, cream = check tags, pink = the one current item. */
    --brand-mint: #8ae1b8;
    --brand-pink: #f5baef;
    --brand-cream: #fcf8e6;
    --color-rule-bg: var(--brand-cream);
    --color-bg: var(--brand-ice);
    --color-surface-sunken: #e1ebf3;
    --color-border: #d2dfea;
    --color-result-border: #a9bccf;
    --color-text: #0f1a33;
    --color-text-muted: #56627a;
    --color-accent: var(--brand-deep);
    --color-job-card-border: rgba(20, 40, 160, 0.13);
    --color-job-card-border-hover: rgba(20, 40, 160, 0.26);
    --focus-ring: var(--brand-bright);
}
:root[data-theme="dark"] {
    --color-bg: #0b1230;
    --color-surface: #111a3d;
    --color-surface-raised: #17224a;
    --color-surface-sunken: #0e1638;
    --color-job-card: #111a3d;
    --color-job-card-border: #26326a;
    --color-job-card-border-hover: #3a4a8c;
    --color-border: #26326a;
    --color-result-border: #3a4a8c;
    --color-text: var(--brand-ice);
    --color-text-muted: #9fb0cf;
    --color-accent: var(--brand-bright);
    --color-accent-contrast: #0b1230;
}
:root, :root[data-theme="dark"] {
    --color-header-bg: var(--brand-deep);
    --color-header-text: #ffffff;
    --color-header-text-muted: #c6d6f5;
}
.site-nav a[aria-current="page"],
.site-nav__group a[aria-current="page"],
.site-nav__group > summary[aria-current="page"],
.status-filter a[aria-current="true"] { background: var(--brand-pink); border-color: var(--brand-pink); color: var(--brand-deep); }
.button--quiet { color: var(--color-accent); border-color: var(--color-accent); }
.dropzone--over { background: color-mix(in srgb, var(--brand-pink) 30%, var(--color-surface)); }
:root:not([data-theme="dark"]) {
    --decision-pass: color-mix(in srgb, var(--brand-mint) 30%, var(--color-surface));
}
:root:not([data-theme="dark"]) .result-tile--pass,
:root:not([data-theme="dark"]) .job-results__item--pass .job-results__badge {
    background: color-mix(in srgb, var(--brand-mint) 30%, var(--color-surface));
    border-color: var(--brand-mint);
}
.pcg-login-mark { display: block; margin: 0 auto var(--space-3); width: 3.5rem; height: 3.5rem; }
.pcg-login-mark img { width: 100%; height: 100%; }

/* -- Campaign header: the code muted before the name, then the tabs ------- */
/* Underlined tabs on a full-width rule, not SCVA's filter pills: pills
   filter a list, these switch between the pages of one campaign (Tim,
   2026-10-08). The active tab's accent underline sits over the rule. */
.campaign-tabs {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
    margin: var(--space-3) 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.campaign-tabs a {
    display: inline-flex; align-items: baseline; gap: 0.4rem;
    padding: var(--space-2) 0; margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    color: var(--color-text-muted); text-decoration: none;
    font-size: var(--text-sm); font-weight: 600;
}
.campaign-tabs a:hover { color: var(--color-text); border-bottom-color: var(--color-border); }
.campaign-tabs a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.campaign-tabs__count { color: var(--color-text-muted); font-weight: 400; font-variant-numeric: tabular-nums; }

/* -- The fifth state: partially delivered, in the band palette's orange ---- */
.job-results__item--partial .job-results__badge { --badge: var(--band-skipped); }
.result-tile--partial { --tile: var(--band-skipped); }
.result-tiles--five .result-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.result--partial .result__compliance { color: var(--band-skipped); }
.result--pending .result__compliance { color: var(--color-review); }
.result--partial .result__post {
    background: color-mix(in srgb, var(--band-skipped) 7%, var(--color-surface));
}
.job-row--idle { --job-row-edge: var(--color-border); }

/* Facts that carry a state. */
.fact--pass { color: var(--color-pass); font-weight: 600; }
.fact--fail { color: var(--color-fail); font-weight: 600; }
.plan-state { display: inline-flex; vertical-align: -3px; margin-left: var(--space-1); }
.fact--muted { color: var(--color-text-muted); }
.plan-errors { margin-top: var(--space-2); }
.plan-errors .form-error { max-height: 14rem; overflow: auto; }

/* -- Output card ------------------------------------------------------------- */
.output-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.output-actions form { margin: 0; }
.export-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
button[disabled] { opacity: 0.5; cursor: not-allowed; filter: none; }

/* -- Upload: the creative files form inside its wide card ------------------- */
.form.upload { margin: 0; max-width: none; padding: 0; border: 0; box-shadow: none; background: none; }
.form.upload input[type="file"] { width: 100%; }

/* -- Checks card: the last run of every stage as a verdict row ---------------------------------- */
.pipeline .results__heading .badge { margin-left: var(--space-2); }
.pipeline__stages { margin: 0; padding: 0; }
/* Stage, status, time, then what it did (Tim, 2026-10-08). */
.pipeline__row {
    /* Stage names are one or two short words, so the first track is
       sized to "Load plan", not the 14rem a rule name needs. */
    grid-template-columns: 6.5rem var(--verdict-badge) 4.5rem minmax(0, 1fr);
}
/* Plain text, not a tag: the tag look belongs to rules (Tim, 2026-10-08). */
.pipeline__stage { font-weight: 600; }
.pipeline__when { font-variant-numeric: tabular-nums; }
.verdict--running .verdict__badge {
    color: var(--color-accent);
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-surface));
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.pipeline__file { color: var(--color-text-muted); }
.pipeline__idle { color: var(--color-text-muted); }
.verdict--pending .verdict__why { color: var(--color-text-muted); }

/* -- Channel and partner breakdown ---------------------------------------- */
.matrix .num { text-align: center; font-variant-numeric: tabular-nums; }
.matrix .num--zero { color: var(--color-text-muted); opacity: 0.5; }
.breakdown__key {
    display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem;
    background: var(--key, var(--color-text-muted));
}
.breakdown__key--pass { --key: var(--color-pass); }
.breakdown__key--fail { --key: var(--color-fail); }
.breakdown__key--review { --key: var(--color-review); }
.breakdown__key--partial { --key: var(--band-skipped); }

/* -- Deliverable cards ------------------------------------------------------- */
/* Partner logo (pipeline/partner_marks.py); the name is its hover title. */
.partner-mark { display: inline-flex; flex: none; line-height: 0; cursor: default; }
.partner-mark svg { border-radius: 5px; }
.partner-option { display: inline-flex; align-items: center; gap: var(--space-2); }
/* The partner filter sits at the toolbar's right edge, so its panel opens leftwards. */
.filter-bar__controls .dropdown-select__listbox { left: auto; right: 0; min-width: 14rem; }
/* Names what a bare plan value is ("Netflix" is the partner, "Digital" the channel). */
.result__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-right: var(--space-1); }
.result__more { border-top: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.result__more > summary {
    cursor: pointer; padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm); font-weight: 600; color: var(--color-accent);
}
.result__more > summary:hover { text-decoration: underline; }
.result__more[open] > summary { border-bottom: var(--border-width) solid var(--color-border); }
.result__more-empty { padding: var(--space-2) var(--space-4); margin: 0; }
.result__more code { overflow-wrap: anywhere; }
/* One line: label and names share it, the overflow ellipses at the card edge. */
.result__files { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result__files a { display: inline; }
.result__inputs { margin: 0; max-width: none; padding: var(--space-3) var(--space-4) var(--space-4); border: 0; box-shadow: none; background: none; }
.inputs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.inputs-grid__wide { grid-column: 1 / -1; }
.inputs-grid .hint { display: inline; font-weight: 400; margin-left: var(--space-1); }
.tag--error { border-color: var(--color-fail); color: var(--color-fail); }
.tag--review { border-color: var(--color-review); color: var(--color-review); }
code.wrap { overflow-wrap: anywhere; font-size: var(--text-xs); }
.taxonomy-string { padding: var(--space-3) var(--space-4) 0; }
.taxonomy-string .result__label { margin: 0 0 var(--space-1); }
.taxonomy-string .hint { margin: var(--space-1) 0 0; }
.taxonomy-string__row { display: flex; align-items: flex-start; gap: var(--space-2); }
.taxonomy-string__name { flex: 1; min-width: 0; }
/* The derived filename: values in full, keys muted, blank required segments flagged. */
.taxonomy-name {
    display: block; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.6;
    padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}
.taxonomy-name__seg:hover { background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
.taxonomy-name__key { color: var(--color-text-muted); }
.taxonomy-name__seg--missing { color: var(--color-review); font-weight: 600; text-decoration: underline wavy; text-underline-offset: 3px; }
.taxonomy-name__seg--missing::after { content: "?"; }
.summary-count--bad { color: var(--color-fail); }
.taxonomy-copy { flex-shrink: 0; }
.hint--warn { color: var(--color-review); }

/* -- Review queue and file page --------------------------------------------- */
/* SCVA's review-media frame, outside the review screen's fixed-height layout. */
.file-media { max-height: none; margin-bottom: var(--space-5); }
.review-file { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(20rem, 1fr); gap: var(--space-5); align-items: start; }
.review-file__head {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
    padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border);
}
.review-file__title { display: grid; gap: var(--space-1); min-width: 0; }
.review-file__title .card__title { margin: 0; overflow-wrap: anywhere; }
.review-file__pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.review-file__pick .job-facts__label { margin: 0 var(--space-1) 0 0; }
.review-file__pick select {
    font: inherit; padding: var(--space-2); min-width: 0;
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-text);
}
.review-file__media { min-width: 0; }
.review-file__player { display: block; width: 100%; max-height: 26rem; object-fit: contain; background: #000; border-radius: var(--radius); }
.review-file__guess { margin: 0; min-width: 0; padding-left: var(--space-4); }
.review-file__guess .job-facts__group { min-width: 0; }
.review-file__guess dl { grid-template-columns: 7rem minmax(0, 1fr); }
.review-words { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.review-compare { border-collapse: collapse; }
.review-compare th, .review-compare td { text-align: left; padding: 0 var(--space-4) var(--space-2) 0; }
.review-compare th:first-child { width: 7rem; }
.review-compare thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: 600; }
.review-compare tbody th { color: var(--color-text-muted); font-weight: 700; }
.review-compare--ok td { color: var(--color-pass); }
.review-compare--bad td { color: var(--color-fail); }
.review-others ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.review-others__reason { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 760px) { .review-file { grid-template-columns: 1fr; } .review-file__guess { padding-left: 0; } }
.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.match-list__item { display: grid; gap: var(--space-1); justify-items: start; }
.match-list__item form { display: flex; gap: var(--space-2); margin: 0; }
.checks-group__title { margin: var(--space-4) 0 var(--space-2); display: flex; gap: var(--space-2); align-items: baseline; }
.checks-group__title:first-of-type { margin-top: 0; }
.settings-keys { display: flex; flex-wrap: wrap; gap: var(--space-1); }

@media (max-width: 760px) {
    .inputs-grid { grid-template-columns: 1fr; }
}

/* scva.css caps .matrix at 40rem; a wide card has the room, so lift the cap. */
.card--wide .matrix { width: 100%; max-width: none; }
/* Headings on one line: the status key sits beside the word, and the cells give up some of scva's padding to make room. */
.card--wide .matrix th { white-space: nowrap; }
.card--wide .matrix th, .card--wide .matrix td { padding-left: var(--space-3); padding-right: var(--space-3); }
/* Files list fills the card, but the filename column takes a fixed share rather than all the slack;
   long underscore-joined filenames wrap rather than push Uploaded off the card. */
.matrix--files th:first-child { width: 40%; }
.matrix--files td:first-child { overflow-wrap: anywhere; }

/* Radio groups reuse scva's .field--options/.field--check pattern; scva only
   un-stretches checkboxes, so stop `.field input { width: 100% }` widening radios. */
.field--check input[type="radio"] { width: auto; flex: 0 0 auto; margin: 0; }

/* Campaign page: a 2x2 grid, details | status, upload | export, each row's
   cards stretched to one height; the Deliverables card takes the slack. */
.job-overview--rows { align-items: stretch; }
.job-overview--rows .job-live { grid-template-rows: auto 1fr; }

/* -- Creative files drop box --------------------------------------------------- */
/* Creative files drop box. The real file input covers the box invisibly,
   so click and drop work without the script; dropzone.js adds the drag
   highlight and the queued-file list. */
.dropzone {
    position: relative;
    display: grid; place-items: center; align-content: center; gap: var(--space-1);
    min-height: 7.5rem; padding: var(--space-4);
    border: 2px dashed color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); color: var(--color-text-muted);
    text-align: center; font-size: var(--text-sm);
    transition: border-color 120ms, background-color 120ms;
}
.dropzone p { margin: 0; }
.dropzone__prompt { pointer-events: none; }
.dropzone strong { color: var(--color-text); }
.dropzone:hover, .dropzone--over { border-color: var(--color-accent); }
.dropzone--over { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); }
.dropzone:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.field .dropzone__input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.dropzone--off { opacity: 0.6; background: var(--color-surface-sunken); }
.dropzone--off, .dropzone--off:hover { border-color: var(--color-border); }
.field .dropzone--off .dropzone__input { cursor: not-allowed; }
.dropzone__count { color: var(--color-text); font-weight: 600; }
.dropzone__list {
    list-style: none; margin: var(--space-2) 0 0; padding: 0;
    display: grid; gap: var(--space-1); max-height: 12rem; overflow: auto; font-size: var(--text-sm);
}
.dropzone__item { display: flex; align-items: center; gap: var(--space-2); }
.dropzone__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__size { color: var(--color-text-muted); }
.dropzone__remove {
    padding: 0 var(--space-2); line-height: 1.4; font-size: var(--text-md);
    background: none; border: 0; color: var(--color-text-muted); box-shadow: none;
}
.dropzone__remove:hover { color: var(--color-fail); }

/* Required taxonomy drop-downs. */
.required-mark { color: var(--color-fail); }

/* Deliverable page: status and partner facts, form cards, accepted filenames, the test box, the raw plan row. */
.card__title-meta { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.partner-fact { display: inline-flex; align-items: center; gap: var(--space-2); }
.status-fact { margin: 0 0 var(--space-2); }
/* The taxonomy and inputs forms pad themselves for the list's disclosures; a card already has padding. */
.card--form .taxonomy-string, .card--form .result__inputs { padding-left: 0; padding-right: 0; }
.card--form .hint { margin-left: 0; }
.accepted-names td { vertical-align: top; }
.accepted-names .badge { white-space: nowrap; }
.accepted-names td:last-child { vertical-align: middle; }
.accepted-names code { display: inline-block; margin-top: var(--space-1); }
.try-name { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.try-name__title { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.try-name__row { display: flex; gap: var(--space-2); margin: 0; }
.try-name__row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.try-name__result {
    margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}
.try-name__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.try-name__result .card__meta { margin-top: var(--space-2); }
.plan-raw {
    display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-2) var(--space-4);
    margin: var(--space-3) 0 0; font-size: var(--text-sm);
}
.plan-raw dt { color: var(--color-text-muted); font-weight: 700; }
.plan-raw dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.accepted-names tr.accepted-names__method td { border-top: var(--border-width) solid var(--color-border); }
.accepted-names td p { margin: var(--space-1) 0 0; }
.accepted-names td.accepted-names__example { background: var(--color-bg); }
.accepted-names td.accepted-names__example--match { background: color-mix(in srgb, var(--color-pass) 8%, var(--color-surface)); }
.accepted-names tbody tr.accepted-names__blocked { background: none; }

/* -- Plan rules preview: source text beside what was read ------------------ */
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-3); }
@media (max-width: 900px) { .rules-grid { grid-template-columns: 1fr; } }
.rules-source__cell { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.rules-heading { font-size: var(--text-md); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); }
.rules-part { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.rules-source__cell + .rules-part { margin-top: var(--space-3); }
.rules-facts { margin-top: 0; }
.rules-facts dd [title] { cursor: help; }
.rules-quote { color: var(--color-text-muted); font-size: var(--text-xs); }
.rules-flag { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); border-left: var(--border-width) solid var(--color-border); }
.rules-flag--unclear { border-left-color: var(--color-review); }
.rules-flag--manual { color: var(--color-text-muted); }
.rules-group--failed, .rules-group--pending { border-color: var(--color-review); }
.rules-group > span[id] { display: block; scroll-margin-top: var(--space-4); }
.rules-source, .rules-read { min-width: 0; overflow-wrap: anywhere; }

/* Delete campaign: the one destructive button. */
.button--danger { background: var(--color-fail); color: var(--color-accent-contrast); }