/* studio-shell.css — shell fixes: no composer dividers, real logo glyph, no workspace
   switcher, initial avatar + rich account menu, collapsible Cloudflare-style rail.
   Loaded AFTER studio-live.css so these deliberately win. Both themes. */

/* ---------- 1) no divider lines in the composer — spacing + grouping only ---------- */
.cmp-bar .cmp-div { display: none !important; }
.composer .bar.cmp-bar { border-top: none; margin-top: 16px; padding-top: 0; }
.cmp-bar .cmp-controls { gap: 14px 22px; }

/* ---------- 2) logo mark: the real Senova glyph, no square tile ---------- */
.side-brand { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.side-brand .mark { display: none !important; }              /* kill the old gradient square */
/* The clean Senova S glyph — real transparent mark, natural (portrait) proportions, no box behind it. */
.side-brand .mark-img { display: block; flex: none; width: auto; height: 20px; max-width: 22px; object-fit: contain;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none; }
html[data-rail="collapsed"] .side-brand .mark-img { height: 22px; }
.brand-name { font-weight: 700; letter-spacing: -.01em; }

/* ---------- 3) initial avatar (replaces the person glyph + workspace switcher) ---------- */
.sl-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sn-hairline-strong);
  background: var(--sn-accent-soft); color: var(--sn-accent-ink); font: 600 .8125rem/1 var(--sn-sans);
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color var(--sn-t-hover, .12s) var(--sn-ease); }
.sl-avatar:hover, .sl-avatar[aria-expanded="true"] { border-color: var(--sn-accent); }

/* ---------- account menu ---------- */
.sl-acct-scrim { position: fixed; inset: 0; z-index: 290; }
.sl-acct-menu { position: fixed; z-index: 300; width: 304px; max-width: calc(100vw - 24px);
  background: var(--sn-surface); border: 1px solid var(--sn-hairline-strong); border-radius: var(--sn-r-card);
  box-shadow: var(--sn-elev-3); overflow: hidden; animation: sl-acct-in .16s var(--sn-ease-out, ease); }
@keyframes sl-acct-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.sl-acct-head { display: flex; align-items: center; gap: 11px; padding: 15px 15px 13px; }
.sl-acct-head .sl-avatar { width: 40px; height: 40px; font-size: 1.0625rem; cursor: default; }
.sl-acct-id { min-width: 0; }
.sl-acct-id b { font: 600 .9375rem var(--sn-sans); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-acct-id span { font: .8125rem var(--sn-mono); color: var(--sn-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.sl-acct-credits { margin: 0 12px 8px; padding: 13px 14px; border: 1px solid var(--sn-hairline); border-radius: var(--sn-r-input); background: var(--sn-bg-raised); }
.sl-acct-credits .k { font: 600 .625rem var(--sn-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--sn-ink-3); }
.sl-acct-credits .v { font: 600 1.5rem/1.1 var(--sn-serif); margin: 5px 0 2px; }
.sl-acct-credits .v small { font: 500 .8125rem var(--sn-mono); color: var(--sn-ink-3); }
.sl-acct-credits .note { font: .75rem var(--sn-sans); color: var(--sn-ink-3); margin: 0 0 11px; }
.sl-acct-credits .sn-btn { width: 100%; }
.sl-acct-list { padding: 6px; }
.sl-acct-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: var(--sn-r-input);
  background: none; border: none; cursor: pointer; color: var(--sn-ink); font: 500 .875rem var(--sn-sans); text-align: left; text-decoration: none; }
.sl-acct-item:hover { background: var(--sn-hover); }
.sl-acct-item .sn-ic-slot { width: 16px; height: 16px; color: var(--sn-ink-3); flex: none; }
.sl-acct-item .grow { flex: 1; }
.sl-acct-item kbd { font: 600 .6875rem var(--sn-mono); color: var(--sn-ink-3); background: var(--sn-bg-raised);
  border: 1px solid var(--sn-hairline); border-radius: var(--sn-r-xs); padding: 1px 6px; }
.sl-acct-sep { height: 1px; background: var(--sn-hairline); margin: 6px 8px; }
.sl-acct-theme { display: flex; align-items: center; gap: 10px; padding: 7px 10px 10px; }
.sl-acct-theme .k { font: 500 .875rem var(--sn-sans); flex: 1; }
.sl-acct-theme .sn-seg { flex: none; }
.sl-acct-danger { color: var(--sn-error); }
.sl-acct-danger .sn-ic-slot { color: var(--sn-error); }

/* ---------- 4) collapsible rail (Cloudflare-style) ----------
   ONE shared timing so the click, the icon morph, the panel width, and the
   label fade all move as a single gesture (Rob: "act as one"). ~220ms ease-in-out. */
:root { --rail-t: 220ms cubic-bezier(.4, 0, .2, 1); }
.app { transition: grid-template-columns var(--rail-t); }
html[data-rail="collapsed"] .app { grid-template-columns: 66px 1fr; }
.side { overflow-x: hidden; }
/* the label animates a FIXED max-width (160px), never `auto`/`none` — animating to `none` is what made
   OPENING snap/glitch (close was fine because 160→0 is animatable). Now both directions are smooth. */
.side .nav-lb { max-width: 160px; transition: opacity var(--rail-t), max-width var(--rail-t); white-space: nowrap; overflow: hidden; }
html[data-rail="collapsed"] .side .nav-lb { opacity: 0; max-width: 0; }
html[data-rail="collapsed"] .sn-nav-label { opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
html[data-rail="collapsed"] .side-brand { justify-content: center; padding-left: 0; padding-right: 0; }
html[data-rail="collapsed"] .sn-nav-item { justify-content: center; }
html[data-rail="collapsed"] .rail-toggle { justify-content: center; }

/* ─────────────────────────────────────────────────────────────────────────────
   §109 — COLLAPSIBLE NAV SECTIONS (Studios / Business Suite / Assets / Account)
   ─────────────────────────────────────────────────────────────────────────────
   The header is a real <button> so it is keyboard-reachable and announces its
   own state through aria-expanded; the chevron is decoration on top of that.

   🔴 THE ONE RULE THIS FILE MUST NOT BREAK. §103 fixed a leak where every gated
   nav row stayed visible because `.sn-nav-item { display:flex }` (0,1,0) beat the
   UA's `[hidden] { display:none }` (0,1,0 on the attribute, losing on source
   order), and the fix was `.sn-nav-item[hidden] { display:none }` at (0,2,0).
   So NOTHING here may set `display` on a `.sn-nav-item`: a rule like
   `.sn-nav-sec-b .sn-nav-item { display:flex }` would also be (0,2,0), tie with
   that guard, and win on source order — putting the Math / Ad Center / Business
   Suite leaks straight back. The section hides its BODY, never its rows. */
.sn-nav-sec-h {
  display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer;
  padding: 16px 10px 6px; border-radius: var(--sn-r-input); text-align: left;
  font: 600 .6875rem/1 var(--sn-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--sn-ink-3);
  transition: color var(--sn-t-hover) var(--sn-ease);
}
.sn-nav-sec-h:hover { color: var(--sn-ink-2); }
.sn-nav-sec-h .nav-lb { flex: 1; }
.sn-nav-chev { display: inline-flex; flex: none; opacity: .6; transition: transform 200ms var(--sn-ease), opacity var(--sn-t-hover) var(--sn-ease); }
.sn-nav-sec-h:hover .sn-nav-chev { opacity: 1; }
.sn-nav-sec.is-closed .sn-nav-chev { transform: rotate(-90deg); }
.sn-nav-sec-b { display: grid; gap: 1px; }
.sn-nav-sec.is-closed .sn-nav-sec-b { display: none; }

/* 🔴 §113 — THE PRE-PAINT COLLAPSE. `data-nav-closed` is written on <html> by the head script from
   localStorage, so a remembered section is already shut in the FIRST paint rather than ~215ms later when
   boot()'s network calls finish. Four explicit pairs because CSS cannot correlate a token in the root's
   attribute with a child's own `data-sec` value; the alternative was a class per section, which is the
   same four rules wearing a different hat.
   These only govern the window BEFORE studio-live.js runs: wireNavSections() applies the real `is-closed`
   class and then CLEARS the attribute, so from that moment there is exactly one source of truth. */
html[data-nav-closed~="studios"] .sn-nav-sec[data-sec="studios"] .sn-nav-sec-b,
html[data-nav-closed~="suite"]   .sn-nav-sec[data-sec="suite"]   .sn-nav-sec-b,
html[data-nav-closed~="assets"]  .sn-nav-sec[data-sec="assets"]  .sn-nav-sec-b,
html[data-nav-closed~="account"] .sn-nav-sec[data-sec="account"] .sn-nav-sec-b { display: none; }
html[data-nav-closed~="studios"] .sn-nav-sec[data-sec="studios"] .sn-nav-chev,
html[data-nav-closed~="suite"]   .sn-nav-sec[data-sec="suite"]   .sn-nav-chev,
html[data-nav-closed~="assets"]  .sn-nav-sec[data-sec="assets"]  .sn-nav-chev,
html[data-nav-closed~="account"] .sn-nav-sec[data-sec="account"] .sn-nav-chev { transform: rotate(-90deg); }

/* COLLAPSED RAIL: the heading has nothing to say at 66px wide, so it folds away
   exactly like the old `.sn-nav-label` did — and the body is forced back OPEN,
   because a section you cannot see the header of is a section you cannot
   re-open. (0,4,1) beats the (0,3,0) close rule above without !important. */
html[data-rail="collapsed"] .sn-nav-sec-h { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; pointer-events: none; }
/* Placed AFTER the pre-paint rules above and matching both forms (the class the JS sets and the root
   attribute the head script sets), so a collapsed rail forces every body open in either window. */
html[data-rail="collapsed"] .sn-nav-sec.is-closed .sn-nav-sec-b,
html[data-rail="collapsed"][data-nav-closed] .sn-nav-sec[data-sec] .sn-nav-sec-b { display: grid; }


/* rail collapse toggle */
.rail-toggle { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: var(--sn-r-input); color: var(--sn-ink-2); font: 500 .875rem var(--sn-sans); margin-top: 4px; }
.rail-toggle:hover { background: var(--sn-hover); color: var(--sn-ink); }
.rail-ic-wrap { display: inline-flex; flex: none; }
.rail-ic { width: 20px; height: 20px; display: block; }
/* Cloudflare-exact collapse icon: a rounded panel + a vertical line at the left third; ONLY the line
   translates on toggle (their real icon — no chevron, no rotation). Transition lives in studio-system.css. */

/* tooltips when collapsed (icon-only rail) */
html[data-rail="collapsed"] .sn-nav-item, html[data-rail="collapsed"] .rail-toggle { position: relative; }
html[data-rail="collapsed"] .side [data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--sn-tooltip-bg); color: var(--sn-tooltip-ink); font: 500 .75rem var(--sn-sans);
  padding: 5px 9px; border-radius: var(--sn-r-input); white-space: nowrap; z-index: 60; box-shadow: var(--sn-elev-2); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .app, .side .nav-lb, .side, .rail-ic .rail-line { transition: none; }
}

/* ---------- Explore — living masonry gallery ---------- */
.wrap.wrap-wide { max-width: 1360px; }
.xp-masonry { column-count: 4; column-gap: 14px; }
@media (max-width: 1200px) { .xp-masonry { column-count: 3; } }
@media (max-width: 840px) { .xp-masonry { column-count: 2; } }
@media (max-width: 520px) { .xp-masonry { column-count: 1; } }
.xp-masonry .card.is-skel { break-inside: avoid; margin: 0 0 14px; aspect-ratio: 4/3; }
.xp-card { break-inside: avoid; margin: 0 0 14px; position: relative; display: block; border-radius: var(--sn-r-card); overflow: hidden;
  border: 1px solid var(--sn-hairline); background: var(--sn-bg-deep); box-shadow: var(--sn-elev-1); cursor: pointer; }
.xp-card .xp-media { position: relative; overflow: hidden; }
.xp-card .xp-media img, .xp-card .xp-media video { width: 100%; display: block; }
.xp-card .xp-aud { aspect-ratio: 1/1; display: grid; place-items: center; background: linear-gradient(135deg, var(--sn-bg-raised), var(--sn-bg-deep)); }
.xp-card .xp-aud .sn-ic-slot { width: 34px; height: 34px; color: var(--sn-accent); }
.xp-card .xp-badge { position: absolute; top: 8px; left: 8px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(10,9,8,.55);
  backdrop-filter: blur(6px); color: #F5F4EF; font: 600 .625rem/20px var(--sn-mono); letter-spacing: .04em; text-transform: uppercase; opacity: 0; transition: opacity var(--sn-t-micro); }
.xp-card:hover .xp-badge { opacity: 1; }
.xp-card .xp-over { position: absolute; inset: auto 0 0 0; padding: 26px 12px 11px; color: #F5F4EF;
  background: linear-gradient(transparent, rgba(10,9,8,.85)); opacity: 0; transform: translateY(6px); transition: opacity var(--sn-t-micro), transform var(--sn-t-micro); pointer-events: none; }
.xp-card:hover .xp-over { opacity: 1; transform: none; }
.xp-card .xp-prompt { font: .8125rem/1.4 var(--sn-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- STYLE GALLERY — the visual style picker (Fable) ---------- */
.sn-menu.model-menu.style-gallery { min-width:396px; max-width:444px; padding:10px;
  max-height:min(540px,74vh); overflow-y:auto; overscroll-behavior:contain; }
.style-gallery::-webkit-scrollbar { width:8px; }
.style-gallery::-webkit-scrollbar-thumb { background:var(--sn-hairline-strong); border-radius:var(--sn-r-input); }
.style-gallery .sg-tools { padding:2px 2px 8px; }
.style-gallery .sg-search { width:100%; height:32px; padding:0 11px; border:1px solid var(--sn-hairline);
  border-radius:var(--sn-r-input); background:var(--sn-surface); color:var(--sn-ink); font:.8125rem var(--sn-sans); }
.style-gallery .sg-search::placeholder { color:var(--sn-ink-3); }
.style-gallery .sg-search:focus-visible { outline:none; border-color:var(--sn-accent); box-shadow:0 0 0 3px var(--sn-accent-glow); }
.style-gallery .sg-cats { display:flex; flex-wrap:wrap; gap:5px; padding:0 2px 10px; }
.style-gallery .sg-cat { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px;
  border:1px solid var(--sn-hairline); border-radius:999px; background:transparent; font:500 .75rem var(--sn-sans);
  color:var(--sn-ink-2); cursor:pointer; transition:color .12s,border-color .12s,background .12s; }
.style-gallery .sg-cat:hover { color:var(--sn-ink); border-color:var(--sn-ink-3); }
.style-gallery .sg-cat .n { font:.625rem var(--sn-mono); color:var(--sn-ink-3); }
.style-gallery .sg-cat.is-active { background:var(--sn-accent-soft); border-color:transparent; color:var(--sn-accent-ink); }
.style-gallery .sg-cat.is-active .n { color:inherit; opacity:.7; }
.style-gallery .sg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.style-gallery .sg-tile { position:relative; display:flex; flex-direction:column; margin:0; padding:0;
  border:1px solid var(--sn-hairline); border-radius:var(--sn-r-input); overflow:hidden; background:var(--sn-surface);
  text-align:left; cursor:pointer; transition:border-color .12s,box-shadow .12s,transform .12s; }
.style-gallery .sg-tile:hover { border-color:var(--sn-hairline-strong); box-shadow:var(--sn-elev-2); transform:translateY(-1px); }
.style-gallery .sg-tile.is-off { display:none; }
.style-gallery .sg-thumb { position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
  background:var(--sn-bg-raised) center/cover no-repeat; background-image:inherit; }
.style-gallery .sg-thumb::before { content:""; position:absolute; inset:0; background:inherit; background-size:cover;
  background-position:center; transition:transform 480ms var(--sn-ease-out,ease-out); }
.style-gallery .sg-tile:hover .sg-thumb::before { transform:scale(1.05); }
.style-gallery .sg-thumb::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%); transform:translateX(-120%); }
.style-gallery .sg-tile:hover .sg-thumb::after { transition:transform 560ms ease; transform:translateX(120%); }
.style-gallery .sg-thumb.sg-sw { display:grid; place-items:center; }
.style-gallery .sg-thumb.sg-sw::before { content:none; }
.style-gallery .sg-sw[data-sw="0"] { background:linear-gradient(135deg, var(--sn-accent-soft), var(--sn-bg-raised)); }
.style-gallery .sg-sw[data-sw="1"] { background:linear-gradient(135deg, var(--sn-info-soft,#25313a), var(--sn-chip-bg,#26251f)); }
.style-gallery .sg-sw[data-sw="2"] { background:linear-gradient(135deg, var(--sn-success-soft,#1f3327), var(--sn-bg-raised)); }
.style-gallery .sg-sw[data-sw="3"] { background:linear-gradient(135deg, var(--sn-warn-soft,#3a3320), var(--sn-chip-bg,#26251f)); }
.style-gallery .sg-sw[data-sw="4"] { background:linear-gradient(135deg, var(--sn-chip-bg,#26251f), var(--sn-accent-soft)); }
.style-gallery .sg-sw[data-sw="5"] { background:linear-gradient(135deg, var(--sn-bg-raised), var(--sn-info-soft,#25313a)); }
.style-gallery .sg-sw[data-sw="auto"] { background:linear-gradient(135deg, var(--sn-accent-soft), var(--sn-bg-raised)); color:var(--sn-accent); }
.style-gallery .sg-sw .sg-init { font:600 1.125rem var(--sn-mono); color:var(--sn-ink-2); user-select:none; }
.style-gallery .sg-sw .sn-ic-slot { width:18px; height:18px; }
.style-gallery .sg-top { position:absolute; top:5px; left:5px; z-index:1; height:16px; padding:0 6px;
  display:inline-flex; align-items:center; border-radius:999px; background:var(--sn-tooltip-bg); color:var(--sn-tooltip-ink);
  font:600 .5625rem var(--sn-mono); letter-spacing:.04em; text-transform:uppercase; }
.style-gallery .sg-check { position:absolute; top:5px; right:5px; z-index:1; width:18px; height:18px; display:grid;
  place-items:center; border-radius:999px; background:var(--sn-accent); color:#FFF8F5; opacity:0; transform:scale(.6);
  transition:opacity .12s,transform .12s; }
.style-gallery .sg-check .sn-ic-slot { width:10px; height:10px; }
.style-gallery .sg-tile.is-active { border-color:var(--sn-accent); box-shadow:0 0 0 3px var(--sn-accent-glow); }
.style-gallery .sg-tile.is-active .sg-check { opacity:1; transform:none; }
.style-gallery .sg-tile.is-active .sg-name { color:var(--sn-accent-ink); }
.style-gallery .sg-tx { display:flex; flex-direction:column; gap:1px; padding:6px 8px 7px; min-width:0; }
.style-gallery .sg-name { font:500 .75rem/1.25 var(--sn-sans); color:var(--sn-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.style-gallery .sg-one { font:.625rem/1.35 var(--sn-mono); color:var(--sn-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.style-gallery .sg-empty { padding:22px 8px 14px; text-align:center; font:.8125rem var(--sn-sans); color:var(--sn-ink-3); }
.style-gallery .sg-empty-clear { border:0; background:none; padding:0; margin-left:4px; font:500 .8125rem var(--sn-sans); color:var(--sn-accent-ink); cursor:pointer; }
.style-pick .mp-swatch { flex:none; width:20px; height:20px; border-radius:var(--sn-r-xs); border:1px solid var(--sn-hairline);
  background:var(--sn-bg-raised) center/cover no-repeat; display:grid; place-items:center; }
.style-pick.has-style > .sn-ic-slot:first-child { display:none; }
@media (max-width:560px) { .sn-menu.model-menu.style-gallery { min-width:0; width:min(92vw,360px); } .style-gallery .sg-grid { grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce) {
  .style-gallery .sg-tile, .style-gallery .sg-tile:hover { transform:none; }
  .style-gallery .sg-tile:hover .sg-thumb::before { transform:none; }
  .style-gallery .sg-thumb::after { display:none; }
  .style-gallery .sg-check { transition:none; transform:none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §115 — THE CREATE TOOL'S GENERATOR PICKER (top-left of the Create view).
   ─────────────────────────────────────────────────────────────────────────────
   🎨 MINIMAL, AND IT MATCHES THE PAGE (Rob: "no colour/gradient fill, match the
   background, light or dark — subtle icon shape around the icon, not crowded").
   So: NO background of its own, NO border at rest, no card. Every colour here is
   a theme token, which is what makes it correct in both themes without a single
   theme-specific rule — the previous gradient pill needed hard-coded hexes and
   was wrong in light by construction.
   The only shape is `.cr-pick-ic`, a soft tile behind the glyph; the hairline
   and the faint wash appear on hover/open, so the affordance exists without the
   control shouting at rest. */
.cr-tool { display: flex; flex-direction: column; min-height: 0; }
.cr-bar { padding: 20px 28px 0; }
.cr-host { min-width: 0; }
.cr-pick {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--sn-r-card);
  padding: 6px 10px 6px 6px; color: var(--sn-ink);
  font: 600 1.0625rem/1 var(--sn-sans); letter-spacing: -.01em;
  transition: background var(--sn-t-hover) var(--sn-ease), border-color var(--sn-t-hover) var(--sn-ease);
}
.cr-pick:hover, .cr-pick[aria-expanded="true"] { background: var(--sn-hover); border-color: var(--sn-hairline); }
.cr-pick-ic {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--sn-r-input);
  background: var(--sn-bg-raised); border: 1px solid var(--sn-hairline);
}
.cr-pick-ic .sn-ic { width: 16px; height: 16px; color: var(--sn-ink-2); }
.cr-pick-chev { display: inline-flex; color: var(--sn-ink-3); transition: transform 200ms var(--sn-ease); }
.cr-pick[aria-expanded="true"] .cr-pick-chev { transform: rotate(180deg); }
.cr-menu { min-width: 224px; padding: 6px; }
.cr-menu .sl-acct-item.is-sel { background: var(--sn-hover); }
/* "Soon" reads as unavailable rather than as a control: dimmed, no hover, and
   it is a <div> with aria-disabled in the markup, so there is nothing to click. */
.cr-menu .sl-acct-item[aria-disabled="true"] { opacity: .45; cursor: default; }
.cr-menu .sl-acct-item[aria-disabled="true"]:hover { background: none; }
.cr-soon { font: 600 .625rem/1 var(--sn-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--sn-ink-3); }
.cr-tick { display: inline-flex; color: var(--sn-ink-2); }
@media (max-width: 820px) { .cr-bar { padding: 16px 16px 0; } }

/* ─────────────────────────────────────────────────────────────────────────────
   §112 — FILM SETTINGS (frame size / length / model), in the Producer editor.
   Reuses the .sn-scrim / .sn-modal shell; only the rows are new. Deliberately
   plain: this sheet's job is to make a CONSEQUENCE legible before a write, and
   a decorated panel competes with the sentence that does that work. */
.tl-set-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-top: 1px solid var(--sn-hairline); }
.tl-set-row:first-child { border-top: 0; padding-top: 4px; }
.tl-set-k { flex: 1; min-width: 0; font: 500 .875rem/1.3 var(--sn-sans); color: var(--sn-ink); }
.tl-set-k span { display: block; margin-top: 3px; font: .75rem/1.4 var(--sn-sans); color: var(--sn-ink-3); }
.tl-set-seg { flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; }
/* THE CONSEQUENCE LINE. It only exists when a pick actually has one, so it must
   read as a warning rather than as chrome that is always there. */
.tl-set-note { margin-top: 14px; padding: 11px 13px; border-radius: var(--sn-r-input);
  background: var(--sn-warn-soft, var(--sn-bg-raised)); border: 1px solid var(--sn-hairline); }
.tl-set-note p { margin: 0 0 6px; font: .8125rem/1.5 var(--sn-sans); color: var(--sn-ink-2); }
.tl-set-note p:last-child { margin-bottom: 0; }
.tl-set-note[hidden] { display: none; }
.tl-set-money { margin-top: 12px; font: 500 .8125rem/1.4 var(--sn-sans); color: var(--sn-ink-2); }