/* Direction A: brand (ported from .orch/qa/flow-design/brand/brand.css; plan .orch/plans/pages/brand.md). Loaded after flow-head.css.
   Scoped to .dab (js/views.js brand()); the colours inside the frame are the creator's own palette (--b-*, set by js/da-brand.js).
   Keyframes carry a dab- prefix. Tokens: css/flow-stage.css :root. */

/* ---------- base ---------- */
:root .dab { --b-base: var(--dk-paper, #FFFFFF); --b-text: var(--dk-ink, #1F1F21); --b-accent: #8799C3; --b-c1: var(--dk-b-c9cbd1, #C9CBD1); --b-c2: #9EA1A8; --b-c3: #6E7178; --b-paper: var(--dk-b-f3f2ed, #F3F2ED); --b-font: Inter, system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--s-ink); -webkit-font-smoothing: antialiased;
  max-width: calc(1180px + var(--vs-extra, 0px)); transition: max-width 220ms var(--ease-out);
  display: flex; flex-direction: column; height: calc(100dvh - 92px); min-height: 640px; }
:root .dab *, :root .dab *::before, :root .dab *::after { box-sizing: border-box; }
:where(.dab) :is(button, input, textarea, select) { font: inherit; color: inherit; }
:where(.dab) button { cursor: pointer; }
:where(.dab) :where(h1, h2, h3, h4, p, ol, ul, figure) { margin: 0; }
:where(.dab) :where(ol, ul) { padding: 0; list-style: none; }
:root .dab .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root .dab .faint { color: var(--s-faint); }
:root .dab svg.vi { display: block; flex: none; }
:root .dab [hidden] { display: none !important; }
:root .dab :focus-visible { outline: 2px solid var(--dk-tx-s-peri-deep, var(--s-peri-deep)); outline-offset: 2px; }
@keyframes dab-fadeIn { from { opacity: 0; transform: translateY(3px); } }
@keyframes dab-popIn { from { opacity: 0; transform: scale(.92) translateY(-4px); } }
@keyframes dab-tickPop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
@keyframes dab-pulse { 50% { opacity: .35; } }
@keyframes dab-land { from { opacity: 0; transform: scale(.6); } }
@keyframes dab-skel { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@keyframes dab-scan { from { top: -30%; } to { top: 100%; } }

/* ---------- header: one baseline row ---------- */
:root .dab .dab-head { margin-bottom: 20px; position: relative; z-index: 20; flex: none; }
:root .dab .head-row { display: flex; align-items: center; gap: 24px; }
:root .dab h1 { font-size: 44px; line-height: 1.05; font-weight: 500; letter-spacing: -.035em; margin: 0; }
:root .dab .head-sub { margin-top: 6px; font-size: 15px; color: var(--s-ink-2); }
:root .dab .head-tools { display: flex; align-items: center; gap: 14px; position: relative; margin-left: auto; }
:root .dab .saved { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--s-faint); min-width: 0; }
:root .dab .saved-tick { width: 22px; height: 22px; border-radius: 50%; color: var(--s-faint); display: grid; place-items: center; transition: color var(--t-small), background var(--t-small); }
:root .dab .saved.flash .saved-tick { color: #fff; background: var(--s-positive); animation: dab-tickPop var(--t-micro) var(--ease-out) both; }
:root .dab .saved.flash .saved-text { color: var(--s-ink); }
:root .dab .saved.fail .saved-tick { color: var(--s-ink); }
:root .dab .saved.fail [data-brand-status] { color: var(--s-ink); font-weight: 500; }
:root .dab .saved-text { white-space: nowrap; transition: color var(--t-small); }
:root .dab [data-brand-status]:empty { display: none; }
:root .dab [data-brand-status]:not(:empty) + .saved-def { display: none; }
:root .dab .textbtn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 3px 2px; font-size: 13px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); border-radius: 6px; text-decoration: none; }
:root .dab .textbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
:root .dab .saved .undo { animation: dab-fadeIn var(--t-small) var(--ease-out); }
:root .dab .ring-btn { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border-radius: var(--r-pill); border: 1px solid var(--s-line); background: var(--s-card); box-shadow: var(--s-shadow); font-size: 13px; white-space: nowrap; }
:root .dab .ring { width: 32px; height: 32px; transform: rotate(-90deg); }
:root .dab .ring-bg { fill: none; stroke: var(--s-peri-soft); stroke-width: 4; }
:root .dab .ring-fg { fill: none; stroke: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); stroke-width: 4; stroke-dasharray: 100.53; stroke-dashoffset: 100.53; transition: stroke-dashoffset var(--t-large) var(--ease-out); }
:root .dab .ring-btn.bump .ring { animation: dab-ringBump var(--t-medium) var(--ease-spring); }
@keyframes dab-ringBump { 40% { transform: rotate(-90deg) scale(1.18); } }
:root .dab .ring-txt b { font-weight: 600; }
:root .dab .ring-pop { position: absolute; right: 190px; top: calc(100% + 10px); width: 290px; z-index: 40; background: var(--s-card); border-radius: 18px; border: 1px solid var(--s-hair); box-shadow: var(--s-pop-shadow); padding: 14px 10px 10px; transform-origin: 80% 0; animation: dab-popIn var(--t-medium) var(--ease-out); }
:root .dab .rp-h { font-size: 13px; font-weight: 500; padding: 0 8px 8px; }
:root .dab .rp-list li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 10px; font-size: 13px; }
:root .dab .rp-list li .vi { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .rp-list li.no { color: var(--s-ink-2); }
:root .dab .rp-list li.no .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed var(--dk-l-1f1f21a30, rgba(31,31,33,.3)); flex: none; }
:root .dab .rp-list li .textbtn { margin-left: auto; }

/* pills */
:root .dab .dab-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: transform var(--t-micro) var(--ease-out), background var(--t-micro), box-shadow var(--t-small); }
:root .dab .dab-pill:active { transform: scale(.97); }
:root .dab .dab-pill--ink { background: var(--s-ink); color: var(--dk-oninv, #fff); }
:root .dab .dab-pill--ink:hover { background: #000; }
:root .dab .dab-pill--line { background: var(--s-card); border-color: var(--s-line); box-shadow: var(--s-shadow); color: var(--s-ink); }
:root .dab .dab-pill--line:hover { box-shadow: var(--s-pop-shadow); }
:root .dab .dab-pill--line .vi { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .dab-pill--s { height: 36px; padding: 0 16px; font-size: 14px; }
:root .dab .dab-pill--xs { height: 32px; padding: 0 14px; font-size: 13px; }
:root .dab .dab-pill:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- the stage: 8 + 4 columns, only the card scrolls ---------- */
:root .dab .dab-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-bottom: 8px; }
:root .dab .art { position: relative; isolation: isolate; overflow: hidden; }
:root .dab .art > canvas.fs-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
:root .dab .art-box { grid-column: 1 / span 8; position: relative; border-radius: var(--r-art); padding: 22px 36px; display: flex; flex-direction: column; justify-content: center; gap: 14px; background: var(--s-peri); min-height: 0; }
:root .dab .glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 45%, var(--dk-b-ffffffa55, rgba(255,255,255,.55)), var(--dk-b-ffffffa0, rgba(255,255,255,0)) 70%); opacity: .35; }
:root .dab .dab-side { grid-column: 9 / span 4; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

/* art bar */
:root .dab .art-bar { position: relative; height: 40px; flex: none; }
:root .dab .art-bar > * { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; transition: opacity var(--t-medium) var(--ease-out), transform var(--t-medium) var(--ease-out); }
:root .dab .bar-import, :root .dab .bar-review { opacity: 0; pointer-events: none; transform: translateY(6px); }
:root .dab .tool-note { margin-right: auto; font-size: 13px; color: rgba(255,255,255,.95); font-weight: 500; text-shadow: 0 1px 6px rgba(31,31,33,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
:root .dab .chip-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--r-pill); border: 0; background: var(--dk-b-ffffffa88, rgba(255,255,255,.88)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; font-weight: 500; color: var(--s-ink); box-shadow: 0 1px 2px rgba(31,31,33,.06); flex: none; transition: background var(--t-micro), transform var(--t-micro); }
:root .dab .chip-btn:hover { background: var(--dk-paper, #fff); }
:root .dab .chip-btn:active { transform: scale(.96); }
:root .dab .chip-btn .vi { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .chip-btn[aria-pressed="true"] { background: var(--s-ink); color: var(--dk-oninv, #fff); }
:root .dab .chip-btn[aria-pressed="true"] .vi { color: #fff; }
:root .dab .chip-btn.spin .vi { animation: dab-spin 520ms var(--ease-out); }
:root .dab .chip-btn:disabled { opacity: .5; }
@keyframes dab-spin { to { transform: rotate(360deg); } }
:root .dab .bar-import { background: var(--dk-b-ffffffa94, rgba(255,255,255,.94)); border-radius: var(--r-pill); padding: 0 4px 0 14px; box-shadow: 0 6px 24px rgba(31,31,33,.14); height: 46px; top: -3px; }
:root .dab .bi-ic { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); display: grid; }
:root .dab .bi-in { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; height: 100%; }
:root .dab .bi-go { height: 38px; padding: 0 16px; font-size: 14px; }
:root .dab .bi-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--s-ink-2); flex: none; }
:root .dab .bi-x:hover { background: var(--s-shell); }
:root .dab .bar-review { background: var(--dk-b-ffffffa95, rgba(255,255,255,.95)); border-radius: var(--r-pill); padding: 0 6px 0 12px; box-shadow: 0 6px 24px rgba(31,31,33,.14); height: 46px; top: -3px; font-size: 13px; gap: 10px; }
:root .dab .bar-review .textbtn { white-space: nowrap; }
:root .dab .br-ok { width: 24px; height: 24px; border-radius: 50%; background: var(--s-positive); color: #fff; display: grid; place-items: center; flex: none; }
:root .dab .br-t { margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
:root .dab[data-bar="import"] .bar-tools, :root .dab[data-bar="review"] .bar-tools { opacity: 0; pointer-events: none; transform: translateY(-6px); }
:root .dab[data-bar="import"] .bar-import, :root .dab[data-bar="review"] .bar-review { opacity: 1; pointer-events: auto; transform: none; }
:root .dab .bar-err { display: flex; align-items: center; gap: 8px; margin: -6px 0 0; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--s-card); color: var(--s-ink); font-size: 13px; align-self: stretch; box-shadow: 0 6px 20px rgba(31,31,33,.12); animation: dab-fadeIn var(--t-small) var(--ease-out); flex: none; }
:root .dab .bar-err-t { flex: 1; }
:root .dab .be-acts { display: flex; gap: 6px; flex: none; }
:root .dab:not([data-tab="look"]) .bar-tools .chip-btn { display: none; }

/* ---------- the frame ---------- */
:root .dab .frame-wrap { perspective: 1600px; flex: none; transition: transform var(--t-medium) var(--ease-out); transform-origin: 0 50%; }
:root .dab .frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; container-type: inline-size; background: #2a2a2c; box-shadow: 0 2px 6px rgba(31,31,33,.08), 0 24px 60px rgba(31,31,33,.18); transform-style: preserve-3d; }
:root .dab .frame.flip { animation: dab-flipY var(--t-large) var(--ease-inout); }
@keyframes dab-flipY { 0% { transform: rotateY(0); } 49% { transform: rotateY(90deg); } 51% { transform: rotateY(-90deg); } 100% { transform: rotateY(0); } }
:root .dab .fl { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--t-medium) var(--ease-out), visibility 0s linear var(--t-medium); }
:root .dab .fl.on { opacity: 1; visibility: visible; transition: opacity var(--t-medium) var(--ease-out), visibility 0s, transform var(--t-large) var(--ease-inout); }
:root .dab .fl video, :root .dab .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #2a2a2c; }
:root .dab .live-pill { position: absolute; left: 2.4cqw; top: 2.4cqw; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--dk-b-1f1f21a72, rgba(31,31,33,.72)); color: #fff; font-size: 12px; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 5; transition: opacity var(--t-small); }
:root .dab .live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--s-peri); animation: dab-pulse 1.6s infinite; }
:root .dab .fpill { position: absolute; left: 50%; bottom: 3cqw; transform: translateX(-50%); display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: var(--r-pill); background: var(--dk-b-ffffffa95, rgba(255,255,255,.95)); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: var(--s-shadow); z-index: 4; }
:root .dab .frame * { transition-property: background-color, color, border-color, opacity, transform; transition-duration: var(--t-medium); transition-timing-function: var(--ease-out); }
:root .dab .fl-look { transform-origin: var(--zx, 50%) var(--zy, 50%); }
:root .dab .fl-look.zoomed { transform: scale(var(--z, 1.4)); }
:root .dab .fl-look .clip { filter: none; transition: filter var(--t-large); }
:root .dab .fl-look.soften .clip { filter: brightness(.92) contrast(.96); }
:root .dab .fl-look.punch .clip { animation: dab-punch 6s var(--ease-inout) infinite; }
@keyframes dab-punch { 0%, 45% { transform: scale(1); } 55%, 90% { transform: scale(1.08) translate(-2%, 1%); } }
:root .dab .fl-look.raw :is(.gfx, .ncard, .cap, .endcard, .role-chip) { opacity: 0 !important; }
:root .dab .frame.no-video { background: linear-gradient(135deg, var(--dk-b-edebe4, #EDEBE4), var(--dk-b-dcd9cf, #DCD9CF)); }

/* the graphic, drawn in the palette */
:root .dab .gfx { position: absolute; right: 3.6cqw; top: 3.6cqw; width: 36cqw; padding: 2.4cqw 2.6cqw 2.2cqw; border-radius: 1.4cqw; background: var(--b-base); color: var(--b-text); box-shadow: 0 1cqw 3cqw rgba(0,0,0,.22); font-family: var(--b-font); }
:root .dab .gfx-k { font-size: 1.35cqw; letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-weight: 600; line-height: 1.3; }
:root .dab .gfx-big { font-size: 5.4cqw; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: var(--b-accent); margin-top: .3cqw; }
:root .dab .bars { display: flex; align-items: flex-end; gap: 1.6cqw; height: 13cqw; margin-top: 1.4cqw; }
:root .dab .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
:root .dab .bar i { display: block; width: 100%; height: calc(var(--h) * 10cqw); background: var(--b-c1); border-radius: .4cqw .4cqw 0 0; transform-origin: bottom; animation: dab-grow 1.1s var(--ease-out) both; }
:root .dab .bar:nth-child(2) i { background: var(--b-c2); animation-delay: 90ms; }
:root .dab .bar:nth-child(3) i { background: var(--b-c3); animation-delay: 180ms; }
:root .dab .bar.hi i { background: var(--b-accent); }
@keyframes dab-grow { from { transform: scaleY(0); } }
:root .dab .bar em { font-style: normal; font-size: 1.25cqw; font-weight: 600; margin-bottom: .4cqw; }
:root .dab .gfx[data-look="blueprint"] { background: color-mix(in srgb, var(--b-accent) 55%, #0b1830); color: #fff; box-shadow: inset 0 0 0 .15cqw rgba(255,255,255,.4), 0 1cqw 3cqw rgba(0,0,0,.25); border-radius: .3cqw; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 2cqw 2cqw; }
:root .dab .gfx[data-look="blueprint"] .gfx-big { color: #fff; }
:root .dab .gfx[data-look="blueprint"] .bar i { background: transparent !important; border: .15cqw solid var(--dk-paper, #fff); border-bottom: 0; }
:root .dab .gfx[data-look="bold"] { border-radius: 0; text-transform: uppercase; }
:root .dab .gfx[data-look="bold"] .gfx-big { display: inline-block; background: var(--b-accent); color: var(--b-base); padding: 0 1cqw; transform: rotate(-2deg); font-weight: 700; }
:root .dab .gfx[data-look="bold"] .bar i { border-radius: 0; }
:root .dab .gfx[data-look="clean"] { box-shadow: none; border-radius: .4cqw; }
:root .dab .gfx[data-look="clean"] .bar i { background: var(--b-accent) !important; opacity: .55; }
:root .dab .gfx[data-look="clean"] .bar.hi i { opacity: 1; }
:root .dab .gfx[data-look="hand"] { background: #2E352F; color: #F3F0E6; font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; border-radius: .4cqw; }
:root .dab .gfx[data-look="hand"] .gfx-big { color: #F3D27A; font-weight: 400; }
:root .dab .gfx[data-look="hand"] .bar i { background: repeating-linear-gradient(45deg, var(--dk-b-f3d27aa90, rgba(243,210,122,.9)) 0 .3cqw, transparent .3cqw .8cqw) !important; border: .15cqw solid var(--dk-l-f3f0e6a80, rgba(243,240,230,.8)); }
:root .dab .gfx[data-look="terminal"] { background: #151515; color: #E9E6DF; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border-radius: .6cqw; }
:root .dab .gfx[data-look="terminal"] .gfx-big { color: #F2B33D; }
:root .dab .gfx[data-look="terminal"] .bar i { background: var(--dk-b-f2b33d, #F2B33D) !important; opacity: .5; }
:root .dab .gfx[data-look="terminal"] .bar.hi i { opacity: 1; }
:root .dab .gfx[data-look="playful"] { border-radius: 2.4cqw; }
:root .dab .gfx[data-look="playful"] .bar i { border-radius: 9cqw; background: radial-gradient(circle, var(--b-c1) 40%, transparent 42%) 0 0 / 2cqw 2cqw !important; }
:root .dab .gfx[data-look="playful"] .bar.hi i { background: radial-gradient(circle, var(--b-accent) 40%, transparent 42%) 0 0 / 2cqw 2cqw !important; }
:root .dab .gfx[data-look="custom"] { background: var(--b-paper); box-shadow: inset 0 0 0 .12cqw var(--b-c3); border-radius: .2cqw; }
:root .dab .gfx[data-look="custom"] .gfx-big { color: var(--b-c3); }

/* name card */
:root .dab .ncard { position: absolute; left: 3.6cqw; bottom: 11.5cqw; display: flex; align-items: stretch; background: var(--b-base); color: var(--b-text); border-radius: .9cqw; overflow: hidden; box-shadow: 0 .8cqw 2.4cqw rgba(0,0,0,.22); font-family: var(--b-font); max-width: 60cqw; animation: dab-ncIn 900ms var(--ease-out) both; }
@keyframes dab-ncIn { from { opacity: 0; transform: translateX(-2cqw); } }
:root .dab .nc-logo { display: flex; align-items: center; justify-content: center; padding: .9cqw 1.4cqw; background: var(--b-paper); min-width: 9cqw; }
:root .dab .nc-logo img { max-height: 4.4cqw; max-width: 14cqw; object-fit: contain; display: block; }
:root .dab .ncard.nologo .nc-logo { display: none; }
:root .dab .ncard:not(.nologo) .nc-t { box-shadow: inset .5cqw 0 0 var(--b-accent); }
:root .dab .ncard.nologo .nc-t { box-shadow: inset .7cqw 0 0 var(--b-accent); padding-left: 2.4cqw; }
:root .dab .nc-t { display: flex; flex-direction: column; justify-content: center; padding: 1.2cqw 2.2cqw 1.3cqw 1.8cqw; min-width: 0; }
:root .dab .nc-t b { font-size: 2.5cqw; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
:root .dab .nc-t span { font-size: 1.6cqw; opacity: .7; white-space: nowrap; font-family: var(--b-font-body, var(--b-font)); }
:root .dab .nc-t span:empty { display: none; }
:root .dab .wm { font-weight: 500; letter-spacing: .32em; line-height: 1; padding-left: .32em; font-family: var(--b-font, Inter); }

/* captions: the video's own words */
:root .dab .cap { position: absolute; left: 3.6cqw; width: 54cqw; bottom: 3.6cqw; display: flex; flex-wrap: wrap; justify-content: center; gap: .8cqw; font-family: var(--b-font-body, var(--b-font)); font-weight: 700; font-size: 3cqw; color: #fff; text-shadow: 0 .3cqw 1.2cqw rgba(0,0,0,.45); }
:root .dab .cap[data-pos="above"] { bottom: auto; top: 3.6cqw; }
:root .dab .cap[data-pos="beside"] { width: 22cqw; bottom: 26cqw; justify-content: flex-start; }
:root .dab .cap .w { position: relative; padding: .2cqw .6cqw; border-radius: .5cqw; }
:root .dab .cap[data-cs="highlight"] .w.k { background: var(--b-accent); text-shadow: none; animation: dab-sweep 2.4s var(--ease-out) infinite; }
@keyframes dab-sweep { 0% { clip-path: inset(0 100% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
:root .dab .cap[data-cs="underline"] .w.k::after { content: ""; position: absolute; left: .6cqw; right: .6cqw; bottom: -.2cqw; height: .5cqw; background: var(--b-accent); transform-origin: left; animation: dab-uline 2.4s var(--ease-out) infinite; }
@keyframes dab-uline { 0% { transform: scaleX(0); } 35%, 100% { transform: scaleX(1); } }
:root .dab .cap[data-cs="follow"] .w.on { background: var(--b-base); color: var(--b-text); text-shadow: none; }
:root .dab .cap[data-cs="pop"] .w { animation: dab-capPop 2.4s var(--ease-spring) infinite; animation-delay: calc(var(--i) * 180ms); }
@keyframes dab-capPop { 0% { opacity: 0; transform: scale(.4); } 14%, 100% { opacity: 1; transform: scale(1); } }
:root .dab .cap.off { opacity: 0; }
:root .dab .endcard { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqw; background: var(--b-base); color: var(--b-text); font-family: var(--b-font); opacity: 0; pointer-events: none; text-align: center; padding: 0 6cqw; }
:root .dab .endcard .wm { font-size: 4.6cqw; color: var(--b-accent); letter-spacing: .12em; }
:root .dab .endcard span:last-child { font-size: 1.8cqw; opacity: .7; }
:root .dab .fl-look.show-end .endcard { opacity: 1; }
:root .dab .ghost-card, :root .dab .ghost-gfx { position: absolute; display: grid; place-items: center; border: 2px dashed var(--dk-l-1f1f21a28, rgba(31,31,33,.28)); border-radius: 1cqw; color: var(--s-ink-2); font-size: 13px; font-weight: 500; background: var(--dk-b-ffffffa35, rgba(255,255,255,.35)); }
:root .dab .ghost-card { left: 3.6cqw; bottom: 8cqw; width: 26cqw; height: 8cqw; }
:root .dab .ghost-gfx { right: 3.6cqw; top: 3.6cqw; width: 34cqw; height: 26cqw; }

/* a colour's role pulses on the frame */
:root .dab .fl-look .pulse { animation: dab-rolePulse 600ms var(--ease-inout) 2 !important; }
@keyframes dab-rolePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(76,95,146,0); } 50% { box-shadow: 0 0 0 .5cqw rgba(255,255,255,.95), 0 0 0 1.3cqw rgba(76,95,146,.45); } }
:root .dab .role-chip { position: absolute; left: 50%; top: 2.4cqw; transform: translate(-50%, -8px); height: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 6px; border-radius: var(--r-pill); background: var(--dk-b-ffffffa96, rgba(255,255,255,.96)); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; box-shadow: var(--s-shadow); z-index: 6; pointer-events: none; }
:root .dab .role-chip.on { opacity: 1; transform: translate(-50%, 0); }
:root .dab .role-chip i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
:root .dab .mo-flash { animation: dab-moFlash 900ms var(--ease-out); }
@keyframes dab-moFlash { 30% { box-shadow: 0 0 0 .6cqw rgba(255,255,255,.95), 0 0 0 1.6cqw rgba(76,95,146,.5); } }
:root .dab .drop { position: absolute; inset: 1.4cqw; border-radius: 12px; border: 2px dashed rgba(255,255,255,.95); background: rgba(76,95,146,.38); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 16px; opacity: 0; pointer-events: none; z-index: 7; transition: opacity var(--t-small); }
:root .dab .frame.dragover .drop { opacity: 1; }

/* hover preview of another graphic style */
:root .dab .fl-preview { z-index: 3; }
:root .dab .fl-preview .fpill { bottom: auto; top: 2.4cqw; left: auto; right: 2.4cqw; transform: none; }

/* editing: the opening replays */
:root .dab .replay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 18px; background: radial-gradient(40% 40% at 50% 50%, var(--dk-b-1f1f21a55, rgba(31,31,33,.55)), var(--dk-b-1f1f21a0, rgba(31,31,33,0))); opacity: 0; pointer-events: none; }
:root .dab .replay.on { animation: dab-replayIn 1.6s var(--ease-out) both; }
@keyframes dab-replayIn { 0% { opacity: 0; transform: scale(1.06); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
:root .dab .fl-edit.rewind video { animation: dab-rewind var(--t-large) var(--ease-inout); }
@keyframes dab-rewind { 0% { filter: none; transform: none; } 45% { filter: blur(6px) saturate(.4); transform: scale(1.04); } 100% { filter: none; transform: none; } }

/* channel: the viewer card */
:root .dab .fl-aud { background: var(--s-card); }
:root .dab .aud { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; gap: 3cqw; padding: 5cqw 5cqw; }
:root .dab .aud-l { display: flex; flex-direction: column; justify-content: center; max-width: 62cqw; }
:root .dab .aud-k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .aud-who { margin-top: 2cqw; font-size: 5.2cqw; line-height: 1.04; font-weight: 500; letter-spacing: -.04em; color: var(--dk-ink, #1F1F21); }
:root .dab .aud-hi { color: inherit; }
:root .dab .aud-quote { margin-top: 2.2cqw; font-size: 1.9cqw; color: var(--s-ink-2); max-width: 40ch; }
:root .dab .aud-chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
:root .dab .aud-chips span { font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--dk-b-e9ecf3, #E9ECF3); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); font-weight: 500; }

/* photos: a thumbnail */
:root .dab .fl-thumb { background: var(--b-paper); font-family: var(--b-font); color: var(--b-text); overflow: hidden; }
:root .dab .th-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 56%; background: center 30% / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%); transition: all var(--t-large) var(--ease-inout); }
:root .dab .th-t { position: absolute; left: 4.5cqw; top: 8cqw; width: 46cqw; font-size: 5.6cqw; line-height: 1.02; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; transition: all var(--t-large) var(--ease-inout); }
:root .dab .th-hi { background: var(--b-accent); color: var(--b-base); padding: 0 1cqw; display: inline-block; transform: rotate(-1.5deg); }
:root .dab .th-num { position: absolute; left: 4.5cqw; bottom: 6cqw; font-size: 8cqw; font-weight: 800; letter-spacing: -.05em; color: var(--b-accent); opacity: 0; transition: all var(--t-large) var(--ease-inout); }
:root .dab .th-logo { position: absolute; left: 4.5cqw; bottom: 4cqw; font-size: 2cqw; color: var(--b-text); opacity: .75; transition: all var(--t-large) var(--ease-inout); }
:root .dab .th-pill { bottom: auto; top: 2.4cqw; left: auto; right: 2.4cqw; transform: none; }
:root .dab .fl-thumb[data-lay="2"] .th-photo { right: auto; left: 0; width: 52%; -webkit-mask-image: linear-gradient(to left, transparent, #000 25%); mask-image: linear-gradient(to left, transparent, #000 25%); }
:root .dab .fl-thumb[data-lay="2"] .th-t { left: 52cqw; top: 7cqw; width: 42cqw; font-size: 4.4cqw; }
:root .dab .fl-thumb[data-lay="2"] .th-num { left: 52cqw; bottom: 9cqw; opacity: 1; font-size: 10cqw; }
:root .dab .fl-thumb[data-lay="2"] .th-logo { left: auto; right: 4cqw; }
:root .dab .fl-thumb[data-lay="3"] .th-photo { width: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 18%, #000 45%); mask-image: linear-gradient(to bottom, transparent 18%, #000 45%); }
:root .dab .fl-thumb[data-lay="3"] .th-t { top: 3.5cqw; left: 4cqw; width: 92cqw; font-size: 5cqw; text-align: center; }
:root .dab .fl-thumb[data-lay="3"] .th-logo { left: 4cqw; bottom: 3.6cqw; color: var(--b-base); }

/* references */
:root .dab .fl-refs { background: var(--s-canvas); display: flex; flex-direction: column; padding: 3cqw 3cqw 2.4cqw; gap: 2cqw; }
:root .dab .rf-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 58% 1fr; gap: 3cqw; align-items: center; }
:root .dab .rf-shot { position: relative; aspect-ratio: 16/9; border-radius: 1.2cqw; overflow: hidden; box-shadow: 0 1cqw 3cqw rgba(31,31,33,.18); background: var(--s-shell); display: grid; place-items: center; }
:root .dab .rf-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
:root .dab .rf-noimg { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .pin { position: absolute; left: var(--x); top: var(--y); width: 2.8cqw; height: 2.8cqw; margin: -1.4cqw 0 0 -1.4cqw; border-radius: 50%; background: var(--s-ink); color: var(--dk-oninv, #fff); display: grid; place-items: center; font-size: 1.4cqw; font-weight: 600; box-shadow: 0 0 0 .5cqw rgba(255,255,255,.8); animation: dab-pinIn 520ms var(--ease-spring) both; }
:root .dab .pin:nth-of-type(2) { animation-delay: 140ms; } :root .dab .pin:nth-of-type(3) { animation-delay: 280ms; }
@keyframes dab-pinIn { from { opacity: 0; transform: scale(.2); } }
:root .dab .rf-k { font-size: 12px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .rf-title { margin-top: .6cqw; font-size: 1.9cqw; font-weight: 500; line-height: 1.25; }
:root .dab .rf-list { margin-top: 1.4cqw; display: flex; flex-direction: column; gap: 1.2cqw; }
:root .dab .rf-list li { display: grid; grid-template-columns: 2.6cqw 1fr; gap: 1cqw; font-size: 1.75cqw; line-height: 1.3; animation: dab-fadeIn var(--t-medium) var(--ease-out) both; }
:root .dab .rf-list li b { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--s-ink); color: var(--dk-oninv, #fff); display: grid; place-items: center; font-size: 1.3cqw; }
:root .dab .rf-list li.wait { color: var(--s-ink-2); }
:root .dab .rf-strip { display: flex; gap: 1.4cqw; height: 9cqw; flex: none; }
:root .dab .rf-strip button { flex: none; height: 100%; aspect-ratio: 16/9; border: 0; padding: 0; border-radius: .8cqw; overflow: hidden; opacity: .55; transition: opacity var(--t-small), transform var(--t-small) var(--ease-out), box-shadow var(--t-small); background: var(--s-shell); }
:root .dab .rf-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .dab .rf-strip button.on { opacity: 1; box-shadow: 0 0 0 2px var(--s-ink); transform: translateY(-2px); }
:root .dab .rf-empty { margin: auto; max-width: 56cqw; text-align: center; display: flex; flex-direction: column; gap: 1.2cqw; align-items: center; }
:root .dab .rf-empty-h { font-size: 3.6cqw; font-weight: 500; letter-spacing: -.03em; }
:root .dab .rf-empty-p { font-size: 1.8cqw; color: var(--s-ink-2); }

/* import: the bird reads */
:root .dab .fl-import { background: radial-gradient(70% 70% at 50% 48%, var(--dk-b-ffffffa55, rgba(255,255,255,.55)), rgba(135,153,195,.92) 75%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 3; }
/* the bird is a mark over the heading, not the whole frame */
:root .dab .imp-bird { position: absolute; left: 50%; top: 50%; width: clamp(64px, 20cqw, 128px); aspect-ratio: 970 / 760; transform: translate(-50%, calc(-100% - 22px)); }
:root .dab .imp-txt { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-40%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transition: opacity var(--t-medium); }
:root .dab .fl-import.loose .imp-txt { opacity: 1; }
:root .dab .imp-h { font-size: 17px; font-weight: 500; letter-spacing: -.01em; background: var(--dk-b-ffffffa80, rgba(255,255,255,.8)); padding: 2px 12px; border-radius: var(--r-pill); }
:root .dab .imp-checks { display: flex; gap: 14px; font-size: 13px; position: relative; }
:root .dab .imp-checks .ic { display: inline-flex; align-items: center; gap: 5px; color: var(--s-ink-2); transition: color var(--t-small); }
:root .dab .imp-checks .ic i { opacity: 0; transform: scale(.3); transition: opacity var(--t-small), transform var(--t-small) var(--ease-spring); display: grid; }
:root .dab .imp-checks .ic.ok { color: var(--s-ink); }
:root .dab .imp-checks .ic.ok i { opacity: 1; transform: none; color: var(--dk-tx-s-positive, var(--s-positive)); }

/* ---------- the rail under the frame ---------- */
:root .dab .rail { position: relative; flex: none; }
:root .dab .rl { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t-medium) var(--ease-out), transform var(--t-medium) var(--ease-out), visibility 0s linear var(--t-medium); }
:root .dab .rl.on { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-medium) var(--ease-out), transform var(--t-medium) var(--ease-out), visibility 0s; }
:root .dab .rl-h { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #fff; font-weight: 500; margin-bottom: 9px; text-shadow: 0 1px 6px rgba(31,31,33,.25); }
:root .dab .rl-h .faint { color: rgba(255,255,255,.88); font-weight: 400; }
:root .dab .rl-link { text-decoration: none; }
:root .dab .rl-link:hover { text-decoration: underline; }
:root .dab .moments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
:root .dab .mo { background: none; border: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #fff; font-weight: 500; text-align: left; }
:root .dab .mo-art { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; background: var(--b-paper); box-shadow: 0 4px 14px rgba(31,31,33,.16); transition: transform var(--t-small) var(--ease-out), box-shadow var(--t-small); }
:root .dab .mo:hover .mo-art { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(31,31,33,.22); }
:root .dab .mo.on .mo-art { box-shadow: 0 0 0 2px var(--dk-paper, #fff), 0 10px 22px rgba(31,31,33,.22); }
:root .dab .mo-nc, :root .dab .mo-cap, :root .dab .mo-th { background: #3a3836 var(--dab-poster, none) center / cover; }
:root .dab .mo-nc i { position: absolute; left: 8%; bottom: 18%; width: 46%; height: 20%; border-radius: 3px; background: var(--b-base); box-shadow: inset 7px 0 0 var(--b-accent); }
:root .dab .mo-gfx { background: var(--b-base); display: flex; align-items: flex-end; gap: 5%; padding: 14% 14% 16%; }
:root .dab .mo-gfx i { flex: 1; background: var(--b-c1); height: 30%; border-radius: 2px 2px 0 0; }
:root .dab .mo-gfx i:nth-child(2) { background: var(--b-c2); height: 50%; } :root .dab .mo-gfx i:nth-child(3) { background: var(--b-c3); height: 72%; } :root .dab .mo-gfx i:nth-child(4) { background: var(--b-accent); height: 100%; }
:root .dab .mo-cap i { position: absolute; left: 22%; right: 22%; bottom: 14%; height: 16%; border-radius: 3px; background: var(--b-accent); }
:root .dab .mo-end { background: var(--b-base); display: grid; place-items: center; color: var(--b-accent); }
:root .dab .mo-end b { font-size: 11px; letter-spacing: .3em; font-weight: 500; color: color-mix(in srgb, currentColor 72%, var(--b-text)); }
:root .dab .mo-th { background-color: var(--b-paper); background-size: 0 0; }
:root .dab .mo-th i { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; background: var(--dab-poster, none) 50% 30% / cover; }
:root .dab .mo-th b { position: absolute; left: 8%; top: 26%; width: 36%; height: 22%; background: var(--b-accent); }
:root .dab .dens { position: relative; height: 46px; border-radius: 10px; background: var(--dk-b-ffffffa90, rgba(255,255,255,.9)); overflow: hidden; }
:root .dab .dens-track { position: absolute; inset: 8px 0; }
:root .dab .dens-track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; transition: left var(--t-large) var(--ease-inout), width var(--t-large) var(--ease-inout), opacity var(--t-medium); }
:root .dab .dens-track i.g { background: var(--s-peri-deep); }
:root .dab .dens-track i.c { width: 2px; background: var(--s-ink); opacity: .55; }
:root .dab .dens-track i.p { top: auto; height: 6px; bottom: -4px; background: var(--s-peri); }
:root .dab .dens-head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--s-danger-dot); left: 0; }
:root .dab .dens-key { display: flex; gap: 16px; margin-top: 9px; font-size: 12px; color: #fff; }
:root .dab .dens-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
:root .dab .k-g { background: var(--s-peri-deep); } :root .dab .k-c { background: var(--s-ink); width: 3px !important; } :root .dab .k-p { background: var(--dk-paper, #fff); }
:root .dab .ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
:root .dab .idea { position: relative; background: var(--dk-b-ffffffa95, rgba(255,255,255,.95)); border-radius: 14px; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 6px; animation: dab-fadeIn var(--t-medium) var(--ease-out) both; }
:root .dab .idea p { font-size: 13px; font-weight: 500; line-height: 1.3; padding-right: 30px; }
:root .dab .idea .x { position: absolute; right: 10px; top: 10px; font-size: 12px; font-weight: 600; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); background: var(--s-peri-soft); border-radius: var(--r-pill); padding: 1px 7px; }
:root .dab .by { font-size: 12px; color: var(--s-ink-2); }
:root .dab .ideas-empty { grid-column: 1 / -1; background: var(--dk-b-ffffffa92, rgba(255,255,255,.92)); border-radius: 14px; padding: 14px 16px; font-size: 13px; color: var(--s-ink-2); }
:root .dab .lays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
:root .dab .lay { background: none; border: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #fff; font-weight: 500; text-align: left; }
:root .dab .lay-art { display: block; aspect-ratio: 16/9; border-radius: 9px; background: var(--b-paper); position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(31,31,33,.16); transition: box-shadow var(--t-small), transform var(--t-small) var(--ease-out); }
:root .dab .lay.on .lay-art { box-shadow: 0 0 0 2px var(--dk-paper, #fff), 0 10px 22px rgba(31,31,33,.22); transform: translateY(-3px); }
:root .dab .lay-art::before { content: ""; position: absolute; top: 0; bottom: 0; background: var(--ph, none) 50% 30% / cover; background-color: var(--dk-b-1f1f21a12, rgba(31,31,33,.12)); }
:root .dab .lay-art::after { content: ""; position: absolute; background: var(--b-accent); }
:root .dab .l1::before { right: 0; width: 55%; } :root .dab .l1::after { left: 8%; top: 30%; width: 34%; height: 18%; }
:root .dab .l2::before { left: 0; width: 52%; } :root .dab .l2::after { right: 8%; top: 40%; width: 34%; height: 24%; }
:root .dab .l3::before { left: 0; right: 0; top: 30%; } :root .dab .l3::after { left: 10%; right: 10%; top: 8%; height: 16%; }
:root .dab .imp-review { background: var(--dk-b-ffffffa95, rgba(255,255,255,.95)); border-radius: 16px; padding: 10px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
:root .dab .ir { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; font-size: 13px; min-height: 32px; }
:root .dab .ir-wide { grid-column: 1 / -1; }
:root .dab .ir-k { color: var(--s-ink-2); }
:root .dab .ir-sw { display: flex; gap: 4px; flex-wrap: wrap; }
:root .dab .ir-sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(31,31,33,.12); }
:root .dab .font-known { font-weight: 600; }
:root .dab .tone { display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: var(--r-pill); background: var(--s-peri-soft); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); font-size: 12px; font-weight: 500; }
:root .dab .meas { display: flex; flex-wrap: wrap; gap: 8px; }
:root .dab .meas span { background: var(--dk-b-ffffffa95, rgba(255,255,255,.95)); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 500; animation: dab-fadeIn var(--t-small) var(--ease-out) both; }
:root .dab .meas span b { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); font-weight: 600; margin-right: 4px; }
:root .dab .spot { animation: dab-spot 1200ms var(--ease-out); }
@keyframes dab-spot { 0%, 100% { box-shadow: 0 0 0 0 rgba(76,95,146,0); } 30% { box-shadow: 0 0 0 4px rgba(76,95,146,.45); } }
:root .dab .dab-input { width: 100%; border: 1px solid var(--dk-l-1f1f21a16, rgba(31,31,33,.16)); border-radius: var(--r-field); background: var(--s-card); padding: 10px 13px; font-size: 15px; outline: none; transition: border-color var(--t-micro), box-shadow var(--t-small); }
:root .dab .dab-input:focus { border-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); box-shadow: 0 0 0 3px var(--s-peri-soft); }
:root .dab .dab-input--s { padding: 6px 10px; font-size: 13px; border-radius: 10px; }

/* the colour editor sits beside the card: the frame steps back so it stays in view */
@media (min-width: 761px) {
  :root .dab.popside .frame-wrap { transform: scale(.62); }
  :root .dab.popside .rail { opacity: .35; transition: opacity var(--t-medium); }
}

/* ---------- the side: the 5-way switch and the card ---------- */
:root .dab .switch4 { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 52px; padding: 3px; border-radius: 18px; background: var(--s-shell); border: 1px solid var(--s-hair); flex: none; }
:root .dab .switch4 button { position: relative; z-index: 1; border: 0; background: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 0; font-size: 12.5px; line-height: 1.1; letter-spacing: -.015em; font-weight: 500; color: var(--s-ink-2); border-radius: 15px; min-width: 0; white-space: nowrap; transition: color var(--t-medium) var(--ease-out); }
:root .dab .switch4 button:hover { color: var(--s-ink); }
:root .dab .switch4 button[aria-selected="true"] { color: #fff; }
:root .dab .t4-ic { position: relative; display: grid; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); transition: color var(--t-medium) var(--ease-out); }
:root .dab .switch4 button[aria-selected="true"] .t4-ic { color: #fff; }
:root .dab .t4-dot { position: absolute; left: calc(50% + 5px); top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--s-canvas); box-shadow: inset 0 0 0 1.5px var(--s-peri-deep), 0 0 0 2px var(--s-canvas); transition: background var(--t-medium), box-shadow var(--t-medium); }
:root .dab .t4-dot.done { background: var(--s-positive); box-shadow: 0 0 0 2px var(--s-canvas); }
:root .dab .switch4 button[aria-selected="true"] .t4-dot { background: var(--s-ink); box-shadow: inset 0 0 0 1.5px var(--dk-paper, #fff), 0 0 0 2px var(--s-ink); }
:root .dab .switch4 button[aria-selected="true"] .t4-dot.done { background: var(--dk-b-8fd0a3, #8FD0A3); box-shadow: 0 0 0 2px var(--s-ink); }
:root .dab .sw4-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: 15px; background: var(--s-ink); box-shadow: 0 2px 8px rgba(31,31,33,.18); transition: transform 380ms var(--ease-out), width 380ms var(--ease-out); }
:root .dab .dab-card { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--s-card); border-radius: var(--r-card); box-shadow: var(--s-shadow); border: 1px solid var(--s-hair); overflow: hidden; }
:root .dab .card-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 24px; scrollbar-width: thin; scrollbar-color: var(--dk-l-1f1f21a18, rgba(31,31,33,.18)) transparent; }
:root .dab .tp { animation: dab-tpIn var(--t-medium) var(--ease-out); }
@keyframes dab-tpIn { from { opacity: 0; transform: translateY(8px); } }
:root .dab .tp:focus { outline: none; }
:root .dab .tp-h { margin-bottom: 8px; }
:root .dab .tp-h h2 { font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; margin: 0; }
:root .dab .tp-h p { margin-top: 3px; font-size: 13px; color: var(--s-ink-2); line-height: 1.45; }
:root .dab .ro-note { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 8px 10px; border-radius: 10px; background: var(--s-canvas); font-size: 12px; color: var(--s-ink-2); }
:root .dab[data-ro="1"] .sr-in { opacity: .55; }
:root .dab[data-ro="1"] .sr-in * { cursor: not-allowed !important; }

/* summary rows: one open at a time, each shows its value as a picture */
:root .dab .srow { border-bottom: 1px solid var(--s-line); }
:root .dab .tp .srow:last-child { border-bottom: 0; }
:root .dab .sr-btn { width: 100%; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border: 0; background: none; text-align: left; border-radius: 12px; color: var(--s-ink); }
:root .dab .sr-btn:hover .sr-pic { transform: scale(1.05); }
:root .dab .sr-t { display: flex; flex-direction: column; min-width: 0; }
:root .dab .sr-t b { font-size: 14px; font-weight: 500; }
:root .dab .sr-v { font-size: 12px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .dab .sr-v.flash { animation: dab-svFlash var(--t-large) var(--ease-out); }
@keyframes dab-svFlash { 0% { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); } }
:root .dab .chev { display: grid; transition: transform var(--t-medium) var(--ease-out); color: var(--s-ink-2); }
:root .dab .srow.open > .sr-btn .chev { transform: rotate(180deg); }
:root .dab .sr-pic { width: 56px; height: 36px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: var(--s-canvas); box-shadow: inset 0 0 0 1px var(--s-hair); transition: transform var(--t-small) var(--ease-out); }
:root .dab .pic-logo { background: #F3F1EC; padding: 4px; }   /* a logo is made for paper: it keeps a light tile in dark mode too */
:root .dab .pic-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
:root .dab .srow.nologo .pic-logo { background: none; box-shadow: inset 0 0 0 1.5px var(--dk-l-1f1f21a20, rgba(31,31,33,.2)); }
:root .dab .pic-strip { display: flex; padding: 0; }
:root .dab .pic-strip i { flex: 1; height: 100%; transition: background var(--t-medium); }
:root .dab .pic-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .dab .pic-cap { background: none; box-shadow: none; }
:root .dab .cs-demo { display: block; width: 100%; padding: 6px 8px; border-radius: 7px; background: #3a3836 var(--dab-poster, none) center 40% / cover; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; }
:root .dab .cs-demo u { text-decoration: none; position: relative; padding: 0 3px; border-radius: 3px; }
:root .dab .cs-demo[data-cs="underline"] u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--b-accent); }
:root .dab .cs-demo[data-cs="follow"] u { background: var(--dk-paper, #fff); color: var(--dk-t-151515, #151515); text-shadow: none; }
:root .dab .cs-demo[data-cs="highlight"] u { background: var(--b-accent); color: #1F1F21; text-shadow: none; }
/* white or ink, whichever reads on the accent (relative colour; the ink above stands where it is not supported) */
@supports (color: oklch(from red l c h)) { :root .dab .cs-demo[data-cs="highlight"] u { color: oklch(from var(--b-accent) clamp(0.14, calc((0.66 - l) * 1000), 0.99) 0 0); } }
:root .dab .pic-cap .cs-demo { font-size: 9px; padding: 0 4px; text-align: center; border-radius: 9px; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
:root .dab .pic-ic { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); background: var(--s-peri-soft); box-shadow: none; }
:root .dab .pic-dens { display: flex; align-items: flex-end; gap: 3px; padding: 7px 9px; background: var(--s-peri-soft); box-shadow: none; }
:root .dab .pic-dens i { flex: 1; background: var(--s-peri-deep); border-radius: 2px; height: 50%; transition: height var(--t-medium) var(--ease-out); }
:root .dab .pic-avs { display: flex; align-items: center; justify-content: center; background: none; box-shadow: none; }
:root .dab .pic-avs i { width: 22px; height: 22px; border-radius: 50%; margin-left: -7px; box-shadow: 0 0 0 2px var(--s-card); background: center / cover; }
:root .dab .pic-avs i:first-child { margin-left: 0; }
:root .dab .pic-avs .av1 { background-color: #4C5F92; } :root .dab .pic-avs .av2 { background-color: #8799C3; } :root .dab .pic-avs .av3 { background-color: var(--dk-inv, #1F1F21); }
:root .dab .pic-avs .av-empty { background: none; box-shadow: inset 0 0 0 1.5px var(--dk-l-1f1f21a22, rgba(31,31,33,.22)); }
:root .dab .pic-face { background: var(--s-peri-soft) center 26% / cover no-repeat; position: relative; }
:root .dab .pic-face:not(.none)::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--s-positive); box-shadow: 0 0 0 2px var(--dk-paper, #fff); }
:root .dab .pic-face.none { box-shadow: inset 0 0 0 1.5px rgba(31,31,33,.2); background-color: transparent; }
:root .dab .pic-refs { display: flex; gap: 2px; padding: 0; background: none; box-shadow: none; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .pic-refs img { flex: 1; min-width: 0; height: 100%; object-fit: cover; border-radius: 4px; }
:root .dab .sr-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-medium) var(--ease-out); }
:root .dab .srow.open > .sr-body { grid-template-rows: 1fr; }
:root .dab .sr-in { position: relative; overflow: hidden; min-height: 0; }
:root .dab .srow:not(.open) > .sr-body > .sr-in { visibility: hidden; transition: visibility 0s linear var(--t-medium); }
:root .dab .srow.open > .sr-body > .sr-in { padding: 2px 0 18px; }
:root .dab .srow.open > .sr-body > .sr-in > * { animation: dab-fadeOp var(--t-medium) var(--ease-out) both; }
@keyframes dab-fadeOp { from { opacity: 0; } }
/* once open, nothing inside is clipped (the colour editor floats beside the card) */
:root .dab .srow.open.settled > .sr-body > .sr-in { overflow: visible; }
:root .dab .srow.is-pointed { animation: dab-spot 1200ms var(--ease-out); border-radius: 12px; }

/* ---------- the modules inside the rows, sized to the card (their behaviour is theirs) ---------- */
:root .dab .sr-in .card, :root .dab .sr-in .be-card, :root .dab .sr-in section.channel, :root .dab .sr-in .following, :root .dab .sr-in .creator { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
:root .dab .sr-in .card-head, :root .dab .sr-in .be-card-head { display: none; }
:root .dab .sr-in .field-label { font-size: 13px; font-weight: 500; margin: 12px 0 6px; display: block; }
:root .dab .sr-in .field-note, :root .dab .sr-in .head-note { font-size: 12px; color: var(--s-ink-2); line-height: 1.45; }
:root .dab .sr-in .input { border-radius: 10px; padding: 8px 11px; font-size: 14px; }
:root .dab .dab-btnrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
:root .dab .dab-hint { font-size: 12px; color: var(--s-ink-2); }
:root .dab .dab-micro { font-size: 12px; color: var(--s-ink-2); margin-top: 6px; }
:root .dab .dab-faint { color: var(--s-faint); font-weight: 400; font-size: 12px; }
:root .dab .dab-textbtn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 3px 2px; font-size: 13px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); white-space: nowrap; }
:root .dab .dab-textbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Logo and name */
:root .dab .dab-logo-row { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
:root .dab .dab-logo-tile { position: relative; width: 132px; height: 74px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 10px; cursor: grab; box-shadow: inset 0 0 0 1px var(--s-line); background: #F3F1EC; border: 0; transition: transform var(--t-small) var(--ease-out), box-shadow var(--t-small); }
:root .dab .dab-logo-tile:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: inset 0 0 0 1px var(--s-line), 0 8px 20px rgba(31,31,33,.12); }
:root .dab .dab-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
:root .dab .dab-logo-tile.is-empty { background: none; box-shadow: inset 0 0 0 1.5px var(--dk-l-1f1f21a20, rgba(31,31,33,.2)); cursor: default; font-size: 12px; color: var(--s-ink-2); }
:root .dab .dab-logo-meta { min-width: 0; }
:root .dab .dab-logo-meta .be-logo-acts { display: contents; }
:root .dab .dab-logo-meta .btn { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--r-pill); }
:root .dab .dab-use-logo { display: none; height: 32px; padding: 0 14px; font-size: 13px; }
:root .dab .dab-logo-video { margin-top: 12px; }
/* Colours */
:root .dab .be-bc-palette .be-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 4px; padding-top: 4px; }
:root .dab .be-bc-palette .be-swatch { min-width: 0; width: auto; padding: 0; }
:root .dab .be-bc-palette .sw-hex { display: none; }
:root .dab .be-bc-palette .sw-name { font-size: 10.5px; line-height: 1.2; color: var(--s-ink-2); min-height: 2.4em; white-space: normal; text-align: center; }
:root .dab .be-bc-palette .chipdot { width: 40px; height: 40px; }
:root .dab .dab-sw-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
:root .dab .dab-sw-foot .field-note { margin: 0; }
:root .dab .be-ced.is-side { position: fixed; z-index: 70; }
:root .dab .be-ced.is-side::before { top: var(--ptr-y, 40px) !important; left: auto !important; right: -8px; transform: rotate(135deg); }
/* Graphic style */
:root .dab .dab-cur-style { display: grid; grid-template-columns: 112px 1fr auto; gap: 12px; align-items: center; margin-top: 2px; }
:root .dab .dab-cs-img { display: block; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--s-ink); background: var(--s-peri-soft); }
:root .dab .dab-cs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .dab .dab-cs-t { display: flex; flex-direction: column; font-size: 12px; color: var(--s-ink-2); line-height: 1.4; }
:root .dab .dab-cs-t b { font-size: 14px; font-weight: 500; color: var(--s-ink); }
:root .dab .dab-cs-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--s-ink); position: relative; }
:root .dab .dab-cs-tick::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border: solid var(--dk-paper, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg); }
:root .dab .dab-more-styles { margin-top: 12px; }
:root .dab .dab-more-styles > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 4px 0; font-size: 13px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .dab-more-styles > summary::-webkit-details-marker { display: none; }
:root .dab .dab-more-styles > summary .dab-faint { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .dab .dab-more-styles .sp-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px 10px; margin-top: 12px; }
:root .dab .dab-more-styles .sp-grid > .sp-tile.is-on:not([data-be-scene^="own:"]) { display: none; }
:root .dab .be-own { margin-top: 14px; }
:root .dab .be-own-head { display: flex; flex-direction: column; gap: 2px; }
/* caption and style tiles in a narrow card */
:root .dab .sr-in .sp-tile { min-width: 0; }
:root .dab .sr-in .sp-text strong { font-size: 13px; }
:root .dab .sr-in .sp-text small { font-size: 12px; line-height: 1.35; }
:root .dab .dab-caps .be-capon { margin-bottom: 10px; }
:root .dab .dab-caps .be-capon .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
:root .dab .dab-caps .sp-grid--captions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px; }
:root .dab .be-capnote { margin-top: 8px; }
/* More look options: the parts stack with small headings */
:root .dab #brandMoreLook .be-card + .be-card, :root .dab #brandMoreLook section + section { margin-top: 16px; }
:root .dab #brandMoreLook .be-place-row { display: block; margin-top: 10px; }
:root .dab #brandMoreLook .be-place-row .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
:root .dab #brandMoreLook .be-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Editing: the profile cards stack; Fine-tune shows only in its own row */
:root .dab .editing[data-show="profile"] .profile-custom { display: none; }
:root .dab .editing[data-show="fine"] .profile-cards, :root .dab .editing[data-show="fine"] .profile-pick, :root .dab .editing[data-show="fine"] .profile-wrap > :not(.profile-custom) { display: none; }
:root .dab .editing[data-show="fine"] .profile-custom > summary { display: none; }
:root .dab .sr-in .profile-wrap .profile-cards { display: flex !important; flex-direction: column; gap: 6px; grid-template-columns: none !important; }
:root .dab .sr-in .editing-grid.profile-rows { display: flex !important; flex-direction: column; gap: 10px; grid-template-columns: none !important; }
/* Photos: one module, three rows (js/thumbnails.js draws it once; each row shows its part) */
:root .dab #creatorCard[data-show="photo"] :is(.tn-choices, .tn-style, .tn-lock, .tn-name) { display: none; }
:root .dab #creatorCard[data-show="permission"] :is(.tn-creator, .tn-nophoto, .tn-style, .tn-lock) { display: none; }
:root .dab #creatorCard[data-show="thumbs"] :is(.tn-sec--photo, .tn-choices) { display: none; }
:root .dab #creatorCard .card-body { padding: 0; }
/* Photos row (= mockup brand.css "photos"): every photo with its identity badge, then Add */
:root .dab #creatorCard .tn-creator { display: block; }
:root .dab #creatorCard .photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
:root .dab #creatorCard .ph { position: relative; display: flex; flex-direction: column; gap: 5px; font-size: 11px; margin: 0; min-width: 0; }
:root .dab #creatorCard .ph-img { display: block; aspect-ratio: 1; border-radius: 12px; background: var(--p) 50% 28% / cover no-repeat; background-color: var(--s-shell); }
:root .dab #creatorCard .ph figcaption { display: flex; align-items: center; gap: 3px; font-weight: 500; white-space: nowrap; overflow: hidden; font-size: 10.5px; color: var(--s-ink-2); }
:root .dab #creatorCard .ph figcaption.ok { color: var(--dk-tx-s-positive, var(--s-positive)); }
:root .dab #creatorCard .ph figcaption.no { color: var(--dk-tx-s-danger, var(--s-danger)); }
:root .dab #creatorCard .ph.new .ph-img { animation: dab-land 520ms var(--ease-spring); }
:root .dab #creatorCard .ph-add { aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed var(--dk-l-1f1f21a22, rgba(31,31,33,.22)); align-items: center; justify-content: center; color: var(--s-ink-2); cursor: pointer; font-size: 12px; font-weight: 500; }
:root .dab #creatorCard .ph-add:hover { border-color: var(--s-ink-2); color: var(--s-ink); }
:root .dab #creatorCard .ph-add input, :root .dab #creatorCard .tn-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:root .dab #creatorCard .ph-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--dk-b-ffffffa92, rgba(255,255,255,.92)); color: var(--s-ink); box-shadow: 0 1px 3px rgba(31,31,33,.2); opacity: 0; transition: opacity var(--t-small); cursor: pointer; }
:root .dab #creatorCard .ph:hover .ph-x, :root .dab #creatorCard .ph-x:focus-visible { opacity: 1; }
@media (hover: none) { :root .dab #creatorCard .ph-x { opacity: 1; } }
:root .dab #creatorCard .micro { font-size: 12px; color: var(--s-ink-2); margin: 8px 0 0; line-height: 1.45; }
:root .dab #creatorCard .btnrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
:root .dab #creatorCard .textbtn.quiet { color: var(--s-ink-2); font-weight: 400; }
:root .dab #creatorCard label.textbtn { position: relative; cursor: pointer; }
/* Permission row (= mockup .tog / .whose): switches with a line under each, whose photo as two radios */
:root .dab #creatorCard .tn-choice-list { display: flex; flex-direction: column; }
:root .dab #creatorCard .tn-choice.be-switch { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; margin-top: 10px; border: 0; background: none; font-size: 12px; line-height: 1.4; color: var(--s-ink-2); }
:root .dab #creatorCard .tn-choice.be-switch input { flex: none; width: 34px; height: 20px; margin-top: 1px; border-radius: 99px; background: var(--dk-b-1f1f21a18, rgba(31,31,33,.18)); }
:root .dab #creatorCard .tn-choice.be-switch input::after { top: 3px; left: 3px; width: 14px; height: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.2); background: var(--dk-paper, #fff); }
:root .dab #creatorCard .tn-choice.be-switch input:checked { background: var(--s-peri-deep); }
:root .dab #creatorCard .tn-choice.be-switch input:checked::after { transform: translateX(14px); }
:root .dab #creatorCard .tn-choice.be-switch input:disabled, :root .dab #creatorCard .tn-choice.be-switch input:disabled ~ * { opacity: .5; }
:root .dab #creatorCard .tn-choice .be-touch-text strong { display: block; font-size: 13px; font-weight: 500; color: var(--s-ink); }
:root .dab #creatorCard .tn-choice .be-touch-text small { font: inherit; color: var(--s-ink-2); }
:root .dab #creatorCard .whose { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
:root .dab #creatorCard .whose .rad { display: flex; gap: 8px; font-size: 13px; align-items: center; cursor: pointer; }
:root .dab #creatorCard .whose .rad input { accent-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); margin: 0; }

/* ---------- new user (no brand yet): a sample stage on the left, the setup guide on the right; never a person ---------- */
:root .dab .nu { display: none; }
:root .dab[data-mode="new"] .tp > .srow, :root .dab[data-mode="new"] .ro-note { display: none; }
:root .dab[data-mode="new"] .tp > .nu { display: flex; }
:root .dab[data-mode="new"] .tp[data-panel="look"] > .tp-h { display: none; }
:root .dab[data-mode="new"] .head-tools :is(.saved, [data-dab-import]) { display: none; }
:root .dab[data-mode="new"] .bar-tools .chip-btn { display: none; }
:root .dab .fl-new { background: var(--s-peri); }
/* the sample frame: glass over the blue halftone (Home / Processing), with three glass sample graphics that float */
:root .dab .nu-plate { position: absolute; inset: -3%; }
:root .dab .nu-plate > canvas.fs-art { z-index: 0; filter: var(--frost-blur); } /* the frame is a 3D context (the Before flip), where backdrop-filter does not apply: the plate is frosted directly */
:root .dab .fl-new::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--frost-bg); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
:root .dab .fl-new::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; box-shadow: var(--frost-edge); }
:root .dab[data-mode="new"] .frame { background: var(--s-peri); box-shadow: var(--frost-shadow-lg); }
:root .dab .nu-glass { background: var(--frost-bg); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-edge), var(--frost-shadow); }
:root .dab .fl-new > .nu-glass { position: absolute; z-index: 2; animation: dab-float 7.5s var(--ease-inout) infinite; }
@keyframes dab-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -.9cqw, 0); } }
:root .dab .nu-tag { position: absolute; z-index: 3; left: 2.4cqw; top: 2.4cqw; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--dk-b-ffffffa90, rgba(255,255,255,.9)); color: var(--s-ink); font-size: 12px; font-weight: 500; box-shadow: var(--s-shadow); }
:root .dab .nu-gfx { right: 4.6cqw; top: 6cqw; width: 33cqw; padding: 2.2cqw 2.4cqw 2cqw; border-radius: 1.6cqw; animation-delay: -2.4s !important; }
:root .dab .nu-k { font-size: 1.15cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--s-faint); font-weight: 500; }
:root .dab .nu-big { margin-top: .3cqw; font-size: 2.9cqw; line-height: 1.1; font-weight: 500; letter-spacing: -.03em; color: var(--s-ink); }
:root .dab .nu-bars { display: block; width: 100%; height: 12cqw; margin-top: 1.6cqw; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); overflow: visible; }
:root .dab .nu-bars .nb { transform-box: fill-box; transform-origin: 50% 100%; animation: dab-grow 1.1s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 200ms); }
:root .dab .nu-card { left: 4.6cqw; bottom: 13cqw; display: flex; align-items: center; gap: 1.6cqw; height: 7.6cqw; padding: 0 2.6cqw 0 1cqw; border-radius: 1.6cqw; animation-delay: -5s !important; }
:root .dab .nu-logo { display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 1.1cqw; background: linear-gradient(150deg, #6F82B4, var(--s-peri-deep)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
:root .dab .nu-logo .gem { width: 62%; height: 62%; }
:root .dab .nu-nm { display: flex; flex-direction: column; justify-content: center; }
:root .dab .nu-nm b { font-size: 2cqw; font-weight: 500; letter-spacing: -.02em; color: var(--s-ink); }
:root .dab .nu-nm small { font-size: 1.25cqw; color: var(--s-ink-2); }
:root .dab .nu-cap { left: 50%; bottom: 3.6cqw; margin: 0; translate: -50% 0; white-space: nowrap; padding: .9cqw 2cqw; border-radius: var(--r-pill); font-size: 2.5cqw; font-weight: 600; letter-spacing: -.01em; color: var(--s-ink); animation-delay: -1s !important; }
:root .dab .nu-cap mark { color: #fff; padding: 0 .7cqw; border-radius: .5cqw; background: linear-gradient(90deg, var(--s-peri-deep), var(--s-peri-deep)) no-repeat 0 0 / 100% 100%, rgba(76,95,146,.28); animation: dab-capSweep 5.2s var(--ease-inout) infinite; }
@keyframes dab-capSweep { 0%, 8% { background-size: 0% 100%, auto; color: var(--s-ink); } 30%, 86% { background-size: 100% 100%, auto; color: #fff; } 100% { background-size: 100% 100%, auto; color: #fff; } }
/* the rail under it: the same five places, as glass tiles in the starter periwinkle; no person */
:root .dab .nu-moments .mo { cursor: default; }
:root .dab .nu-moments .mo-art { background: var(--frost-bg); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-edge), var(--frost-shadow); --b-base: var(--dk-paper, #FFFFFF); --b-accent: #4C5F92; --b-c1: var(--dk-b-c3cce2, #C3CCE2); --b-c2: #A3B1D2; --b-c3: #8799C3; --b-paper: transparent; }
:root .dab .nu-moments .mo-nc, :root .dab .nu-moments .mo-cap, :root .dab .nu-moments .mo-th { background-image: none; }
:root .dab .nu-moments .mo-nc b { display: none; }
:root .dab .nu-moments .mo-nc i { box-shadow: inset 7px 0 0 var(--b-accent), 0 2px 6px rgba(41,52,92,.12); }
:root .dab .nu-moments .mo-gfx { padding: 14% 14% 16%; }
:root .dab .nu-moments .mo-th i { background: linear-gradient(150deg, #A3B1D2, #8799C3); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
:root .dab .nu-moments .mo-end { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .nu-moments .mo:hover .mo-art { transform: none; }
/* the right column: a glass import card on its own halftone, the steps as a white card with their own marks */
:root .dab .invite { flex-direction: column; align-items: stretch; gap: 0; animation: dab-fadeIn var(--t-large) var(--ease-out); }
:root .dab .inv-card { border-radius: 20px; padding: 10px; background: var(--s-peri); }
:root .dab .inv-card > canvas.fs-art { z-index: 0; }
:root .dab .inv-glass { background: var(--frost-bg); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-edge), var(--frost-shadow); position: relative; z-index: 1; padding: 16px 16px 12px; border-radius: 14px; }
:root .dab .inv-eye { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); letter-spacing: .02em; }
:root .dab .inv-mark { display: grid; width: 40px; flex: none; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .inv-mark svg { width: 100%; height: auto; overflow: visible; }
:root .dab .lb-sw { transform-box: view-box; transform-origin: 50px 38px; transform: rotate(var(--r)); animation: dab-fan 6s var(--ease-inout) infinite; animation-delay: calc(var(--i) * 120ms); }
@keyframes dab-fan { 0%, 100% { transform: rotate(var(--r)); } 50% { transform: rotate(calc(var(--r) * 1.25)) translateY(-1px); } }
:root .dab .inv-h { margin-top: 8px; font-size: 21px; line-height: 1.14; font-weight: 500; letter-spacing: -.03em; }
:root .dab .inv-p { margin-top: 5px; font-size: 13px; color: var(--s-ink-2); line-height: 1.45; }
:root .dab .inv-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
:root .dab .inv-in { height: 44px; background: var(--dk-paper, #fff); }
:root .dab .inv-form .dab-pill { height: 44px; justify-content: center; }
:root .dab .inv-alt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: 13px; }
:root .dab .nu-sh { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
:root .dab .nu-sh b { font-weight: 500; }
:root .dab .nu-steps { margin-top: 12px; padding: 14px 14px 6px; border-radius: 18px; background: var(--s-card); border: 1px solid var(--s-hair); box-shadow: 0 1px 2px rgba(31,31,33,.04), 0 8px 22px rgba(41,52,92,.08); }
:root .dab .nu-prog { display: block; height: 4px; margin: 8px 0 4px; border-radius: 4px; background: var(--s-shell); overflow: hidden; }
:root .dab .nu-prog i { display: block; width: 4%; height: 100%; border-radius: 4px; background: var(--s-ink); }
:root .dab .nu-steps button { width: 100%; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 7px 0; border: 0; background: none; text-align: left; border-radius: 10px; color: var(--s-ink); }
:root .dab .nu-steps li + li button { border-top: 1px solid var(--s-hair); }
:root .dab .nu-steps .nu-chev { transform: rotate(-90deg); color: var(--s-faint); }
:root .dab .nu-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); background: linear-gradient(150deg, rgba(135,153,195,.2), rgba(135,153,195,.08)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 3px rgba(41,52,92,.1); transition: transform var(--t-small) var(--ease-out); }
:root .dab .nu-n svg { width: 24px; height: 24px; }
:root .dab .nu-steps button:hover .nu-n { transform: translateY(-1px) rotate(-4deg); }
:root .dab .nu-t { display: flex; flex-direction: column; min-width: 0; }
:root .dab .nu-t b { font-size: 14px; font-weight: 500; }
:root .dab .nu-t small { font-size: 12px; color: var(--s-faint); }
:root .dab .nu-does { margin-top: 12px; padding: 2px 4px 0; }
:root .dab .nu-does ul { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
:root .dab .nu-does li { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: baseline; font-size: 13px; color: var(--s-ink-2); line-height: 1.4; }
:root .dab .nu-dot { width: 7px; height: 7px; transform: rotate(45deg) translateY(-1px); background: linear-gradient(135deg, var(--s-peri) 50%, var(--s-peri-deep) 50%); }
/* the other tabs: a small illustrated glass card on its own halftone, drawn for that tab */
:root .dab .nu-hint { flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: 12px; }
:root .dab .nu-ill { width: 100%; height: 172px; margin-bottom: 10px; border-radius: 18px; background: var(--s-peri); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(41,52,92,.12); }
:root .dab .nu-ill > canvas.fs-art { z-index: 0; }
:root .dab .nu-hint b { font-size: 15px; font-weight: 500; }
:root .dab .nu-hint p { font-size: 13px; color: var(--s-ink-2); max-width: 300px; }
:root .dab .nu-hint .textbtn { margin-top: 4px; }
:root .dab .ill { position: relative; z-index: 1; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .ill svg { display: block; overflow: visible; }
:root .dab .ill.nu-glass { border-radius: 14px; animation: dab-floatS 7s var(--ease-inout) infinite; }
@keyframes dab-floatS { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Editing */
:root .dab .ill-edit { width: 78%; padding: 14px 14px 10px; }
:root .dab .ie-tl { width: 100%; height: auto; }
:root .dab .ie-tl .ph { animation: dab-ph 6s linear infinite; }
@keyframes dab-ph { from { transform: translateX(6px); } to { transform: translateX(194px); } }
:root .dab .ie-sl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 8px; font-size: 10.5px; font-weight: 500; color: var(--s-ink-2); }
:root .dab .ie-tr svg { width: 100%; height: 10px; }
:root .dab .ie-th { animation: dab-thumb 7s var(--ease-inout) infinite; }
@keyframes dab-thumb { 0%, 100% { transform: translateX(34px); } 50% { transform: translateX(70px); } }
/* Channel */
:root .dab .ill-ch { width: 74%; padding: 12px; display: grid; gap: 9px; }
:root .dab .ic-head { display: flex; align-items: center; gap: 10px; }
:root .dab .ic-gem { width: 30px; height: 30px; flex: none; }
:root .dab .ic-lines { display: grid; gap: 5px; flex: 1; }
:root .dab .ic-lines i { display: block; height: 6px; width: 70%; border-radius: 2px; background: var(--s-peri-deep); opacity: .82; }
:root .dab .ic-lines i + i { width: 44%; opacity: .36; }
:root .dab .ic-tiles { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow: hidden; border-radius: 6px; }
:root .dab .ic-tile svg { width: 100%; height: auto; border-radius: 4px; }
:root .dab .ic-scan { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, var(--dk-b-ffffffa0, rgba(255,255,255,0)), var(--dk-b-ffffffa75, rgba(255,255,255,.75)), var(--dk-b-ffffffa0, rgba(255,255,255,0))); animation: dab-icscan 4.8s var(--ease-inout) infinite; }
@keyframes dab-icscan { from { left: -35%; } 60%, to { left: 105%; } }
:root .dab .ic-chips, :root .dab .ir-chips { display: flex; justify-content: center; gap: 5px; }
:root .dab .ic-chips span, :root .dab .ir-chips span { padding: 3px 8px; border-radius: var(--r-pill); background: var(--dk-paper, #fff); box-shadow: 0 1px 3px rgba(41,52,92,.14); font-size: 10.5px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); animation: dab-chipIn 4.8s var(--ease-spring) infinite both; animation-delay: calc(var(--i) * 220ms); }
@keyframes dab-chipIn { 0% { opacity: 0; transform: scale(.7) translateY(3px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Photos */
:root .dab .ill-ph { width: 70%; padding: 8px 10px; }
:root .dab .ill-ph svg { width: 100%; height: auto; }
:root .dab .ip-fr { transform-box: fill-box; transform-origin: 50% 50%; animation: dab-breatheFr 4.6s var(--ease-inout) infinite; }
@keyframes dab-breatheFr { 50% { transform: scale(1.035); } }
:root .dab .ip-ok { transform-box: fill-box; transform-origin: 50% 50%; animation: dab-okPop 4.6s var(--ease-spring) infinite; }
@keyframes dab-okPop { 0%, 20% { opacity: 0; transform: scale(.3); } 32%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
/* References */
:root .dab .ill-rf { width: 80%; display: grid; gap: 10px; justify-items: center; }
:root .dab .ir-fan { position: relative; width: 100%; height: 92px; }
:root .dab .ir-t { background: var(--frost-bg); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-edge), var(--frost-shadow); position: absolute; left: 50%; top: 4px; width: 46%; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; animation: dab-fanT 7s var(--ease-inout) infinite; }
:root .dab .ir-t svg { width: 100%; height: 100%; }
:root .dab .ir-t0 { --fx: -102%; --fr: -9deg; } :root .dab .ir-t2 { --fx: 2%; --fr: 9deg; }
:root .dab .ir-t1 { --fx: -50%; --fr: 0deg; z-index: 2; top: 0; overflow: visible; }
:root .dab .ir-t1 svg { border-radius: 9px; }
:root .dab .ir-t { transform: translateX(var(--fx, -50%)) rotate(var(--fr, 0deg)); }
@keyframes dab-fanT { 50% { transform: translateX(var(--fx, -50%)) rotate(calc(var(--fr, 0deg) * 1.3)) translateY(-2px); } }
:root .dab .ir-pin { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--s-peri) 50%, var(--s-peri-deep) 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: dab-pinDrop 4.8s var(--ease-spring) infinite both; animation-delay: calc(var(--i) * 200ms); }
@keyframes dab-pinDrop { 0%, 6% { opacity: 0; transform: translateY(-8px) scale(.5); } 18%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root .dab .fl-new > .nu-glass, :root .dab .ill.nu-glass, :root .dab .lb-sw, :root .dab .ie-th, :root .dab .ip-fr, :root .dab .ir-t, :root .dab .ic-scan { animation: none !important; }
  :root .dab .nu-cap mark { animation: none; color: #fff; }
  :root .dab .ie-tl .ph { animation: none; transform: translateX(96px); }
  :root .dab .ip-ok, :root .dab .ir-pin, :root .dab .ic-chips span, :root .dab .ir-chips span { animation: none; opacity: 1; }
}
@media (min-width: 761px) and (max-height: 900px) {
  :root .dab .inv-glass { padding: 14px 14px 10px; }
  :root .dab .inv-h { font-size: 20px; }
  :root .dab .inv-form { margin-top: 10px; }
  :root .dab .nu-steps { margin-top: 10px; padding: 12px 14px 4px; }
  :root .dab .nu-steps button { padding: 5px 0; }
  :root .dab .nu-t small { display: none; }
  :root .dab .nu-does { margin-top: 10px; }
  :root .dab .nu-does li { gap: 8px; font-size: 12.5px; }
}
@media (min-width: 761px) { :root .dab .art-box:has(.rl-new.on) { --rc: 48px; --rk: .1125; } }

/* ---------- fit: the frame and the rail are one unit, sized by whichever runs out first ---------- */
@media (min-width: 761px) {
  :root .dab .art-box { container-type: size; --rc: 112px; --rk: 0; --uw: min(100cqw, (100cqh - 68px - var(--rc) - var(--re, 0px)) / (.5625 + var(--rk))); }
  :root .dab .art-box:has(.rl-look.on) { --rc: 48px; --rk: .1125; }
  :root .dab .art-box:has(.rl-ph.on) { --rc: 49px; --rk: .1875; }
  :root .dab .art-box:has(> .bar-err:not([hidden])) { --re: 65px; }
  :root .dab .art-box > :is(.art-bar, .frame-wrap, .rail, .bar-err) { width: var(--uw); align-self: center; }
  :root .dab .card-scroll {
    background:
      linear-gradient(var(--s-card) 30%, var(--dk-b-ffffffa0, rgba(255,255,255,0))) center top / 100% 28px no-repeat local,
      linear-gradient(var(--dk-b-ffffffa0, rgba(255,255,255,0)), var(--s-card) 70%) center bottom / 100% 28px no-repeat local,
      radial-gradient(farthest-side at 50% 0, var(--dk-b-1f1f21a16, rgba(31,31,33,.16)), var(--dk-b-1f1f21a0, rgba(31,31,33,0))) center top / 100% 10px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, var(--dk-b-1f1f21a16, rgba(31,31,33,.16)), var(--dk-b-1f1f21a0, rgba(31,31,33,0))) center bottom / 100% 10px no-repeat scroll;
  }
}

/* ---------- 390: sticky mini frame, the switch, the card in page flow ---------- */
@media (max-width: 760px) {
  :root .dab { height: auto; min-height: 0; display: block; }
  :root .dab .dab-head { margin-bottom: 14px; }
  :root .dab .head-row { flex-wrap: wrap; gap: 10px 12px; align-items: center; }
  :root .dab h1 { font-size: 34px; }
  :root .dab .head-sub { font-size: 14px; }
  :root .dab .head-tools { width: 100%; flex-wrap: wrap; gap: 10px; margin-left: 0; }
  :root .dab .saved { order: 3; width: 100%; }
  :root .dab .ring-btn { order: 1; height: 38px; }
  :root .dab [data-dab-import] { order: 2; height: 38px; padding: 0 14px; font-size: 14px; margin-left: auto; }
  :root .dab .ring-pop { right: auto; left: 0; }
  :root .dab .dab-stage { display: block; margin: 0; }
  :root .dab .art-box { position: sticky; top: 56px; z-index: 20; padding: 10px; border-radius: 20px; gap: 8px; box-shadow: 0 10px 24px rgba(31,31,33,.12); display: flex; }
  :root .dab .art-box > .frame-wrap { order: 1; }
  :root .dab .art-bar { height: 30px; order: 2; }
  :root .dab .bar-err { order: 3; }
  :root .dab .tool-note { display: none; }
  :root .dab .bar-tools { justify-content: flex-end; }
  :root .dab .chip-btn { height: 28px; font-size: 12px; padding: 0 10px; }
  :root .dab:not([data-bar]):not([data-tab="look"]) .art-bar { display: none; }
  :root .dab .bar-import, :root .dab .bar-review { height: 40px; top: -5px; }
  :root .dab .bi-go { height: 32px; padding: 0 12px; font-size: 13px; }
  :root .dab .br-t { font-size: 12px; }
  :root .dab [data-dab-another] { display: none; }
  :root .dab .frame { border-radius: 12px; }
  :root .dab .live-pill { height: 22px; font-size: 11px; padding: 0 9px; }
  :root .dab[data-tab="look"]:not([data-bar]) .live-pill { display: none; }
  :root .dab .fpill { height: 24px; font-size: 11px; padding: 0 10px; }
  :root .dab .rail { display: none; }
  :root .dab[data-bar="review"] .rail { display: block; min-height: 0; order: 4; }
  :root .dab[data-bar="review"] .imp-review { grid-template-columns: 1fr; padding: 6px 12px; gap: 0; }
  :root .dab[data-bar="review"] .ir:nth-child(n+3) { display: none; }
  :root .dab .dab-side { display: block; margin-top: 14px; }
  :root .dab .switch4 { margin-bottom: 10px; grid-template-columns: repeat(5, minmax(72px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  :root .dab .switch4 button { scroll-snap-align: start; min-height: 34px; }
  :root .dab .dab-card { display: block; overflow: visible; }
  :root .dab .card-scroll { padding: 18px 16px 20px; overflow: visible; }
  :root .dab .sr-btn { min-height: 56px; }
  :root .dab .be-bc-palette .chipdot { width: 44px; height: 44px; }
  :root .dab .dab-use-logo { display: inline-flex; }
  :root .dab .dab-drag-hint { display: none; }
  :root .dab .aud { padding: 4cqw; }
  :root .dab .aud-k { font-size: 10px; }
  :root .dab .aud-quote, :root .dab .aud-chips { display: none; }
  :root .dab .imp-h { font-size: 13px; }
  :root .dab .imp-checks { font-size: 11px; gap: 8px; }
  :root .dab .rf-list li { font-size: 2.6cqw; } :root .dab .rf-k { font-size: 10px; } :root .dab .rf-strip { height: 8cqw; }
  :root .dab[data-mode="new"] .art-bar { display: none !important; }
  :root .dab[data-mode="new"] .head-tools { width: auto; margin-left: auto; }
  :root .dab[data-mode="new"] .art-box { position: relative; top: auto; }
  :root .dab .nu-tag { height: 22px; font-size: 11px; padding: 0 9px; }
  :root .dab .inv-h { font-size: 24px; }
  :root .dab .inv-form .dab-pill, :root .dab .inv-in { height: 50px; font-size: 16px; }
  :root .dab .nu-ill { height: 156px; }
}
@media (prefers-reduced-motion: reduce) {
  :root .dab .pulse, :root .dab .spot, :root .dab .mo-flash { animation: none !important; }
  :root .dab .fl-look.zoomed { transform: none; }
  :root .dab .frame.flip { animation: none; }
}
/* the role is written on the swatch (a pill on the dot), its name under it */
:root .dab .be-bc-palette .be-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; }
:root .dab .be-bc-palette .sw-role { position: absolute; left: 50%; top: 31px; transform: translateX(-50%); font-size: 9px; font-weight: 600; letter-spacing: .02em; color: var(--dk-oninv, #fff); background: var(--s-ink); border-radius: var(--r-pill); padding: 1px 6px; white-space: nowrap; box-shadow: 0 0 0 2px var(--s-card); line-height: 1.4; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
:root .dab .be-bc-palette .sw-role.is-empty { display: none; }
@media (max-width: 760px) { :root .dab .be-bc-palette .sw-role { top: 35px; } }
/* Editing: their own opening, edited the way the profile edits (graphics, cuts, punch-ins land where the strip shows) */
:root .dab .fl-edit { pointer-events: none; z-index: 2; }
:root .dab .frame.sim .gfx { opacity: 0; transform: translateY(1.2cqw); transition: opacity var(--t-small) var(--ease-out), transform var(--t-small) var(--ease-out); }
:root .dab .frame.sim .gfx.in { opacity: 1; transform: none; }
:root .dab .frame.sim .fl-look .clip { transition: transform var(--t-medium) var(--ease-out), filter 90ms; }
:root .dab .frame.sim .fl-look.punched .clip { transform: scale(1.08); }
:root .dab .frame.sim.cut .clip { filter: brightness(1.18); }
:root .dab .fl-look.rewind .clip { animation: dab-rewind var(--t-large) var(--ease-inout); }
:root .dab h1:focus, :root .dab h1:focus-visible { outline: none; }
:root .dab:not([data-tab="look"]) .tool-note { visibility: hidden; }
/* the profile cards as a compact list: clip, name, one line; what it sets under the one in use */
:root .dab .sr-in .profile-pick { display: flex; flex-direction: column; gap: 6px; }
:root .dab .sr-in .profile-card { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; align-items: center; padding: 6px; border-radius: 14px; border: 0; background: none; box-shadow: none; text-align: left; min-height: 0; transition: background var(--t-small), box-shadow var(--t-small); }
:root .dab .sr-in .profile-card:hover { background: var(--s-canvas); }
:root .dab .sr-in .profile-card.is-on { box-shadow: inset 0 0 0 2px var(--s-ink); background: var(--s-card); }
:root .dab .sr-in .profile-clip { grid-row: 1 / span 2; width: 92px; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 9px; margin: 0; background: var(--s-shell); }
:root .dab .sr-in .profile-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0; margin: 0; align-self: end; }
:root .dab .sr-in .profile-tag { font-size: 11px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); background: var(--s-peri-soft); padding: 0 7px; border-radius: var(--r-pill); margin: 0; }
:root .dab .sr-in .profile-blurb { font-size: 12px; color: var(--s-ink-2); line-height: 1.38; padding: 0; margin: 0; align-self: start; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root .dab .sr-in .profile-sets { display: none; }
:root .dab .sr-in .profile-card.is-on .profile-sets { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 5px; margin: 10px 0 2px; padding: 0; }
:root .dab .sr-in .profile-set { font-size: 11px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--s-canvas); color: var(--s-ink); font-weight: 500; }
:root .dab .sr-in .profile-set span { color: var(--s-ink-2); font-weight: 400; }
:root .dab .be-ced.is-side { width: 320px; max-width: 320px; padding: 14px; border-radius: 20px; box-shadow: var(--s-pop-shadow); }
:root .dab .be-ced.is-side .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
:root .dab .be-ced.is-side .seg-opt { padding: 4px 2px; font-size: 11.5px; }
:root .dab .be-ced.is-side :is(p, small) { font-size: 12px; }
/* the colour editor beside the card (= mockup brand.css .cpop): name and code, colour field, hue strip, use, Use as, foot */
:root .dab .be-ced--da { width: 300px; max-width: 300px; background: var(--s-card); border: 1px solid var(--s-hair); }
:root .dab .be-ced--da .cp-head { display: grid; grid-template-columns: 40px 1fr 96px; gap: 10px; align-items: center; }
:root .dab .be-ced--da .cp-head b { display: block; font-size: 14px; font-weight: 500; color: var(--s-ink); }
:root .dab .be-ced--da .cp-head .faint { display: block; font-size: 12px; color: var(--s-ink-2); }
:root .dab .be-ced--da .cp-sw { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(31,31,33,.12); }
:root .dab .be-ced--da .cp-hex .input { width: 100%; height: 34px; padding: 6px 9px; font-size: 13px; border-radius: 10px; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
:root .dab .be-ced--da .cp-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:root .dab .be-ced--da .cp-sv { position: relative; margin-top: 12px; height: 92px; border-radius: 12px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, var(--dk-paper, #fff), hsl(var(--hue, 218), 100%, 50%)); cursor: crosshair; touch-action: none; }
:root .dab .be-ced--da .cp-sv i { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--dk-paper, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.35); left: var(--sx, 37%); top: var(--sy, 40%); pointer-events: none; }
:root .dab .be-ced--da .cp-hue { display: block; width: 100%; margin: 10px 0 0; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 6px; background: linear-gradient(to right, red, var(--dk-b-ffff00, #ff0), lime, cyan, blue, #f0f, red); outline: none; }
:root .dab .be-ced--da .cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
:root .dab .be-ced--da .cp-hue::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
:root .dab .be-ced--da .cp-use { margin: 10px 0 0; font-size: 12px; color: var(--s-ink-2); }
:root .dab .be-ced--da .cp-con { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12px; color: var(--dk-tx-s-positive, var(--s-positive)); font-weight: 500; }
:root .dab .be-ced--da .cp-con.is-warn { color: var(--s-ink); }
:root .dab .be-ced--da .cp-lbl { margin: 10px 0 5px; font-size: 12px; font-weight: 500; color: var(--s-ink); }
:root .dab .be-ced--da .cp-block { margin: 8px 0 0; font-size: 12px; color: var(--s-ink); background: var(--s-canvas); padding: 7px 9px; border-radius: 9px; }
:root .dab .be-ced--da .cp-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
:root .dab .be-ced--da .cp-foot .textbtn { font-size: 12.5px; }
:root .dab .be-ced--da .cp-foot .textbtn[disabled], :root .dab .be-ced--da .cp-foot .textbtn[aria-disabled="true"] { color: var(--s-ink-3, #A3A3A6); cursor: default; text-decoration: none; }
:root .dab .be-ced--da .cp-foot .cp-done { margin-left: auto; height: 30px; padding: 0 14px; font-size: 13px; }
/* phones: the editor is a sheet along the bottom over a scrim (= mockup .cpop.sheet); the sticky frame steps under it */
:root .dab .be-ced--da.is-sheet { width: auto; max-width: none; left: 0 !important; right: 0; bottom: 0; top: auto !important; z-index: 80; border-radius: 22px 22px 0 0; padding: 10px 16px 22px; box-shadow: 0 0 0 100vmax rgba(31,31,33,.32), var(--s-pop-shadow); }
:root .dab .be-ced--da.is-sheet::before { content: ""; display: block; position: static; width: 40px; height: 4px; margin: 0 auto 10px; border: 0; border-radius: 4px; background: var(--s-line); transform: none; }
:root .dab:has(.be-ced.is-sheet) .art-box { z-index: 0; }
:root .dab:has(.be-ced.is-sheet) :is(.dab-side, .dab-card) { position: relative; z-index: 90; }
:root .dab:has(.be-ced.is-sheet) .switch4 { z-index: 0; }
body:has(.dab .be-ced.is-sheet) .topbar { z-index: 0; }
@media (min-width: 761px) { :root .dab .art-box:has(.rl-imp.on) { --rc: 150px; } }
:root .dab .ir-v .faint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Channel: the profile's fields stack in the narrow card */
:root .dab .sr-in .cp-form { grid-template-columns: 1fr; gap: 2px 10px; }
:root .dab .sr-in .cp-body { padding: 0; }
:root .dab .sr-in .cp-form .field-label { margin-top: 10px; }
:root .dab [tabindex="-1"]:focus { outline: none; }
/* How your colours are used: the big frame is the picture, so the card lists the roles in words */
:root .dab #brandMoreLook .be-roles-body { display: block; }
:root .dab #brandMoreLook .be-rp { display: none; }
:root .dab #brandMoreLook .be-pairs-title { font-size: 13px; font-weight: 500; margin: 4px 0 6px; }
:root .dab #brandMoreLook .be-rp-key { display: block; margin: 0; }
:root .dab #brandMoreLook .be-rp-key > div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--s-hair); }
:root .dab #brandMoreLook .be-rp-key dt { color: var(--s-ink-2); margin: 0; }
:root .dab #brandMoreLook .be-rp-key dd { margin: 0; color: var(--s-ink); }
:root .dab #brandMoreLook .be-rp-key small { color: var(--dk-tx-s-positive, var(--s-positive)); font-weight: 500; margin-left: 4px; }
:root .dab #brandMoreLook .card-head, :root .dab #brandMoreLook .be-card-head { display: block; margin: 16px 0 6px; padding: 0; }
:root .dab #brandMoreLook .card-title { font-size: 13px; font-weight: 500; margin: 0; }
:root .dab #brandMoreLook .card-head .head-note { display: none; }
:root .dab #brandMoreLook .be-colours--use .card-head { display: none; }
@media (min-width: 761px) {
  :root .dab.popwide .frame-wrap { transform: scale(.5); }
  :root .dab .be-modal.is-side { position: fixed; transform: none; margin: 0; width: 360px; max-width: 360px; max-height: calc(100dvh - 210px); overflow: auto; border-radius: 22px; z-index: 80; animation: dab-popIn var(--t-small) var(--ease-out); }
  :root .dab .be-modal.is-side ~ .modal-scrim, :root .dab .be-modal-scrim { background: var(--dk-s-1f1f21a12, rgba(31,31,33,.12)); }
}
/* Channel: reading the channel, the viewer card scans; References: a link being measured */
:root .dab .aud-scan { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--dk-b-ffffffa72, rgba(255,255,255,.72)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--t-medium); overflow: hidden; }
:root .dab .fl-aud.reading .aud-scan { opacity: 1; }
:root .dab .scanline { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(to bottom, rgba(135,153,195,0), rgba(135,153,195,.35), rgba(135,153,195,0)); animation: dab-scan 1.6s var(--ease-inout) infinite; }
:root .dab .scan-h { font-size: 20px; font-weight: 500; letter-spacing: -.02em; position: relative; }
:root .dab .scan-checks { display: flex; gap: 14px; font-size: 13px; position: relative; color: var(--s-ink-2); }
:root .dab .scan-checks .sc { display: inline-flex; align-items: center; gap: 5px; }
:root .dab .scan-checks .sc .vi { opacity: .35; }
:root .dab .rf-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1; }
:root .dab .fl-refs.measuring .rf-scan { opacity: 1; }
:root .dab .fl-refs.measuring .rf-scan::before { content: ""; position: absolute; left: 0; right: 0; height: 35%; background: linear-gradient(to bottom, rgba(135,153,195,0), rgba(135,153,195,.55), rgba(135,153,195,0)); animation: dab-scan 1.6s var(--ease-inout) infinite; }
:root .dab .fl-refs.measuring .pin { display: none; }
:root .dab .fl-refs.measuring .rf-shot img { filter: saturate(.5); }
:root .dab .rf-list li.wait span { background: linear-gradient(100deg, rgba(135,153,195,.15) 30%, rgba(135,153,195,.45) 50%, rgba(135,153,195,.15) 70%) 0 0 / 300% 100%; color: transparent; border-radius: 6px; animation: dab-skel 1.4s linear infinite; }
:root .dab .fl-refs:not(.measuring) .rf-list li.wait span { background: none; color: var(--s-ink-2); animation: none; }
:root .dab .meas span.wait { color: transparent; background: var(--dk-b-ffffffa45, rgba(255,255,255,.45)); width: 120px; animation: dab-pulse 1.4s infinite; }
/* References in the narrow card: one card per row, the Add button as a full-width line */
:root .dab #refs.ref-row { display: flex !important; flex-direction: column; gap: 0; }
:root .dab #refs .ref-add { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; margin: 4px 0 6px; border-radius: 12px; text-align: left; width: 100%; }
:root .dab #refs .ref-add .be-ref-add-text { align-items: flex-start; }
:root .dab #refs .be-ref { min-height: 0; width: 100%; padding: 10px 28px 10px 0; }
:root .dab #refs .be-ref-title { width: 100%; font-size: 13px; font-weight: 500; resize: none; }
:root .dab #refs .be-ref-link { display: flex; align-items: center; gap: 6px; min-width: 0; }
:root .dab #refs .be-ref-url { flex: 1; min-width: 0; font-size: 12px; }
:root .dab #refs .be-tags { display: flex; flex-wrap: wrap; gap: 4px; }
:root .dab #refs .be-tag-in { min-width: 120px; flex: 1; }
:root .dab #refs .be-ref-x { position: absolute; right: 0; top: 10px; }
:root .dab #refs [data-ref-measure] { font-size: 12px; }
/* the Brand stage fills the window: no page scroll under it at desktop */
@media (min-width: 761px) { html[data-look] .main:has(.dab) { padding-bottom: 0; } }
:root .dab #refs .be-ref-title { display: block; min-height: 22px; border: 0; background: none; padding: 0; color: var(--s-ink); overflow: hidden; }

/* alignment: on tabs with nothing in the bar, the bar steps out so the frame and rail sit centred in the art box
   (the size formula still reserves the bar's 68px, so the frame keeps its size on every tab) */
@media (min-width: 761px) { :root .dab:not([data-bar]):not([data-tab="look"]) .art-bar { display: none; } }
/* a rail with only its heading (nothing measured yet) ends at the heading, so it centres like the others */
:root .dab .rl > :empty { display: none; }
:root .dab .rl-h:is(:last-child, :has(+ :empty:last-child)) { margin-bottom: 0; }
/* references, none yet: the References hint art on the frosted halftone (as .fl-new), no measured rail */
:root .dab .fl-refs.is-empty { background: var(--s-peri); padding: 0; display: grid; place-items: center; overflow: hidden; border-radius: inherit; }
:root .dab .fl-refs.is-empty::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--frost-bg); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
:root .dab .fl-refs.is-empty::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; box-shadow: var(--frost-edge); }
:root .dab .fl-refs.is-empty .rf-empty { position: relative; z-index: 2; width: 54cqw; max-width: none; gap: 2.4cqw; }
:root .dab .fl-refs.is-empty .ill-rf { width: 100%; gap: 2cqw; }
:root .dab .fl-refs.is-empty .ir-fan { height: 19cqw; margin-top: 1cqw; }
:root .dab .fl-refs.is-empty .ir-pin { width: 3.4cqw; height: 3.4cqw; margin: -1.7cqw 0 0 -1.7cqw; font-size: 1.8cqw; }
:root .dab .fl-refs.is-empty .ir-chips span { padding: .7cqw 1.8cqw; font-size: 1.7cqw; }
:root .dab .rf-empty-card { padding: 2.2cqw 3cqw; border-radius: 1.6cqw; display: grid; gap: .8cqw; }
:root .dab .rl-refs.is-empty { visibility: hidden; }
/* the References card with none yet: the paste row, then a soft note (brand mockup #references-empty) */
:root .dab .be-addref { display: flex; gap: 8px; margin-top: 16px; }
:root .dab .be-addref .dab-input { flex: 1; min-width: 0; }
:root .dab .be-addref .dab-pill { flex: none; height: 36px; }
:root .dab .be-refs-empty { margin-top: 14px; padding: 18px; border-radius: 14px; background: var(--s-canvas); font-size: 13px; line-height: 1.5; color: var(--s-ink-2); }
:root .dab .be-refs-empty b { color: var(--s-ink); font-weight: 500; }
:root .dab .fl-refs.is-empty .rf-empty-h { font-size: max(15px, 3.6cqw); }
:root .dab .fl-refs.is-empty .rf-empty-p { font-size: max(12px, 1.8cqw); }
@media (max-width: 760px) {
  :root .dab .fl-refs.is-empty .rf-empty { width: 76cqw; gap: 2cqw; }
  :root .dab .fl-refs.is-empty .ir-fan { height: 26cqw; }
  :root .dab .fl-refs.is-empty .ir-chips, :root .dab .fl-refs.is-empty .rf-empty-p { display: none; }
}
/* no video of yours yet (Look, Editing): the frame shows the glass sample from the new-user frame, not dashed boxes */
:root .dab .frame.no-video:has(.fl-look.on, .fl-edit.on) .fl-new { opacity: 1; visibility: visible; }
:root .dab .frame.no-video:has(.fl-look.on, .fl-edit.on) .live-pill, :root .dab .frame.no-video [data-dab-ghost] { display: none; }
/* no video yet, but a brand of its own (or one being imported): the real graphic, name card and captions in that brand */
:root .dab .frame.no-video.branded:has(.fl-look.on, .fl-edit.on) .fl-new { opacity: 0; visibility: hidden; }
:root .dab .fl-new { border-radius: inherit; overflow: hidden; }
/* a Brand card's empty state carrying its drawn hint art (Photos) */
:root .dab .estate > .nu-ill { position: relative; overflow: hidden; height: 140px; margin-bottom: 4px; }
/* the frame is a 3D context, where overflow does not clip the frosted layers' corners: clip them to the frame's radius */
:root .dab .fl-new, :root .dab .fl-refs.is-empty { clip-path: inset(0 round 18px); }
@media (max-width: 760px) { :root .dab .fl-new, :root .dab .fl-refs.is-empty { clip-path: inset(0 round 12px); } }

/* ---------- Editing > Your editing style, in the narrow card (js/edit-style.js compact; = mockup brand.css .dim) ---------- */
:root .dab .es .dim { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--s-hair); font-size: 12px; }
:root .dab .es .dim > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root .dab .es .dim b { font-size: 13px; font-weight: 500; color: var(--s-ink); }
:root .dab .es .dim .faint { color: var(--s-ink-2); }
:root .dab .es .conf { position: relative; width: 40px; height: 4px; border-radius: 2px; background: var(--s-peri-soft); overflow: hidden; }
:root .dab .es .conf i { position: absolute; inset: 0; width: calc(var(--c) * 100%); background: var(--s-peri-deep); }
:root .dab .es .dim-plain { text-wrap: pretty; margin: 0; font-size: 12px; line-height: 1.4; color: var(--s-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root .dab .es .dim-a { display: flex; gap: 8px; }
:root .dab .es .es-btnrow { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
:root .dab .es .es-learn-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-top: 12px; padding: 10px 0 2px; border: 0; border-top: 1px solid var(--s-hair); background: none; text-align: left; font-size: 12px; color: var(--s-ink-2); cursor: pointer; }
:root .dab .es .es-learn-row b { font-size: 13px; font-weight: 500; color: var(--s-ink); }
:root .dab .es .es-learn-row:hover b { text-decoration: underline; text-underline-offset: 3px; }
:root .dab .es .es-correct { margin-top: 4px; }
:root .dab .sr-in .es { padding: 0; }

/* ---------- Channel > Your channel, as the mockup draws it (js/channel-profile.js da view; = mockup brand.css .prof-sec) ---------- */
:root .dab #channelProfile .card-head { display: none; }
:root .dab .ch-profile .prof-sec { padding: 14px 0; border-bottom: 1px solid var(--s-line); }
:root .dab .ch-profile .prof-sec:first-child { padding-top: 2px; }
:root .dab .ch-profile .prof-sec h3 { margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--s-ink); }
:root .dab .ch-profile .prof-sec p { margin: 0; font-size: 13px; color: var(--s-ink-2); line-height: 1.45; }
:root .dab .ch-profile .tl { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: baseline; margin-top: 6px !important; font-size: 12px !important; }
:root .dab .ch-profile .chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
:root .dab .ch-profile .chips > span { font-size: 11px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--s-canvas); color: var(--s-ink-2); }
:root .dab .ch-profile .wpm { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--s-ink-2); }
:root .dab .ch-profile .wpm input { flex: 1; accent-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .dab .ch-profile .wpm output { white-space: nowrap; font-variant-numeric: tabular-nums; }
:root .dab .ch-profile .cp-tog { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--s-ink); }
:root .dab .ch-profile .cp-tog input { width: 34px; height: 20px; border-radius: 99px; background: var(--dk-b-1f1f21a18, rgba(31,31,33,.18)); }
:root .dab .ch-profile .cp-tog input::after { top: 3px; left: 3px; width: 14px; height: 14px; background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
:root .dab .ch-profile .cp-tog input:checked { background: var(--s-peri-deep); }
:root .dab .ch-profile .cp-tog input:checked::after { transform: translateX(14px); }
:root .dab .ch-profile .cp-tog b { font-weight: 500; }
:root .dab #channelProfile .cp-more { margin-top: 12px; }
:root .dab #channelProfile .cp-more > summary { font-size: 13px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); cursor: pointer; list-style: none; }
:root .dab #channelProfile .build-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
:root .dab #channelProfile .foot-note { font-size: 12px; color: var(--s-ink-2); }

/* ---------- References, as the mockup draws them (js/brand-editors.js referencesDaHtml; = mockup brand.css .rcard) ---------- */
:root .dab #refs .addref { display: flex; gap: 8px; margin: 0 0 4px; }
:root .dab #refs .addref .dab-input { flex: 1; min-width: 0; }
:root .dab #refs .addref .dab-pill { flex: none; }
:root .dab #refs .be-refs-full { font-size: 12px; color: var(--s-ink-2); margin: 6px 0 0; }
:root .dab #refs .refs { margin-top: 8px; }
:root .dab #refs .rcard { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 8px; margin: 0 -8px; border-radius: 14px; width: calc(100% + 16px); text-align: left; cursor: pointer; transition: background var(--t-small); position: static; background: none; border: 0; box-shadow: none; }
:root .dab #refs .rcard:hover { background: var(--s-canvas); }
:root .dab #refs .rcard.on { background: var(--s-canvas); box-shadow: inset 0 0 0 2px var(--s-ink); }
:root .dab #refs .rcard:focus-visible { outline: 2px solid var(--dk-tx-s-peri-deep, var(--s-peri-deep)); outline-offset: 2px; }
:root .dab #refs .rc-img { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: var(--s-shell); }
:root .dab #refs .rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .dab #refs .rc-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; }
:root .dab #refs .rc-b b { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--s-ink); }
:root .dab #refs .rc-link { color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .dab #refs .rc-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
:root .dab #refs .rc-tags .tagpill { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--s-peri-soft); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); font-weight: 500; }
:root .dab #refs .rc-tags .be-tag-x { width: 0; overflow: hidden; padding: 0; border: 0; background: none; color: inherit; font-size: 12px; line-height: 1; cursor: pointer; transition: width var(--t-micro); }
:root .dab #refs .rc-tags .tagpill:hover .be-tag-x, :root .dab #refs .rc-tags .be-tag-x:focus-visible { width: 10px; }
:root .dab #refs .rc-tags .addtag { flex: 0 0 auto; width: 88px; height: 20px; padding: 0 8px; font: inherit; font-size: 11px; border: 0; border-radius: var(--r-pill); background: none; box-shadow: inset 0 0 0 1px var(--s-line); color: var(--s-ink); }
:root .dab #refs .rc-tags .addtag::placeholder { color: var(--s-ink-2); }
:root .dab #refs .rc-tags .addtag:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--s-peri-deep); }
:root .dab #refs [data-ref-measure] { color: var(--s-ink-2); font-size: 12px; margin: 0; }
:root .dab #refs .rc-foot { display: flex; gap: 10px; align-items: center; }
:root .dab #refs .rc-foot .textbtn { padding: 0; font-size: 12px; }
:root .dab #refs .rcard.pending .rc-img { background: var(--s-peri-soft); }
:root .dab #refs .rcard.pending .rc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--dk-b-ffffffa75, rgba(255,255,255,.75)) 50%, transparent 70%) 0 0 / 300% 100%; animation: dab-skel 1.4s linear infinite; }
:root .dab #refs .pend { display: inline-flex; gap: 6px; align-items: center; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); font-weight: 500; }
:root .dab #refs .pend::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--s-peri); animation: dab-pulse 1.2s infinite; }

/* ---------- Editing > Fine-tune in the narrow card (= mockup brand.css .ft / .ft-explain / .saveprof) ---------- */
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .profile-custom-note { display: none; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .profile-rows { display: flex !important; flex-direction: column; gap: 8px; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; padding: 0; margin: 0; border: 0; background: none; font-size: 12px; color: var(--s-ink-2); }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref-head { display: flex; margin: 0; padding: 0; font-size: 12px; font-weight: 400; color: var(--s-ink-2); }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref-head svg { display: none; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; margin: 0; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref .seg-opt { padding: 4px 4px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref > .pace-plain { display: none; grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: var(--s-ink); background: var(--s-canvas); border-radius: 10px; padding: 8px 10px; line-height: 1.45; }
/* one explainer: the row last changed (js/da-brand.js marks it), else Pace (= mockup) */
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .profile-rows:not(:has(.pref.is-last)) .pref:nth-child(4) > .pace-plain[data-dial-plain],
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref.is-last > .pace-plain[data-dial-plain],
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref.is-last > .pace-plain[data-set-plain] { display: block; }
/* Components: Numbers / Lists / Quotes side by side under one heading */
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; margin-top: 4px; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .pref-head { grid-column: 1 / -1; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .pace-plain { display: none !important; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg { grid-auto-flow: row; grid-auto-columns: auto; border-radius: 12px; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg .seg-opt { border-radius: 9px; }
/* Save as your own profile: a link that opens the name field (40 max) */
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .profile-save { margin-top: 12px; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .profile-save > .field-label { display: inline; font-size: 13px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); cursor: pointer; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .profile-save:not(:focus-within):not(:has(input:valid)) .profile-save-row { display: none; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .profile-save-row { display: flex; gap: 8px; margin-top: 8px; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .profile-save-row .input { flex: 1; min-width: 0; height: 32px; padding: 6px 10px; font-size: 13px; border-radius: 10px; }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref { padding: 0 !important; min-height: 0; }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref .seg { min-width: 0; height: auto; padding: 3px; }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref .seg-opt { min-width: 0 !important; height: 24px; padding: 0 4px !important; font-size: 11.5px !important; }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref-head, :root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref-head span { font-size: 12px !important; font-weight: 400; }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref.is-last .pref-head { color: var(--s-ink); font-weight: 500; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) [data-dial-plain="energy"]::before { content: "Energy: "; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) [data-dial-plain="amount"]::before { content: "Amount: "; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) [data-dial-plain="layout"]::before { content: "Layout: "; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) [data-dial-plain="pace"]::before { content: "Pace: "; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) [data-set-plain="art"]::before { content: "Graphics: "; }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref .seg[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
:root .dab .editing .dab-comp { display: none !important; }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg[data-n="4"] { grid-template-columns: 1fr 1fr !important; grid-auto-flow: row; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .dab-comp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .dab-comp label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--s-ink-2); min-width: 0; }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .dab-comp select { width: 100%; min-width: 0; height: 30px; padding: 4px 6px; font-size: 12px; border-radius: 9px; }
:root .dab .editing:not([data-show="fine"]):not([data-show="all"]) .dab-comp { display: none; }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref .seg-opt { white-space: nowrap !important; }

/* ---------- Editing > Rules in the narrow card (= mockup brand.css .addrow / .rule) ---------- */
:root .dab .sr-in .memory .mem-copy, :root .dab .sr-in .memory .be-rule-add .bi-copy { display: none; }
:root .dab .sr-in .memory .be-rule-add .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:root .dab .sr-in .memory .be-rule-add { margin: 0 0 10px; }
:root .dab .sr-in .memory .bi-row { display: flex; gap: 8px; }
:root .dab .sr-in .memory .bi-row .input { flex: 1; min-width: 0; height: 32px; padding: 6px 10px; font-size: 13px; border-radius: 10px; }
:root .dab .sr-in .memory .bi-row .btn { flex: none; height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--r-pill); background: none; border: 1px solid var(--s-line); color: var(--s-ink); }
:root .dab .sr-in .memory .be-lessons { display: block; }
:root .dab .sr-in .memory .be-lesson { display: grid; grid-template-columns: 34px auto auto 1fr; grid-template-areas: "sw tx tx tx" "sw a b c"; column-gap: 10px; row-gap: 2px; align-items: start; padding: 9px 0; margin: 0; border: 0; border-top: 1px solid var(--s-hair); border-radius: 0; background: none; box-shadow: none; font-size: 13px; line-height: 1.4; }
:root .dab .sr-in .memory .be-lesson-main, :root .dab .sr-in .memory .be-lesson-actions { display: contents; }
:root .dab .sr-in .memory .learned-icon, :root .dab .sr-in .memory .be-lesson-meta { display: none; }
:root .dab .sr-in .memory .be-lesson-text { grid-area: tx; margin: 0; font-size: 13px; color: var(--s-ink); }
:root .dab .sr-in .memory .be-lesson [data-be-l="examples"] { grid-area: a; }
:root .dab .sr-in .memory .be-lesson [data-be-l="history"] { grid-area: b; }
:root .dab .sr-in .memory .be-lesson [data-be-l="correct"] { grid-area: c; justify-self: start; }
:root .dab .sr-in .memory .be-lesson .be-link { font-size: 12.5px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); text-decoration: none; padding: 0; margin-top: 2px; }
:root .dab .sr-in .memory .be-lesson .be-link[disabled] { color: var(--s-ink-3, #A3A3A6); }
:root .dab .sr-in .memory .be-lesson > .be-lesson-main > .be-lesson-actions > .be-switch, :root .dab .sr-in .memory .be-lesson .be-switch { grid-area: sw; margin-top: 1px; }
:root .dab .sr-in .memory .be-lesson .be-switch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:root .dab .sr-in .memory .be-lesson .be-switch input { width: 34px; height: 20px; border-radius: 99px; background: var(--dk-b-1f1f21a18, rgba(31,31,33,.18)); }
:root .dab .sr-in .memory .be-lesson .be-switch input::after { top: 3px; left: 3px; width: 14px; height: 14px; background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
:root .dab .sr-in .memory .be-lesson .be-switch input:checked { background: var(--s-peri-deep); }
:root .dab .sr-in .memory .be-lesson .be-switch input:checked::after { transform: translateX(14px); }
:root .dab .sr-in .memory .be-lesson.is-off .be-lesson-text { color: var(--s-ink-2); }
:root .dab .sr-in .memory .be-lesson :is(.be-lesson-more, form, textarea, .be-lesson-edit) { grid-column: 2 / -1; }
:root .dab .sr-in .memory .mem-all { font-size: 13px; color: var(--s-ink-2); text-decoration: none; padding: 6px 0 0; }
:root .dab .sr-in .memory .be-lesson { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 9px 0 !important; margin: 0 !important; }

/* ---------- Channel > Channels you follow in the narrow card (= mockup: who you follow, the add row, one note) ---------- */
:root .dab .sr-in #following { display: flex; flex-direction: column; }
:root .dab .sr-in #following > .card-head, :root .dab .sr-in #following .fol-example, :root .dab .sr-in #following .fol-add > .field-label { display: none; }
:root .dab .sr-in #following .fol-body { order: 1; margin: 0 0 10px; }
:root .dab .sr-in #following .fol-add { order: 2; margin: 0; }
:root .dab .sr-in #following > .mem-copy { order: 3; margin: 8px 0 0; font-size: 12px; color: var(--s-ink-2); line-height: 1.45; }
:root .dab .sr-in #following .fol-own { order: 4; margin: 4px 0 0; font-size: 12px; color: var(--s-ink-2); line-height: 1.45; }
:root .dab .sr-in #following .fol-add-row { display: flex; gap: 8px; }
:root .dab .sr-in #following .fol-add-row .input { flex: 1; min-width: 0; height: 32px; padding: 6px 10px; font-size: 13px; border-radius: 10px; }
:root .dab .sr-in #following .fol-add-row .btn { flex: none; height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--r-pill); background: none; border: 1px solid var(--s-line); color: var(--s-ink); }
:root .dab .sr-in #following .field-note:empty { display: none; }
:root .dab .sr-in #following .fol-list { margin: 0; padding: 0; list-style: none; }
:root .dab .sr-in #following .fol-row--empty { padding: 0; border: 0; background: none; }
:root .dab .sr-in #following .fol-row--empty .fol-name { display: none; }
:root .dab .sr-in #following .fol-row--empty .fol-sub { font-size: 12px; color: var(--s-ink-2); }
:root .dab .sr-in #following .fol-list:not(.fol-list--empty) { display: flex; flex-direction: column; gap: 6px; }
:root .dab .sr-in #following .fol-list--empty { background: none !important; padding: 0 !important; border: 0 !important; }
:root .dab .sr-in #following:has(.fol-list--empty) > .mem-copy { display: none; }
:root .dab .sr-in #following:has(.fol-list--empty) .fol-body { order: 3; margin: 8px 0 0; }

/* rs-wire:brand: the frosted-glass card recipe is gone (white panels on the canvas instead); empty notes are a soft inset well */
:root .dab .be-refs-empty { margin-top: var(--rs-s12); padding: var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-inset); font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root .dab #refs.ref-row { box-shadow: none; }

/* ================================================================ rs-wire:brand
   Riverside-style Brand page (mockup .orch/qa/flow-design/riverside-review/brand.html): the page title and the saved line,
   the tabs as the shell's segmented control with jump chips beside it; the rows are white panels in the page's own scroll on
   the left, the Preview panel (the creator's own video in the brand) sticks on the right. Shell tokens only (css/rs-shell.css). */
:root .dab { max-width: 1400px; height: auto; min-height: 0; display: block; font-family: var(--rs-font); font-size: var(--rs-fs-body); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
:root .dab .dab-head { margin: 0 0 var(--rs-gap); z-index: 30; }
:root .dab .head-row { align-items: flex-start; gap: var(--rs-s16); }
:root .dab .dab-title { min-width: 0; }
:root .dab h1 { font: var(--rs-w-med) var(--rs-fs-title)/1.3 var(--rs-font); letter-spacing: 0; color: var(--rs-tx); }
:root .dab .head-sub { margin-top: var(--rs-s4); font-size: var(--rs-fs-body); line-height: 1.45; color: var(--rs-tx-2); }
:root .dab .head-tools { gap: var(--rs-s12); padding-top: var(--rs-s4); }
:root .dab .saved { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); gap: var(--rs-s4); }
:root .dab .saved-tick { width: 18px; height: 18px; color: var(--rs-tx-2); }
:root .dab .saved.flash .saved-tick { background: var(--rs-pos); }
:root .dab .textbtn { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .dab .ring-btn { height: 32px; gap: var(--rs-s8); padding: 0 var(--rs-s12) 0 var(--rs-s4); border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-cap); color: var(--rs-tx); }
:root .dab .ring { width: 24px; height: 24px; }
:root .dab .ring-txt b { font-weight: var(--rs-w-med); }
:root .dab .ring-txt .faint { color: var(--rs-tx-2); }
:root .dab .ring-pop { right: 0; top: calc(100% + var(--rs-s8)); border: 0; border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); padding: var(--rs-s12) var(--rs-s8) var(--rs-s8); }
:root .dab .rp-h { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .dab .rp-list li { font-size: var(--rs-fs-body); border-radius: var(--rs-r-sm); }
:root .dab .dab-import .vi { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
/* tabs: the shell's segmented control (.rs-seg) at its own size; the old thumb, icons and dots step out */
:root .dab .dab-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--rs-s16); margin-top: var(--rs-s16); min-width: 0; }
:root .dab .switch4.dab-tabs { display: inline-flex; height: auto; grid-template-columns: none; padding: 3px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); flex: none; }
:root .dab .switch4.dab-tabs button { flex-direction: row; height: 30px; padding: 0 14px; border-radius: var(--rs-r-pill); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx-2); }
:root .dab .switch4.dab-tabs button:hover { color: var(--rs-tx); }
:root .dab .switch4.dab-tabs button[aria-selected="true"] { color: var(--rs-tx); background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31,31,33,.1), 0 0 0 1px var(--rs-line); }
:root .dab .switch4.dab-tabs :is(.t4-ic, .t4-dot), :root .dab .switch4.dab-tabs .sw4-thumb { display: none; }
:root .dab .dab-jump { display: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--rs-s8); min-width: 0; }
:root .dab:is([data-tab="look"]) [data-dab-jumps="look"], :root .dab[data-tab="editing"] [data-dab-jumps="editing"],
:root .dab[data-tab="channel"] [data-dab-jumps="channel"], :root .dab[data-tab="photo"] [data-dab-jumps="photo"] { display: flex; }
:root .dab[data-mode="new"] .dab-jump { display: none; }
:root .dab .dab-jump .rs-chip { background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .dab .dab-jump .rs-chip:hover { color: var(--rs-tx); background: var(--rs-inset); }

/* the stage: rows on the left, the sticky Preview panel on the right */
:root .dab .dab-stage { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--rs-gap); align-items: start; margin: 0; }
:root .dab .dab-side { grid-column: 1; grid-row: 1; display: block; }
:root .dab .art-box { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--rs-top-h) + var(--rs-gap)); z-index: 5; justify-content: flex-start; gap: var(--rs-s12); padding: var(--rs-pad); border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); }
:root .dab .art-box > .glow, :root .dab .art-box > canvas.fs-art { display: none; }
:root .dab .pv-t { font: var(--rs-w-med) var(--rs-fs-sec)/1.35 var(--rs-font); color: var(--rs-tx); margin: 0; }
@media (min-width: 761px) {
  :root .dab .art-box, :root .dab .art-box:is(:has(.rl-look.on), :has(.rl-ph.on), :has(.rl-new.on), :has(.rl-imp.on)) { container-type: inline-size; --uw: 100%; }
  :root .dab .art-box > :is(.art-bar, .frame-wrap, .rail, .bar-err) { width: 100%; align-self: stretch; }
  :root .dab .card-scroll { background: none; }
  :root .dab.popside .frame-wrap, :root .dab.popwide .frame-wrap { transform: none; }
  :root .dab.popside .rail { opacity: 1; }
}
/* the preview's bar: what it shows, Shuffle and Before as small secondary buttons; the import paste bar and review bar */
:root .dab .art-bar { height: 32px; margin-top: calc(-1 * var(--rs-s8)); }
:root .dab .tool-note { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-reg); color: var(--rs-tx-2); text-shadow: none; }
:root .dab .chip-btn { height: 32px; padding: 0 var(--rs-s12); gap: var(--rs-s8); border-radius: var(--rs-r-pill); background: var(--rs-panel); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root .dab .chip-btn:hover { background: var(--rs-inset); }
:root .dab .chip-btn[aria-pressed="true"] { background: var(--rs-sel); color: var(--rs-tx); }
:root .dab .chip-btn[aria-pressed="true"] .vi { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .dab .bar-import, :root .dab .bar-review { top: 0; height: 36px; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-body); }
:root .dab .bar-import:focus-within { box-shadow: inset 0 0 0 1px var(--rs-peri-deep), var(--rs-ring); }
:root .dab .bi-in { font-size: var(--rs-fs-body); }
:root .dab .bi-go, :root .dab .bar-review .dab-pill { height: 28px; padding: 0 var(--rs-s12); font-size: var(--rs-fs-body); }
:root .dab .br-ok { width: 20px; height: 20px; background: var(--rs-pos); }
:root .dab .bar-err { margin: 0; padding: var(--rs-s8) var(--rs-s8) var(--rs-s8) var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-neg-soft); box-shadow: none; font-size: var(--rs-fs-body); }
/* the one primary per view: periwinkle-deep, never ink */
:root .dab .dab-pill { height: 36px; padding: 0 var(--rs-s16); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .dab .dab-pill--ink { background: var(--rs-peri-deep); color: #fff; }
:root .dab .dab-pill--ink:hover { background: var(--rs-peri-deep-hover); }
:root .dab .dab-pill--line { background: var(--rs-panel); border: 0; box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .dab .dab-pill--line:hover { box-shadow: inset 0 0 0 1px var(--rs-line-2); background: var(--rs-inset); }
/* the frame and the rail inside the white panel */
:root .dab .frame { border-radius: var(--rs-r-inner); }
:root .dab .fl-new, :root .dab .fl-refs.is-empty { clip-path: inset(0 round var(--rs-r-inner)); }
:root .dab .rl-h { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); text-shadow: none; margin-bottom: var(--rs-s8); }
:root .dab .rl-h .faint { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .moments { gap: var(--rs-s8); }
:root .dab .mo, :root .dab .lay { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-reg); color: var(--rs-tx-2); gap: var(--rs-s4); }
:root .dab .mo-art, :root .dab .lay-art { border-radius: var(--rs-r-sm); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .dab .mo:hover .mo-art { transform: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .dab .mo.on .mo-art, :root .dab .lay.on .lay-art { transform: none; box-shadow: 0 0 0 2px var(--rs-peri-deep); }
:root .dab .mo.on, :root .dab .lay.on { color: var(--rs-tx); }
:root .dab .dens { background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); border-radius: var(--rs-r-sm); }
:root .dab .dens-key { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .idea, :root .dab .ideas-empty, :root .dab .imp-review { background: var(--rs-inset); border-radius: var(--rs-r-inner); box-shadow: none; font-size: var(--rs-fs-body); }
:root .dab .meas span { background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); }
:root .dab .meas span.wait { background: var(--rs-inset); }
:root .dab .live-pill, :root .dab .fpill { font-size: var(--rs-fs-cap); }

/* the rows: each one a white panel with its title and value; one open at a time per tab, as before */
:root .dab .dab-card { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
:root .dab .card-scroll { padding: 0; overflow: visible; }
:root .dab .brand-panel:not([hidden]) { display: grid; gap: var(--rs-gap); }
:root .dab .srow { padding: 0 var(--rs-pad); border: 0; border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); scroll-margin-top: calc(var(--rs-top-h) + var(--rs-gap)); min-width: 0; }
:root .dab .sr-btn { grid-template-columns: minmax(0, 1fr) auto; gap: var(--rs-s12); padding: var(--rs-s12) 0; }
:root .dab .sr-pic { display: none; }
:root .dab .sr-t { gap: 2px; }
:root .dab .sr-t b { font: var(--rs-w-med) var(--rs-fs-sec)/1.35 var(--rs-font); color: var(--rs-tx); }
:root .dab .sr-v { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .sr-btn .chev { color: var(--rs-tx-3); }
:root .dab .srow.open > .sr-body > .sr-in { padding: 0 0 var(--rs-pad); }
:root .dab .srow.is-pointed { border-radius: var(--rs-r-panel); }
:root .dab .ro-note { margin: 0 0 var(--rs-gap); border-radius: var(--rs-r-inner); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
/* inside a row: the shell's type scale, inputs and selection */
:root .dab .sr-in { font-size: var(--rs-fs-body); }
:root .dab .sr-in .field-label { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); margin: var(--rs-s12) 0 var(--rs-s4); }
:root .dab .sr-in :is(.field-note, .head-note, .field-hint) { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .sr-in :is(.input, .dab-input, select, textarea) { font-size: var(--rs-fs-body); border-radius: var(--rs-r-inner); }
:root .dab .sr-in .profile-card { border-radius: var(--rs-r-inner); }
:root .dab .sr-in .profile-card.is-on { box-shadow: inset 0 0 0 1px var(--rs-peri); background: var(--rs-sel); }
:root .dab .sr-in .profile-name { font-size: var(--rs-fs-body); }
:root .dab .sr-in :is(.profile-tag, .profile-set) { font-size: var(--rs-fs-cap); }
:root .dab .sr-in .profile-blurb { font-size: var(--rs-fs-cap); }
/* the colour editor and the Custom style dialog sit in the preview column, under the frame (js/brand-editors.js, js/da-brand.js) */
:root .dab .be-ced.is-side { max-width: none; border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); }
:root .dab .be-ced.is-side::before { display: none; }
@media (min-width: 761px) { :root .dab .be-modal.is-side { border-radius: var(--rs-r-panel); } }

/* phones: the preview is a sticky mini panel under the top bar, the tabs scroll sideways, no jump chips */
@media (max-width: 760px) {
  :root .dab .head-row { flex-wrap: wrap; gap: var(--rs-s8) var(--rs-s12); }
  :root .dab h1 { font-size: var(--rs-fs-title); }
  :root .dab .head-sub { font-size: var(--rs-fs-body); }
  :root .dab .head-tools { padding-top: 0; gap: var(--rs-s8); }
  :root .dab .ring-btn, :root .dab [data-dab-import] { height: 32px; font-size: var(--rs-fs-body); }
  :root .dab .ring-btn { font-size: var(--rs-fs-cap); }
  :root .dab .dab-nav { margin-top: var(--rs-s12); }
  :root .dab .switch4.dab-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin: 0; }
  :root .dab .switch4.dab-tabs button { flex: 1 0 auto; padding: 0 var(--rs-s12); scroll-snap-align: start; min-height: 0; }
  :root .dab .dab-jump { display: none !important; }
  :root .dab .dab-stage { display: block; }
  :root .dab .art-box { top: var(--rs-top-h); padding: var(--rs-s8); gap: var(--rs-s8); border-radius: var(--rs-r-panel); }
  :root .dab .pv-t { display: none; }
  :root .dab .art-bar { margin-top: 0; height: 32px; }
  :root .dab .chip-btn { height: 28px; font-size: var(--rs-fs-cap); padding: 0 var(--rs-s8); }
  :root .dab .frame { border-radius: var(--rs-r-sm); }
  :root .dab .dab-side { margin-top: var(--rs-gap); }
  :root .dab .sr-btn { min-height: 48px; }
}
/* rs-wire:brand: Fine-tune > Components in the wider panel: each part on its own line, its name beside its choices */
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child { grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: var(--rs-s8); }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .pace-plain { display: block !important; grid-column: 1; margin: 0; padding: 0; background: none; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg,
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg[data-n="4"] { grid-column: 2; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: minmax(0, 1fr); border-radius: var(--rs-r-pill); }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg .seg-opt { border-radius: var(--rs-r-pill); }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref .seg-opt { font-size: var(--rs-fs-cap) !important; }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) :is(.pref-head, .pref-head span) { font-size: var(--rs-fs-cap) !important; color: var(--rs-tx-2); }
:root .dab .editing:is([data-show="fine"], [data-show="all"]) .pref > .pace-plain { font-size: var(--rs-fs-cap); border-radius: var(--rs-r-inner); background: var(--rs-inset); }
/* rs-wire:brand: the role on a swatch is a quiet periwinkle tag, not an ink block */
:root .dab .be-bc-palette .sw-role { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); line-height: 18px; letter-spacing: 0; padding: 0 6px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); background: var(--rs-peri-soft); box-shadow: 0 0 0 2px var(--rs-panel); }
:root .dab .be-bc-palette .be-swatch :is(.sw-name, .sw-label, small) { font-size: var(--rs-fs-cap); }
:root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref .seg { width: 100%; max-width: none; }
/* rs-wire:brand: the colour editor and the Custom dialog live in the rows' column but float over the preview: that column paints above it */
@media (min-width: 761px) { :root .dab .dab-side { position: relative; z-index: 6; } }
/* rs-wire:brand: References selection is a tint with a periwinkle hairline; pins and the strip in periwinkle, not ink */
:root .dab #refs .rcard { margin: 0; width: 100%; padding: var(--rs-s12); border-radius: var(--rs-r-inner); }
:root .dab #refs .rcard:hover { background: var(--rs-inset); }
:root .dab #refs .rcard.on { background: var(--rs-sel); box-shadow: inset 0 0 0 1px var(--rs-peri); }
:root .dab .pin, :root .dab .rf-list li b { background: var(--rs-peri-deep); }
:root .dab .rf-strip button.on { box-shadow: 0 0 0 2px var(--rs-peri-deep); transform: none; }
:root .dab .rf-shot { box-shadow: inset 0 0 0 1px var(--rs-line); }
/* the frame is a 3D context (the Before flip), where overflow does not clip its layers' corners: clip the frame itself */
:root .dab .frame { clip-path: inset(0 round var(--rs-r-inner)); }
@media (max-width: 760px) { :root .dab .frame { clip-path: inset(0 round var(--rs-r-sm)); } }
/* rs-wire:brand: selection is a periwinkle tint, the primary action periwinkle-deep (no ink fills or ink rings on this page) */
:root .dab .btn--primary { background: var(--rs-peri-deep); border-color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); color: #fff; }
:root .dab .btn--primary:hover { background: var(--rs-peri-deep-hover); border-color: var(--dk-tx-rs-peri-deep-hover, var(--rs-peri-deep-hover)); }
:root .dab .sp-tile.is-on { box-shadow: inset 0 0 0 1px var(--rs-peri); background: var(--rs-sel); }
:root .dab :is(.sp-check, .dab-cs-tick) { background: var(--rs-peri-deep); }
:root .dab .dab-cs-img { box-shadow: 0 0 0 1px var(--rs-peri); }
:root .dab .nu-prog i { background: var(--rs-peri-deep); }
/* rs-wire:brand alignment: the header tools sit on the sub line (the title block's bottom); an empty rail (References,
   none yet) steps out so the frame ends the Preview panel with its own 12px, not 12px of gap below it */
:root .dab .head-row { align-items: flex-end; }
:root .dab .head-tools { padding-top: 0; }
:root .dab .art-box:has(.rl.on.is-empty) .rail { display: none; }
@media (max-width: 760px) { :root .dab .head-row { align-items: flex-start; } }
:root .dab .tool-note { flex: 1 1 auto; margin-right: 0; }
/* rs-wire:brand: With you / Full screen / Raw take (the preview's segmented switch) */
:root .dab .dab-view { flex: none; }
:root .dab:not([data-tab="look"]) .bar-tools .dab-view { display: none; }
:root .dab .frame.fullgfx .fl-look .gfx { inset: 0; width: auto; border-radius: 0; box-shadow: none; padding: 7cqw 9cqw; display: flex; flex-direction: column; justify-content: center; }
:root .dab .frame.fullgfx .fl-look :is(.ncard, .cap, .ghost-card) { opacity: 0; }
@media (max-width: 760px) { :root .dab .bar-tools [data-dab-shuffle] { padding: 0 var(--rs-s8); } :root .dab .dab-view > button { padding: 0 var(--rs-s8); } }
/* Editing: the strip's numbers as four small stats */
:root .dab .dab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--rs-s12) 0 0; border-radius: var(--rs-r-inner); box-shadow: inset 0 0 0 1px var(--rs-line); overflow: hidden; }
:root .dab .dab-stats > div { padding: var(--rs-s8) var(--rs-s12); min-width: 0; }
:root .dab .dab-stats > div + div { box-shadow: -1px 0 0 var(--rs-line); }
:root .dab .dab-stats dt { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .dab-stats dd { margin: 2px 0 0; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .dab .dab-stats:empty { display: none; }
/* Look > Fonts: the two pickers, each with its live sample */
:root .dab .dab-fonts { display: grid; gap: var(--rs-s12); }
:root .dab .dab-fonts > .field-note { margin: 0; }
:root .dab .dab-fonts .be-fontpick { display: grid; gap: var(--rs-s4); margin: 0; }
:root .dab .dab-fonts .be-fontprev { display: block; padding: var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-inset); font-size: var(--rs-fs-sec); line-height: 1.35; color: var(--rs-tx); }
/* rs-wire:brand: the two A/B picks are equal choices, so neither is the view's primary: both are secondary pills */
:root .dab .btn--primary.cal-pick { background: var(--rs-panel); border-color: transparent; box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); }
:root .dab .btn--primary.cal-pick:hover { background: var(--rs-inset); border-color: transparent; }
/* rs-wire:brand (integration): on phones the Components rows stack their name over the choices; three choices share
   the row equally and four go two by two (brand.css's #editing phone rules would otherwise size them by their text) */
@media (max-width: 760px) {
  :root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child:is(#editing *) { grid-template-columns: minmax(0, 1fr) !important; gap: var(--rs-s4); }
  :root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > :is(.pace-plain, .seg):is(#editing *) { grid-column: 1 !important; }
  :root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg:is(#editing *) + .pace-plain { margin-top: var(--rs-s8); }
  :root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg:not([data-n="4"]):is(#editing *) { grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: minmax(0, 1fr) !important; }
  :root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg[data-n="4"]:is(#editing *) { grid-auto-flow: row !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-columns: auto !important; border-radius: var(--rs-r-inner); }
  :root .dab .sr-in .editing:is([data-show="fine"], [data-show="all"]) .pref:last-child > .seg[data-n="4"]:is(#editing *) .seg-opt { min-width: 0; border-radius: var(--rs-r-sm); }
}

/* ================================================================ rs-wire:brand fix (Parker 2026-10-18: match brand.html)
   Every section is an open panel (= mockup); the preview is a neutral stage that never zooms and never shows footage. */
:root .dab .dab-stage { grid-template-columns: minmax(0, 1.19fr) minmax(0, 1fr); }
:root .dab .head-tools [data-dab-import] { display: none; }
:root .dab .sr-btn { cursor: default; padding: var(--rs-s12) 0 var(--rs-s8); }
:root .dab .sr-btn .chev { display: none; }
:root .dab .srow > .sr-body { grid-template-rows: 1fr; }
:root .dab .srow > .sr-body > .sr-in { visibility: visible; overflow: visible; padding: 0 0 var(--rs-pad); }
:root .dab .srow > .sr-body > .sr-in > * { animation: none; }
:root .dab .srow:is([data-row="fine"], [data-row="permission"], [data-row="thumbs"]) { display: none; }
/* a module shared by two or three sections (Editing style + Fine-tune; Your photo + Permission + Thumbnail style + Kept layout):
   its row has no chrome of its own; the row's title and the module's first part make one panel, every later part is its own
   panel, all the same width with the page's 16px between them (no panels inside a panel, no painted bands) */
:root .dab .srow:is([data-row="profile"], [data-row="photo"]) { background: none; box-shadow: none; padding: 0; border-radius: 0; }
:root .dab .srow:is([data-row="profile"], [data-row="photo"]) > .sr-btn { background: var(--rs-panel); padding: var(--rs-pad) var(--rs-pad) var(--rs-s8); border-radius: var(--rs-r-panel) var(--rs-r-panel) 0 0; box-shadow: inset 1px 0 0 var(--rs-line), inset -1px 0 0 var(--rs-line), inset 0 1px 0 var(--rs-line); }
:root .dab .srow:is([data-row="profile"], [data-row="photo"]) > .sr-body > .sr-in { padding: 0; }
:root .dab .editing[data-show="all"] .profile-wrap { gap: 0; }
:root .dab .editing[data-show="all"] .profile-wrap > .profile-pick,
:root .dab #creatorCard[data-show="all"] .tn-body > .tn-sec--photo { background: var(--rs-panel); padding: 0 var(--rs-pad) var(--rs-pad); margin: 0; border-radius: 0 0 var(--rs-r-panel) var(--rs-r-panel); box-shadow: inset 1px 0 0 var(--rs-line), inset -1px 0 0 var(--rs-line), inset 0 -1px 0 var(--rs-line), var(--rs-shadow); }
:root .dab .editing[data-show="all"] .profile-custom,
:root .dab #creatorCard[data-show="all"] .tn-body > :is(.tn-choices, .tn-style, .tn-lock) { position: relative; margin: 0; padding: var(--rs-pad); border: 0; border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); min-width: 0; }
:root .dab .editing[data-show="all"] .profile-custom { margin-top: var(--rs-gap); }
:root .dab #creatorCard[data-show="all"] .tn-body { gap: var(--rs-gap); margin: 0; padding: 0; }
:root .dab #creatorCard[data-show="all"] .tn-body > .tn-lock { padding-top: var(--rs-pad); }
:root .dab #creatorCard[data-show="all"] .tn-sec-title, :root .dab .editing[data-show="all"] .profile-custom > summary { display: block; padding: 0 0 var(--rs-s8); margin: 0; font: var(--rs-w-med) var(--rs-fs-sec)/1.35 var(--rs-font); color: var(--rs-tx); }
/* the two "whose photo" choices are visible radios */
:root .dab .tn-who label.rad { align-items: center; gap: var(--rs-s8); }
:root .dab .tn-who input[type="radio"] { -webkit-appearance: radio; appearance: auto; position: static; opacity: 1; width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; clip: auto; }
:root .dab .editing[data-show="all"] .profile-custom > summary { pointer-events: none; list-style: none; padding: 0 0 var(--rs-s8); font: var(--rs-w-med) var(--rs-fs-sec)/1.35 var(--rs-font); color: var(--rs-tx); }
:root .dab .editing[data-show="all"] .profile-custom > summary::-webkit-details-marker { display: none; }
:root .dab .editing[data-show="all"] .profile-custom > summary :is(svg, .chev, .vi) { display: none; }
/* Import from a website */
:root .dab .dab-imp2 { display: flex; gap: var(--rs-s8); }
:root .dab .dab-imp2 .rs-in { flex: 1; min-width: 0; }
/* Colours: swatch cards in a grid with name, code and role, then where each colour goes (= mockup) */
:root .dab .be-bc-palette .be-swatches { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--rs-s12) var(--rs-s8); }
:root .dab .be-bc-palette .be-swatch { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: auto; min-width: 0; padding: 0; text-align: left; }
:root .dab .be-bc-palette .be-swatch .chipdot { width: 100%; height: 40px; border-radius: var(--rs-r-sm); margin: 0 0 var(--rs-s4); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .dab .be-bc-palette .be-swatch :is(.sw-name) { font-size: var(--rs-fs-body); color: var(--rs-tx); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
:root .dab .be-bc-palette .be-swatch .sw-hex { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); font-variant-numeric: tabular-nums; }
:root .dab .be-bc-palette .be-swatch .sw-role { position: static; transform: none; margin-top: 2px; box-shadow: none; }
:root .dab .be-bc-palette .be-swatch--add .chipdot { display: grid; place-items: center; height: 40px; background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx-2); }
:root .dab .be-bc-palette .be-swatch.is-open .chipdot, :root .dab .be-bc-palette .be-swatch[aria-expanded="true"] .chipdot { box-shadow: 0 0 0 2px var(--rs-peri-deep); }
:root .dab .dab-roles { margin-top: var(--rs-s16); padding-top: var(--rs-s12); border-top: 1px solid var(--rs-line); }
:root .dab .dab-roles-h { margin: 0 0 var(--rs-s8); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root .dab .dab-roles .card-head { display: none; }
/* in its own row (Advanced) the row title already says it: no second heading, no rule above */
:root .dab .srow[data-row="roles"] .dab-roles { margin-top: 0; padding-top: 0; border-top: 0; }
:root .dab .srow[data-row="roles"] .dab-roles-h { display: none; }
@media (max-width: 760px) { :root .dab .be-bc-palette .be-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the preview is a neutral stage: the brand's graphic, name card and caption samples, never the recording, never zoomed */
:root .dab .frame :is(.clip, .clip-still) { display: none !important; }
:root .dab .frame, :root .dab .frame.no-video { background: var(--b-paper, var(--dk-b-f3f2ed, #F3F2ED)); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .dab .frame .fl-look { background: linear-gradient(180deg, var(--b-paper, var(--dk-b-f3f2ed, #F3F2ED)), color-mix(in srgb, var(--b-paper, var(--dk-b-f3f2ed, #F3F2ED)) 88%, var(--b-text, var(--dk-inv, #1F1F21)))); }
:root .dab .fl-look.zoomed { transform: none !important; }
:root .dab .frame.sim .fl-look.punched .clip { transform: none; }
:root .dab .frame.no-video:has(.fl-look.on, .fl-edit.on) .fl-new { opacity: 0; visibility: hidden; }
:root .dab .frame.no-video [data-dab-ghost] { display: none; }
:root .dab .live-pill { background: var(--rs-panel); color: var(--rs-tx-2); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .dab .mo-nc, :root .dab .mo-cap, :root .dab .mo-th { background: var(--b-paper, var(--dk-b-f3f2ed, #F3F2ED)) !important; }
:root .dab .th-photo:not([style*="url"]) { background: color-mix(in srgb, var(--b-paper, var(--dk-b-f3f2ed, #F3F2ED)) 80%, var(--b-text, var(--dk-inv, #1F1F21))) !important; }
/* the preview's head: title and what it shows on the left, the switch on the right (= mockup) */
@media (min-width: 761px) {
  :root .dab .art-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rs-s12); row-gap: var(--rs-s12); align-items: start; }
  :root .dab .art-box > * { grid-column: 1 / -1; }
  :root .dab .art-box > .pv-t { grid-column: 1; grid-row: 1; }
  :root .dab .art-box > .art-bar { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: auto !important; }
  /* import and review: the bar takes its own row under the title and note, right above the preview */
  :root .dab[data-bar] .art-box > .art-bar { grid-column: 1 / -1; grid-row: 3; width: 100% !important; }
  :root .dab .art-box > .pv-note { grid-column: 1; grid-row: 2; margin: calc(-1 * var(--rs-s8)) 0 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
  :root .dab .art-bar .tool-note { display: none; }
  :root .dab .art-bar .bar-tools { position: static; justify-content: flex-end; }
}
@media (max-width: 760px) { :root .dab .pv-note { display: none; } }
/* Graphic style: every style in one grid, the current one selected (= mockup), not a current row plus "More styles" */
:root .dab .dab-styles .dab-cur-style { display: none; }
:root .dab .dab-styles .dab-more-styles > summary { display: block; cursor: default; padding: 0 0 var(--rs-s8); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-reg); color: var(--rs-tx-2); list-style: none; }
:root .dab .dab-styles .dab-more-styles { margin-top: 0; }
:root .dab .dab-styles .dab-more-styles .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--rs-s12) var(--rs-s8); margin-top: 0; }
:root .dab .dab-styles .dab-more-styles .sp-grid > .sp-tile.is-on:not([data-be-scene^="own:"]) { display: flex; }
@media (max-width: 760px) { :root .dab .dab-styles .dab-more-styles .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* the preview's head holds only the With you / Full screen / Raw take switch; Shuffle lives in the Colours panel */
@media (min-width: 761px) { :root .dab .art-bar .bar-tools [data-dab-shuffle] { display: none; } }
/* Editing style: the profiles as a row of cards, picture over name and line (= mockup) */
@media (min-width: 761px) {
  :root .dab .sr-in .profile-wrap .profile-cards, :root .dab .sr-in .profile-pick { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: var(--rs-s8); }
  :root .dab .sr-in .profile-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--rs-s4); padding: var(--rs-s8); }
  :root .dab .sr-in .profile-clip { width: 100%; }
  :root .dab .sr-in .profile-blurb { -webkit-line-clamp: 2; }
  :root .dab .sr-in .profile-card.is-on .profile-sets { display: none; }
}
/* alignment: names with their tag, label beside its switch, buttons on one line, no one-word last lines */
:root .dab .sr-in .profile-card .profile-name { display: block; }
:root .dab .sr-in .profile-card .profile-tag { display: inline-block; margin-left: var(--rs-s4); }
:root .dab .sr-in :is(.profile-blurb, .be-capfine-why) { text-wrap: pretty; }
:root .dab .be-place-row { align-items: center; }
:root .dab .be-place-row > .field-label { margin: 0; }
:root .dab .dab-btnrow { align-items: center; }
:root .dab .dab-btnrow > .dab-pill { height: 32px; }
:root .dab .be-bc-palette .be-swatch .sw-name { min-height: 0; display: block; justify-content: flex-start; line-height: 1.35; }
/* Logo and name: the logo with its buttons on the left, the name and the switch on the right (= mockup) */
@media (min-width: 761px) {
  :root .dab #brandLogoHost { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--rs-s16); align-items: start; }
  :root .dab #brandLogoHost > * { grid-column: 2; min-width: 0; }
  :root .dab #brandLogoHost > .dab-logo-row { grid-column: 1; grid-row: 1 / span 4; display: flex; flex-direction: column; align-items: stretch; gap: var(--rs-s8); }
  :root .dab #brandLogoHost > .dab-logo-row .dab-logo-tile { width: 100%; }
  :root .dab #brandLogoHost .be-name { order: -1; margin-top: 0; }
}
/* caption samples fit their tile: smaller words that wrap, centred, instead of one line running past the plate */
:root .dab .sp-grid--captions .be-cap-plate { font-size: max(9px, 4.2cqi); white-space: nowrap; padding: 3cqi 3cqi; left: 6%; right: 6%; }
:root .dab .be-capfine-why { text-wrap: balance; }
:root .dab .sr-in .profile-blurb { text-wrap: balance; }
:root .dab .dab-logo-meta .dab-btnrow { align-items: center; }
:root .dab .dab-logo-meta .dab-btnrow > * { margin-top: 0; margin-bottom: 0; }
/* phones (= mockup 390): the Preview panel sits in the page flow with its title, the switch full width under the frame */
@media (max-width: 760px) {
  :root .dab .art-box { position: relative; top: auto; z-index: auto; padding: var(--rs-pad); gap: var(--rs-s12); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); }
  :root .dab .pv-t { display: block; order: -2; }
  :root .dab .art-bar { order: 0; height: 32px; }
  :root .dab .art-bar .bar-tools [data-dab-shuffle] { display: none; }
  :root .dab .dab-view { flex: 1; display: flex; }
  :root .dab .dab-view > button { flex: 1 1 0; }
  :root .dab .dab-logo-meta .dab-btnrow { display: grid; grid-template-columns: auto auto; justify-content: start; gap: var(--rs-s8); }
  :root .dab .dab-logo-meta .dab-btnrow > .dab-use-logo { grid-column: 1 / -1; justify-self: start; }
}
:root .dab .be-capfine-on { white-space: nowrap; }
:root .dab .sr-in .profile-card .profile-blurb { display: block; -webkit-line-clamp: unset; overflow: visible; text-wrap: pretty; }
:root .dab .sp-grid--captions .be-cap-plate { display: flex; justify-content: center; align-items: baseline; gap: .28em; }
:root .dab .be-capfine-on { display: block; margin-top: var(--rs-s4); padding: 0; }
:root .dab .sr-in .profile-card, :root .dab .sr-in .profile-card .profile-name { text-align: left; justify-content: flex-start; margin: 0; }
:root .dab .sr-in .profile-card .profile-blurb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
:root .dab .sr-in .profile-card .profile-blurb { display: block; -webkit-line-clamp: unset; overflow: visible; text-wrap: balance; }
/* rs-wire:brand Fine-tune sliders (= mockup): name and value on top, the track with a tick per step, every step named under it */
/* the row's own options are the step names under the track (each keeps its popover and its click); the range above drags across them */
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) { display: flex !important; flex-direction: column; gap: var(--rs-s4); padding: var(--rs-s12) 0 !important; border-bottom: 1px solid var(--rs-line); }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .pref-head { display: none !important; }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .dab-slider { order: 0; }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .seg { order: 1; display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) !important; gap: var(--rs-s8); height: auto !important; min-height: 0; width: 100%; padding: 0 !important; margin: 0; background: none !important; box-shadow: none !important; border: 0; border-radius: 0; }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .seg .seg-opt { height: auto !important; min-width: 0 !important; padding: 2px 0 !important; border: 0; border-radius: var(--rs-r-xs); background: none !important; box-shadow: none !important; font-size: var(--rs-fs-cap) !important; font-weight: var(--rs-w-reg); color: var(--rs-tx-2); text-align: center; justify-content: center; white-space: normal !important; overflow: visible; text-overflow: clip; }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .seg .seg-opt:first-child { text-align: left; justify-content: flex-start; }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .seg .seg-opt:last-child { text-align: right; justify-content: flex-end; }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .seg .seg-opt[aria-checked="true"] { color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .seg .seg-opt:hover { color: var(--rs-tx); }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .pace-plain { order: 2; }
:root .dab .dab-slider .dab-sl-ends { display: none; }
:root .dab .sr-btn, :root .dab .sr-in :is(button, input, select, textarea, a, [data-pop]) { scroll-margin-top: calc(var(--rs-top-h) + var(--rs-gap)); scroll-margin-bottom: var(--rs-gap); }
:root .dab .dab-slider { display: grid; gap: var(--rs-s4); min-width: 0; }
:root .dab .dab-sl-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rs-s12); font-size: var(--rs-fs-body); color: var(--rs-tx); }
:root .dab .dab-sl-head span { font-weight: var(--rs-w-med); }
:root .dab .dab-sl-head b { font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); white-space: nowrap; }
:root .dab .dab-sl-track { position: relative; height: 24px; margin: 0 9px; }
:root .dab .dab-sl-track input { position: absolute; left: -9px; right: -9px; top: 0; width: calc(100% + 18px); height: 24px; margin: 0; background: none; accent-color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); cursor: pointer; z-index: 1; }
:root .dab .dab-sl-ticks { position: absolute; inset: 0; pointer-events: none; }
:root .dab .dab-sl-ticks i { position: absolute; top: 17px; width: 1px; height: 6px; background: var(--rs-line-2); }
:root .dab .dab-sl-ticks i:nth-child(1) { left: 0; } :root .dab .dab-sl-ticks i:nth-child(2) { left: calc(100% / var(--n) * 1); }
:root .dab .dab-sl-ticks i:nth-child(3) { left: calc(100% / var(--n) * 2); } :root .dab .dab-sl-ticks i:nth-child(4) { left: calc(100% / var(--n) * 3); }
:root .dab .dab-sl-ticks i:nth-child(5) { left: calc(100% / var(--n) * 4); }
:root .dab .dab-sl-ends { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--rs-s8); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .dab-sl-ends span { text-align: center; min-width: 0; overflow-wrap: anywhere; }
:root .dab .dab-sl-ends span:first-child { text-align: left; } :root .dab .dab-sl-ends span:last-child { text-align: right; }
:root .dab .dab-sl-ends span.on { color: var(--rs-tx); font-weight: var(--rs-w-med); }
/* Where each colour goes: one row per role, the colour dots on the right (= mockup) */
:root .dab .dab-rp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--rs-s12); padding: var(--rs-s8) 0; }
:root .dab .dab-rp-t { display: grid; gap: 2px; min-width: 0; }
:root .dab .dab-rp-t b { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root .dab .dab-rp-t span { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .dab-rp-dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 260px; }
:root .dab .dab-rp-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--rs-line-2); cursor: pointer; display: grid; place-items: center; }
:root .dab .dab-rp-dot.is-on { box-shadow: inset 0 0 0 1px var(--rs-line-2), 0 0 0 2px var(--rs-panel), 0 0 0 4px var(--rs-peri-deep); }
:root .dab .dab-rp-dot i { font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); font-style: normal; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.6); }
@media (max-width: 760px) { :root .dab .dab-rp { grid-template-columns: minmax(0, 1fr); } :root .dab .dab-rp-dots { justify-content: flex-start; max-width: none; } }
:root .dab .dab-sl-ticks { z-index: 2; }
:root .dab .dab-sl-ticks i { top: 18px; height: 6px; }
:root .dab .dab-rp-dot i { min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; display: grid; place-items: center; font-size: 10.5px; color: var(--rs-tx); background: var(--rs-panel); text-shadow: none; box-shadow: 0 0 0 1px var(--rs-line-2); }
/* phone: bigger dots, and each one's tap area reaches 44 px without overlapping its neighbours */
@media (max-width: 760px) { :root .dab .dab-rp-dots { gap: 8px; } :root .dab .dab-rp-dot { width: 36px; height: 36px; } :root .dab .dab-rp-dot::after { content: ''; position: absolute; inset: -4px; } }
/* rs-wire:brand: an empty state's drawing always fits its panel: the art box grows to the drawing, the drawing scales
   down to the box (contain), with the panel's padding around it, at every width */
:root .dab .estate > .nu-ill { height: auto !important; min-height: 0; display: grid; place-items: center; padding: var(--rs-s16) var(--rs-s12); box-sizing: border-box; max-width: 100%; }
:root .dab .estate > .nu-ill > .ill { position: relative; width: min(100%, 300px) !important; height: auto !important; max-height: none; margin: 0; transform: none; }
:root .dab .estate > .nu-ill > .ill > svg { display: block; width: 100%; height: auto; max-width: 100%; }
/* rs-wire:brand sweep: a row's value line wraps instead of ending in an ellipsis; the style grids sit inside their panel */
:root .dab .sr-v { white-space: normal; overflow: visible; text-overflow: clip; }
:root .dab .sr-in .sp-grid { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: 100%; }
@media (max-width: 760px) { :root .dab .sr-in .sp-grid--captions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible; padding: 0 !important; gap: var(--rs-s8); } :root .dab .sr-in .sp-grid--captions > * { min-width: 0 !important; width: auto !important; } }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) { align-items: stretch !important; } :root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > :is(.dab-slider, .seg) { align-self: stretch; width: 100% !important; max-width: none; }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .seg { max-width: none !important; }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .seg .seg-opt:first-child { text-align: left !important; justify-content: flex-start !important; padding-left: 0 !important; }
:root .dab .sr-in .editing .profile-rows > .pref:has(> .dab-slider) > .seg .seg-opt:last-child { text-align: right !important; justify-content: flex-end !important; padding-right: 0 !important; }
/* rs-wire:brand clip pass: the new-user tab hints' drawings fit their art box (contain, the box grows to the drawing) */
:root .dab .nu-hint > .nu-ill { height: auto !important; min-height: 0; display: grid; place-items: center; padding: var(--rs-s16) var(--rs-s12); box-sizing: border-box; max-width: 100%; }
:root .dab .nu-hint > .nu-ill > .ill { position: relative; max-width: 100%; margin: 0; }
/* phones: the five tabs fit the width (no sliver of sideways scroll); a field with a long placeholder takes its own line */
@media (max-width: 760px) {
  :root .dab .switch4.dab-tabs { overflow-x: visible; scroll-snap-type: none; }
  :root .dab .switch4.dab-tabs button { flex: 1 1 auto; padding: 0 var(--rs-s8); min-width: 0; }
  :root .dab :has(> :is(#dabImp2, #ruleText, #followInput, #beRefNew)) { flex-wrap: wrap !important; }
  :root .dab :is(#dabImp2, #ruleText, #followInput, #beRefNew) { flex: 1 1 100% !important; width: 100% !important; min-width: 0; }
  :root .dab :has(> :is(#dabImp2, #ruleText, #followInput, #beRefNew)) > :is(button, .rs-btn, .dab-pill, .btn) { flex: 0 0 auto; }
}
:root .dab .nu-hint .ill-rf { max-width: 360px; } :root .dab .nu-hint .ill-rf .ir-fan { height: auto; aspect-ratio: 10 / 3; }
:root .dab .nu-hint .nu-ill > .ill-rf { width: min(80%, 360px) !important; max-width: 360px !important; } :root .dab .nu-hint .ill-rf .ir-fan { aspect-ratio: 5 / 2 !important; height: auto !important; }
/* by-eye pass: Fine-tune's title over a one-line caption (the profile name is already in the line); profile names start at the
   card's left edge; Finishing touches does not repeat its own title, and its "More graphic styles" part is a sub-section */
:root .dab .editing[data-show="all"] .profile-custom > summary .opt { display: none; }
:root .dab .editing[data-show="all"] .profile-custom > summary .profile-custom-hint { display: block; margin-top: 2px; font: var(--rs-w-reg) var(--rs-fs-cap)/1.4 var(--rs-font); color: var(--rs-tx-2); }
:root .dab .sr-in .profile-card > * { align-self: stretch; margin-left: 0; margin-right: 0; }
:root .dab #brandMoreLook .be-finish > .card-head { display: none; }
:root .dab #brandMoreLook .be-finish > .field-note { margin: 0 0 var(--rs-s12); }
:root .dab #brandMoreLook .be-scene { margin-top: var(--rs-s16); padding-top: var(--rs-s12); border-top: 1px solid var(--rs-line); }
:root .dab #brandMoreLook .be-scene > .card-head { margin: 0 0 var(--rs-s4); }
:root .dab #brandMoreLook .be-scene > .card-head .card-title { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
/* rs-wire:brand rhythm: the new-user invite and the three steps are two panels 16px apart, each with the panel radius and 12px inside */
:root .dab .invite > .inv-card { border-radius: var(--rs-r-panel); }
:root .dab .invite > .nu-steps, :root .dab .nu-steps { margin-top: var(--rs-gap) !important; padding: var(--rs-pad) var(--rs-pad) var(--rs-s4) !important; border: 0; border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); }
/* brand import review (js/da-brand.js previewDraft): the logo and photo found, the colour roles, a "Check" on unsure fields */
:root .dab .ir-k { display: inline-flex; flex-direction: column; gap: 2px; }
:root .dab .ir-check { align-self: flex-start; padding: 0 7px; border: 0; border-radius: var(--r-pill); background: var(--dk-b-fff1d6, #FFF1D6); color: var(--dk-t-8a5a00, #8A5A00); font: inherit; font-size: 10.5px; font-weight: 600; line-height: 18px; cursor: pointer; }
:root .dab .ir-check:hover { background: var(--dk-b-ffe3a8, #FFE3A8); }
:root .dab .ir-logo { max-height: 30px; max-width: 160px; object-fit: contain; display: block; }
:root .dab .ir-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; }
:root .dab .ir-use { font-size: 12px; color: var(--s-ink-2); }
:root .dab .ir-role { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 12px; }
:root .dab .ir-role i, :root .dab .ir-all i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(31,31,33,.12); }
:root .dab .ir-all { display: inline-flex; gap: 3px; margin-right: 8px; }
:root .dab .th-logo.has-logo img { height: 3.4cqw; width: auto; display: block; }
@media (max-width: 760px) { :root .dab .imp-review { grid-template-columns: 1fr; } }

/* the imported palette: tap a colour, then a role (js/da-brand.js previewDraft) */
:root .dab .ir-pal { display: flex; flex-wrap: wrap; gap: 6px; }
:root .dab .ir-swb { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border: 1px solid var(--dk-l-1f1f21a12, rgba(31,31,33,.12)); border-radius: var(--r-pill); background: var(--dk-paper, #fff); font: inherit; font-size: 12px; cursor: pointer; }
:root .dab .ir-swb i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(31,31,33,.12); }
:root .dab .ir-swb.on { border-color: var(--rs-peri); background: var(--rs-sel); box-shadow: none; }   /* integration: selection is a tint */
:root .dab .ir-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
:root .dab .ir-hint { display: block; margin-top: 6px; font-size: 12px; }

/* brand import: no logo found -> a drop zone, never a blank (js/da-brand.js previewDraft) */
:root .dab .ir-drop { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1.5px dashed var(--dk-l-1f1f21a30, rgba(31,31,33,.3)); border-radius: 12px; background: var(--dk-b-ffffffa60, rgba(255,255,255,.6)); cursor: pointer; font-size: 12px; }
:root .dab .ir-drop b { font-size: 13px; font-weight: 600; }
:root .dab .ir-drop.over { border-color: var(--s-ink); background: var(--dk-paper, #fff); }
:root .dab .ir-logo-swap { font-size: 12px; margin-left: 6px; }
/* fix/brand-refs: one references flow. The picked reference is a tint; a file dragged over the panel lights the panel */
:root .dab #refTraits .ort-card { cursor: pointer; }
:root .dab #refTraits .ort-card.is-on { background: var(--rs-sel); box-shadow: inset 0 0 0 1px var(--rs-peri); }
:root .dab .srow[data-row="references"].is-drop { background: var(--rs-sel); box-shadow: inset 0 0 0 2px var(--rs-peri-deep), var(--rs-shadow); }
:root .dab #refTraits .ort-empty { margin: var(--rs-s12) 0 0; padding: var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-inset); font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root .dab #refTraits .ort-empty b { color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root .dab #refTraits .ort-card { background: none; box-shadow: none; border-radius: var(--rs-r-inner); padding: var(--rs-s12); border-top: 1px solid var(--rs-line); } :root .dab #refTraits .ort-card.is-on { border-top-color: transparent; }
:root .dab .rl-refs .meas { display: grid; gap: var(--rs-s4); } :root .dab .rl-refs .meas span { display: block; background: none !important; box-shadow: none !important; border-radius: 0; padding: 0; font-size: var(--rs-fs-body); font-weight: var(--rs-w-reg); color: var(--rs-tx); } :root .dab .rl-refs .meas span b { margin-right: var(--rs-s8); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }

/* ================================================================ brand-ui build (2026-10-20): "Studio split" (alt-A) with
   alt-C's summary rows. Every section is a white panel that reads as one summary line (title, value, a small picture of the
   value, Edit) until it is opened; one open per tab; Advanced is one fold at the end of a tab; the live R1 stage is the hero
   of a 560 px sticky preview column. Shell tokens only (css/rs-shell.css). */
@media (min-width: 1280px) { :root .dab .dab-stage { grid-template-columns: minmax(600px, 1fr) 560px; } }
@media (min-width: 761px) and (max-width: 1279px) { :root .dab .dab-stage { grid-template-columns: minmax(0, 1fr) 44%; } }

/* rows: closed = summary line; the whole line is the button */
:root .dab .sr-btn { cursor: pointer; grid-template-columns: minmax(0, 1fr) auto auto; padding: var(--rs-s12) 0; min-height: 64px; }
:root .dab .sr-btn > .sr-t { order: 1; }
:root .dab .sr-btn > .sr-pic { order: 2; display: grid; width: 84px; height: 44px; border-radius: var(--rs-r-sm); box-shadow: inset 0 0 0 1px var(--rs-line); background: var(--rs-inset); }
:root .dab .sr-btn > .sr-e { order: 3; }
:root .dab .sr-btn > .sr-pic.pic-ic, :root .dab .sr-btn > .sr-pic.pic-avs:empty, :root .dab .sr-btn > .sr-pic:empty { display: none; }
:root .dab .sr-btn > .sr-pic.pic-strip { display: flex; }
:root .dab .sr-btn > .sr-pic.pic-type { background: none; box-shadow: none; width: auto; min-width: 84px; font-size: 22px; font-weight: 600; color: var(--rs-tx); justify-items: end; letter-spacing: 0; }
:root .dab .sr-btn > .sr-pic.pic-logo { background: #F3F1EC; }   /* the logo keeps its paper tile in dark mode */
:root .dab .srow.nologo > .sr-btn > .sr-pic.pic-logo { background: none; }
:root .dab .sr-btn > .sr-pic.pic-dens { background: var(--rs-inset); }
:root .dab .sr-btn > .sr-pic.pic-dens i { background: var(--rs-peri); }
:root .dab .sr-e { display: inline-flex; align-items: center; gap: var(--rs-s4); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); padding-left: var(--rs-s4); }
:root .dab .sr-btn .sr-e .chev { display: inline-flex; color: var(--rs-tx-3); transition: transform var(--rs-t); }
:root .dab .srow.open > .sr-btn .sr-e .chev { transform: rotate(180deg); }
:root .dab .srow.open > .sr-btn > .sr-pic { display: none; }
/* no picture showing (an icon row, an empty one, or the row is open): two columns, so Edit / Close end on the same edge as rows with a picture */
:root .dab .sr-btn:has(> .sr-pic:is(.pic-ic, :empty)), :root .dab .srow.open > .sr-btn { grid-template-columns: minmax(0, 1fr) auto; }
:root .dab .sr-btn:hover .sr-e-l { text-decoration: underline; text-underline-offset: 3px; }
:root .dab .sr-btn:focus-visible { outline: none; box-shadow: var(--rs-ring); border-radius: var(--rs-r-inner); }
:root .dab .srow > .sr-body { grid-template-rows: 0fr; }
:root .dab .srow.open > .sr-body { grid-template-rows: 1fr; }
:root .dab .srow > .sr-body > .sr-in { overflow: hidden; min-height: 0; }
:root .dab .srow:not(.open) > .sr-body > .sr-in { visibility: hidden; padding: 0; }
:root .dab .srow.open > .sr-body > .sr-in { visibility: visible; padding: 0 0 var(--rs-pad); }
:root .dab .srow.open.settled > .sr-body > .sr-in { overflow: visible; }
@media (prefers-reduced-motion: no-preference) { :root .dab .srow > .sr-body { transition: grid-template-rows 240ms var(--rs-ease); } }
/* a row holding a shared module (Editing style, Your photo) is a panel like the others; its module's parts sit inside it */
:root .dab .srow:is([data-row="profile"], [data-row="photo"]) { padding: 0 var(--rs-pad); border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); }
:root .dab .srow:is([data-row="profile"], [data-row="photo"]) > .sr-btn { background: none; padding: var(--rs-s12) 0; border-radius: 0; box-shadow: none; }
:root .dab .srow:is([data-row="profile"], [data-row="photo"]).open > .sr-body > .sr-in { padding: 0 0 var(--rs-pad); }
:root .dab .editing[data-show="all"] .profile-wrap > .profile-pick,
:root .dab #creatorCard[data-show="all"] .tn-body > .tn-sec--photo,
:root .dab .editing[data-show="all"] .profile-custom,
:root .dab #creatorCard[data-show="all"] .tn-body > :is(.tn-choices, .tn-style, .tn-lock) { padding: 0; border-radius: 0; background: none; box-shadow: none; }
:root .dab .editing[data-show="all"] .profile-custom, :root .dab #creatorCard[data-show="all"] .tn-body > :is(.tn-choices, .tn-style, .tn-lock) { margin-top: var(--rs-s16); padding-top: var(--rs-s12); border-top: 1px solid var(--rs-line); }

/* Advanced: one fold at the end of a tab (a panel row), its rows inside with the page's 16 px between them */
:root .dab .dab-adv { display: grid; gap: var(--rs-gap); }
:root .dab .dab-adv > summary { list-style: none; display: flex; align-items: center; gap: var(--rs-s4); min-height: 48px; padding: 0 var(--rs-pad); border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); cursor: pointer; font-size: var(--rs-fs-body); color: var(--rs-tx); }
:root .dab .dab-adv > summary::-webkit-details-marker { display: none; }
:root .dab .dab-adv > summary:focus-visible { outline: none; box-shadow: var(--rs-ring); }
:root .dab .dab-adv-t { font-weight: var(--rs-w-med); }
:root .dab .dab-adv-n { color: var(--rs-tx-2); }
:root .dab .dab-adv > summary .chev { margin-left: auto; display: inline-flex; color: var(--rs-tx-3); transition: transform var(--rs-t); }
:root .dab .dab-adv[open] > summary .chev { transform: rotate(180deg); }
:root .dab .dab-adv-in { display: grid; gap: var(--rs-gap); }
/* the header's Advanced switch mirrors the active tab's fold */
:root .dab .dab-advsw { display: inline-flex; align-items: center; gap: var(--rs-s8); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .dab-advsw[hidden] { display: none; }
:root .dab [data-dab-adv-sw] { position: relative; width: 34px; height: 20px; padding: 0; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-raise); box-shadow: inset 0 0 0 1px var(--rs-line-2); cursor: pointer; transition: background var(--rs-t); }
:root .dab [data-dab-adv-sw] i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31,31,33,.2); transition: transform var(--rs-t); }
:root .dab [data-dab-adv-sw][aria-checked="true"] { background: var(--rs-peri-deep); }
:root .dab [data-dab-adv-sw][aria-checked="true"] i { transform: translateX(14px); }
:root .dab [data-dab-adv-sw]:focus-visible { outline: none; box-shadow: var(--rs-ring); }

/* the live stage (js/brand-stage.js): replaces the brand frame on Look and Editing; the name and end card moments show the frame */
:root .dab .dab-r1[hidden] { display: none; }
:root .dab[data-r1="on"]:is([data-tab="look"], [data-tab="editing"]):not([data-r1-moment]) .frame-wrap { display: none; }
:root .dab[data-r1="on"][data-r1-moment]:is([data-tab="look"], [data-tab="editing"]) .dab-r1 .bst-stage { display: none; }
/* reading a site: only the reading frame, none of the stage's controls or notes */
:root .dab[data-r1-moment="import"] .dab-r1 { display: none; }
:root .dab[data-r1="on"]:is([data-tab="look"], [data-tab="editing"]) :is(.dab-view, [data-dab-flip], [data-dab-shuffle].chip-btn) { display: none; }
:root .dab[data-r1="on"][data-tab="editing"] .rl-edit { display: none !important; }
:root .dab .dab-r1 { display: grid; gap: var(--rs-s8); min-width: 0; }
:root .dab .bst-head { display: flex; align-items: center; justify-content: space-between; gap: var(--rs-s8); flex-wrap: wrap; }
:root .dab .bst-seg { display: inline-flex; padding: 3px; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .dab .bst-seg > button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--rs-r-pill); background: none; font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); color: var(--rs-tx-2); cursor: pointer; }
:root .dab .bst-seg > button[aria-checked="true"] { background: var(--dk-paper, #fff); color: var(--rs-tx); box-shadow: 0 1px 2px rgba(31,31,33,.1), 0 0 0 1px var(--rs-line); }
:root .dab .bst-seg > button:focus-visible { outline: none; box-shadow: var(--rs-ring); }
:root .dab .bst-note { margin: 0; flex: 1 1 100%; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .bst-stage { min-width: 0; min-height: 120px; border-radius: var(--rs-r-inner); }
:root .dab .bst-stage .vp-stage { border-radius: var(--rs-r-inner); }
:root .dab .bst-stage .vp-stats { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); opacity: 1; }
:root .dab .bst-showing { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); min-height: 1.4em; }
:root .dab .bst-mini { display: none; }
@media (prefers-reduced-motion: no-preference) {
  :root .dab .bst-stage.bst-pulse .vp-stage { animation: bst-pulse 700ms var(--rs-ease); }
}
@keyframes bst-pulse { 0% { box-shadow: 0 0 0 0 rgba(76,95,146,.0); } 30% { box-shadow: 0 0 0 3px rgba(76,95,146,.45); } 100% { box-shadow: 0 0 0 0 rgba(76,95,146,0); } }

/* Motion types (Editing > Advanced) */
:root .dab .dab-mt { display: grid; gap: 0; margin-top: var(--rs-s8); }
:root .dab .dab-mt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--rs-s4) var(--rs-s12); align-items: center; padding: var(--rs-s12) 0; border-top: 1px solid var(--rs-line); }
:root .dab .dab-mt-l { display: grid; gap: 2px; min-width: 0; }
:root .dab .dab-mt-l b { font-weight: var(--rs-w-med); font-size: var(--rs-fs-body); }
:root .dab .dab-mt-l span { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dab .dab-mt-from { font-style: normal; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .dab .dab-mt-seg > button { height: 30px; padding: 0 10px; font-size: var(--rs-fs-cap); }
:root .dab .dab-mt-seg > button[disabled] { opacity: .4; cursor: not-allowed; }
:root .dab .dab-mt-guard { grid-column: 1 / -1; }
@media (max-width: 1100px) { :root .dab .dab-mt-row { grid-template-columns: 1fr; } :root .dab .dab-mt-seg { display: flex; width: 100%; } :root .dab .dab-mt-seg > button { flex: 1 1 0; } }

/* More looks: an expandable row under the six, in the page's own row style (title, the names it holds, a chevron) */
:root .dab .sp-more { margin-top: var(--rs-s12); border-top: 1px solid var(--rs-line); }
:root .dab .sp-more > summary { list-style: none; display: flex; align-items: baseline; gap: var(--rs-s8); min-height: 44px; padding: var(--rs-s12) 0 var(--rs-s8); cursor: pointer; }
:root .dab .sp-more > summary::-webkit-details-marker { display: none; }
:root .dab .sp-more > summary span:first-child { font-weight: var(--rs-w-med); font-size: var(--rs-fs-body); color: var(--rs-tx); }
:root .dab .sp-more > summary small { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
:root .dab .sp-more > summary .sp-more-e { display: inline-flex; color: var(--rs-tx-3); transition: transform var(--rs-t); align-self: center; }
:root .dab .sp-more[open] > summary .sp-more-e { transform: rotate(180deg); }
:root .dab .sp-more > summary:focus-visible { outline: none; box-shadow: var(--rs-ring); border-radius: var(--rs-r-inner); }
:root .dab .sp-new { font-style: normal; font-size: 11px; font-weight: var(--rs-w-med); color: var(--rs-tx-2); background: var(--rs-inset); border-radius: var(--rs-r-pill); padding: 1px 6px; margin-left: 4px; }
/* six looks on the main grid: three columns in the narrower controls column */
:root .dab .dab-more-styles .sp-grid--look { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px 10px; }

/* phones: the preview sits first; once you scroll into the rows it shrinks to a 112 px mini player with a one-line stats line */
@media (max-width: 760px) {
  :root .dab .dab-mt-seg > button { height: 44px; }
  :root .dab .sr-btn > .sr-pic { width: 64px; height: 36px; }
  :root .dab .sr-e-l { display: none; }
  :root .dab .dab-more-styles .sp-grid--look { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  :root .dab.dab-mini[data-r1="on"] .art-box > :not(.dab-r1) { display: none; }
  :root .dab.dab-mini[data-r1="on"] .dab-r1 { grid-template-columns: 199px minmax(0, 1fr); align-items: center; gap: var(--rs-s8) var(--rs-s12); }
  :root .dab.dab-mini[data-r1="on"] .dab-r1 :is(.bst-head, .bst-showing, .bst-loop, .bst-capnote) { display: none !important; }
  :root .dab.dab-mini[data-r1="on"] .bst-stage { width: 199px; min-height: 0; cursor: pointer; }
  :root .dab.dab-mini[data-r1="on"] .bst-stage :is(.vp-bar, .vp-stats, .vp-legend) { display: none; }
  :root .dab.dab-mini[data-r1="on"] .bst-mini { display: grid; gap: 2px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); min-width: 0; }
  :root .dab.dab-mini[data-r1="on"] .bst-mini b { font-weight: var(--rs-w-med); color: var(--rs-tx); }
}
/* Import from a website: always a field, never folded (it is the first step, not a setting) */
:root .dab .srow[data-row="import"] > .sr-btn { cursor: default; min-height: 0; padding-bottom: var(--rs-s8); }
:root .dab .srow[data-row="import"] > .sr-btn :is(.sr-e, .sr-pic) { display: none; }
:root .dab .srow[data-row="import"] > .sr-body { grid-template-rows: 1fr; }
:root .dab .srow[data-row="import"] > .sr-body > .sr-in { visibility: visible; padding: 0 0 var(--rs-pad); overflow: visible; }
:root .dab .sp-more > summary::after { display: none; }
@media (max-width: 760px) { :root .dab[data-r1="on"]:is([data-tab="look"], [data-tab="editing"]):not([data-bar]) .art-bar { display: none; } }
@media (max-width: 760px) {
  :root .dab[data-r1="on"]:is([data-tab="look"], [data-tab="editing"]) .art-box { position: sticky; top: var(--rs-top-h); z-index: 20; }
  :root .dab.dab-mini[data-r1="on"] .art-box { padding: var(--rs-s8); box-shadow: inset 0 0 0 1px var(--rs-line), 0 8px 20px rgba(31,31,33,.12); }
}
/* the mini player switching must not make the browser re-anchor the scroll (which would flip it back) */
@media (max-width: 760px) { html:has(.dab[data-r1="on"]), :root .dab[data-r1="on"] { overflow-anchor: none; } }
/* a row's body is one column as wide as the row: wide content (the look grid) wraps inside it, never widens it */
:root .dab .srow > .sr-body { grid-template-columns: minmax(0, 1fr); }
:root .dab .srow > .sr-body > .sr-in { min-width: 0; }
@media (max-width: 760px) {
  /* the header tools: one line for the switch and the ring, the saved line under them */
  :root .dab .head-tools { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; justify-items: start; }
  :root .dab .head-tools > .saved { order: 3; grid-column: 1 / -1; }
}
:root .dab .be-look { grid-template-columns: minmax(0, 1fr); }
/* Skip to preview: hidden until it has the keyboard focus */
:root .dab .dab-skip { position: absolute; left: -9999px; top: auto; }
:root .dab .dab-skip:focus-visible { position: static; display: inline-flex; margin: 0 0 var(--rs-s8); height: 44px; padding: 0 var(--rs-s16); border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: var(--rs-ring); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); color: var(--rs-tx); align-items: center; }
:root .dab .art-box:focus-visible { outline: none; box-shadow: var(--rs-ring); }
:root .dab .bst-loop, :root .dab .bst-capnote { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); display: flex; align-items: center; gap: var(--rs-s8); flex-wrap: wrap; }
:root .dab .bst-loop[hidden], :root .dab .bst-capnote[hidden] { display: none; }
:root .dab .bst-all { border: 0; background: none; padding: 0; font: var(--rs-w-med) var(--rs-fs-cap)/1.4 var(--rs-font); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* Amount, Pace, Layout: a segmented control each, its rate under each step */
:root .dab .dab-dial-seg { margin-top: var(--rs-s4); }
:root .dab .dab-dial-seg > button { height: auto; min-height: 44px; flex-direction: column; gap: 2px; padding: 6px 10px; white-space: normal; text-align: center; line-height: 1.25; }
:root .dab .dab-dial-seg > button small { font-size: 11px; font-weight: var(--rs-w-reg); color: var(--rs-tx-2); }
:root .dab .dab-dial-seg > button:focus-visible { outline: none; box-shadow: var(--rs-ring); }
:root .dab .dab-dial-line { margin: var(--rs-s8) 0 0; }
:root .dab .pref.dab-moved { display: none !important; }
/* phones: the preview is first on screen and after the controls in the reading order */
@media (max-width: 760px) {
  :root .dab .dab-stage { display: flex; flex-direction: column; }
  :root .dab .dab-stage > .art-box { order: -1; }
}
/* phones: every target at least 44 px (SPEC §5) */
@media (max-width: 760px) {
  :root .dab :is(.seg-opt, .switch4.dab-tabs button, .bst-seg > button, .rs-seg > button, .dab-mt-seg > button) { min-height: 44px; }
  :root .dab .switch4.dab-tabs button { height: 44px; }
  :root .dab [data-dab-adv-sw] { position: relative; }
  :root .dab [data-dab-adv-sw]::before { content: ''; position: absolute; inset: -12px -6px; }
  :root .dab .advsw-pad, :root .dab .dab-advsw { min-height: 44px; }
  :root .dab .sr-in :is(a, .link, .textbtn, .be-capfine-on, .dab-textbtn, .bst-all), :root .dab .bst-all { min-height: 44px; display: inline-flex; align-items: center; }
  :root .dab .bst-stage .vp-play { width: 44px; height: 44px; }
  :root .dab .ring-btn { min-height: 44px; }
}
@media (max-width: 760px) {
  :root .dab .sr-in :is(.dab-pill, .btn, .input, select, summary, .seg-opt, .rs-in, .rs-btn) { min-height: 44px; }
  :root .dab .sr-in .seg-opt { height: auto; min-height: 44px !important; }
}
@media (max-width: 760px) {
  :root .dab .dab-stage > .art-box { align-self: stretch; width: auto; }
  :root .dab .sr-btn > .sr-pic.pic-type { min-width: 0; width: auto; font-size: 18px; }
}
:root .dab .sr-in img.profile-still { align-self: start; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 760px) {
  :root .dab .dab-stage { gap: var(--rs-gap); }
  :root .dab .dab-stage > .dab-side { margin-top: 0; }
  :root .dab .dab-stage > .art-box { margin-top: 0; margin-bottom: 0; }
}
:root .dab .sr-btn > .sr-pic.pic-type { overflow: visible; white-space: nowrap; padding: 0 2px; }

/* the preview's play button is white in both themes: its icon stays dark */
:root .dab .bst-stage .vp-play { color: #1F1F21; }