/* =========================================================================
DC-COMPONENTS.CSS — the canonical .ig-* component layer
=========================================================================
Single source of truth for the intake-workflow component system, extracted
from the approved design: dc-intake-flow-4.html + IMPORT_GROUPS.md, then
reviewed in the component gallery (www/dc/dc-components.html).
Load AFTER colors_and_type.css (tokens) and dc-theme.css (shell + .dc-pill /
.dc-chip base). Pages compose these components — do NOT restyle them per page.
Behaviours (accordion toggle + drag-resize gutter) live in dc-components.js.
========================================================================= */
/* Dark-mode tokens are identical to — and now sourced from — colors_and_type.css
(:root[data-bs-theme="dark"]). No token override needed here; component-specific
dark rules (e.g. .ig-tab.is-active) live inline below. */
/* ── Strip bar + strip button (canonical action-bar system) ── */
/* Encoding feedback round (2026-07-29, item 3 — "a generate preview button
at top right renders icon+label with no space between them"): every
.ig-sb instance in this gallery reference already carries its own gap
(was 5px); bumped to 6px here so ONE rule is the single source of truth
for icon-label spacing across every icon+label button variant this app
uses (.enc-card-cta/.enc-prevrow__actions buttons already settled on
6px, second pass) — the operator's live-app screenshot showed this
exact toolbar button (Generate previews / Run queue / Package all,
etc.) with no visible gap, which this reference cannot reproduce
(verified live in Chrome — the icon and label render with clear
separation here); reinforcing the value at the component level, rather
than trusting per-page inline overrides, is the most durable fix
available without editing pages/encoding.py directly. App-wide, not
Encoding-scoped — .ig-sb is shared chrome, and 5px→6px is visually
negligible on every other page that uses it. */
.ig-sb { height: 100%; border: none; border-right: 1px solid var(--dc-line);
border-radius: 0; background: transparent; padding: 0 12px;
font-size: 12px; font-weight: 600; color: var(--dc-ink);
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; white-space: nowrap; transition: background 120ms ease; }
.ig-sb:hover { background: var(--dc-panel); }
.ig-sb:disabled { opacity: 0.35; cursor: not-allowed; }
.ig-sb--active { background: var(--dc-primary-soft); color: var(--dc-primary); }
.ig-bar { flex: none; display: flex; align-items: stretch;
height: var(--dc-strip-h); background: var(--dc-panel-2);
border-bottom: 1px solid var(--dc-line);
/* Inset controls need room to breathe on BOTH edges (operator 2026-08-10:
"button which are left aligned to the edge of a panel need margin to the
left so they dont sit flush"). Tabs and the section label are the two
things that SHOULD reach the edge, so they cancel it themselves below. */
gap: 6px; padding: 0 8px; }
.ig-bar__right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* ═════════════════════════════════════════════════════════════════════════
TOP-STRIP CONTROLS — two registers (2026-08-10)
═════════════════════════════════════════════════════════════════════════
Operator: "I asked for full height buttons, they don't really work, it
gets too cluttered fast" + "tabs should be tabs, buttons not full height
with rounded corners same as drop-downs ands search".
The problem was that tabs, buttons and dropdowns were ALL full height,
square and hairline-separated, so a strip rendered as one undifferentiated
run of tiles — nothing said that "Preview & approve" (which view am I in)
and "Run queue" (do a thing) are different KINDS of control. Scheduling's
calendar toolbar was the extreme: seven identical segments.
So the strip now carries two registers:
- STRUCTURE — `.ig-tab` only. Full height, square, flush, welded to the
panel it switches, active one taking the content's own background plus
a 2px underline. Tabs are the sole thing that moves you elsewhere.
- ACTION — everything you operate: `.ig-sb`, `.ig-sb-select`, `.ig-seg`,
the rail search. Inset 24px inside the 34px band, bordered, sharing
ONE radius (--dc-radius-lg, 10px, operator-picked from a 3px/5px/10px/
pill strip 2026-08-10 — it also matches `.ig-tab-count`, the one
already-round thing in the strip).
SCOPED ON PURPOSE. These rules apply only inside `.ig-bar`/
`.ig-canvas-head`. `.ig-sb` is shared chrome that ALSO serves in-card
action strips (`.enc-card-cta`, `.enc-prevrow__actions`, `.enc-head-strip`
— all full-height by design, see their own blocks below), and those must
not become floating chips. Restyling the bare `.ig-sb` selector would have
silently rewritten every card head in Encoding.
═════════════════════════════════════════════════════════════════════════ */
/* `.ig-rail__label`/`.ig-rail__filters` are strips too — any control in a
rail band belongs in the ACTION register just as much as one in `.ig-bar`
(2026-08-10, when Intake's New Group moved up into its section header). */
/* 2026-09-03: `.vnd-subrow`/`.fst-subrow` joined the scoping list — the
drawer sub-entity control row (Vendors Media status filter) carries the
same canonical select as the page bars (operator: "the dropdown needs
to be aligned with the dropdowns on curation"). */
.ig-bar .ig-sb, .ig-canvas-head .ig-sb, .ig-rail__label .ig-sb, .ig-rail__filters .ig-sb,
.ig-bar .ig-sb-select, .ig-canvas-head .ig-sb-select, .ig-rail__label .ig-sb-select, .ig-rail__filters .ig-sb-select,
.vnd-subrow .ig-sb-select, .fst-subrow .ig-sb-select,
.ig-bar .ig-sb-date, .ig-canvas-head .ig-sb-date {
height: 24px; align-self: center; flex: none;
box-sizing: border-box;
padding: 0 10px;
border: 1px solid var(--dc-line);
/* 999px, not the 10px picked on 2026-08-10 (operator 2026-08-26: "the
generate preview should be a pill"). It keeps its BORDER — it is a thing
you do, not a thing you are looking at, and a borderless soft fill would
make it read as a status chip beside the tabs. Only the corner changed. */
border-radius: var(--dc-radius-pill);
background: var(--dc-panel);
color: var(--dc-ink);
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ig-bar .ig-sb:hover, .ig-canvas-head .ig-sb:hover, .ig-rail__label .ig-sb:hover,
.ig-bar .ig-sb-select:hover, .ig-canvas-head .ig-sb-select:hover,
.vnd-subrow .ig-sb-select:hover, .fst-subrow .ig-sb-select:hover,
.ig-bar .ig-sb-date:hover, .ig-canvas-head .ig-sb-date:hover {
background: var(--dc-panel); border-color: var(--dc-line-2);
}
/* Primary emphasis. `.is-active` is an accepted alias of `--active`:
`components/dc_calendar.py` shipped `class="ig-sb sc-cal-viewbtn is-active"`
while the only styled modifier was the BEM `--active`, so the calendar's
current view button had NO visual state at all — verified live 2026-08-10,
all three view buttons computed byte-identical. Supporting both spellings
closes that class of bug rather than just this one instance. */
.ig-bar .ig-sb--active, .ig-canvas-head .ig-sb--active, .ig-rail__label .ig-sb--active,
.ig-bar .ig-sb.is-active, .ig-canvas-head .ig-sb.is-active {
background: var(--dc-primary-soft);
border-color: var(--dc-primary-line);
color: var(--dc-primary);
}
/* Native select arrows can't be positioned, so strip selects draw their own
chevron — same technique `.sc-cal-toolbar`/`#vnd_scope` used before this,
now consolidated here so every strip select is identical by default. */
/* STRIP SIZE (2026-09-14). The rule above is the shared inset-pill shape
at the 24px SECONDARY-band size (rail filters, drawer sub-rows). Inside a
primary strip — `.ig-bar`, `.ig-canvas-head`, `.ig-rail__label` — the same
controls are `--dc-strip-ctl-h` (30px) so they sit in the 48px band the
way a 22px control sat in the 34px one. Selector list mirrors the shape
rule's primary-strip members exactly; add a strip there, add it here. */
.ig-bar .ig-sb, .ig-canvas-head .ig-sb, .ig-rail__label .ig-sb,
.ig-bar .ig-sb-select, .ig-canvas-head .ig-sb-select, .ig-rail__label .ig-sb-select,
.ig-bar .ig-sb-date, .ig-canvas-head .ig-sb-date,
.ig-bar > .ig-seg, .ig-canvas-head > .ig-seg,
.ig-bar > .ig-tab, .ig-canvas-head > .ig-tab,
.ig-canvas-head > .ig-rail__search-box, .ig-bar > .ig-rail__search-box {
height: var(--dc-strip-ctl-h);
}
.ig-bar > .ig-seg > button, .ig-canvas-head > .ig-seg > button { padding: 0 13px; font-size: var(--dc-fs-sm); }
.ig-bar > .ig-tab, .ig-canvas-head > .ig-tab { font-size: var(--dc-fs-sm); padding: 3px 12px; }
.ig-bar .ig-sb-select, .ig-canvas-head .ig-sb-select {
appearance: none; -webkit-appearance: none;
padding-right: 24px; font-weight: 600; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='oklch(0.56 0.012 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center;
background-size: 9px 9px;
}
[data-bs-theme="dark"] .ig-bar .ig-sb-select,
[data-bs-theme="dark"] .ig-canvas-head .ig-sb-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='oklch(0.72 0.012 260)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
}
/* :hover above uses the `background` LONGHAND precisely so it can't wipe
background-image the way a shorthand would (the bug setup-page.css's own
comment documents for #vnd_scope). */
/* Both edge-cancelling rules RETIRED for tabs on 2026-08-26. They existed
because tabs were flush full-height segments that had to reach the panel
edge and abut each other; a pill does neither. It sits inset like every
other control, and the container's own gap separates it. The label keeps
its cancel — that IS still flush structure. */
.ig-bar > .ig-canvas-head__label:first-child,
.ig-canvas-head > .ig-canvas-head__label:first-child { margin-left: -8px; }
/* 4px between tabs, matching `.dd-pills__set`; the container's 6px is for
controls, which want more air than pills do. */
.ig-bar > .ig-tab + .ig-tab,
.ig-canvas-head > .ig-tab + .ig-tab { margin-left: -2px; }
/* ── Date picker (.ig-sb-date) ────────────────────────────────────────────
A native renders its value in the BROWSER's font, not
the app's — operator 2026-08-10: "schedule date picker label is nt inline
with dc_components design layout (wrong typo and size weight)". Restate the
strip-control type so it matches every other control in the band. ── */
.ig-bar .ig-sb-date, .ig-canvas-head .ig-sb-date {
font-family: var(--dc-font-sans);
font-size: 12px;
font-weight: var(--dc-fw-semi);
color: var(--dc-ink);
cursor: pointer;
}
.ig-bar .ig-sb-date::-webkit-calendar-picker-indicator,
.ig-canvas-head .ig-sb-date::-webkit-calendar-picker-indicator {
cursor: pointer; opacity: 0.55; padding: 0; margin-left: 4px;
}
.ig-bar .ig-sb-date::-webkit-calendar-picker-indicator:hover,
.ig-canvas-head .ig-sb-date::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Chrome renders date sub-fields with their own padding/colour. */
.ig-bar .ig-sb-date::-webkit-datetime-edit,
.ig-canvas-head .ig-sb-date::-webkit-datetime-edit { padding: 0; color: var(--dc-ink); }
/* ── Segmented control (.ig-seg) ──────────────────────────────────────────
A mutually-exclusive group in the ACTION register, for a switcher that
re-renders the SAME data at a different grain — the calendar's
Week/Month/Year. Deliberately not `.ig-tab`: tabs say "you are somewhere
else", and Week/Month/Year does not take you anywhere, it changes the zoom.
Rendering it as tabs would promise a navigation that never happens.
Inner edges are hairlines, outer corners take the shared radius. ── */
.ig-seg {
display: inline-flex; align-items: stretch; align-self: center; flex: none;
height: 24px; box-sizing: border-box;
border: 1px solid var(--dc-line);
border-radius: var(--dc-radius-lg);
background: var(--dc-panel);
overflow: hidden;
}
.ig-seg > button {
border: none; background: transparent;
padding: 0 11px;
/* Strip label register — see .ig-canvas-head__label. Was 12px/600. */
font-size: var(--dc-fs-xs); font-weight: var(--dc-fw-normal);
color: var(--dc-muted);
display: inline-flex; align-items: center; gap: 5px;
cursor: pointer; white-space: nowrap;
transition: background 120ms ease, color 120ms ease;
}
.ig-seg > button + button { border-left: 1px solid var(--dc-line); }
.ig-seg > button:hover { background: var(--dc-panel-2); color: var(--dc-ink); }
.ig-seg > button.is-active {
background: var(--dc-primary-soft); color: var(--dc-primary);
}
[data-bs-theme="dark"] .ig-seg > button.is-active {
color: color-mix(in oklch, var(--dc-primary) 35%, white);
}
/* ── Canvas header bar + tabs ── */
.ig-canvas-head { flex: none; height: var(--dc-strip-h); display: flex; align-items: stretch;
background: var(--dc-panel-2); border-bottom: 1px solid var(--dc-line);
gap: 6px; padding: 0 8px; }
/* THE STRIP LABEL REGISTER (2026-08-31, operator: "we're still all over the
place with typography ... the dropdown weights has the correct type and
color. please use this for all labels in the top strip").
ONE type for every label in a strip: 11px, NORMAL weight, `--dc-muted`,
sentence case. Taken from `.cur-wtoggle`, which the operator picked as the
reference. Strips previously mixed three registers — this label at
11px/700/uppercase/faint, `.ig-seg` buttons at 12px/600/muted, and the
toggle at 11px/400/muted — which is what read as "all over the place".
This DOES override rule 6's uppercase micro-label for strips specifically.
`.dc-label` keeps that treatment where it still belongs: a section eyebrow
inside a panel, which is a heading. A strip is a row of controls, and a
700-weight uppercase word sitting beside a 400-weight button was the
loudest thing in the band without being the most important. */
.ig-canvas-head__label { display: flex; align-items: center; padding: 0 14px;
/* 12px since 2026-09-14 (was 11px): the strip grew to 48px and its labels
took one type step with it, Curation first, then app-wide. */
font-size: var(--dc-fs-sm); font-weight: var(--dc-fw-normal);
letter-spacing: normal; text-transform: none;
color: var(--dc-muted); border-right: 1px solid var(--dc-line);
white-space: nowrap; flex: none; }
/* Plain flex space (2026-08-10). It used to carry the canvas background and
a left hairline so the area right of the tabs read as "the panel"; with
inset controls floating in the band that seam just fenced off a chip. */
.ig-canvas-head__fill { flex: 1 1 auto; }
/* Right-aligned mono count for a strip — "12 films · 8.4 h". Its own class
because every workspace page wants one and they were being hand-styled.
MONO and `--dc-faint` on purpose, and the one thing in a strip that does not
take the label register above: it is machine data, not a label (rule 4), and
it is the quietest thing in the band because it is a readout, not a control. */
.ig-canvas-head__meta {
font-family: var(--dc-font-mono); font-size: var(--dc-fs-sm);
color: var(--dc-faint); white-space: nowrap;
}
/* VERTICAL CENTRING (2026-08-31). `.ig-canvas-head`/`.ig-bar` are
`align-items: stretch` so full-height `.ig-tab`s work, and that is correct.
The consequence is that every OTHER control in a strip must opt into
centring or it hangs off the top edge. `.ig-sb`/`.ig-sb-select`/`.ig-sb-date`
already do (see the inset-pill rule above) and `.ig-canvas-head__label` sets
its own `align-items`, which is why this never bit until a search box went
into a pane head. Listed explicitly rather than a blanket `> *` so an
arbitrary render.ui wrapper keeps stretching. */
.ig-canvas-head > .ig-rail__search-box, .ig-bar > .ig-rail__search-box,
.ig-canvas-head > .ig-seg, .ig-bar > .ig-seg,
.ig-canvas-head > .ig-canvas-head__meta, .ig-bar > .ig-canvas-head__meta {
align-self: center;
}
/* TABS — the structure register. Full height, square, flush to the left
edge (hence the container's asymmetric padding), closed on the right by
their own hairline. The active tab takes the CONTENT's background so it
reads as continuous with the panel below, plus a 2px underline — with the
fill no longer tinted, background alone was too weak a signal. */
/* ── Tabs, as the drawer's pills (operator 2026-08-26) ────────────────────
Verdict on the previous treatment: "the main panels tabs look reaaaaly
ugly". Blown up it was five signals for one bit of state — a full-bleed
`inset 0 2px 0` accent that read as a stray rule across the whole strip,
hairline dividers that made a run of tiles, a divider after the LAST tab
separating nothing, and grey-inactive-on-white-active, which is button
language: unselected tabs read as disabled.
This is `.dc-pill`, the component the film drawer has used for its
section tabs since 2026-08-25 and which the operator has been approving
all week — soft fill, NO border, 999px. One tab language app-wide instead
of two. Markup is untouched: still `.ig-tab` + `.ig-tab-count`.
NOTE for the next reader: this is NOT Curation's `.cur-seg` (bordered box
with dividers between buttons). That control was shown as a candidate and
rejected on sight — "they look like 90s photoshop".
This DOES revisit the 2026-08-10 register split, which made tabs
"full height, square, flush" precisely so they could never be mistaken
for controls. Decided knowingly: the drawer proved a pill strip still
reads as "where am I", and consistency won. */
.ig-tab { height: 24px; align-self: center; flex: none;
border: 0; border-radius: var(--dc-radius-pill);
background: color-mix(in oklch, var(--dc-ink) 8%, transparent);
color: var(--dc-muted);
font-size: 11px; font-weight: var(--dc-fw-bold);
padding: 3px 10px; box-sizing: border-box;
display: inline-flex; align-items: center; gap: 5px;
cursor: pointer; white-space: nowrap; position: relative;
font-family: var(--dc-font-sans);
transition: background var(--dc-dur-fast), color var(--dc-dur-fast); }
.ig-tab:hover { background: color-mix(in oklch, var(--dc-ink) 13%, transparent); color: var(--dc-ink); }
.ig-tab.is-active { background: var(--dc-primary-soft);
color: color-mix(in oklch, var(--dc-primary) 72%, black);
box-shadow: none; }
[data-bs-theme="dark"] .ig-tab.is-active { color: color-mix(in oklch, var(--dc-primary) 30%, white); }
/* The count rides inside the pill as the drawer's `.n` does — mono, dimmed,
no chip of its own. A pill inside a pill was the old strip's own clutter. */
.ig-tab-count { font-family: var(--dc-font-mono); font-size: 10px; font-weight: 600;
padding: 0; border-radius: 0; background: none; color: inherit;
opacity: .72; line-height: 1.4; margin-left: 2px; }
.ig-tab.is-active .ig-tab-count { background: none; color: inherit; opacity: .72; }
/* ── Rail group row (2× topbar height). Operator 2026-07-21 set 3×=102px
for a THREE-line row, because 2.5× broke the 34px grid rhythm against the
sidebar bands. The middle line came off on 2026-09-16 (Avails is the only
page using this row), so two lines now sit on 2×=68px — still a whole
multiple of the topbar, still on the same grid. ── */
.ig-grouprow { display: flex; align-items: center; gap: 6px; padding: 0 12px;
height: calc(2 * var(--dc-topbar-h)); box-sizing: border-box; cursor: pointer;
position: relative; transition: background var(--dc-dur-fast); border-bottom: 1px solid var(--dc-line); }
.ig-grouprow:hover { background: color-mix(in oklch, var(--dc-ink) 4%, var(--dc-panel)); }
.ig-grouprow.is-selected { background: var(--dc-primary-soft); }
.ig-grouprow.is-selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
width: var(--dc-edge-width, 4px); background: var(--dc-primary); border-radius: 0 3px 3px 0; }
.ig-grouprow__body { flex: 1 1 auto; min-width: 0; }
.ig-grouprow__top { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; min-width: 0; }
.ig-grouprow__code { font-family: var(--dc-font-mono); font-size: 12px; font-weight: 600; color: var(--dc-ink); white-space: nowrap; flex-shrink: 0; }
.ig-grouprow__name { font-size: 13px; color: var(--dc-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-grouprow__meta { font-size: 11px; color: var(--dc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Films table (dense rows, 4px state edge) ── */
.ig-films-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ig-films-table thead th { text-align: left; font-size: 10.5px; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--dc-faint); font-weight: 700;
height: var(--dc-topbar-h); padding: 0 10px; border-bottom: 1px solid var(--dc-line);
white-space: nowrap; background: var(--dc-panel-2); }
.ig-films-table tbody td { padding: 0 10px; height: var(--dc-topbar-h); max-height: var(--dc-topbar-h);
border-bottom: 1px solid var(--dc-line); vertical-align: middle; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.ig-films-table tbody tr { height: var(--dc-topbar-h); max-height: var(--dc-topbar-h); background: var(--dc-panel); }
.ig-films-table tbody td:nth-child(2) { border-left: 4px solid transparent; padding-left: 8px; }
.ig-films-table tbody tr.row-locked td:nth-child(2) { border-left-color: var(--dc-edge-locked); }
.ig-films-table tbody tr.row-decision td:nth-child(2) { border-left-color: var(--dc-edge-decision); }
.ig-films-table tbody tr.row-running td:nth-child(2) { border-left-color: var(--dc-edge-running); }
.ig-films-table tbody tr.row-danger td:nth-child(2) { border-left-color: var(--dc-danger); }
.ig-films-table tbody tr.row-pending td:nth-child(2) { border-left-color: var(--dc-edge-pending); }
.ig-films-table tbody tr.is-selected td { background: var(--dc-primary-soft) !important; }
.ig-films-table tbody tr.is-selected td:nth-child(2) { border-left-color: var(--dc-primary) !important; }
.ig-film-orig-col { font-family: var(--dc-font-mono); font-size: 12px; color: var(--dc-muted); font-style: italic; }
/* ── Spinner + approve cell ── */
.ig-spinner { display: inline-block; width: 10px; height: 10px;
border: 1.5px solid currentColor; border-right-color: transparent;
border-radius: 50%; animation: ig-spin 0.7s linear infinite; vertical-align: middle; }
@keyframes ig-spin { to { transform: rotate(360deg); } }
.ig-approve-cell { display: flex; align-items: center; gap: 4px; }
/* ── Chip state variants (base .dc-chip lives in dc-theme.css) ── */
.ig-chip-ok { border-color: color-mix(in oklch, var(--dc-ok) 40%, var(--dc-line)); color: color-mix(in oklch, var(--dc-ok) 60%, var(--dc-ink)); background: var(--dc-ok-soft); }
.ig-chip-warn { border-color: color-mix(in oklch, var(--dc-warn) 35%, var(--dc-line)); color: color-mix(in oklch, var(--dc-warn) 55%, var(--dc-ink)); background: var(--dc-warn-soft); }
.ig-chip-danger { border-color: color-mix(in oklch, var(--dc-danger) 35%, var(--dc-line)); color: color-mix(in oklch, var(--dc-danger) 55%, var(--dc-ink)); background: var(--dc-danger-soft); }
/* ── Canonical accordion drawer (8 sections) ── */
.ig-accordion { border: 1px solid var(--dc-line); border-radius: 0; margin-bottom: -1px; }
.ig-accordion:first-child { border-top: none; }
.ig-bar + .ig-accordion { border-top: none; } /* no double border under the action bar */
.ig-accordion-head { display: flex; align-items: center; justify-content: space-between;
height: var(--dc-topbar-h); padding: 0 12px; background: var(--dc-panel-2); border-bottom: none;
cursor: pointer; font-size: 12px; font-weight: 400; color: var(--dc-ink); /* operator 2026-07-21: 600 too heavy */
user-select: none; transition: background 120ms ease; border-left: 3px solid transparent; }
.ig-accordion-head:hover { background: var(--dc-panel); }
.ig-accordion.is-open > .ig-accordion-head { border-left-color: var(--dc-primary); border-bottom: 1px solid var(--dc-line); }
.ig-accordion-body { display: none; padding: 12px; background: var(--dc-panel); border-top: none; font-size: 12.5px; }
.ig-accordion.is-open > .ig-accordion-body { display: block; }
.ig-accordion-head__chevron { color: var(--dc-faint); font-size: 11px; transition: transform 120ms ease; }
.ig-accordion.is-open > .ig-accordion-head .ig-accordion-head__chevron { transform: rotate(90deg); }
.ig-accordion-edit { display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; margin-right: 4px; border: none; border-radius: var(--dc-radius); background: transparent;
color: var(--dc-faint); font-size: 11px; cursor: pointer; transition: background 120ms ease, color 120ms ease; flex: none; }
.ig-accordion-edit:hover { background: var(--dc-line); color: var(--dc-ink); }
/* ── Key-value grid (accordion bodies, detail panels) ── */
.ig-kv { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; }
.ig-kv-label { color: var(--dc-faint); font-weight: 600; font-size: 12px; }
.ig-kv-value { color: var(--dc-ink); font-size: 12.5px; }
/* ── Square flush input (.ig-input) — THE form control for edit states
and add-rows. Promoted 2026-07-21 from the gallery's page-local
.gx-input (dc-components.html edit-state + add-row frames) so apps and
gallery share one definition. ── */
/* `.dc-modal .form-control` joins these selector lists rather than
re-declaring them (2026-08-10). Shiny's `ui.input_text`/`input_text_area`
render a Bootstrap `.form-control` and give the caller no hook to swap
the class, so inside a `.dc-modal` that rendered control IS the
`.ig-input` — one definition, two selectors. Copying the properties into
a modal-local block instead would be exactly the lookalike shim this
system rejects: two definitions to keep in sync, drifting on the first
token change. */
/* EDITING REGISTER IS ROUNDED (2026-08-31). `dc-theme.css` §447 already gives
every `.form-control`/`.form-select` `var(--dc-radius)`; the square corners
here were LOCAL OVERRIDES fighting that default, left over from before the
flush/square rule was scoped to the shell. Rule 11 makes the shell, the
table and popovers flush — it never covered the things you type into.
Removing the override, not adding a radius. */
.ig-input,
.dc-modal .form-control { width: 100%; box-sizing: border-box; border: 1px solid var(--dc-line); border-radius: var(--dc-radius);
background: var(--dc-panel); color: var(--dc-ink); font-size: 12.5px; padding: 4px 8px; height: 28px;
font-family: var(--dc-font-sans); }
.ig-input:focus,
.dc-modal .form-control:focus { outline: none; border-color: var(--dc-primary-line); box-shadow: 0 0 0 2px var(--dc-primary-soft); }
textarea.ig-input,
.dc-modal textarea.form-control { height: auto; min-height: 28px; }
/* Add-row grid (gallery § Add-row state — festivals & platforms) */
.ig-add-row { display: grid; gap: 6px; align-items: center; margin-top: 8px; }
/* ── Dense in-section table (accordion bodies: Files / Festivals /
Platform tables in the canonical drawer). Encodes the table treatment
the gallery frames carry as inline styles — one class, used by app
drawers and (eventually) the gallery markup itself. ── */
.ig-dtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.ig-dtable th, .ig-dtable td { white-space: nowrap; } /* dense rows never wrap; .cell-trunc adds ellipsis */
.ig-dtable thead tr { border-bottom: 1px solid var(--dc-line); }
.ig-dtable th { text-align: left; padding: 4px 8px; color: var(--dc-faint); font-weight: 600; }
.ig-dtable td { padding: 5px 8px; color: var(--dc-ink); }
.ig-dtable th:first-child, .ig-dtable td:first-child { padding-left: 0; }
.ig-dtable th:last-child, .ig-dtable td:last-child { padding-right: 0; }
.ig-dtable tbody tr { border-bottom: 1px solid var(--dc-line); }
.ig-dtable tbody tr:last-child { border-bottom: none; }
.ig-dtable--fixed { table-layout: fixed; }
.ig-dtable .cell-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-dtable .cell-mono { font-family: var(--dc-font-mono); }
.ig-dtable .cell-muted { color: var(--dc-muted); }
.ig-dtable .cell-ok { color: var(--dc-ok); font-weight: 600; }
.ig-dtable .cell-warn { color: var(--dc-warn); font-weight: 600; }
.ig-dtable .cell-danger { color: var(--dc-danger); font-weight: 600; }
.ig-dtable .cell-r { text-align: right; }
/* ── Intake workspace layout (IMPORT_GROUPS.md §2) — three-column
fullscreen operator workspace: rail | gutter | canvas | gutter | drawer ── */
.ig-workspace {
flex: 1 1 auto; min-height: 0;
display: flex; overflow: hidden;
}
.ig-rail {
/* 268px → 340px (operator 2026-08-03): the rail was "not operational
on a 14 inch screen" at 268 — dense rail tables need the room. */
width: 340px; flex: 0 0 340px;
display: flex; flex-direction: column;
background: var(--dc-panel);
/* No border-right: `.ig-rail-gutter` owns both seam borders (see its own
rule). Both drawing one produced a 2px seam — operator 2026-08-10,
"2nd panel left boarder should only be 1px as well". */
overflow: hidden;
}
.ig-rail__label {
height: var(--dc-strip-h); flex: none;
display: flex; align-items: center; padding: 0 12px;
font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--dc-faint);
border-bottom: 1px solid var(--dc-line); background: var(--dc-panel-2);
}
/* Filter band — sits BELOW the search, holding the rail's dropdowns
(operator 2026-08-10: "move filter out of the header ... dropdowns below
search"). Same 34px band and bottom rule as its siblings; the selects
inside are already inset 24px controls via `.sc-rail-head`. */
.ig-rail__filters {
height: var(--dc-topbar-h); flex: none; box-sizing: border-box;
display: flex; align-items: center; gap: 6px; padding: 0 8px;
border-bottom: 1px solid var(--dc-line);
background: var(--dc-panel);
}
/* Search and filters read as one block, so no rule between them (operator
2026-08-10: "no divider between search bar and dropdowns please"). The
band below still closes against the table header. */
.ig-rail__search:has(+ .ig-rail__filters) { border-bottom: none; }
/* Left-aligned at their natural width, not stretched across the band. */
.ig-rail__filters > * { flex: 0 0 auto; min-width: 0; }
/* Search joins the ACTION register (2026-08-10). It was a borderless input
filling its own 34px band, which is what made it the odd one out — every
other control gained a shell, and search would have been the last flush,
unbounded thing in the strip system. The band keeps its height and bottom
rule; the control inside it is now a bordered 24px box on the shared
radius, focus-lit as a whole. Markup gains one wrapper:
.ig-rail__search > .ig-rail__search-box > (i + input) */
.ig-rail__search {
height: var(--dc-topbar-h); flex: none; box-sizing: border-box;
display: flex; align-items: center; padding: 0 8px;
border-bottom: 1px solid var(--dc-line);
}
.ig-rail__search-box {
display: flex; align-items: center; gap: 7px;
flex: 1 1 auto; min-width: 0;
height: 24px; box-sizing: border-box;
padding: 0 9px;
border: 1px solid var(--dc-line);
border-radius: var(--dc-radius-lg);
background: var(--dc-panel);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ig-rail__search-box:focus-within {
border-color: var(--dc-primary-line);
box-shadow: 0 0 0 2px var(--dc-primary-soft);
}
/* Hung off the BOX, not the band (2026-08-31). `.ig-rail__search-box` is now
used outside a rail — Curation puts one in an `.ig-canvas-head` — and the
icon and input styling has to travel with the control, not with the strip
it happened to be born in. No-op for every existing call site: they are all
`.ig-rail__search > .ig-rail__search-box > (i + input)`. */
.ig-rail__search-box i { font-size: 12px; color: var(--dc-faint); flex: none; }
.ig-rail__search-box input {
flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none;
font-size: 12.5px; color: var(--dc-ink); padding: 0;
}
.ig-rail__search-box input::placeholder { color: var(--dc-faint); }
.ig-rail__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ig-canvas {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column;
overflow: hidden; background: var(--dc-panel);
/* No border-left — the gutter owns this seam too (see .ig-rail above). */
}
.ig-canvas__body {
flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--dc-panel);
}
.ig-drawer-pane {
width: 520px; flex: 0 0 520px;
display: flex; flex-direction: column;
border-left: 1px solid var(--dc-line);
overflow: hidden; background: var(--dc-panel);
}
/* Dropzone hero (dc-intake-flow-1.html — Awaiting Form canvas) */
.ig-dropzone-hero {
border: 2px dashed var(--dc-primary-line);
border-radius: var(--dc-radius-lg);
background: color-mix(in oklch, var(--dc-primary) 4%, var(--dc-panel));
padding: 40px 32px;
text-align: center;
cursor: pointer;
transition: border-color var(--dc-dur-fast), background var(--dc-dur-fast);
}
.ig-dropzone-hero:hover,
.ig-dropzone-hero.is-dragover {
border-color: var(--dc-primary);
background: color-mix(in oklch, var(--dc-primary) 8%, var(--dc-panel));
}
/* Canvas empty state (no group selected / group has no films yet) */
.ig-canvas__empty {
flex: 1 1 auto; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 8px;
color: var(--dc-muted); font-size: 12.5px; padding: 40px 20px;
}
.ig-canvas__empty i { font-size: 26px; color: var(--dc-faint); }
/* ── COLLAPSIBLE PANES (2026-08-31) ──────────────────────────────────────
Any pane in an `.ig-workspace` can be folded away, and the neighbours take
the width back because they are already `flex: 1 1 auto`. `display: none`
rather than `width: 0`: a zero-width pane leaves its borders and its gutter
behind as a 8px scar. The pane's gutter carries the same class so the two
disappear together.
A collapsed pane is ALWAYS replaced by an `.ig-pane-edge`, never by
nothing — a pane with no visible way back is a pane the operator has lost.
Markup:
<- click target, whole strip
All films34
Persist the state per pane in localStorage ('dc.pane.'), the way
dc_table already persists a column layout. ──────────────────────────── */
.ig-canvas.is-collapsed,
.ig-rail.is-collapsed,
.ig-rail-gutter.is-collapsed { display: none; }
.ig-pane-edge {
display: none; /* `.is-on` shows it — it exists only while folded */
flex: none; width: 24px; box-sizing: border-box;
flex-direction: column; align-items: center;
gap: var(--dc-space-4); padding: var(--dc-space-3) 0;
background: var(--dc-panel-2);
border-right: 1px solid var(--dc-line);
color: var(--dc-faint); cursor: pointer;
transition: background var(--dc-dur-fast), color var(--dc-dur-fast);
}
.ig-pane-edge.is-on { display: flex; }
.ig-pane-edge:hover { background: var(--dc-panel); color: var(--dc-ink); }
.ig-pane-edge i { font-size: 12px; }
/* The pane keeps its name while folded, set vertically. A 24px strip with
only a chevron on it does not say what it would reopen. */
.ig-pane-edge__label {
writing-mode: vertical-rl; white-space: nowrap;
font-size: var(--dc-fs-xs); font-weight: var(--dc-fw-bold);
letter-spacing: var(--dc-track-label); text-transform: uppercase;
}
.ig-pane-edge__n {
writing-mode: vertical-rl;
font-family: var(--dc-font-mono); font-size: 10px; opacity: 0.8;
}
/* ── Drag-resize gutter (panel↔panel and drawer; owns both edge borders) ── */
.ig-rail-gutter { width: 6px; flex: none; cursor: col-resize; background: var(--dc-panel-2);
border-left: 1px solid var(--dc-line); border-right: 1px solid var(--dc-line); display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 3px; user-select: none; }
/* =========================================================================
SCHEDULING COMPONENTS (2026-07-22) — Schedule drawer section, FullCalendar
v6 canvas, Select-films rail. Design-approval gate: authored by
claude-design-implementer for the operator's live review BEFORE the
Scheduling page build. Reuses .ig-accordion/.ig-kv/.ig-bar/.ig-sb/
.ig-input/.ig-films-table verbatim; the classes below are the genuinely
NEW, additive, scoped pieces those recipes don't already cover.
========================================================================= */
/* ── Generic banner (.ig-banner) — retires the legacy .ddb2-warn banner for
any NEW surface (Schedule section here; ddb2-warn itself is untouched —
Export Groups' frozen drawer still uses it). Warn variant shown; the
shape supports --ok/--danger siblings later without new markup. ── */
.ig-banner { display: flex; align-items: flex-start; gap: var(--dc-space-3);
padding: var(--dc-space-3) var(--dc-space-4); border-radius: var(--dc-radius);
font-size: 12px; line-height: 1.45; margin-top: var(--dc-space-4); }
.ig-banner i { flex-shrink: 0; margin-top: 1px; font-size: 13px; }
.ig-banner--warn { background: var(--dc-warn-soft);
border: 1px solid color-mix(in oklch, var(--dc-warn) 35%, var(--dc-line));
color: color-mix(in oklch, var(--dc-warn) 55%, black); }
[data-bs-theme="dark"] .ig-banner--warn { color: color-mix(in oklch, var(--dc-warn) 35%, white); }
/* ── Strip-bar select (.ig-sb-select) — a