/* ==========================================================================
   Corvus Studio additions to the Corvus design system v2.
   corvus.css is a verbatim copy of the Hub's (the upstream); this file is
   loaded after it and holds only what Studio adds: the seventh creator
   token, the language switch in the shell footer, and the pipeline board.
   Never restyle a corvus.css class here; add a Studio class instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens: Tyra (dormant), the seventh creator. Hue 248, between Lucia and
   Romy; 6.6:1 dark and 6.2:1 light on the panel. See DESIGN.md.
   -------------------------------------------------------------------------- */
:root { --c-tyra: #9b8cff; }
html[data-theme="light"] { --c-tyra: #5b48c9; }
[data-creator="tyra"] { --creator: var(--c-tyra); }

/* app.js shows and hides elements through the hidden attribute (the instruction edit form, among
   others). corvus.css has no global rule for it, and a component display value (.form, flex) would
   beat the user-agent display:none, so the attribute must win explicitly. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   2. Shell: language seg beside the theme seg; collapsed forms; user row
   -------------------------------------------------------------------------- */
.lang-seg > a { padding: 0 8px; font-weight: 600; letter-spacing: 0.02em; }
.lang-mini { display: none; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; }
.shell[data-collapsed="true"] .lang-seg { display: none; }
.shell[data-collapsed="true"] .lang-mini { display: inline-flex; }
.foot-user { cursor: default; }
.foot-user:hover { background: transparent; color: var(--ink-2); }
.foot-user .tag { margin-left: auto; }
.shell[data-collapsed="true"] .foot-user .tag { display: none; }
.wordmark-app { color: var(--ink-3); font-weight: 500; margin-left: 4px; }

/* --------------------------------------------------------------------------
   3. Page head: the creator filter is a seg with creator dots
   -------------------------------------------------------------------------- */
.creator-seg > a { gap: 7px; }
.creator-seg .dot { width: 7px; height: 7px; }

/* --------------------------------------------------------------------------
   4. Availability (next rotation) as the KPI strip: one tile per creator,
   the big number is fresh reels over slots, the meter is the coverage bar
   on the semantic tokens (green covered, amber short).
   -------------------------------------------------------------------------- */
.big .of { font-size: var(--t-md); font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.kpi progress.meter { height: 6px; margin: 2px 0; }
.kpi-sub { font-size: var(--t-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.45; }
.kpi-sub b { color: var(--ink); font-weight: 600; }
.kpi .st-idle b { font-weight: 500; }
@media (min-width: 1181px) {
    .avail-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* --------------------------------------------------------------------------
   5. Pipeline board: three <details> columns of numbered reel chips.
   The chip carries a thin edge in the creator colour (identity), the ok /
   warn state on the semantic tints (bundle complete / bundle needs fixing),
   and the group head repeats the creator dot.
   -------------------------------------------------------------------------- */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
.board-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.column { background: var(--panel); border-radius: var(--r-md); box-shadow: var(--shadow-1); min-width: 0; }
.col-head {
    display: flex; align-items: center; gap: 8px;
    padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; user-select: none;
    border-radius: var(--r-md);
}
.col-head::-webkit-details-marker { display: none; }
.col-head:hover { background: var(--hover); }
.column[open] > .col-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.col-title { font-size: var(--t-md); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.col-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--r-pill);
    background: var(--raised); box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.col-caret { margin-left: auto; color: var(--ink-3); transition: transform var(--dur-2) var(--ease-out); }
.column:not([open]) .col-caret { transform: rotate(-90deg); }
.col-body { padding: 0 var(--s-4) var(--s-4); max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; }
.column.is-empty .col-body { padding-bottom: var(--s-2); }
.col-body .empty { padding: var(--s-4) 0 var(--s-3); }

.chip-group + .chip-group { margin-top: var(--s-4); }
.chip-group-head { margin-bottom: 8px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.chip-group-count { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }

.reel-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 52px; height: 26px; padding: 0 9px 0 11px; border-radius: var(--r-sm);
    background: var(--raised); color: var(--ink-2);
    box-shadow: inset 3px 0 0 var(--creator), var(--shadow-1);
    font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color var(--dur-1), transform var(--dur-1), box-shadow var(--dur-1);
}
.reel-chip:hover { color: var(--ink); transform: translateY(-1px); }
.reel-chip.ok { color: var(--good); background: var(--good-bg); }
.reel-chip.warn { color: var(--warn); background: var(--warn-bg); }
.reel-chip .chip-flag { width: 12px; height: 12px; opacity: 0.85; }

/* --------------------------------------------------------------------------
   6. Responsive: the board stacks under 900px, chips grow to a tap size under 700px
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .board, .board-2 { grid-template-columns: 1fr; }
    .col-body { max-height: none; }
    .shell[data-collapsed="true"] .lang-seg { display: inline-flex; }
    .shell[data-collapsed="true"] .lang-mini { display: none; }
    .shell[data-collapsed="true"] .foot-user .tag { display: inline-flex; }
}
@media (max-width: 699px) {
    .reel-chip { height: 34px; min-width: 60px; }
}

/* --------------------------------------------------------------------------
   7. Content inbox (batch 2). The list keeps every app.js hook: ul.file-list,
   li[data-file-id].is-new, .file-name, .file-meta, .file-date, .file-actions,
   the injected .handled-tag / .js-undo-handle and li.handled-dim.
   -------------------------------------------------------------------------- */
.inbox-card .panel-head h2 { flex-wrap: wrap; row-gap: 6px; }
.inbox-new .inbox-new-n { font-weight: 600; color: var(--good); }
.inbox-head-actions { flex-wrap: nowrap; }
.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--line); }
.file-list li:last-child { box-shadow: none; }
.file-name { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--ink-2); overflow-wrap: anywhere; }
.file-list li.is-new .file-name { color: var(--ink); font-weight: 500; }
.new-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.file-meta { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; flex: none; }
.file-date { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.file-actions { display: flex; align-items: center; gap: 6px; }
.file-list li.handled-dim { opacity: 0.5; }
.handled-tag { color: var(--good); font-weight: 600; font-size: var(--t-sm); }
.inline-form { display: inline-flex; margin: 0; }

/* --------------------------------------------------------------------------
   8. Topics: the attach form sits inline in its table cell
   -------------------------------------------------------------------------- */
.topic-attach-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

@media (max-width: 699px) {
    /* one file = two lines: name and date, then the two actions side by side (Drive as an icon) */
    .file-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; }
    .file-name { grid-column: 1; grid-row: 1; }
    .file-meta { display: contents; }
    .file-date { grid-column: 2; grid-row: 1; }
    .file-actions { grid-column: 1 / -1; grid-row: 2; }
    .file-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
    .file-actions .btn:first-child { flex: 0 0 auto; }
    /* pending approvals: the two buttons stack so both stay in view */
    .viral-pending .row-actions { flex-direction: column; align-items: stretch; gap: 4px; }
    .tbl td.strong .show-sm { font-weight: 400; }
}

/* --------------------------------------------------------------------------
   9. Switch (settings and instruction toggles, batch 3). app.js toggles .on on
   button.switch and rewrites .switch-label when data-on-text is present.
   -------------------------------------------------------------------------- */
.switch { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; }
.switch:disabled { opacity: 0.55; cursor: progress; }
.switch-track { position: relative; flex: none; width: 30px; height: 18px; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background var(--dur-2) var(--ease-std), box-shadow var(--dur-2); }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); transition: transform var(--dur-2) var(--ease-out), background var(--dur-2); }
.switch:hover .switch-track { box-shadow: inset 0 0 0 1px var(--ink-3); }
.switch.on { color: var(--ink); }
.switch.on .switch-track { background: var(--good-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 45%, transparent); }
.switch.on .switch-knob { transform: translateX(12px); background: var(--good); }
.switch:focus-visible { outline: none; }
.switch:focus-visible .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch-form { display: inline-flex; margin: 0; }

/* --------------------------------------------------------------------------
   10. Settings (batch 3): switches as setting-toggle rows, rotation settings as
   row forms. The master row hints at its role; the send window spans two inputs.
   -------------------------------------------------------------------------- */
.setting-toggle.switch-form { display: grid; }
.setting-toggle .switch-label { min-width: 30px; }
.setting-toggle.is-master .k { font-size: var(--t-md); }
.settings-row .field .label { white-space: normal; line-height: 1.3; }
.time-pair { display: flex; gap: 6px; }
.time-pair .control { min-width: 0; }
@media (min-width: 901px) {
    .settings-row { grid-template-columns: minmax(140px, 1fr) minmax(92px, 0.7fr) minmax(92px, 0.7fr) minmax(200px, 1.3fr) minmax(92px, 0.7fr) minmax(150px, 0.95fr) auto; }
}
@media (max-width: 900px) {
    .settings-row .field-window { grid-column: 1 / -1; }
    .settings-row .btn { justify-content: center; }
    /* corvus.css stacks setting-toggle rows under 900px (made for selects); a switch stays on its name's line */
    .setting-toggle.switch-form { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   11. Instruction tracker (batch 3): creator group, ISO weeks as panels, one
   hairline row per instruction with its toggles, the brief behind an expander.
   -------------------------------------------------------------------------- */
.instr-group + .instr-group { margin-top: var(--s-6); }
.instr-group-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.instr-group-head h2 { font-size: var(--t-md); }
.week-group + .week-group { margin-top: var(--s-2); }
.week-summary { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; user-select: none; border-radius: var(--r-md); }
.week-summary::-webkit-details-marker { display: none; }
.week-summary:hover { background: var(--hover); }
.week-caret { color: var(--ink-3); transition: transform var(--dur-2) var(--ease-out); }
.week-group:not([open]) .week-caret { transform: rotate(-90deg); }
.week-group[open] > .week-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: inset 0 -1px 0 var(--line); }
.week-label { font-weight: 600; color: var(--ink); }
.week-count { margin-left: auto; color: var(--ink-3); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.instr-card { padding: var(--s-3) var(--s-4); box-shadow: inset 0 -1px 0 var(--line); }
.instr-card:last-child { box-shadow: none; }
.instr-head { display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap; }
.instr-id { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 180px; min-width: 0; }
.instr-num { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.instr-date { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.instr-flag { display: inline-flex; color: var(--ink-3); }
.instr-flag svg { width: 14px; height: 14px; }
.instr-toggles { display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap; }
.instr-actions { display: inline-flex; align-items: center; gap: 4px; }
.instr-edit-form { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.instr-edit-form .form-actions { padding-top: 0; }

/* Brief expander (instructions and reel detail) and the bundle-edit expander */
.brief, .bundle-edit { margin-top: var(--s-2); }
.brief > summary, .bundle-edit > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none;
    color: var(--ink-2); font-size: var(--t-sm); font-weight: 500;
}
.brief > summary::-webkit-details-marker, .bundle-edit > summary::-webkit-details-marker { display: none; }
.brief > summary::before {
    content: ""; width: 5px; height: 5px; margin: 0 3px 0 1px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease-out);
}
.brief[open] > summary::before { transform: rotate(45deg); }
.brief > summary:hover, .bundle-edit > summary:hover { color: var(--ink); }
.bundle-edit > summary svg { width: 14px; height: 14px; }
.brief-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-2); }
.brief-body pre.prose { margin: 0; max-width: 76ch; font-family: inherit; font-size: var(--t-base); color: var(--ink-2); }
.example-video { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.example-player { display: block; width: 100%; max-width: 320px; aspect-ratio: 9 / 16; max-height: 62vh; background: #000; border-radius: var(--r-md); box-shadow: var(--shadow-1); }

/* --------------------------------------------------------------------------
   12. Reel detail (batch 3)
   -------------------------------------------------------------------------- */
.reel-states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.page-head > .back { flex: none; align-self: flex-start; margin: 6px 0 0; }
.preview-empty { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.preview-empty > svg { color: var(--ink-3); }
.preview-empty .btn { margin-left: auto; }
.bundle-dl { margin-top: var(--s-4); padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--line); }
.admin-reel-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--line); }
.admin-reel-controls .bundle-edit { flex: 1 0 100%; margin-top: 0; }
.bundle-edit-form { margin-top: var(--s-3); max-width: 560px; gap: var(--s-3); }
.bundle-edit-form textarea.control { min-height: 64px; }
.vcheck { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--ink-2); }
.vcheck.ok { color: var(--ink); }
.vcheck.ok > svg { color: var(--good); }
.vcheck.bad > svg { color: var(--ink-3); }
.vsummary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s-3); padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--line); }
.status-seg { display: flex; }
.live-box { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-3); padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--line); }
.live-box form { margin: 0; }
.btn-block svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   13. History matrix (batch 4). Sticky header row (top 0, z 2), sticky corner
   (top 0 + left 0, z 3) and sticky worker column (left 0, z 1) inside a scroll
   box, as before; every sticky cell has an opaque token background so the
   scrolled cells never show through. app.js bulk helpers bind to th.hist-col,
   td.hist-rowhead, [data-hist] and the checkboxes.
   -------------------------------------------------------------------------- */
.seg .seg-n { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.seg > [aria-current="true"] .seg-n { color: var(--ink-2); }
.hist-panel .panel-head { flex-wrap: wrap; }
.hist-dims { margin-left: 10px; font-weight: 400; }
.hist-tools { flex-wrap: nowrap; }
.hist-wrap { overflow: auto; max-height: 72vh; overscroll-behavior: contain; box-shadow: inset 0 1px 0 var(--line); }
.hist-matrix { border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.hist-matrix th, .hist-matrix td { text-align: center; box-shadow: inset -1px -1px 0 var(--line); }
.hist-matrix thead th {
    position: sticky; top: 0; z-index: 2;
    padding: 7px 8px; background: var(--raised); color: var(--ink-2); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.hist-matrix thead th:hover { color: var(--ink); background: var(--overlay); }
.hist-matrix .hist-corner { left: 0; z-index: 3; min-width: 176px; padding-left: var(--s-4); text-align: left; color: var(--ink-3); font-weight: 500; cursor: default; }
.hist-matrix .hist-corner:hover { color: var(--ink-3); background: var(--raised); }
.hist-rowhead {
    position: sticky; left: 0; z-index: 1;
    padding: 6px var(--s-4); background: var(--panel); color: var(--ink); text-align: left !important; white-space: nowrap; cursor: pointer;
}
.hist-matrix tbody tr:hover .hist-rowhead { background: var(--raised); }
.hist-wname { font-weight: 600; }
.hist-recv { margin-left: 4px; color: var(--ink-3); font-size: var(--t-xs); }
.hist-real { height: 18px; margin-left: 4px; padding: 0 6px; vertical-align: 1px; }
.hist-cell { width: 34px; }
.hist-cell input { width: 15px; height: 15px; margin: 7px; vertical-align: middle; accent-color: var(--ink); cursor: pointer; }
.hist-cell.real { background: color-mix(in srgb, var(--good) 6%, transparent); }
.hist-cell.real input { accent-color: var(--good); cursor: not-allowed; }
@media (max-width: 699px) {
    .hist-matrix .hist-corner, .hist-rowhead { min-width: 128px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
    .hist-tools { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   14. Distribution matrix (batch 4). The nine former inline styles are these
   classes: .dist-paused (row), .tag (SELF, paused), .dist-toggle-form,
   .dist-perday, .dist-count-form, .control-num, .dist-cell.off, .empty.
   -------------------------------------------------------------------------- */
.dist-status .big.muted { color: var(--ink-3); }
.dist-team-head { flex-wrap: wrap; align-items: center; row-gap: var(--s-2); }
.dist-team-title { display: flex; align-items: center; gap: var(--s-2); }
.dist-team-title h2 { font-size: var(--t-md); }
.dist-badges { justify-content: flex-end; }
.dist-matrix th, .dist-matrix td { white-space: nowrap; }
.dist-matrix th.dist-perday, .dist-perday { text-align: center; }
.dist-wname { font-weight: 600; color: var(--ink); }
.dist-wname .tag { margin-left: 4px; vertical-align: 1px; }
.dist-toggle-form { display: inline-flex; margin: 0 0 0 var(--s-2); vertical-align: middle; }
.dist-count-form { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.control-num { width: 56px; padding: 0 4px; text-align: center; }
.dist-cell { color: var(--ink); font-variant-numeric: tabular-nums; }
.dist-cell.empty, .dist-cell.off { color: var(--ink-3); }
.dist-cell.off { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px); }
.dist-rec { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); vertical-align: -2px; }
.dist-rec svg { width: 13px; height: 13px; }
.dist-paused td { color: var(--ink-3); }
.dist-paused .dist-wname { color: var(--ink-2); font-weight: 500; }
.dist-empty-cell { padding: var(--s-5) !important; color: var(--ink-3); text-align: center; }
@media (max-width: 900px) {
    .dist-badges { justify-content: flex-start; }
}

/* Pipeline (batch 5): on phones the KPI strip is 2-up; an odd last creator tile takes the full
   width, as the Hub's tiles do. */
@media (max-width: 900px) {
    .avail-kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; box-shadow: inset 0 1px 0 var(--line); }
}

/* Auth pages (cutover): an alert inside the panel keeps the form's gap below it; the DE/EN seg
   sits beside the theme seg in the foot. */
.auth-panel .alert { margin-bottom: var(--s-3); }
.auth-foot .link-sm { margin-left: auto; }