/* AdEQ — bulk statics: one set, a card per static.
 *
 * Every rule sits under [data-screen="bulk"] and every class starts `bk-` (the
 * form that makes a set: `bkf-`), so nothing here reaches another screen. The
 * panel on the right is the Tasks tab's own (`tk-panel`), opened here too —
 * screen-tasks.css lets it through for this screen and no other.
 *
 * Sizes are SPEC-UI-V1's four: 23 for the set's name, 16 for a section, 13 for
 * labels and meta, 14 for everything read. A stage is a neutral or the one
 * accent, never an emotion colour (BRAND.md); the dots borrow the same muted
 * client tints the task board's columns use.
 */

[data-screen="bulk"] .bk-page { padding-bottom: var(--s-8); }
[data-screen="bulk"] .bk-head { flex-wrap: wrap; row-gap: var(--s-half); }
[data-screen="bulk"] .bk-title { outline: none; border-radius: var(--r-sm); }
[data-screen="bulk"] .bk-title[contenteditable]:hover { box-shadow: 0 0 0 1px var(--rule); }
[data-screen="bulk"] .bk-title[contenteditable]:focus { box-shadow: 0 0 0 2px var(--accent); }
[data-screen="bulk"] .bk-sum { color: var(--mute); }

/* ── the head and the toolbar: the script page's, made to sit here ───────────
   The head is sticky by the same rule screen-script.css gives a script (it
   rests where it sticks, so the page never shifts on the first scroll); the
   toolbar is `.scene-rail` from app.css, resting at `--stick-top`, which the
   page measures from the head. The Activity rail rests on the same line. */
[data-screen="bulk"] .page-head.is-stuck-head {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  background: var(--paper);
  margin: calc(-1 * var(--s-2)) 0 0; padding: var(--s-2) 0 var(--s-2);
  box-shadow: 0 2px 0 var(--paper);
}
[data-screen="bulk"] .bk-bar .rail-dot.is-signed { border-color: var(--accent); color: var(--accent); }
[data-screen="bulk"] .bk-bar .seg-group { height: var(--h-md); }
[data-screen="bulk"] .bk-rail-old {
  top: calc(var(--stick-top) + var(--s-nudge)); max-height: calc(100vh - var(--stick-top) - 16px);
  /* Rises with the toolbar once pinned, the script page's settle (see the
     note on .scene-rail in app.css for why it is a transform, not a top). */
  transform: translateY(calc(var(--stick-lift, 0px) * -1));
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) { [data-screen="bulk"] .bk-rail { transition: none; } }
/* A JUMP LANDS UNDER BOTH STICKY BARS, not behind them: the head, the
   toolbar (about 56px) and a little air. */
[data-screen="bulk"] .bk-row,
[data-screen="bulk"] .bk-card { scroll-margin-top: calc(var(--stick-top, 120px) + 70px); }
[data-screen="bulk"] .sec { scroll-margin-top: calc(var(--stick-top, 120px) + 70px); }

/* ── the brief ────────────────────────────────────────────────────────────── */

[data-screen="bulk"] .bk-brief {
  border: 1px solid var(--rule-faint); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 55%, var(--paper));
  padding: 0 var(--s-2); margin: var(--s-1h) 0 var(--s-2);
}
[data-screen="bulk"] .bk-brief > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-1h); min-height: 44px;
}
[data-screen="bulk"] .bk-brief > summary::-webkit-details-marker { display: none; }
/* Its chevron is the house one (app.css), pointing down shut and up open. */
[data-screen="bulk"] .bk-brief:not([open]) > summary::after { transform: none; }
[data-screen="bulk"] .bk-brief[open] > summary::after { transform: rotate(180deg); }
[data-screen="bulk"] .bk-brief-h { font: 600 16px/1.3 var(--font-display); color: var(--ink); }
[data-screen="bulk"] .bk-brief .muted { font-size: 13px; color: var(--mute); }
[data-screen="bulk"] .bk-brief-grid { display: flex; flex-direction: column; gap: var(--s-nudge); padding-bottom: var(--s-1h); }
[data-screen="bulk"] .bk-brief-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-1h); align-items: start;
  padding: var(--s-1) 0; border-top: 1px solid var(--rule-faint);
}
[data-screen="bulk"] .bk-brief-label { font-size: 13px; color: var(--mute); padding-top: var(--s-1); }
[data-screen="bulk"] .bk-brief-in {
  min-height: 0; resize: none; overflow: hidden; font-size: 14px; line-height: 1.55;
  border-color: transparent; background: transparent; padding: var(--s-1) var(--s-1);
}
[data-screen="bulk"] .bk-brief-in:hover:not([readonly]) { border-color: var(--rule); }
[data-screen="bulk"] .bk-brief-in:focus { border-color: var(--accent); background: var(--paper); }

/* ── the cards ────────────────────────────────────────────────────────────── */

/* AS MANY COLUMNS AS FIT, NEVER NARROWER THAN A CARD CAN BE READ AT. The
   grid never scrolls inside itself: a long set makes the page longer, the
   lesson the Work tab learned twice. */
[data-screen="bulk"] .bk-grid {
  display: grid; gap: var(--s-2); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
}

/* THE LIST: one static per row, laid out as a script scene — `.scene` from
   app.css gives the two columns and the card, this gives the inside: the
   design small on the left of the copy, so a row reads like the ad. */
/* NO GAP OF ITS OWN: the `+ Static` row between two statics is the gap, the
   script page's 9px above and below its pill, so every static stands apart. */
[data-screen="bulk"] .bk-list { display: flex; flex-direction: column; gap: 0; }
[data-screen="bulk"] .bk-list > .bk-row:first-child { margin-top: var(--s-nudge); }
[data-screen="bulk"] .bk-row { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
[data-screen="bulk"] .bk-row-top { gap: var(--s-1); }
[data-screen="bulk"] .bk-row-name { outline: none; border-radius: var(--r-sm); padding: var(--s-px) var(--s-half); min-width: 0; overflow-wrap: anywhere; }
[data-screen="bulk"] .bk-row-name[contenteditable]:hover { box-shadow: 0 0 0 1px var(--rule); }
[data-screen="bulk"] .bk-row-name[contenteditable]:focus { box-shadow: 0 0 0 2px var(--accent); }
[data-screen="bulk"] .bk-row-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-2); align-items: start; }
[data-screen="bulk"] .bk-row-body .bk-drop { max-height: 188px; padding: var(--s-1); }
[data-screen="bulk"] .bk-row-body .bk-drop-s { display: none; }
[data-screen="bulk"] .bk-row-foot { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-half); }
[data-screen="bulk"] .bk-row.is-approved,
[data-screen="bulk"] .bk-row.is-sent { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
@media (max-width: 980px) {
  [data-screen="bulk"] .bk-row { grid-template-columns: minmax(0, 1fr); }
  [data-screen="bulk"] .bk-row .scene-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-faint); padding-top: var(--s-1h); }
}
@media (max-width: 560px) {
  [data-screen="bulk"] .bk-row-body { grid-template-columns: minmax(0, 1fr); }
}

/* THE RAIL. `.fm-rail` from app.css is the card and the stickiness; the two
   headings are the form page's own `.live-h`. */
[data-screen="bulk"] .bk-rail .live-h { display: block; margin-bottom: var(--s-1); }
[data-screen="bulk"] .bk-rail .bk-rail-h { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--rule-faint); }
[data-screen="bulk"] .bk-rail .bk-thread .hint { margin: 0 0 var(--s-1); font-size: 13px; }

/* THE COPY ICONS. One per static in its head, one per line beside its label. */
[data-screen="bulk"] .bk-copy { flex: none; width: 28px; height: 28px; }
[data-screen="bulk"] .bk-line-copy { width: 22px; height: 22px; margin-left: auto; }
[data-screen="bulk"] .bk-line-copy:hover { color: var(--accent); background: none; }
[data-screen="bulk"] .bk-card {
  border: 1px solid var(--rule-faint); border-radius: var(--r-lg);
  background: var(--card); padding: var(--s-1h) var(--s-1h) var(--s-1h);
  display: flex; flex-direction: column; gap: var(--s-1h); min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
[data-screen="bulk"] .bk-card.is-open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
[data-screen="bulk"] .bk-card.is-approved,
[data-screen="bulk"] .bk-card.is-sent { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule-faint)); }
[data-screen="bulk"] .bk-card-head { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
[data-screen="bulk"] .bk-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--shade);
  font: 600 12px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums;
}
[data-screen="bulk"] .bk-card-name {
  flex: 1 1 auto; min-width: 0; font: 600 14px/1.35 var(--font-body); color: var(--ink);
  outline: none; border-radius: var(--r-sm); padding: var(--s-px) var(--s-half); overflow-wrap: anywhere;
}
[data-screen="bulk"] .bk-card-name[contenteditable]:hover { box-shadow: 0 0 0 1px var(--rule); }
[data-screen="bulk"] .bk-card-name[contenteditable]:focus { box-shadow: 0 0 0 2px var(--accent); }
[data-screen="bulk"] .bk-waiting { margin: calc(-1 * var(--s-half)) 0 0; font-size: 13px; color: var(--ink-soft); }

/* THE STAGE. Neutral with a dot, and the accent once it is approved. */
:is([data-screen="bulk"]) .bk-stage {
  flex: none; font-size: 12px; padding: var(--s-half) var(--s-1h); display: inline-flex; align-items: center; gap: var(--s-1);
}
:is([data-screen="bulk"]) .bk-stage::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mute);
}
:is([data-screen="bulk"]) .bk-stage.is-in_review::before { background: var(--c-sea); }
:is([data-screen="bulk"]) .bk-stage.is-changes_requested::before { background: var(--c-clay); }
:is([data-screen="bulk"]) .bk-stage.is-approved,
:is([data-screen="bulk"]) .bk-stage.is-sent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
:is([data-screen="bulk"]) .bk-stage.is-approved::before,
:is([data-screen="bulk"]) .bk-stage.is-sent::before { background: var(--accent-ink); }
:is([data-screen="bulk"]) .bk-stage:disabled { cursor: default; opacity: 1; }

/* THE DESIGN. A 4:5 frame — Meta's feed shape, which is where these run —
   holding the picture whole, or a dashed place to drop it. */
[data-screen="bulk"] .bk-design { position: relative; display: flex; flex-direction: column; gap: var(--s-1); }
[data-screen="bulk"] .bk-drop {
  aspect-ratio: 4 / 5; width: 100%; max-height: 240px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-half);
  border: 1px solid var(--rule); border-radius: var(--r-md, 10px);
  background: color-mix(in srgb, var(--shade) 50%, transparent); color: var(--ink-soft);
  cursor: pointer; padding: var(--s-1h); text-align: center;
}
[data-screen="bulk"] .bk-design.is-big .bk-drop { max-height: 320px; }
[data-screen="bulk"] .bk-drop.is-still { cursor: default; }
[data-screen="bulk"] .bk-drop:hover:not(.is-still),
[data-screen="bulk"] .bk-design.is-drop .bk-drop { border-style: solid; border-color: var(--accent); color: var(--ink); }
[data-screen="bulk"] .bk-design.is-drop .bk-design-open { outline: 2px solid var(--accent); }
[data-screen="bulk"] .bk-design.is-busy { opacity: .55; pointer-events: none; }
[data-screen="bulk"] .bk-drop-h { font: 600 13px/1.3 var(--font-body); }
[data-screen="bulk"] .bk-drop-s { font-size: 12px; color: var(--mute); }
[data-screen="bulk"] .bk-design-open {
  display: block; width: 100%; padding: 0; border: 1px solid var(--rule-faint); border-radius: var(--r-md, 10px);
  background: var(--shade); overflow: hidden; cursor: zoom-in;
}
[data-screen="bulk"] .bk-design-img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; background: var(--shade); }
[data-screen="bulk"] .bk-design.is-big .bk-design-img { max-height: 560px; }

/* THE LINES. Each one a label over a box that looks like text until touched. */
[data-screen="bulk"] .bk-lines { display: flex; flex-direction: column; gap: var(--s-half); }
[data-screen="bulk"] .bk-line { display: flex; flex-direction: column; gap: var(--s-px); }
[data-screen="bulk"] .bk-line-head { display: flex; align-items: center; gap: var(--s-1); min-height: 22px; }
[data-screen="bulk"] .bk-line-label {
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--mute); text-transform: uppercase;
}
[data-screen="bulk"] .bk-line-x { width: 22px; height: 22px; }
[data-screen="bulk"] .bk-line-in {
  width: 100%; min-height: 0; resize: none; overflow: hidden;
  font: 400 14px/1.45 var(--font-body); color: var(--ink);
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
  padding: var(--s-half) var(--s-1); margin: 0 calc(-1 * var(--s-1)); width: calc(100% + 12px);
}
[data-screen="bulk"] .bk-line-in.is-headline { font-weight: 700; letter-spacing: .01em; }
[data-screen="bulk"] .bk-line-in.is-cta { font-weight: 600; color: var(--accent); }
[data-screen="bulk"] .bk-line-in:hover:not([readonly]) { border-color: var(--rule); }
[data-screen="bulk"] .bk-line-in:focus { outline: none; border-color: var(--accent); background: var(--paper); }
[data-screen="bulk"] .bk-add-line { align-self: flex-start; margin-top: var(--s-half); height: 26px; font-size: 12px; }

/* A word-sized button: Copy, Replace, Remove. Visible, never hover-only. */
:is([data-screen="bulk"]) .bk-mini {
  border: 0; background: none; padding: var(--s-nudge) var(--s-half); cursor: pointer;
  font: 500 12px/1 var(--font-body); color: var(--mute); border-radius: var(--r-sm);
}
:is([data-screen="bulk"]) .bk-mini:hover { color: var(--ink); background: var(--shade); }

[data-screen="bulk"] .bk-card-foot {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  border-top: 1px solid var(--rule-faint); padding-top: var(--s-1);
}
[data-screen="bulk"] .bk-notes { font-size: 12px; padding: var(--s-half) var(--s-1h); }
[data-screen="bulk"] .bk-notes.has-open { border-color: var(--accent); color: var(--ink); }
[data-screen="bulk"] .bk-task { font-size: 12px; color: var(--ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-screen="bulk"] .bk-empty { grid-column: 1 / -1; }


/* ── the panel, the parts that are this page's own ────────────────────────── */

[data-screen="bulk"] .bk-panel-kicker { margin: 0 0 var(--s-nudge); font-size: 13px; color: var(--mute); }
[data-screen="bulk"] .bk-panel .bk-design { margin: var(--s-1h) 0 var(--s-2); }
[data-screen="bulk"] .bk-read { margin-bottom: var(--s-1h); }
[data-screen="bulk"] .bk-on-tasks { font-size: 13px; color: var(--ink-soft); margin: 0 0 var(--s-2); }
[data-screen="bulk"] .bk-on-tasks strong { font-weight: 600; margin-right: var(--s-1); }
[data-screen="bulk"] .bk-panel .tk-panel-bar .chip { font-size: 12px; padding: var(--s-half) var(--s-1h); }
.dt-pop .bk-pop-say { margin-left: auto; padding-left: var(--s-1h); font-size: 12px; color: var(--mute); white-space: nowrap; }

/* ── the form that makes a set (Create page and sheet) ────────────────────── */

.bkf { display: flex; flex-direction: column; gap: var(--s-1h); }
.bkf-row { display: flex; gap: var(--s-1h); flex-wrap: wrap; align-items: flex-end; }
.bkf-field { display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
.bkf-field.is-grow { flex: 1 1 260px; }
.bkf-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.bkf-maker { width: 150px; }
.bkf-paste { min-height: 220px; font-size: 14px; line-height: 1.5; font-family: var(--font-body); }
.bkf-task {
  margin: 0; display: flex; gap: var(--s-1h); align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule-faint)); border-radius: var(--r-md, 10px);
  padding: var(--s-1) var(--s-1h);
}
.bkf-preview:empty { display: none; }
.bkf-found { margin: 0 0 var(--s-1); font-size: 13px; color: var(--ink-soft); }
.bkf-found .muted { color: var(--mute); }
.bkf-list { margin: 0; padding-left: var(--s-3); display: grid; gap: var(--s-half); font-size: 13px; }
.bkf-list li { display: flex; gap: var(--s-1h); min-width: 0; }
.bkf-li-t { font-weight: 600; color: var(--ink); white-space: nowrap; }
.bkf-li-f { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkf-more > summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); padding: var(--s-half) 0; }
.bkf-brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-1h); margin-top: var(--s-1); }

@media (max-width: 560px) {
  [data-screen="bulk"] .bk-grid { grid-template-columns: minmax(0, 1fr); }
  [data-screen="bulk"] .bk-brief-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-nudge); }
  [data-screen="bulk"] .bk-brief-label { padding-top: var(--s-half); }
  [data-screen="bulk"] .bk-bar-note { display: none; }
}

/* The Create page's switch between writing a set and pasting one. It sits in
   the tool bar where a script's template picker does, on the client screen. */
.bulk-mode { height: 32px; }
.bulk-mode .seg { width: auto; padding: 0 var(--s-2); font: 500 13px/1 var(--font-body); white-space: nowrap; }

/* ── the script page's parts, at home here (2026-10-03) ─────────────────────
   Franz: "this bulk static looks different from the script area and that's
   not good". The page now uses the script's own `section()` folds, `.scene`
   cards, `.scene-field` lines with Save for later, Copy chips and the
   Feedback column; these rules only fit them to a static. */
[data-screen="bulk"] .sec { margin-top: var(--s-1); }
[data-screen="bulk"] .bk-brief-field .sf-value { min-height: 0; }
[data-screen="bulk"] .bk-lines { display: flex; flex-direction: column; gap: 0; min-width: 0; }
[data-screen="bulk"] .bk-field { margin-bottom: var(--s-2); }
[data-screen="bulk"] .bk-field .lbl { align-items: center; }
[data-screen="bulk"] .bk-field .lbl .bk-line-x { margin-left: auto; width: 22px; height: 22px; }
[data-screen="bulk"] .bk-field.is-headline .sf-value { font-weight: 700; letter-spacing: .01em; }
[data-screen="bulk"] .bk-field.is-cta .sf-value { font-weight: 600; color: var(--accent); }
[data-screen="bulk"] .bk-row-top .scene-verbs { margin-left: auto; }
[data-screen="bulk"] .bk-row-top .bk-stage { margin-left: var(--s-half); }
[data-screen="bulk"] .bk-card .bk-field { margin-bottom: var(--s-1h); }
[data-screen="bulk"] .bk-card-tasks { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: calc(-1 * var(--s-nudge)); }
[data-screen="bulk"] .bk-card-foot .scene-drop.chip { font-size: 12px; }
[data-screen="bulk"] .bk-creative.is-made { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }

/* The stage reads as a dropdown: its word and the product's chevron. */
:is([data-screen="bulk"]) .bk-stage { cursor: pointer; }
:is([data-screen="bulk"]) .bk-stage-chev { display: inline-flex; margin-left: var(--s-nudge); opacity: .75; }

/* The rail opens with the two copies, the way the script page's does. */
[data-screen="bulk"] .bk-rail-copy { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-2); }

/* The Feedback column: the script scene's, with the notes above the box. */
[data-screen="bulk"] .bk-thread.is-feedback { display: flex; flex-direction: column; gap: var(--s-1h); }

/* THE TASK AND THE CAMPAIGN AS PILLS (2026-10-03): a quiet key, then the
   name, which rolls if it is long rather than being cut. */
[data-screen="bulk"] .bk-pill {
  display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%;
  padding: var(--s-half) var(--s-1h); font-size: 12px; color: var(--ink-soft);
}
[data-screen="bulk"] .bk-pill.is-still { cursor: default; }
[data-screen="bulk"] .bk-pill-k { flex: none; color: var(--mute); font-weight: 500; }
[data-screen="bulk"] .bk-pill-v { min-width: 0; max-width: var(--w-pop); color: var(--ink); }
[data-screen="bulk"] .bk-add-line { align-self: flex-start; margin-right: auto; }
[data-screen="bulk"] .bk-insert { margin: var(--s-nudge) 0; }

/* ── separation (2026-10-03) ─────────────────────────────────────────────────
   Franz: "we need a gap between each with that dotted line thing". The
   `+ Static` row gets real air above and below its dashed rule, the form
   page's 16px either side, so every static stands on its own. */
[data-screen="bulk"] .bk-insert { margin: 0; padding: var(--s-2) 0; }
[data-screen="bulk"] .bk-list > .bk-row:last-of-type { margin-bottom: 0; }
/* The cards: each its own tile with clear grout between, no shared box. */
[data-screen="bulk"] .bk-grid { gap: var(--s-2); }
[data-screen="bulk"] .bk-card { box-shadow: 0 1px 0 rgb(0 0 0 / .2); }
/* The first section rests where the script page's does: 8px under the bar. */
[data-screen="bulk"] .bk-main > .sec:first-of-type { margin-top: var(--s-1); }

/* ── the card, evened out (2026-10-10) ───────────────────────────────────────
   Franz: "the download, replace and the other buttons have to be better and
   need better spacing ... better organization in each creative column ...
   equal spacing, uniforms". One unit, 12px, between every part of a card:
   head, waiting line, design block, lines, footer. The design is one bordered
   block — a fixed 4:5 frame (Meta's feed shape, so cards in a row line up
   whatever the file's shape) over a bar of equal buttons and the source file.
   Placed last so it settles the earlier rules above without unpicking them. */
[data-screen="bulk"] .bk-card { padding: var(--s-2); gap: var(--s-1h); }
[data-screen="bulk"] .bk-waiting { margin: 0; }
[data-screen="bulk"] .bk-card .bk-field { margin-bottom: var(--s-1h); }
[data-screen="bulk"] .bk-card .bk-lines > .bk-field:last-of-type { margin-bottom: var(--s-1); }

[data-screen="bulk"] .bk-design {
  gap: 0; overflow: hidden;
  border: 1px solid var(--rule-faint); border-radius: var(--r-md, 10px); background: var(--shade);
}
[data-screen="bulk"] .bk-design-frame { display: flex; aspect-ratio: 4 / 5; min-height: 0; }
[data-screen="bulk"] .bk-design-open {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; background: var(--shade);
}
[data-screen="bulk"] .bk-design-img,
[data-screen="bulk"] .bk-design.is-big .bk-design-img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
[data-screen="bulk"] .bk-design-frame .bk-drop,
[data-screen="bulk"] .bk-design.is-big .bk-design-frame .bk-drop {
  flex: 1; max-height: none; aspect-ratio: auto; margin: var(--s-1h); width: auto;
}
[data-screen="bulk"] .bk-design.is-drop { outline: none; }

[data-screen="bulk"] .bk-design-bar { display: flex; flex-direction: column; background: var(--card); border-top: 1px solid var(--rule-faint); }
[data-screen="bulk"] .bk-design-bar > * + * { border-top: 1px solid var(--rule-faint); }
[data-screen="bulk"] .bk-design-verbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
[data-screen="bulk"] .bk-act {
  height: 36px; border: 0; background: none; cursor: pointer; padding: 0 var(--s-1);
  font: 600 12.5px/1 var(--font-body); color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-screen="bulk"] .bk-act + .bk-act { border-left: 1px solid var(--rule-faint); }
[data-screen="bulk"] .bk-act:hover { background: var(--shade); color: var(--ink); }
[data-screen="bulk"] .bk-act.is-main { color: var(--accent); }
[data-screen="bulk"] .bk-act:disabled { opacity: .5; cursor: progress; }

[data-screen="bulk"] .bk-file { display: flex; align-items: center; gap: var(--s-1); height: 40px; padding: 0 var(--s-1h); min-width: 0; }
[data-screen="bulk"] .bk-file-k { margin-right: auto; font: 500 12px/1 var(--font-body); color: var(--mute); white-space: nowrap; }
[data-screen="bulk"] .bk-file-link {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 12px/1 var(--font-body); color: var(--accent); text-decoration: none;
}
[data-screen="bulk"] .bk-file-link:hover { text-decoration: underline; text-underline-offset: 2px; }
[data-screen="bulk"] .bk-file-btn {
  flex: none; height: 26px; padding: 0 var(--s-1h); border: 1px solid var(--rule); border-radius: var(--r-pill);
  background: none; cursor: pointer; font: 500 12px/1 var(--font-body); color: var(--ink-soft);
}
[data-screen="bulk"] .bk-file-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
[data-screen="bulk"] .bk-file-input { flex: 1; min-width: 0; height: 28px; font-size: 13px; padding: var(--s-half) var(--s-1); }

/* The footer: Feedback and Copy side by side, Make the Creative full width
   under them, every one the same height, border and type — so no label is
   ever cut, whatever the card's width. */
[data-screen="bulk"] .bk-card-foot {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1);
  padding-top: var(--s-1h); margin-top: auto;
}
[data-screen="bulk"] .bk-card-foot .dt-spacer { display: none; }
[data-screen="bulk"] .bk-card-foot > * {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 34px; margin: 0; padding: 0 var(--s-1h); text-align: center;
  border: 1px solid var(--rule); border-style: solid; border-radius: var(--r-pill); background: none;
  font: 500 12.5px/1 var(--font-body); color: var(--ink-soft); opacity: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-screen="bulk"] .bk-card-foot > *:hover { color: var(--ink); border-color: var(--ink-soft); }
[data-screen="bulk"] .bk-card-foot > :last-child:nth-child(4) { grid-column: 1 / -1; }
[data-screen="bulk"] .bk-card-foot > .bk-notes.has-open { border-color: var(--accent); color: var(--ink); }
[data-screen="bulk"] .bk-card-foot > .bk-creative.is-made { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); color: var(--accent); }
[data-screen="bulk"] .bk-card-tasks { margin-top: 0; }

/* The List view keeps the design at 150px: the verbs stack, one per line. */
[data-screen="bulk"] .bk-row-body .bk-design-verbs { grid-auto-flow: row; }
[data-screen="bulk"] .bk-row-body .bk-act + .bk-act { border-left: 0; border-top: 1px solid var(--rule-faint); }
[data-screen="bulk"] .bk-row-body .bk-act { height: 32px; }
[data-screen="bulk"] .bk-row-body .bk-file { height: auto; padding: var(--s-1); flex-wrap: wrap; }
[data-screen="bulk"] .bk-row-body .bk-file-k { display: none; }
[data-screen="bulk"] .bk-row-body .bk-drop { margin: var(--s-1); }

/* THE FOUR FORMATS (migration 57): one switch across the top of the design
   block, four equal tabs. The dot is filled when that format is in, a ring
   when it is not, so "which are missing" is one glance across the set. */
[data-screen="bulk"] .bk-fmts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--card); border-bottom: 1px solid var(--rule-faint);
}
[data-screen="bulk"] .bk-fmt {
  height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  border: 0; background: none; cursor: pointer; padding: 0 var(--s-half);
  font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--mute);
}
[data-screen="bulk"] .bk-fmt + .bk-fmt { border-left: 1px solid var(--rule-faint); }
[data-screen="bulk"] .bk-fmt:hover { color: var(--ink); background: var(--shade); }
[data-screen="bulk"] .bk-fmt.is-on { color: var(--ink); background: var(--shade); box-shadow: inset 0 -2px 0 var(--accent); }
[data-screen="bulk"] .bk-fmt-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--mute); flex: none; }
[data-screen="bulk"] .bk-fmt.is-in .bk-fmt-dot { background: var(--accent); border-color: var(--accent); }
[data-screen="bulk"] .bk-row-body .bk-fmt { height: 28px; font-size: 10.5px; gap: 0; }
[data-screen="bulk"] .bk-row-body .bk-fmt-dot { display: none; }
[data-screen="bulk"] .bk-row-body .bk-fmt.is-in { color: var(--ink-soft); }

/* ── folded cards and the icon toolbar (2026-10-10) ─────────────────────────
   Franz: "creative cards collapsed to show just this much ... icons for
   download, replace and remove ... and download all, and space this bar a bit
   from the creative". */
[data-screen="bulk"] .bk-fold { flex: none; width: var(--h-md); height: var(--h-md); margin-left: var(--s-nudge); }
[data-screen="bulk"] .bk-fold svg { transition: transform .15s; }
[data-screen="bulk"] .bk-fold[aria-expanded="true"] svg { transform: rotate(180deg); }
[data-screen="bulk"] .bk-fold.bk-fold:hover { background: var(--fold-tile); }
[data-screen="bulk"] .bk-card.is-folded .bk-lines,
[data-screen="bulk"] .bk-card.is-folded .bk-card-foot,
[data-screen="bulk"] .bk-card.is-folded .bk-card-tasks,
[data-screen="bulk"] .bk-card.is-folded .bk-design-bar { display: none; }
[data-screen="bulk"] .bk-card.is-folded .bk-design-frame { border-radius: inherit; }

[data-screen="bulk"] .bk-design-wrap { display: flex; flex-direction: column; gap: var(--s-1h); }
[data-screen="bulk"] .bk-tools {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-1h);
  min-height: 44px; padding: var(--s-half) var(--s-1) var(--s-half) var(--s-2);
  border: 1px solid var(--rule-faint); border-radius: var(--r-pill); background: var(--shade);
}
[data-screen="bulk"] .bk-tools-k { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
[data-screen="bulk"] .bk-tools-k b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
[data-screen="bulk"] .bk-tools-r { display: flex; align-items: center; gap: var(--s-half); }
[data-screen="bulk"] .bk-tool {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer;
  transition: background .15s, color .15s;
}
[data-screen="bulk"] .bk-tool:hover { background: var(--card); color: var(--ink); }
[data-screen="bulk"] .bk-tool.is-main { color: var(--accent); }
[data-screen="bulk"] .bk-tool.is-main:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
[data-screen="bulk"] .bk-tool.is-danger:hover { color: var(--c-clay, #d9775b); background: color-mix(in srgb, var(--c-clay, #d9775b) 14%, transparent); }
[data-screen="bulk"] .bk-tool:disabled { opacity: .45; cursor: progress; }
[data-screen="bulk"] .bk-tool:focus-visible { outline: none; }
[data-screen="bulk"] .bk-tool-sep { width: 1px; height: 18px; background: var(--rule); margin: 0 var(--s-half); }
/* A banner's one size, said where the four ad sizes would switch. */
[data-screen="bulk"] .bk-size-one { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: auto; }
[data-screen="bulk"] .bk-row-body .bk-tools { border-radius: var(--r-md, 10px); padding: var(--s-half); flex-wrap: wrap; justify-content: center; }
[data-screen="bulk"] .bk-row-body .bk-tools-k { display: none; }

/* THE STYLE PICKER and the numbers (2026-10-10). Franz: "the numbering has to
   be circle and bold ... can we have style picker here too". */
[data-screen="bulk"] .bk-looks { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-1h); background: var(--card); border-bottom: 1px solid var(--rule-faint); flex-wrap: wrap; }
[data-screen="bulk"] .bk-looks-k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-right: var(--s-half); }
[data-screen="bulk"] .bk-look { height: 28px; padding: 0 var(--s-2); border-radius: var(--r-pill); border: 1px solid var(--rule); background: none; color: var(--ink-soft); font: 600 12.5px/1 var(--font-body); cursor: pointer; }
[data-screen="bulk"] .bk-look:hover { color: var(--ink); border-color: var(--ink-soft); }
[data-screen="bulk"] .bk-look.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
[data-screen="bulk"] .bk-n {
  width: var(--h-md); height: var(--h-md); border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font: 800 14px/1 var(--font-display); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* THE TOP BAR (2026-10-10, second pass). Franz: "the toolbar is moving all
   over the place during scroll ... I don't see the delete button ... keep the
   spacing consistent and use smart horizontal scroll". The bar's contents are
   now the same stuck or not (no late Copy buttons growing in), one 8px gap,
   one line; only the static pills scroll, in their own lane, with a soft fade
   at the edge when there are more. The actions on the right never move. */
[data-screen="bulk"] .bk-bar { flex-wrap: nowrap; gap: var(--s-1); }
[data-screen="bulk"] .bk-bar > * { flex: none; }
[data-screen="bulk"] .bk-bar > .bk-dots {
  flex: 1 1 auto; min-width: 80px; display: flex; gap: var(--s-1); align-items: center;
  /* scroll: a sideways strip of dots; x only, so the wheel still moves the page. */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-right: var(--s-half); padding: var(--s-nudge) 0;
}
[data-screen="bulk"] .bk-dots::-webkit-scrollbar { display: none; }
/* ON A PHONE THE ACTIONS ALONE ARE WIDER THAN THE SCREEN, so one line pushed
   the page 527px wide in a 390px window (the screenshot check, 2026-10-16).
   Below 640 the static pills keep their own scrolling line and the actions
   sit on the line under them, still in one place, still never moving. */
@media (max-width: 639px) {
  [data-screen="bulk"] .bk-bar { flex-wrap: wrap; row-gap: var(--s-1); }
  [data-screen="bulk"] .bk-bar > .bk-dots { flex: 1 0 100%; margin-right: 0; }
}
[data-screen="bulk"] .bk-dots > * { flex: none; }
[data-screen="bulk"] .bk-dots.is-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
[data-screen="bulk"] .bk-bar .bk-style-all.bk-style-all { flex: none; width: auto; max-width: 200px; height: var(--h-md); padding: 0 var(--s-1h); font-size: 13px; display: inline-flex; align-items: center; gap: var(--s-1); border-radius: var(--r-pill); }
[data-screen="bulk"] .bk-bar .bk-style-all .menu-btn-t { white-space: nowrap; font-style: normal; }
[data-screen="bulk"] .bk-bar .bk-style-all.is-placeholder .menu-btn-t { font-style: normal; opacity: .85; }

/* A drawn creative fills the 4:5 frame, scaled to fit. */
[data-screen="bulk"] .bk-live { text-align: left; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--shade); }
[data-screen="bulk"] .bk-design-open:has(.bk-live) { cursor: zoom-in; }

/* SIZE + STYLE ROW (2026-10-10, on brand). */
[data-screen="bulk"] .bk-pick { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1); background: var(--card); border-bottom: 1px solid var(--rule-faint); }
[data-screen="bulk"] .bk-sizes { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 32px; }
[data-screen="bulk"] .bk-size { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); padding: 0 var(--s-half); font-variant-numeric: tabular-nums; }
[data-screen="bulk"] .bk-ratio { flex: none; border: 1.5px solid currentColor; border-radius: var(--r-sm); opacity: .9; }
[data-screen="bulk"] .bk-size.is-missing .bk-ratio { border-style: solid; opacity: .55; }
[data-screen="bulk"] .bk-size.is-missing .bk-size-t { opacity: .6; }
[data-screen="bulk"] .bk-stylepick { flex: none; height: 32px; padding: 0 var(--s-1h) 0 var(--s-1h); display: inline-flex; align-items: center; gap: var(--s-1); font-size: 12.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 380px) { [data-screen="bulk"] .bk-size-t { display: none; } }

/* SCROLL AND SPACING, matched to the script page (2026-10-10). Franz: "the
   scroll ain't proper ... the right column ... check other pages ... the gap
   between the description and statics should be proper".
   - The page's 64px foot moves INSIDE the layout, so the sticky Notes and
     Activity card's container reaches the bottom of the page. It used to end
     92px short, and on the last stretch of scroll the card was shoved up 78px.
   - The card is the script rail's height (34px clear of the fold).
   - The first section rests where the script's does (no extra 8px), and the
     cards sit 16px under the Statics heading, the space the script page's
     "+ Scene" row gives its first scene. */
[data-screen="bulk"] .bk-page { padding-bottom: 0; }
[data-screen="bulk"] .bk-layout > .bk-main { padding-bottom: 0; }
[data-screen="bulk"] .sec.bk-tabbed { margin-bottom: 0; }
/* (On the column, not the layout: a sticky card is bounded by its grid row,
   and padding on the grid itself sits outside that row.) */
[data-screen="bulk"] .bk-main > .sec:first-of-type { margin-top: 0; }
[data-screen="bulk"] .sec + .sec { margin-top: 0; }
[data-screen="bulk"] .sec-body > .bk-grid,
[data-screen="bulk"] .sec-body > .bk-list { margin-top: var(--s-2); }

/* Delete a static, from its own head (2026-10-10: "I don't see a delete button"). */
[data-screen="bulk"] .bk-del { flex: none; width: var(--h-md); height: var(--h-md); color: var(--mute); }
[data-screen="bulk"] .bk-del:hover { color: var(--c-clay, #d9775b); }
[data-screen="bulk"] .bk-card-head > .bk-del { margin-left: var(--s-nudge); }

/* ── the viewer and the folded text (2026-10-10) ───────────────────────────── */
.bk-viewer {
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-3) var(--s-2);
  background: color-mix(in srgb, #000 62%, transparent); backdrop-filter: blur(3px);
  animation: bkFade .16s ease;
}
@keyframes bkFade { from { opacity: 0; } to { opacity: 1; } }
:root.bk-viewer-on { overflow: hidden; }
/* THE VIEWER, TWO PANES (Franz, 2026-10-19: "improve the dialog box make it
   really really better"). The creative on its backdrop fills the left and sits
   centred at the pane's own height; the right column holds the text, the
   feedback, and the versions. On a phone the two stack and the whole thing
   scrolls as one. */
.bk-viewer-box {
  width: min(1360px, 100%); height: min(100%, 960px); display: flex; flex-direction: column; min-height: 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgb(0 0 0 / .5); overflow: hidden;
}
.bk-viewer-head { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); min-height: 56px; border-bottom: 1px solid var(--rule-faint); flex: none; }
.bk-viewer-head .bk-n { flex: none; }
.bk-viewer-head .stage-pill, .bk-viewer-head .bk-stage { margin-left: var(--s-1); }
.bk-viewer-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bk-viewer-t b { font: 600 15px/1.25 var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-viewer-t small { font-size: 12px; color: var(--mute); }
.bk-viewer-head .bk-next svg { transform: rotate(180deg); }
.bk-viewer-head .tk-icon-btn[disabled] { opacity: .35; cursor: default; }
.bk-viewer-jump { display: flex; align-items: center; gap: var(--s-half); margin-right: var(--s-1); }
.bk-viewer-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); background: none; padding: 0;
  font: 600 12px/1 var(--font-display); color: var(--ink-soft); cursor: pointer; font-variant-numeric: tabular-nums;
}
.bk-viewer-dot:hover { border-color: var(--accent); color: var(--ink); }
.bk-viewer-dot.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); cursor: default; }

.bk-viewer-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; }
.bk-viewer-main { position: relative; min-width: 0; min-height: 0; display: flex; }
/* scroll: the creative at Large is taller than the pane; it scrolls here and never moves the page behind the dialog. */
.bk-viewer-stage {
  flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; container-type: size;
  display: flex; align-items: safe center; justify-content: safe center; padding: var(--s-8) var(--s-4) var(--s-4);
  transition: background .2s;
}
.bk-viewer-stage.is-dark { background: #0b0c12; }
.bk-viewer-stage.is-light { background: #f3f3ef; }
.bk-viewer-stage.is-feed { background: linear-gradient(#e9ebee, #dfe2e6); }
/* FIT: as tall as the pane allows, minus the size row and the toolbar. */
.bk-viewer-stage .bk-design.is-view { flex: none; width: min(100cqw - 64px, calc((100cqh - 200px) * var(--arv, .8))); min-width: min(100cqw - 64px, 280px); }
.bk-viewer-stage.is-big .bk-design.is-view { width: min(100cqw - 64px, calc(880px * min(1, var(--arv, .8) * 1.4))); }
.bk-viewer-stage .bk-design.is-view .bk-design-frame { width: 100%; }
.bk-viewer-stage.is-light .bk-tools, .bk-viewer-stage.is-feed .bk-tools { background: var(--card); }
.bk-viewer-float {
  position: absolute; top: var(--s-2); right: var(--s-2); display: flex; align-items: center; gap: var(--s-1); padding: var(--s-half) var(--s-half) var(--s-half) var(--s-1);
  background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid var(--rule-faint); border-radius: var(--r-pill);
  backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgb(0 0 0 / .25);
}
.bk-viewer-swatches { display: flex; align-items: center; gap: var(--s-half); }
.bk-swatch { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--rule); cursor: pointer; }
.bk-swatch.is-dark { background: #0b0c12; }
.bk-swatch.is-light { background: #f3f3ef; }
.bk-swatch.is-feed { background: linear-gradient(#e9ebee, #c9cdd3); }
.bk-swatch:hover { border-color: var(--ink-soft); }
.bk-swatch.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); cursor: default; }
.bk-viewer-seg { height: 28px; }

/* scroll: the right column is longer than the dialog; it scrolls on its own so the creative stays in view. */
.bk-viewer-side {
  min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
  border-left: 1px solid var(--rule-faint); padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2);
}
.bk-viewer-sec { border: 1px solid var(--rule-faint); border-radius: var(--r-lg); background: var(--card); padding: var(--s-2); }
.bk-viewer-side .bk-hist { margin: 0; }

@media (max-width: 1023px) {
  .bk-viewer-body { display: block; overflow: auto; }
  .bk-viewer-main { display: block; }
  .bk-viewer-stage { overflow: visible; container-type: inline-size; padding: var(--s-8) var(--s-2) var(--s-3); }
  .bk-viewer-stage .bk-design.is-view, .bk-viewer-stage.is-big .bk-design.is-view { width: min(100cqw - 32px, 560px); min-width: 0; }
  .bk-viewer-side { overflow: visible; border-left: 0; border-top: 1px solid var(--rule-faint); }
  .bk-viewer-jump { display: none; }
}

[data-screen="bulk"] .bk-editfold, .bk-viewer .bk-editfold {
  border: 1px solid var(--rule-faint); border-radius: var(--r-lg); background: var(--card); padding: 0 var(--s-2);
}
.bk-editfold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-1h); min-height: 46px; }
.bk-editfold > summary::-webkit-details-marker { display: none; }
.bk-editfold-h { font: 600 14px/1 var(--font-body); color: var(--ink); }
.bk-editfold-s { font-size: 12px; color: var(--mute); }
.bk-editfold-chev { margin-left: auto; display: inline-flex; color: var(--mute); transition: transform .15s; }
.bk-editfold[open] .bk-editfold-chev { transform: rotate(180deg); }
.bk-editfold[open] > summary { border-bottom: 1px solid var(--rule-faint); margin-bottom: var(--s-1h); }
.bk-editfold > .bk-lines { padding-bottom: var(--s-1); }
[data-screen="bulk"] .bk-panel .bk-editfold { margin: var(--s-half) 0 var(--s-2); }
@media (max-width: 639px) { .bk-viewer { padding: 0; } .bk-viewer-box { border-radius: 0; height: 100%; } .bk-viewer-head .bk-viewer-side-btn { display: none; } }

/* ── card head, size bar and spacing (2026-10-10, third pass) ────────────────
   One line for the name, rolling inside the card's padding; every control in
   the head and the size bar on one 34px height with one 8px gap. */
[data-screen="bulk"] .bk-card { padding: var(--s-2); gap: var(--s-2); }
[data-screen="bulk"] .bk-card-head { gap: var(--s-1); min-height: 34px; }
[data-screen="bulk"] .bk-card-head .bk-n { width: 32px; height: 32px; }
[data-screen="bulk"] .bk-name-roll {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden;
  font: 600 15px/34px var(--font-body); height: 34px; padding: 0 var(--s-nudge); cursor: text;
}
[data-screen="bulk"] .bk-name-roll.is-editing { overflow: hidden; text-overflow: clip; border-radius: var(--r-sm); background: var(--shade); padding: 0 var(--s-1); }
[data-screen="bulk"] .bk-card-head .bk-stage { height: 34px; flex: none; }
[data-screen="bulk"] .bk-card-head .bk-del, [data-screen="bulk"] .bk-card-head .bk-fold { width: 34px; height: 34px; margin: 0; }

[data-screen="bulk"] .bk-pick { padding: var(--s-1h); gap: var(--s-1h); }
[data-screen="bulk"] .bk-sizes { height: 34px; border-radius: var(--r-md, 10px); }
[data-screen="bulk"] .bk-size { gap: var(--s-1); padding: 0 var(--s-1); }
[data-screen="bulk"] .bk-stylepick { height: 34px; padding: 0 var(--s-1h) 0 var(--s-2); border-radius: var(--r-pill); }
[data-screen="bulk"] .bk-design { border-radius: var(--r-md, 12px); }
/* The bar at the script bar's height: every control 30px, like its pills. */
[data-screen="bulk"] .bk-bar .btn, [data-screen="bulk"] .bk-bar .seg-group { height: var(--h-md); }

/* ── the card's two top rows and its even rhythm (2026-10-10, fourth pass) ──
   Row one: number, review, Feedback, then delete and fold on the right.
   Row two: the name, full width, one rolling line. Everything 16px apart and
   16px from the card's edge, so the space above and below the toolbar match;
   cards in a row keep their own height instead of stretching to the tallest. */
[data-screen="bulk"] .bk-grid { align-items: start; }
[data-screen="bulk"] .bk-card { padding: var(--s-2); gap: var(--s-2); }
[data-screen="bulk"] .bk-card-head { display: flex; align-items: center; gap: var(--s-1); min-height: 34px; }
[data-screen="bulk"] .bk-card-head .bk-stage { margin: 0; }
[data-screen="bulk"] .bk-card-title { margin-top: calc(-1 * var(--s-half)); min-width: 0; }
[data-screen="bulk"] .bk-card-title .bk-name-roll { display: block; width: 100%; font: 700 17px/28px var(--font-display, var(--font-body)); height: 28px; color: var(--ink); }
[data-screen="bulk"] .bk-fb { height: 34px; display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-1h); font-size: 12.5px; font-weight: 600; }
[data-screen="bulk"] .bk-fb.is-on { border-color: var(--accent); color: var(--ink); }
[data-screen="bulk"] .bk-fb-n { min-width: 18px; height: 18px; padding: 0 var(--s-half); border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; }
[data-screen="bulk"] .bk-fb-n.is-quiet { background: var(--shade); color: var(--ink-soft); }
[data-screen="bulk"] .bk-card-fb { border: 1px solid var(--rule-faint); border-radius: var(--r-md, 12px); background: color-mix(in srgb, var(--shade) 55%, transparent); padding: var(--s-2); scroll-margin-top: calc(var(--stick-top, 120px) + 70px); }
[data-screen="bulk"] .bk-card .bk-waiting { margin: calc(-1 * var(--s-1)) 0 0; }
[data-screen="bulk"] .bk-design-wrap { gap: var(--s-2); }
[data-screen="bulk"] .bk-tools { min-height: 46px; padding: var(--s-1) var(--s-1) var(--s-1) var(--s-2); }

/* The head always fits its card: one 30px control height, and on a narrow
   card the Feedback chip drops its word and keeps the icon and the count. */
[data-screen="bulk"] .bk-card { container-type: inline-size; }
[data-screen="bulk"] .bk-card-head { gap: var(--s-1); min-height: var(--h-md); }
[data-screen="bulk"] .bk-card-head .bk-n { width: var(--h-md); height: var(--h-md); font-size: 13px; }
[data-screen="bulk"] .bk-card-head .bk-stage { height: var(--h-md); padding: 0 var(--s-1); font-size: 12px; }
[data-screen="bulk"] .bk-card-head .bk-fb { height: var(--h-md); padding: 0 var(--s-1h); gap: var(--s-1); }
[data-screen="bulk"] .bk-card-head .bk-del, [data-screen="bulk"] .bk-card-head .bk-fold { width: var(--h-md); height: var(--h-md); flex: none; }
@container (max-width: 300px) { [data-screen="bulk"] .bk-fb-t { display: none; } }

/* ── fifth pass (2026-10-10) ─────────────────────────────────────────────────
   Sizes are words only. The number is a quiet filled disc without a halo; the
   stage is a tinted pill with no dot (Franz: "don't want dots next to review or
   draft"), its tint saying the stage. "Save for later" sits 8px from its label. */
[data-screen="bulk"] .bk-size { gap: 0; font-weight: 600; font-size: 12.5px; }
[data-screen="bulk"] .bk-n { box-shadow: none; border: 1px solid var(--rule); font-weight: 700; }
:is([data-screen="bulk"]) .bk-stage::before { content: none !important; display: none !important; }
:is([data-screen="bulk"]) .bk-stage { gap: var(--s-half); border: 1px solid transparent; background: var(--shade); color: var(--ink-soft); font-weight: 600; }
:is([data-screen="bulk"]) .bk-stage.is-in_review { background: color-mix(in srgb, var(--c-sea) 22%, transparent); color: var(--ink); }
:is([data-screen="bulk"]) .bk-stage.is-changes_requested { background: color-mix(in srgb, var(--c-clay) 22%, transparent); color: var(--ink); }
:is([data-screen="bulk"]) .bk-stage.is-approved, :is([data-screen="bulk"]) .bk-stage.is-sent { background: var(--accent); color: var(--accent-ink); }
.said-inline:empty { display: none; }

/* Earlier versions: a strip of small creatives that scrolls sideways. */
.bk-hist { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.bk-hist-h { display: flex; align-items: center; gap: var(--s-1); font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.bk-hist-n { color: var(--ink-soft); letter-spacing: 0; }
/* A WRAPPING GRID OF VERSIONS, never a sideways strip (Franz, 2026-10-27);
   foldGrid shows two rows and Show All. */
.bk-hist-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-2) var(--s-1h); }
.bk-hist-row > .bk-hist-none { grid-column: 1 / -1; }
.bk-hist-tile[hidden] { display: none; }
.bk-hist-tile { min-width: 0; display: flex; flex-direction: column; gap: var(--s-half); padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.bk-hist-pic { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-sm); overflow: hidden; background: var(--shade); border: 1px solid var(--rule-faint); }
.bk-hist-pic > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-hist-tile:hover .bk-hist-pic { border-color: var(--accent); }
.bk-hist-t { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-hist-none { margin: 0; font-size: 12.5px; color: var(--mute); }

[data-screen="bulk"] .bk-field .lbl { gap: var(--s-1); align-items: center; }
[data-screen="bulk"] .bk-field .lbl .sf-keep { margin: 0; }

/* ── The download box ──────────────────────────────────────────────────────
   Statics down the side, the four sizes across the top, a tick per file.
   Headings tick a whole size or a whole static. Lives in the sheet, which
   is outside the page but still under [data-screen="bulk"]. */
[data-screen="bulk"] .bk-dl { display: flex; flex-direction: column; gap: var(--s-2); min-width: min(var(--w-drawer), 100%); }
[data-screen="bulk"] .bk-dl-opts { display: flex; flex-direction: column; gap: var(--s-1h); }
[data-screen="bulk"] .bk-dl-opt { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: var(--s-1h); }
[data-screen="bulk"] .bk-dl-pills { display: flex; flex-wrap: wrap; gap: var(--s-1); }
[data-screen="bulk"] .bk-dl-wrap { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow-x: auto; }
[data-screen="bulk"] .bk-dl-grid { display: grid; align-items: stretch; min-width: 460px; }
[data-screen="bulk"] .bk-dl-grid > * { border-bottom: 1px solid var(--rule-faint); }
[data-screen="bulk"] .bk-dl-grid > :nth-last-child(-n+5) { border-bottom: 0; }
[data-screen="bulk"] .bk-dl-corner {
  display: flex; align-items: end; padding: var(--s-1h) var(--s-1h); font: var(--t-label); letter-spacing: var(--tr-label); color: var(--mute);
}
[data-screen="bulk"] .bk-dl-col {
  display: flex; flex-direction: column; align-items: center; justify-content: end; gap: var(--s-nudge);
  padding: var(--s-1h) var(--s-half); background: none; border: 0; border-bottom: 1px solid var(--rule-faint);
  color: var(--ink-soft); font: inherit; font-size: 12px; cursor: pointer; border-radius: 0;
}
[data-screen="bulk"] .bk-dl-col:hover, [data-screen="bulk"] .bk-dl-col.is-on { color: var(--ink); }
[data-screen="bulk"] .bk-dl-col.is-on .bk-dl-col-r { color: var(--accent); }
[data-screen="bulk"] .bk-dl-col-n { font-weight: 600; }
[data-screen="bulk"] .bk-dl-col-r { font-size: 11px; color: var(--mute); }
[data-screen="bulk"] .bk-dl-row {
  display: flex; align-items: center; gap: var(--s-1h); min-width: 0; padding: var(--s-1) var(--s-1h);
  background: none; border: 0; border-bottom: 1px solid var(--rule-faint); border-radius: 0;
  color: var(--ink-soft); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
[data-screen="bulk"] .bk-dl-row:hover, [data-screen="bulk"] .bk-dl-row.is-some { color: var(--ink); }
[data-screen="bulk"] .bk-dl-n { flex: none; font-size: 11px; color: var(--mute); width: 22px; }
[data-screen="bulk"] .bk-dl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-screen="bulk"] .bk-dl-tick {
  display: flex; align-items: center; justify-content: center; align-self: center; justify-self: center;
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: transparent; color: var(--accent-ink); cursor: pointer;
}
[data-screen="bulk"] .bk-dl-cell { display: flex; align-items: center; justify-content: center; }
[data-screen="bulk"] .bk-dl-tick:hover { border-color: var(--mute); }
[data-screen="bulk"] .bk-dl-tick.is-on { background: var(--accent); border-color: var(--accent); }
[data-screen="bulk"] .bk-dl-tick:disabled { opacity: .25; cursor: default; }
[data-screen="bulk"] .bk-dl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1h); }
[data-screen="bulk"] .bk-dl-sum { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* ── An Integrity static's Background and Button ───────────────────────────
   Two compact menus side by side, above the lines, labelled the way a line is
   labelled, so they read as two more things about this static. Equal halves;
   one column when the panel is narrow. */
[data-screen="bulk"] .bk-ig {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s-1);
  margin: 0 0 var(--s-2); padding: 0 0 var(--s-2); border-bottom: 1px solid var(--rule-faint);
}
[data-screen="bulk"] .bk-ig-pick { display: flex; flex-direction: column; min-width: 0; margin: 0; }
[data-screen="bulk"] .bk-ig-l {
  font-weight: 600; font-size: var(--label-size); font-family: var(--font-body); color: var(--ink-soft); margin-bottom: var(--s-half);
}
[data-screen="bulk"] .bk-ig-sel { width: 100%; max-width: none; margin: 0; font-size: 13px; padding: var(--s-1) var(--s-1h); }
@media (max-width: 419px) { [data-screen="bulk"] .bk-ig { grid-template-columns: 1fr; } }

/* ARRANGING A DRAWN STATIC BY HAND (web/tpl-arrange.js, Franz 2026-10-18).
   The hand's own layer sits over the drawing and never takes a click, except
   on the two handles and the name tag. */
.bk-live.is-arranging { overflow: visible; cursor: default; touch-action: none; user-select: none; -webkit-user-select: none; }
.bk-live.is-arranging .tig { cursor: inherit; }
.tar { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.tar-hov, .tar-sel, .tar-gx, .tar-gy, .tar-tag { position: absolute; display: none; }
.tar-hov { outline: 1px solid rgba(127,192,168,.9); outline-offset: 1px; border-radius: var(--r-sm); }
.tar-sel { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-sm); }
.tar-h { position: absolute; top: 50%; width: 10px; height: 26px; margin-top: calc(-1 * var(--s-1h)); border-radius: var(--r-sm); background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: auto; cursor: ew-resize; touch-action: none; }
.tar-h.l { left: calc(-1 * var(--s-1)); }
.tar-h.r { right: calc(-1 * var(--s-1)); }
.tar-h::after { content: ''; position: absolute; inset: calc(-1 * var(--s-1h)) calc(-1 * var(--s-1)); }
.tar-gx { width: 0; border-left: 1px solid var(--accent); }
.tar-gy { height: 0; border-top: 1px solid var(--accent); }
.tar-tag { align-items: center; gap: var(--s-1); height: 24px; padding: 0 var(--s-half) 0 var(--s-1); border-radius: var(--r-sm); background: #111413; color: #fff; font-size: 12px; line-height: 1; white-space: nowrap; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.tar-tag b { font-weight: 600; }
.tar-reset { height: 18px; padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 11.5px; cursor: pointer; }
.tar-reset:hover { background: rgba(255,255,255,.24); }
.tar-reset[hidden] { display: none; }
.bk-arr { display: flex; align-items: center; gap: var(--s-1h); padding: var(--s-1) var(--s-1h); min-height: 40px; }
.bk-arr-k { flex: 1; min-width: 0; font-size: 12.5px; color: var(--mute); line-height: 1.4; }
.bk-arr-reset[hidden] { display: none; }

/* THE LINES, GROUPED (Franz, 2026-10-19): a group's name once, then its boxes
   side by side; a lone line is a group of one. Every box looks like a box, so
   it is plain what can be typed in. One column when the lines are narrow. */
[data-screen="bulk"] .bk-lines { container-type: inline-size; }
[data-screen="bulk"] .bk-fg { margin: 0 0 var(--s-1h); min-width: 0; }
[data-screen="bulk"] .bk-fg-h { display: block; margin: 0 0 var(--s-half); font: 600 12.5px/1.3 var(--font-body); color: var(--ink-soft); }
[data-screen="bulk"] .bk-fg-row { display: grid; gap: var(--s-1); min-width: 0; }
[data-screen="bulk"] .bk-fg.is-list .bk-fg-row { gap: var(--s-1) var(--s-1); }
[data-screen="bulk"] .bk-field.bk-fi,
[data-screen="bulk"] .bk-card .bk-field.bk-fi { margin: 0; min-width: 0; }
[data-screen="bulk"] .bk-fi .lbl { display: flex; align-items: center; gap: var(--s-half); min-height: 22px; margin: 0 0 var(--s-nudge); }
[data-screen="bulk"] .bk-fi-l { font: 600 11.5px/1.2 var(--font-body); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
[data-screen="bulk"] .bk-fg.is-one .bk-fi-l { font-size: 12.5px; color: var(--ink-soft); }
[data-screen="bulk"] .bk-fi-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 0; opacity: .5; transition: opacity .12s; }
[data-screen="bulk"] .bk-fi:hover .bk-fi-acts,
[data-screen="bulk"] .bk-fi:focus-within .bk-fi-acts { opacity: 1; }
[data-screen="bulk"] .bk-fi-acts .tk-icon-btn { width: 22px; height: 22px; }
[data-screen="bulk"] .bk-fi .sf-value {
  display: block; width: 100%; max-width: none; margin: 0; resize: none; overflow: hidden;
  padding: var(--s-1) var(--s-1); border: 1px solid var(--rule-faint); border-radius: var(--r-sm); background: var(--shade);
  font-size: 14px; line-height: 1.4;
}
[data-screen="bulk"] .bk-fi .sf-value:hover { border-color: var(--rule); }
[data-screen="bulk"] .bk-fi .sf-value:focus { border-color: var(--accent); background: var(--card); }
[data-screen="bulk"] .bk-fg.is-list .sf-value { padding: var(--s-half) var(--s-1); font-size: 13.5px; }
@container (max-width: 210px) { [data-screen="bulk"] .bk-fg.is-pair .bk-fg-row { grid-template-columns: minmax(0, 1fr) !important; } }
/* On a card the lines are narrow: tighter boxes, the two icons smaller. */
@container (max-width: 360px) {
  [data-screen="bulk"] .bk-fg { margin-bottom: var(--s-1h); }
  [data-screen="bulk"] .bk-fg-row { gap: var(--s-1); }
  [data-screen="bulk"] .bk-fi .sf-value { padding: var(--s-half) var(--s-1); font-size: 13px; }
  [data-screen="bulk"] .bk-fi .lbl { min-height: 18px; }
  [data-screen="bulk"] .bk-fi-acts .tk-icon-btn { width: 18px; height: 18px; }
}

/* THE LIST'S CREATIVE, LARGE (Franz, 2026-10-19: "much bigger"). */
[data-screen="bulk"] .bk-row-body { grid-template-columns: clamp(300px, 44%, 540px) minmax(0, 1fr); gap: var(--s-2); }
@media (max-width: 760px) { [data-screen="bulk"] .bk-row-body { grid-template-columns: minmax(0, 1fr); } }

/* THE ZOOM sits in the top bar, after the sizes and the style. */
[data-screen="bulk"] .bk-design-frame { position: relative; }
[data-screen="bulk"] .bk-design-frame > .bk-live { flex: 1; }
[data-screen="bulk"] .bk-pick .bk-zoom { flex: none; margin-left: auto; width: 30px; height: 30px; }
[data-screen="bulk"] .bk-pick .bk-stylepick + .bk-zoom { margin-left: 0; }


/* REORDERING BY HAND: the top bar is the handle; the static itself moves. */
[data-screen="bulk"] .bk-card-head,
[data-screen="bulk"] .bk-row-top { cursor: grab; }
[data-screen="bulk"] .bk-card-head button,
[data-screen="bulk"] .bk-row-top button { cursor: pointer; }
[data-screen="bulk"] .is-sorting > .bk-insert { display: none; }
[data-screen="bulk"] .is-sorting > .bk-card,
[data-screen="bulk"] .is-sorting > .bk-row { will-change: transform; }
[data-screen="bulk"] .is-lifted { position: relative; z-index: var(--z-float); box-shadow: 0 22px 60px rgba(0, 0, 0, .5), 0 0 0 1px var(--accent); }
html.bk-sorting, html.bk-sorting * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }

/* THE BRIEF AND THE STATICS AS TABS (Franz, 2026-10-19). The client page's
   sub-tabs, with Copy on the right for whichever is open; the two sections
   below keep their bodies and lose their heads. */
[data-screen="bulk"] .bk-tabs { align-items: center; margin: var(--s-half) 0 var(--s-2); }
[data-screen="bulk"] .bk-tabs-copy { margin-left: auto; display: flex; align-items: center; }
[data-screen="bulk"] .sec.bk-tabbed { margin-top: 0; }
[data-screen="bulk"] .sec.bk-tabbed > .sec-head { display: none; }
[data-screen="bulk"] .sec.bk-tabbed[hidden] { display: none; }
[data-screen="bulk"] .sec.bk-tabbed > .sec-body > .bk-grid,
[data-screen="bulk"] .sec.bk-tabbed > .sec-body > .bk-list { margin-top: 0; }

/* THE ARRANGING BAR under a drawn static (Franz, 2026-10-19: "really nice and
   compact"): undo, redo, and save on the left; reset and the downloads on the
   right; one row of small round icons. */
[data-screen="bulk"] .bk-tools.is-ig { min-height: 40px; padding: var(--s-half) var(--s-half); gap: var(--s-half); }
[data-screen="bulk"] .bk-tools.is-ig .bk-tools-l,
[data-screen="bulk"] .bk-tools.is-ig .bk-tools-r { display: flex; align-items: center; gap: 0; }
[data-screen="bulk"] .bk-tools.is-ig .bk-tool { width: 32px; height: 32px; }
[data-screen="bulk"] .bk-tools.is-ig .bk-tools-l .bk-tool:disabled { opacity: .3; cursor: default; background: none; }
[data-screen="bulk"] .bk-row-body .bk-tools.is-ig { justify-content: space-between; flex-wrap: nowrap; }
@container (max-width: 250px) { [data-screen="bulk"] .bk-tools.is-ig .bk-tool { width: 28px; height: 28px; } }
.tar-c { position: absolute; top: calc(-1 * var(--s-1)); right: calc(-1 * var(--s-1)); width: 13px; height: 13px; border-radius: var(--r-sm); background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: auto; cursor: nesw-resize; touch-action: none; }
.tar-c::after { content: ''; position: absolute; inset: calc(-1 * var(--s-1)); }
.bk-viewer-stage .bk-tools.is-ig { min-height: 40px; padding: var(--s-half) var(--s-half); }

/* THE TOP BAR ON A NARROW CARD: the four sizes keep room to be read, the style
   name gives way first and ends in an ellipsis, and the zoom stays whole. */
[data-screen="bulk"] .bk-sizes { min-width: 136px; }
[data-screen="bulk"] .bk-stylepick { flex: 0 1 auto; min-width: 0; }
[data-screen="bulk"] .bk-stylepick > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 340px) {
  [data-screen="bulk"] .bk-pick { padding: var(--s-1); gap: var(--s-1); }
  [data-screen="bulk"] .bk-size { font-size: 11.5px; padding: 0 var(--s-nudge); }
  [data-screen="bulk"] .bk-stylepick { padding: 0 var(--s-1) 0 var(--s-1h); font-size: 12px; gap: var(--s-half); }
  [data-screen="bulk"] .bk-pick .bk-zoom { width: 28px; height: 28px; }
}

/* OTHER SETS, on the right of the set's name (Franz, 2026-10-19). */
[data-screen="bulk"] .bk-head .bk-switch { align-self: center; display: inline-flex; align-items: center; gap: var(--s-1); height: 32px; padding: 0 var(--s-1h) 0 var(--s-2); font-weight: 600; }
.dt-pop.bk-sw-pop { width: min(440px, calc(100vw - 24px)); max-width: min(440px, calc(100vw - 24px)); padding: var(--s-1); }
.bk-sw-q { width: 100%; height: 34px; padding: 0 var(--s-1h); margin: 0 0 var(--s-1); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--shade); color: var(--ink); font: 400 13.5px/1 var(--font-body); }
.bk-sw-q:focus { outline: none; border-color: var(--accent); }
/* scroll: a popover's own list; the page under an open popover should not move. */
.bk-sw-list { max-height: min(60vh, 520px); overflow: auto; overscroll-behavior: contain; }
.bk-sw-h { margin: var(--s-1h) var(--s-1) var(--s-half); font: 600 11.5px/1.2 var(--font-body); color: var(--mute); letter-spacing: .02em; }
.bk-sw-h:first-child { margin-top: var(--s-nudge); }
.bk-sw-row { display: flex; flex-direction: column; gap: var(--s-half); width: 100%; padding: var(--s-1) var(--s-1h); border: 0; border-radius: var(--r-md); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.bk-sw-row:hover, .bk-sw-row:focus-visible { background: var(--shade); outline: none; }
.bk-sw-row.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); cursor: default; }
.bk-sw-t { font: 600 13.5px/1.35 var(--font-body); overflow-wrap: anywhere; white-space: normal; }
.bk-sw-m { font-size: 12px; color: var(--mute); }
.bk-sw-empty { margin: var(--s-1h); font-size: 13px; color: var(--mute); }

/* THE ACTIVITY CARD SCROLLS INSIDE ITSELF; its bottom edge always shows. */
[data-screen="bulk"] .bk-rail .bk-act-card > .rc-body { overflow: auto; margin-right: calc(-1 * var(--s-1)); padding-right: var(--s-1); }
[data-screen="bulk"] .bk-rail .bk-act-card { margin-bottom: 0; }

/* SAVE, A WORD (Franz, 2026-10-19): the accent while a change waits to be
   saved, quiet grey once everything is. */
[data-screen="bulk"] .bk-save {
  height: 28px; margin-left: var(--s-half); padding: 0 var(--s-1h); border-radius: var(--r-pill); flex: none;
  border: 1px solid var(--rule); background: none; color: var(--mute);
  font: 600 12.5px/1 var(--font-body); cursor: default; transition: background .15s, color .15s, border-color .15s;
}
[data-screen="bulk"] .bk-save.is-dirty { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); cursor: pointer; }
[data-screen="bulk"] .bk-save.is-dirty:hover { filter: brightness(1.08); }

/* GREEN, ALWAYS (Franz, 2026-10-19): the static's number on its green dot, and
   every status pill green; signed off is the solid green, the rest a green tint. */
[data-screen="bulk"] .bk-n,
[data-screen="bulk"] .bk-card .bk-n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:is([data-screen="bulk"]) .bk-stage,
:is([data-screen="bulk"]) .bk-stage.is-in_review,
:is([data-screen="bulk"]) .bk-stage.is-changes_requested { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); border-color: transparent; }
:is([data-screen="bulk"]) .bk-stage.is-approved,
:is([data-screen="bulk"]) .bk-stage.is-sent { background: var(--accent); color: var(--accent-ink); }

/* THE PART'S TAG: its name, the four alignments, Edit, and Reset. */
.tar-tag { gap: var(--s-1); }
.tar-al { display: inline-flex; align-items: center; gap: var(--s-px); padding: 0 var(--s-nudge); border-left: 1px solid rgba(255,255,255,.16); border-right: 1px solid rgba(255,255,255,.16); }
.tar-al[hidden], .tar-edit[hidden] { display: none; }
.tar-al button { width: 20px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: rgba(255,255,255,.75); cursor: pointer; }
.tar-al button svg { width: 13px; height: 13px; }
.tar-al button:hover { background: rgba(255,255,255,.14); color: #fff; }
.tar-al button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.tar-edit { height: 18px; padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 11.5px; cursor: pointer; }
.tar-edit:hover { background: rgba(255,255,255,.24); }
/* TYPING ON THE DRAWING (Franz, 2026-10-19: "improve the text editing, it's
   pretty shabby"): one soft box round the words, no handles, nothing else
   outlined, and a dark tag above saying what is being edited, with Done and
   Cancel. */
.tar-sel.is-editing { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); }
.tar-sel.is-editing .tar-h, .tar-sel.is-editing .tar-c { display: none; }
.tar-etag { position: absolute; display: none; align-items: center; gap: var(--s-1); height: 26px; padding: 0 var(--s-half) 0 var(--s-1h); border-radius: var(--r-sm); background: #111413; color: rgba(255,255,255,.75); font-size: 12px; white-space: nowrap; pointer-events: auto; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.tar-etag b { color: #fff; font-weight: 600; }
.tar-etag button { height: 19px; padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); font: inherit; font-size: 11.5px; cursor: pointer; }
.tar-etag .tar-done { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tar-etag .tar-cancel { background: rgba(255,255,255,.12); color: #fff; }
.tar-up { height: 18px; padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 11.5px; cursor: pointer; }
.tar-up:hover { background: rgba(255,255,255,.24); }
.tar-up[hidden], .tar-h[hidden] { display: none; }
/* Pins sit on a layer that ignores the mouse; while arranging, each pin takes it. */
.bk-live.is-arranging .tig .pin, .bk-live.is-arranging .tig .pin * { pointer-events: auto; }
.bk-live.is-arranging .tig [data-f][contenteditable] { cursor: text; }

/* HIGHER UP (Franz, 2026-10-19): less air under the set's name, so the
   toolbar and the rail beside it start sooner. With so little air left the
   pinned settle is off (bulk-view.js sets --stick-lift to 0), or the rail would
   rise into the Other Sets button. */
[data-screen="bulk"] .page-head.is-stuck-head { padding-bottom: var(--s-1h); }

/* THE TABS PIN UNDER THE TOOLBAR and never scroll away. */
[data-screen="bulk"] .bk-tabs {
  position: sticky; z-index: 6; top: calc(var(--stick-top) + var(--bar-h, 56px) - var(--stick-lift, 0px));
  margin: 0 0 var(--s-2); padding-top: var(--s-nudge); background: var(--paper);
  transition: top .22s cubic-bezier(.22,.61,.36,1);
}
[data-screen="bulk"] .bk-row,
[data-screen="bulk"] .bk-card,
[data-screen="bulk"] .sec { scroll-margin-top: calc(var(--stick-top, 120px) + var(--bar-h, 56px) + 56px); }

/* LESS UNDER EACH STATIC'S NAME (Franz, 2026-10-19). */
[data-screen="bulk"] .bk-card-title { margin: calc(-1 * var(--s-1)) 0 calc(-1 * var(--s-1)); }
[data-screen="bulk"] .bk-card-title .bk-name-roll { line-height: 24px; height: 24px; }

/* THE RAIL A LITTLE LOWER (Franz, 2026-10-19), resting and pinned alike. */
[data-screen="bulk"] .bk-rail { margin-top: var(--s-1); top: calc(var(--stick-top) + var(--s-1)); max-height: calc(100vh - var(--stick-top) - var(--s-1) - var(--pad-page-end)); }

/* THE SIZE AND STYLE ROW STANDS ON ITS OWN (Franz, 2026-10-19: "doesn't need
   a border connected to the image, it can be separated nicely"): the row
   floats free above, the creative is its own rounded box, and the link row
   under it is its own as well. */
[data-screen="bulk"] .bk-design:not(.is-view) { border: 0; background: none; overflow: visible; gap: var(--s-1); border-radius: 0; }
[data-screen="bulk"] .bk-design:not(.is-view) .bk-pick { padding: 0; background: none; border-bottom: 0; }
[data-screen="bulk"] .bk-design:not(.is-view) .bk-design-frame { border: 1px solid var(--rule-faint); border-radius: var(--r-md, 12px); overflow: hidden; background: var(--shade); }
[data-screen="bulk"] .bk-design:not(.is-view) .bk-design-bar { border: 1px solid var(--rule-faint); border-radius: var(--r-md, 12px); overflow: hidden; }
[data-screen="bulk"] .bk-card.is-folded .bk-design:not(.is-view) .bk-design-frame { border-radius: var(--r-md, 12px); }

/* THE NUMBER AND THE STAGE, BOLDER (Franz, 2026-10-19: "a bit bolder and
   nicer"), and a top bar that holds any stage (Franz: "the longer ones like
   Changes Requested or Internal Review disrupt the whole thing"). The left
   pair may give way; the four controls on the right never do. Where the card
   is narrow, Feedback keeps its icon and count and drops the word first; only
   then does a long stage end in an ellipsis, its full name in the tooltip. */
[data-screen="bulk"] .bk-n,
[data-screen="bulk"] .bk-card-head .bk-n { font: 800 14px/1 var(--font-display); letter-spacing: -.01em; }
[data-screen="bulk"] .bk-card-head .bk-n { width: 32px; height: 32px; flex: none; }
:is([data-screen="bulk"]) .bk-stage { font-weight: 700; letter-spacing: -.005em; }
[data-screen="bulk"] .bk-card-head .bk-stage {
  flex: 0 1 auto; min-width: 0; max-width: 100%; height: 32px; padding: 0 var(--s-1h) 0 var(--s-1h); gap: var(--s-half); font-size: 13px;
}
.bk-stage .bk-stage-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-stage .bk-stage-chev { flex: none; }
[data-screen="bulk"] .bk-card-head .dt-spacer { flex: 1 1 0; min-width: 0; }
[data-screen="bulk"] .bk-card-head > .bk-zoom,
[data-screen="bulk"] .bk-card-head > .bk-fb,
[data-screen="bulk"] .bk-card-head > .bk-del,
[data-screen="bulk"] .bk-card-head > .bk-fold { flex: none; }
[data-screen="bulk"] .bk-card-head > .bk-zoom { width: 32px; height: 32px; }
@container (max-width: 430px) {
  [data-screen="bulk"] .bk-card-head { gap: var(--s-half); }
  [data-screen="bulk"] .bk-card-head .bk-fb { padding: 0 var(--s-1); }
  [data-screen="bulk"] .bk-card-head .bk-fb-t { display: none; }
}
.bk-stage .bk-stage-s { display: none; white-space: nowrap; }
/* Never narrower than the top bar can be read at. */
[data-screen="bulk"] .bk-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
@container (max-width: 380px) {
  [data-screen="bulk"] .bk-card-head .bk-stage .bk-stage-t { display: none; }
  [data-screen="bulk"] .bk-card-head .bk-stage .bk-stage-s { display: inline; }
  [data-screen="bulk"] .bk-card-head > .bk-zoom,
  [data-screen="bulk"] .bk-card-head > .bk-del,
  [data-screen="bulk"] .bk-card-head > .bk-fold { width: 28px; height: 28px; }
  [data-screen="bulk"] .bk-card-head .bk-fb { height: 30px; padding: 0 var(--s-1); }
  [data-screen="bulk"] .bk-card-head .bk-stage { padding: 0 var(--s-1) 0 var(--s-1h); font-size: 12.5px; }
  [data-screen="bulk"] .bk-card-head { gap: var(--s-half); }
}
/* Every stage green (2026-10-19): a green tint until it is signed off, solid
   green once approved or delivered. Over every older per-stage colour. */
:is([data-screen="bulk"]) .bk-stage:not(.is-approved):not(.is-sent):not(.is-delivered) { background: color-mix(in srgb, var(--accent) 24%, transparent) !important; color: var(--ink) !important; border-color: transparent !important; }
:is([data-screen="bulk"]) .bk-stage.is-approved, :is([data-screen="bulk"]) .bk-stage.is-sent, :is([data-screen="bulk"]) .bk-stage.is-delivered { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }

/* ── THE TOP OF THE PAGE: STILL, AND IT STICKS (Franz, 2026-10-19) ─────────
   Two notes on one day: "I don't like the sticky scroll ... things are
   glitching and moving up and down", then "the sticky scroll is fully
   destroyed". Both are met by sticking without anything ever moving: the
   set's name scrolls away with the page; the toolbar pins under the app
   header and the tabs pin under the toolbar, each at a fixed height that never
   compacts, never animates, and never changes what it holds; the right column
   pins on the toolbar's line. Below 1024 the bar can wrap, so there nothing
   pins and it all scrolls.
   The name starts where every page's does (16px under the app header, a 32px
   row), and each layer under it sits 16px below the one above. */
[data-screen="bulk"] .page-head.is-stuck-head { position: relative; top: auto; z-index: auto; margin: 0; padding: 0; box-shadow: none; background: none; }
[data-screen="bulk"] .bk-bar,
[data-screen="bulk"] .bk-bar.is-stuck {
  position: static; transform: none; transition: none;
  /* The video tab's numbers (screen-script.css): under the tabs, 20 above its controls and 20 below them. */
  margin: 0 0 var(--s-1h); padding: calc(var(--s-2) + var(--s-half)) 0 var(--s-1); border-bottom: 0; background: var(--paper);
}
[data-screen="bulk"] .bk-tabs {
  position: static; top: auto; transition: none; background: var(--paper);
  margin: 0; padding: var(--s-2) 0 0; border-bottom: 1px solid var(--rule-faint);
}
[data-screen="bulk"] .bk-tabs .subtab { padding: var(--s-1) 0 var(--s-1h); }
/* NO TABS, STILL 16px (Franz, 2026-10-28, on live: a client's set has no tabs,
   and its cards sat flush under the S1–S6 bar). The tabs' own bottom margin
   is the gap when they show; when they are hidden, the section takes it. */
[data-screen="bulk"] .bk-rail {
  position: static; top: auto; transform: none; transition: none;
  max-height: none; overflow: visible; margin-top: var(--s-2);
}
@media (min-width: 1024px) {
  [data-screen="bulk"] .bk-bar,
  [data-screen="bulk"] .bk-bar.is-stuck { position: sticky; top: calc(var(--header-h) + var(--bk-tabs-h, 0px)); z-index: var(--z-sticky); height: calc(var(--s-2) + var(--s-half) + var(--h-md) + var(--s-1)); box-sizing: border-box; }
  [data-screen="bulk"] .bk-tabs { position: sticky; z-index: var(--z-sticky); top: var(--header-h); }
  /* scroll: the rail is pinned, so when its two cards are taller than the window it scrolls inside itself; no overscroll rule, so the wheel still reaches the page at either end. */
  [data-screen="bulk"] .bk-rail {
    position: sticky; top: calc(var(--header-h) + var(--s-2));
    max-height: calc(100vh - var(--header-h) - var(--s-2) - var(--pad-page-end)); overflow-y: auto; scrollbar-width: none;
  }
  [data-screen="bulk"] .bk-rail::-webkit-scrollbar { display: none; }
}
/* The rail no longer has a window to fit in, so Activity keeps its own scroll
   at a fixed height and its card always ends. */
[data-screen="bulk"] .bk-rail .bk-act-card > .rc-body { max-height: 520px; }
[data-screen="bulk"] .bk-row,
[data-screen="bulk"] .bk-card,
[data-screen="bulk"] .sec { scroll-margin-top: calc(var(--header-h, 52px) + 120px); }

/* THE FOLD AT THE END OF THE TOOLBAR, after a thin rule, pointing down while
   the copy is folded away (2026-10-19). */
[data-screen="bulk"] .bk-tools .bk-fold { width: 32px; height: 32px; margin: 0; }
[data-screen="bulk"] .bk-tools .bk-tool-sep { width: 1px; height: 18px; margin: 0 var(--s-half); background: var(--rule); flex: none; }

/* THE NUMBER, HEAVIER AND WITH ROOM (Franz, 2026-10-19: "need spacing and
   bolder numbers"). The display face stops at 700, so the number is set in
   the body face's 800; the stage starts 10px after it. */
[data-screen="bulk"] .bk-n,
[data-screen="bulk"] .bk-card-head .bk-n { font: 800 15px/1 var(--font-body); letter-spacing: -.02em; }
[data-screen="bulk"] .bk-card-head .bk-n { width: 34px; height: 34px; margin-right: var(--s-1); }
[data-screen="bulk"] .bk-card-head .bk-stage { height: 34px; }
/* A narrow card fits the whole bar: smaller round buttons, tighter rules. */
@container (max-width: 360px) {
  [data-screen="bulk"] .bk-tools.is-ig { padding: var(--s-half); }
  [data-screen="bulk"] .bk-tools.is-ig .bk-tool,
  [data-screen="bulk"] .bk-tools .bk-fold { width: 27px; height: 27px; }
  [data-screen="bulk"] .bk-tools.is-ig .bk-tool svg { width: 15px; height: 15px; }
  [data-screen="bulk"] .bk-tools .bk-tool-sep { margin: 0 var(--s-nudge); height: 16px; }
  [data-screen="bulk"] .bk-save { height: 26px; padding: 0 var(--s-1); font-size: 12px; margin-left: var(--s-nudge); }
}

/* THE CREATIVE, ITS TOOLBAR, THEN ITS SOURCE FILE (Franz, 2026-10-19): the
   toolbar sits right under the creative; the source-file row is its own box
   below, the same 10px apart. */
[data-screen="bulk"] .bk-design-wrap { gap: var(--s-1h); }
[data-screen="bulk"] .bk-design-wrap > .bk-design-bar { border: 1px solid var(--rule-faint); border-radius: var(--r-md, 12px); overflow: hidden; background: var(--card); }
[data-screen="bulk"] .bk-card.is-folded .bk-design-wrap > .bk-design-bar { display: none; }

/* THE PART'S BAR, SMALL (Franz, 2026-10-19: "smaller and more compact"):
   20px icon buttons in three groups split by hairlines (bold, italic,
   underline; the four alignments; up to the group, edit, reset), no words. */
.tar-tag { height: 26px; padding: var(--s-half); gap: 0; border-radius: var(--r-md); align-items: center; }
.tar-tag > span { display: inline-flex; align-items: center; gap: var(--s-px); padding: 0 var(--s-half); border: 0; }
.tar-tag > span + span { border-left: 1px solid rgba(255,255,255,.16); }
.tar-tag > span[hidden] { display: none; }
.tar-tag button, .tar-etag button {
  width: 20px; height: 20px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: none; color: rgba(255,255,255,.82); cursor: pointer;
}
.tar-tag button svg, .tar-etag button svg { width: 13px; height: 13px; }
.tar-tag button:hover, .tar-etag button:hover { background: rgba(255,255,255,.14); color: #fff; }
.tar-tag button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.tar-tag button[hidden] { display: none; }
.tar-etag { height: 26px; padding: var(--s-half); gap: var(--s-nudge); border-radius: var(--r-md); }
.tar-etag .tar-done { background: var(--accent); color: var(--accent-ink); }
.tar-etag .tar-cancel { background: rgba(255,255,255,.1); }

/* An opened drawn card: the Button (and Cards) pickers only. */
[data-screen="bulk"] .bk-ig-only .bk-ig { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* SAVE TO A FOLDER (2026-10-19): how it goes, the folder as a trail you can
   click back along, its folders inside as pills, and a new folder in place. */
[data-screen="bulk"] .bk-dl-dest { display: flex; flex-direction: column; gap: var(--s-1h); margin: 0 0 var(--s-1h); padding: 0 0 var(--s-1h); border-bottom: 1px solid var(--rule-faint); }
[data-screen="bulk"] .bk-dl-dest:empty { display: none; }
[data-screen="bulk"] .bk-dl-where { display: flex; align-items: center; gap: var(--s-1h); flex-wrap: wrap; min-width: 0; }
[data-screen="bulk"] .bk-dl-path { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-nudge); min-width: 0; font-size: 13px; }
[data-screen="bulk"] .bk-dl-crumb { border: 0; background: none; padding: var(--s-half) var(--s-half); border-radius: var(--r-sm); color: var(--ink-soft); font: inherit; cursor: pointer; }
[data-screen="bulk"] .bk-dl-crumb + .bk-dl-crumb::before { content: '/'; margin: 0 var(--s-1) 0 calc(-1 * var(--s-nudge)); color: var(--mute); }
[data-screen="bulk"] .bk-dl-crumb:hover { color: var(--ink); background: var(--shade); }
[data-screen="bulk"] .bk-dl-crumb.is-on { color: var(--ink); font-weight: 700; cursor: default; background: none; }
[data-screen="bulk"] .bk-dl-acts { display: inline-flex; gap: var(--s-1); margin-left: auto; }
[data-screen="bulk"] .bk-dl-none { font-size: 12.5px; color: var(--mute); }
[data-screen="bulk"] .bk-dl-make { display: flex; align-items: center; gap: var(--s-1); }
[data-screen="bulk"] .bk-dl-newname { max-width: var(--w-pop); height: var(--h-md); }

/* ── the bar's style pill at the bar's height, and Download in green (2026-10-19) ──
   Franz: "the style each card pill is too tall and breaks a bit ... the
   download button should be green bg". */
[data-screen="bulk"] .bk-bar .bk-style-all.bk-style-all, [data-screen="bulk"] .bk-bar .bk-style-all.menu-btn.menu-btn { height: var(--h-md); min-height: 0; padding: 0 var(--s-1h); line-height: 1; white-space: nowrap; overflow: hidden; }
[data-screen="bulk"] .bk-bar .bk-style-all .menu-btn-t { overflow: hidden; text-overflow: ellipsis; }
[data-screen="bulk"] .bk-bar .bk-dl-btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ── Save with its chevron, one split pill; versions saved by hand carry their
   name (2026-10-19). Franz: "the save button should have an attached dropdown
   to save as a version". */
[data-screen="bulk"] .bk-save-group { display: inline-flex; align-items: stretch; margin-left: var(--s-half); flex: none; }
[data-screen="bulk"] .bk-save-group .bk-save { margin-left: 0; border-radius: var(--r-pill) 0 0 var(--r-pill); }
[data-screen="bulk"] .bk-save-more {
  width: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--s-nudge) 0 0;
  border: 1px solid var(--rule); border-left: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; background: none; color: var(--ink-soft); cursor: pointer;
}
/* ONE PILL, ONE HIGHLIGHT (Franz, 2026-10-22: "dont like this half selection").
   Hovering either half lights the whole pill; the chevron only changes its ink. */
[data-screen="bulk"] .bk-save-more:hover { color: var(--ink); }
[data-screen="bulk"] .bk-save-more:focus { outline: none; }
[data-screen="bulk"] .bk-save-more:focus-visible { outline: none; color: var(--ink); }
[data-screen="bulk"] .bk-save-group:has(.bk-save-more:focus-visible) > * { border-color: var(--accent); }
[data-screen="bulk"] .bk-save.is-dirty + .bk-save-more { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 1px 0 0 rgba(0,0,0,.18); }
.bk-ver-pop { display: flex; flex-direction: column; gap: var(--s-1); width: var(--w-pop); }
.bk-ver-pop .bk-ver-note { margin: 0; font-size: 12.5px; color: var(--mute); line-height: 1.4; }
.bk-ver-pop .bk-ver-name { width: 100%; }
.bk-ver-pop .btn { align-self: flex-start; }
.bk-hist-name { font-size: 13px; font-weight: 700; color: var(--accent); line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-hist-tile.is-named .bk-hist-pic { border-color: var(--accent); }

/* Feedback sits right on its Note/Suggest box, the way a label sits on its
   field (Franz, 2026-10-22): 8px, not the 30 of heading margin, gap and the
   form's own top margin stacked. */
[data-screen="bulk"] .bk-thread.is-feedback .scene-note-h { margin-bottom: 0; }
[data-screen="bulk"] .bk-thread.is-feedback .comment-form { margin-top: 0; }

/* The tabs ARE the heading here: plain words at heading weight, the chosen
   one underlined in the accent, no pill track around them. */
[data-screen="bulk"] .bk-thread.is-feedback .cf-tabs { display: flex; gap: var(--s-2); padding: 0; margin: 0 0 var(--s-1h); border: 0; border-bottom: 1px solid var(--rule-faint); border-radius: 0; background: none; }
[data-screen="bulk"] .bk-thread.is-feedback .cf-tab { height: 32px; padding: 0; border-radius: 0; margin-bottom: calc(-1 * var(--s-px)); border-bottom: 2px solid transparent; font: 600 14px/1 var(--font-body); color: var(--mute); }
[data-screen="bulk"] .bk-thread.is-feedback .cf-tab[aria-selected="true"] { background: none; box-shadow: none; color: var(--ink); border-bottom-color: var(--accent); }

/* CLIENT MODE (SPEC-PORTAL-V3 §1.5). The rail is the team's, holding what a
   client may see (work-rail.js mountClientRail). Each static's decision bar
   sits under its creative; decide.js draws the bar itself. */
[data-screen="bulk"] .bk-decide:empty { display: none; }
[data-screen="bulk"] .bk-decide { margin-top: var(--s-1h); }

/* ── DOWNLOAD, SPLIT LIKE SAVE (Franz, 2026-10-27: "a smart mini dropdown that
   offers PNG, JPEG, GIF"). The glyph and its chevron are one pill that lights
   as one; the chevron opens the formats, a word and a muted hint per row. */
[data-screen="bulk"] .bk-dl-group { display: inline-flex; align-items: center; flex: none; border-radius: var(--r-pill); transition: background .15s; }
[data-screen="bulk"] .bk-dl-group:hover,
[data-screen="bulk"] .bk-dl-group:has(.bk-dl-more[aria-expanded="true"]) { background: color-mix(in srgb, var(--accent) 16%, transparent); }
[data-screen="bulk"] .bk-dl-group .bk-tool.is-main:hover { background: none; }
[data-screen="bulk"] .bk-dl-more {
  width: 20px; height: 34px; display: grid; place-items: center; padding: 0 var(--s-nudge) 0 0; margin-left: calc(-1 * var(--s-half));
  border: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; background: none; color: var(--accent); cursor: pointer;
}
[data-screen="bulk"] .bk-dl-more:focus { outline: none; }
[data-screen="bulk"] .bk-dl-more:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
[data-screen="bulk"] .bk-dl-more:disabled { opacity: .45; cursor: progress; }
[data-screen="bulk"] .bk-tools.is-ig .bk-dl-more { height: 32px; }
@container (max-width: 360px) { [data-screen="bulk"] .bk-tools.is-ig .bk-dl-more { height: 27px; width: 16px; } }
.bk-dl-pop { min-width: 0; width: max-content; max-width: calc(100vw - var(--s-3)); }
.bk-dl-list { display: flex; flex-direction: column; gap: var(--s-px); }
.bk-dl-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) var(--s-1h); }
.bk-dl-row:focus { outline: none; }
.bk-dl-row:focus-visible { background: var(--shade); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.bk-dl-w { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bk-dl-h { font-size: 13px; color: var(--mute); white-space: nowrap; }

/* THE DESIGNER BRIEF, UNDER THE BRIEF IN THE STATIC BRIEF TAB (Franz,
   2026-11-04): its own heading and Copy, 24px under the brief's last panel. */
[data-screen="bulk"] .sec.bk-desc { margin: var(--s-3) 0 0; }
[data-screen="bulk"] .sec.bk-desc[hidden] { display: none; }