/* ============================================================================
   Reaction Room · Bento skin — FOUNDATION
   Apple-keynote feature grid + iOS/macOS widget language on the Network Media
   palette. lib/skin.js links this file, then the page's own part(s), at the END
   of <head> on every creator page (after the page's own <style> and after
   /reactor/studio.css). Nothing here edits page markup or JS.

   ---------------------------------------------------------------------------
   SPECIFICITY POLICY (page partials rely on this)
   - Every rule starts with html[data-rr-page] (0,1,1). Most foundation rules are
     "html[data-rr-page] .class" = (0,2,1); a partial that writes
     html[data-rr-page="<shell>"] .class (also (0,2,1)) wins because partials are
     imported after this file.
   - Where a foundation rule had to beat a heavier page rule, the rule notes the
     page selector it answers. Partials that restyle those elements must match
     or exceed the specificity listed next to that rule.
   - !important only where a page paints from an inline style="" attribute
     (section 5, inline call-to-action links) — each one says why.
   - admin.html / activity.html stay classic: they must not get data-rr-page or
     the skin <link>.

   ---------------------------------------------------------------------------
   TOKEN MAPPING — every custom property the skinned shells read.
   Declared on html[data-rr-page] (beats each page's :root) and again on
   html[data-rr-page] body.studio (record.html's studio.css re-declares its own
   set on body.studio, which would otherwise shadow html).

   token              classic (board/room…)     studio (body.studio)  → bento
   --page             #0b0b0c                   #0e1014               #000          keynote stage
   --surface          #141416                   #171a20               #1C1C1E       tile / widget
   --surface-2        #1b1b1e                   #1d2129               #262629       well inside a tile
   --raised           #232327                   #252a34               #303034       control fill, menu, toast
   --panel            —                         #1d2129               #1C1C1E       (studio only)
   --surface-hover    —                         #252b35 (fallback)    #303034       (studio only)
   --ink              #f2f1ee                   #f2f4f8               #F5F5F7
   --dim              #9d9c97                   #b0b7c5               #AEAEB2       7.7:1 on tile · 5.9:1 on raised
   --faint            #6a6964 / #8f8e89         #9099aa               #98989D       5.9:1 on tile · 4.6:1 on raised
   --muted            #8a8984                   #9099aa               #A1A1A6       small caps labels
   --hairline         #2a2a2e                   #303642               rgba(255,255,255,.10)
   --hairline-soft    #212125                   #282d37               rgba(255,255,255,.065)
   --accent           #3987e5 (stock blue)      #5a8ff5               #A3EEF6       NM ice cyan (fills, rings, progress)
   --accent-soft      #86b6ef                   #a4c2ff               #A3EEF6       cyan as text/outline on dark (13:1)
   --accent-dim       rgba(57,135,229,.16)      #20334f               rgba(163,238,246,.14)  selected wash
   --note             #f2a33c                   —                     #F5B942       amber: notes / in progress
   --note-soft        rgba(242,163,60,.22)      —                     rgba(245,185,66,.20)
   --resolved         #5fbf7a                   —                     #43D9A3       mint: done / resolved
   --resolved-soft    rgba(95,191,122,.18)      —                     rgba(67,217,163,.16)
   --ok               #5fbf7a                   —                     #43D9A3
   --danger           #e5544b                   —                     #FF4D6D       NM red-pink, text-safe tint (5.3:1 on tile)
   --rec              #e5544b                   #ed675e               #E3143D       NM red-pink fill that holds white text (4.7:1)
   --radius           10px / 14px               14px                  22px          tiles
   --radius-sm        7px / 9px                 9px                   12px          controls
   --font             -apple-system…Segoe UI…   (inherits)            Apple system stack (SF on Apple, then Segoe/Roboto)
   --mono             ui-monospace…             (inherits)            ui-monospace, "SF Mono"…
   --shadow           0 18px 48px rgba(0,0,0,.55)                     soft keynote drop (lifts one thing)
   Untouched: --topbar-h, --sidebar-w, --ease, --deck-*, --cv-aspect, --vid-aspect, --w/--h.
   Text ON a cyan fill is always navy #01294F (11.3:1), never white.

   ---------------------------------------------------------------------------
   UTILITIES for the page partials (all on html[data-rr-page], inherit everywhere,
   including the review-mode shadow root):
   --bento-stage #000 · --bento-tile #1C1C1E · --bento-tile-2 #161618 ·
   --bento-well #262629 · --bento-well-2 #303034 · --bento-well-3 #3A3A3E ·
   --bento-thumb #48484D (segmented thumb) · --bento-track-off #39393D (switch off)
   --bento-hairline rgba(255,255,255,.08) · --bento-hairline-strong rgba(255,255,255,.14)
   --bento-edge (inset tile edge + top sheen, a box-shadow value)
   --bento-text #F5F5F7 · --bento-text-soft #C7C7CC · --bento-text-2 #AEAEB2 · --bento-text-3 #98989D
   --bento-cyan #A3EEF6 · --bento-cyan-hover #C8F6FA · --bento-cyan-soft rgba(.14) · --bento-cyan-line rgba(.35)
   --bento-navy #01294F · --bento-periwinkle #7288F6 · --bento-violet #9D7BFF · --bento-night #160F4E
   --bento-red #FF1F4B (dots, glows, rings) · --bento-red-fill #E3143D (under white text) ·
   --bento-red-ink #FF4D6D (red text on dark) · --bento-red-soft rgba(255,31,75,.16)
   --bento-amber #F5B942 · --bento-amber-soft · --bento-mint #43D9A3 · --bento-mint-soft
   --bento-grad (keynote cyan→periwinkle→violet, 135deg) · --bento-grad-soft (90deg bar fill)
   --bento-wash (violet/night stage light, a background-image value)
   --bento-radius 22px · --bento-radius-lg 28px · --bento-radius-sm 12px · --bento-radius-xs 8px · --bento-pill 999px
   --bento-gap 16px · --bento-gap-sm 12px · --bento-gap-lg 20px
   --bento-shadow · --bento-shadow-lift (periwinkle hover lift) · --bento-glow-cyan · --bento-glow-red
   --bento-focus #A3EEF6 · --bento-focus-halo (box-shadow for fields) · --bento-focus-offset 3px
   --bento-ctl-sm 34 (44 under a finger) · -md 44 · -lg 48 · -bar 38 · --bento-radius-md 18 · --bento-tile-pad 16 ·
   --bento-bar-h 60 · --bento-select-fill / -ring (the ONE selected state) · --bento-text-disabled #9A9AA0 ·
   --bento-red-fill-hover #C80F35 · --bento-switch-w/h 44×26  (section 5 explains the control system)
   --bento-ease · --bento-spring
   Gradient numerals recipe:  background: var(--bento-grad); -webkit-background-clip: text;
                              background-clip: text; color: transparent;
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. Utilities + token overrides
   ------------------------------------------------------------------------- */
html[data-rr-page] {
  --bento-stage: #000;
  --bento-tile: #1C1C1E;
  --bento-tile-2: #161618;
  --bento-well: #262629;
  --bento-well-2: #303034;
  --bento-well-3: #3A3A3E;
  --bento-thumb: #48484D;
  --bento-track-off: #39393D;
  --bento-hairline: rgba(255, 255, 255, .08);
  --bento-hairline-strong: rgba(255, 255, 255, .14);
  --bento-edge: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .045);

  --bento-text: #F5F5F7;
  --bento-text-soft: #C7C7CC;
  --bento-text-2: #AEAEB2;
  --bento-text-3: #98989D;

  --bento-cyan: #A3EEF6;
  --bento-cyan-hover: #C8F6FA;
  --bento-cyan-soft: rgba(163, 238, 246, .14);
  --bento-cyan-line: rgba(163, 238, 246, .35);
  --bento-navy: #01294F;
  --bento-periwinkle: #7288F6;
  --bento-violet: #9D7BFF;
  --bento-night: #160F4E;
  --bento-red: #FF1F4B;
  --bento-red-fill: #E3143D;
  --bento-red-ink: #FF4D6D;
  --bento-red-soft: rgba(255, 31, 75, .16);
  --bento-amber: #F5B942;
  --bento-amber-soft: rgba(245, 185, 66, .18);
  --bento-mint: #43D9A3;
  --bento-mint-soft: rgba(67, 217, 163, .16);
  --speech: var(--bento-mint);                 /* rr7 timeline: where the creator speaks (speech-lane.js), the same mint as the Originality card's "You" */

  --bento-grad: linear-gradient(135deg, #A3EEF6, #7288F6 55%, #9D7BFF);
  --bento-grad-soft: linear-gradient(90deg, #A3EEF6, #7288F6);
  --bento-wash: radial-gradient(60% 55% at 30% 0%, rgba(39, 2, 134, .5), rgba(22, 15, 78, .22) 55%, transparent 78%),
                radial-gradient(45% 40% at 90% 0%, rgba(4, 60, 140, .38), transparent 72%);

  --bento-radius: 22px;
  --bento-radius-lg: 28px;
  --bento-radius-md: 18px;                /* popovers, menus, toasts, the account panel */
  --bento-radius-sm: 12px;
  --bento-radius-xs: 8px;
  --bento-pill: 999px;
  --bento-gap: 16px;
  --bento-gap-sm: 12px;
  --bento-gap-lg: 20px;

  /* Controls (section 5). One height scale for every button, tool and tab on
     every creator page: sm for bars and dense toolbars, md the default, lg the
     ONE main call to action of a screen. Where the pointer is a finger sm is 44
     too (below), so a 34px pill never has a small target. */
  --bento-ctl-sm: 34px;
  --bento-ctl-md: 44px;
  --bento-ctl-lg: 48px;
  --bento-ctl-bar: 38px;                  /* the top-bar Record launcher: the one cyan pill in a bar */
  --bento-tile-pad: 16px;                 /* padding inside a tile (dialogs use 24) */
  --bento-bar-h: 60px;                    /* every creator page's top bar */
  /* States. Selected is one recipe everywhere; disabled is a colour, never an opacity. */
  --bento-select-fill: var(--bento-cyan-soft);
  --bento-select-ring: inset 0 0 0 2px var(--bento-cyan);
  --bento-text-disabled: #9A9AA0;         /* 5.4:1 on --bento-well, 4.9:1 on --bento-well-2 */
  --bento-red-fill-hover: #C80F35;        /* danger / stop fill, hovered */
  --bento-focus-offset: 3px;

  --bento-shadow: 0 30px 64px -28px rgba(0, 0, 0, .9), 0 10px 24px -14px rgba(0, 0, 0, .6);
  --bento-shadow-lift: 0 24px 50px -24px rgba(114, 136, 246, .45);
  --bento-glow-cyan: 0 10px 28px -10px rgba(163, 238, 246, .55);
  --bento-glow-red: 0 0 0 3px rgba(255, 31, 75, .22), 0 0 12px rgba(255, 31, 75, .75);
  --bento-focus: #A3EEF6;
  --bento-focus-halo: 0 0 0 3px rgba(163, 238, 246, .28);
  --bento-ease: cubic-bezier(.16, 1, .3, 1);
  --bento-spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: dark;
  accent-color: #A3EEF6;              /* native checkbox / radio / range / progress */
  scrollbar-color: #4A4A4F transparent; /* mid grey so it also reads on the studio's white screen light */
}
@media (pointer: coarse) {
  html[data-rr-page] { --bento-ctl-sm: 44px; }   /* a finger needs 44; a mouse is fine at 34 */
}
@media (max-width: 640px) {                       /* phone width counts too (the room's transport keeps its own, tuned touch rules) */
  html[data-rr-page]:not([data-rr-page="room"]) { --bento-ctl-sm: 44px; }
}

/* Touch feedback, on every page. A tap flashes a soft white (subtle on the dark skin, no script; inherited, so the
   studio's own `transparent` on its buttons still wins), and controls never wait for a second tap to zoom.
   touch-action goes per control, not on html (it is not inherited, and a scroller in between cuts off an ancestor's),
   and at zero specificity (:where), so every authored `touch-action: none` (the draw canvas, timelines, scrubs, the
   arrange grab layers) keeps winning: the effective action is the intersection anyway, and none stays none. */
html[data-rr-page] { -webkit-tap-highlight-color: rgba(255, 255, 255, .12); }
:where(html[data-rr-page]) :where(button, a, [role="button"], summary, label, select) { touch-action: manipulation; }
/* A double-tap on a picture never zooms the page: where the desktop double-click does something it is an action (arrange, the layout editor, captions); on the room player it is two taps. `manipulation` keeps scroll and pinch; zero specificity, so every authored none/pan-y still wins. */
:where(html[data-rr-page]) :where(video, canvas, .stage) { touch-action: manipulation; }

/* The page tokens. body.studio (record) re-declares them in studio.css, so the
   same block is repeated there. (0,1,1) beats :root; (0,2,2) beats body.studio. */
html[data-rr-page],
html[data-rr-page] body.studio {
  --page: #000;
  --surface: #1C1C1E;
  --surface-2: #262629;
  --raised: #303034;
  --panel: #1C1C1E;
  --surface-hover: #303034;
  --ink: #F5F5F7;
  --dim: #AEAEB2;
  --faint: #98989D;
  --muted: #A1A1A6;
  --hairline: rgba(255, 255, 255, .10);
  --hairline-soft: rgba(255, 255, 255, .065);
  --accent: #A3EEF6;
  --accent-soft: #A3EEF6;
  --accent-dim: rgba(163, 238, 246, .14);
  --note: #F5B942;
  --note-soft: rgba(245, 185, 66, .20);
  --resolved: #43D9A3;
  --resolved-soft: rgba(67, 217, 163, .16);
  --ok: #43D9A3;
  --danger: #FF4D6D;
  --rec: #E3143D;
  --radius: 22px;
  --radius-sm: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 30px 64px -28px rgba(0, 0, 0, .9), 0 10px 24px -14px rgba(0, 0, 0, .6);
}

/* Review mode (functions/_middleware.js injects /reactor/review-mode.js on
   creator boards) draws inside a shadow root with white text on var(--accent).
   Tokens are the only way in: give its host an NM accent that holds white text
   (royal #2F4BB5, 7.5:1) and keep cyan for its soft/outline tone. */
html[data-rr-page] #nmrr-review {
  --accent: #2F4BB5;
  --accent-soft: #A3EEF6;
}


/* ---------------------------------------------------------------------------
   2. Base type, links, selection, focus
   ------------------------------------------------------------------------- */
html[data-rr-page] body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

/* Large headings: keynote tracking. Page h1s are never uppercase; topbar titles
   stay near neutral. (body.studio .studio-stage-head h1 at (0,2,2) keeps its own.) */
html[data-rr-page] h1 { letter-spacing: -.028em; }
html[data-rr-page] .topbar h1 { letter-spacing: -.012em; }

/* Links inside running text: cyan with a soft underline. Structural links
   (cards, buttons, anything with a class) are left alone. (0,1,2) */
html[data-rr-page] :where(p, li, dd, small, .note, .lede, .hint, .detail, .status, .meta-line) a:where(:not([class])) {
  color: var(--bento-cyan);
  text-decoration: underline;
  text-decoration-color: var(--bento-cyan-line);
  text-underline-offset: 3px;
}
html[data-rr-page] :where(p, li, dd, small, .note, .lede, .hint, .detail, .status, .meta-line) a:where(:not([class])):hover {
  text-decoration-color: currentColor;
}

html[data-rr-page] ::selection {            /* room.html: ::selection{background:var(--accent);color:#fff} */
  background: var(--bento-cyan);
  color: var(--bento-navy);
}

/* THE keyboard ring: 2px cyan, 3px off the control, following the control's own
   radius. Deliberately low (0,1,0) so the few page-specific treatments that must
   differ (outline:0 + box-shadow on canvases, :has() rings on labels, negative
   offsets inside clipped previews or hugging a segmented thumb) still win. The
   pages' own inline `:focus-visible` rules no longer set a radius, so a ring
   never snaps a pill or a disc to square corners. */
:where(html[data-rr-page]) :focus-visible {
  outline: 2px solid var(--bento-focus);
  outline-offset: var(--bento-focus-offset);
}

/* Scrollbars: thin dark rails for engines that ignore scrollbar-color. */
html[data-rr-page] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-rr-page] ::-webkit-scrollbar-track { background: transparent; }
html[data-rr-page] ::-webkit-scrollbar-thumb {
  background: #4A4A4F;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
html[data-rr-page] ::-webkit-scrollbar-thumb:hover { background-color: #636366; }

html[data-rr-page] kbd {
  font: 600 10.5px/1.4 var(--mono);
  padding: 1px 5px;
  border: 1px solid var(--bento-hairline-strong);
  border-bottom-width: 1px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: var(--bento-text-soft);
}


/* ---------------------------------------------------------------------------
   3. Brand: the NM logo replaces the blue play-square.
   Markup today:  .brand > span.dot > svg  +  (span | text node) "Network Media · <Room>"
   The logo is a background image on .dot; the words stay in the DOM for screen
   readers (clipped, not removed) and a short product label is drawn after the
   logo with an empty alt so it is not read twice.
   ------------------------------------------------------------------------- */
html[data-rr-page] .brand {
  gap: 12px;
  border-radius: 8px;                        /* focus ring shape when it is a link */
  text-decoration: none;
}
html[data-rr-page] .brand > .dot {           /* (0,3,1) answers body.studio .brand .dot (0,3,1, earlier) */
  flex: 0 0 auto;
  width: 128px;                              /* nm-logo.svg is 482.23 × 67.66 → 7.127 : 1 */
  height: 18px;
  border-radius: 0;
  background: url("nm-logo.svg") left center / contain no-repeat;
  box-shadow: none;
  order: -2;
}
html[data-rr-page] .brand > .dot > svg { display: none; }
html[data-rr-page] .brand:hover > .dot { transform: none; }   /* room.html scales the old square on hover */
html[data-rr-page] a.brand:hover { opacity: .86; }
html[data-rr-page] a.brand { min-height: 44px; }   /* the logo is shorter than the old 18–27px square; keep the link's hit area */

/* The words: a span in topbars (board, room, record, job, layout, upload)… */
html[data-rr-page] .brand > span:not(.dot) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* …or a bare text node in the entry pages' p.brand (signin, beta, gate,
   landing, 404): pushed past the clip edge, still read by screen readers. */
html[data-rr-page] p.brand {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100vw;
  contain: inline-size;                      /* the pushed-out words must not widen the page's grid track */
}

/* Product label after the logo: keynote lockup "[logo] | Reaction Room". */
html[data-rr-page] .brand::after {
  content: "Reaction Room";
  content: "Reaction Room" / "";
  order: -1;
  flex: 0 0 auto;
  display: block;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  font: 600 15px/18px var(--font);
  letter-spacing: -.012em;
  text-transform: none;
  text-indent: 0;
  color: var(--ink);
  white-space: nowrap;
}
/* rr7 nav: every shell says the product's name now (the "Review Room" override for the board, the room, the gate, the landing and the 404
   is gone). The creator pages draw their own lockup instead (§16: the mark and the area title), so this label is the entry pages'. */
html[data-rr-page="board"] .brand::after { content: none; }
html[data-rr-page="board"] .topbar > .brand + .title {
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -.012em;
}
/* Studio screen light turns the topbar white: switch to the navy logo. */
html[data-rr-page] body.studio.screen-light .topbar .brand > .dot { background-image: url("nm-logo-navy.svg"); }

@media (max-width: 640px) {
  html[data-rr-page] .brand > .dot { width: 114px; height: 16px; }
  html[data-rr-page] .topbar .brand::after { display: none; }   /* pages already drop the words here */
}

/* camera.html (the phone) has its own strip: .top > span.dot + words. */
html[data-rr-page="camera"] .top > .dot {
  width: 19px;
  height: 18px;
  border-radius: 0;
  background: url("nm-mark.svg") center / contain no-repeat;
}


/* ---------------------------------------------------------------------------
   4. Top bar (board, room, record, job, layout, upload) — ONE bar, ONE set of
   controls. The bar is --bento-bar-h (60) tall on every creator page (a bar that
   wraps on a phone grows, never shrinks); its controls are sm (34, 44 under a
   finger) text pills, plus the Record launcher (38), the one cyan pill.
   Padding, sticky behaviour and wrapping stay the page's own.
   ------------------------------------------------------------------------- */
html[data-rr-page] .topbar {                 /* (0,2,1) answers body.studio .topbar (0,2,1, earlier); */
  min-height: var(--bento-bar-h);            /* the page's own height:52px is now a floor, the bar is 60 */
  background-color: var(--page);             /* body.studio.screen-light .topbar (0,3,1) keeps its white */
  border-bottom-color: var(--hairline-soft);
}
/* Text pill: a link (board .toplink, record/upload .alt, job/layout nav) or a ghost
   button in a bar. Soft ink, no fill, a wash on hover, its glyph in currentColor.
   (The launcher below is an ID rule, so it outranks this without a :not().) */
html[data-rr-page] .topbar :is(.toplink:not(.rec), .alt, .btn.ghost) {
  display: inline-flex;                      /* upload's 44px-tall .alt otherwise pins its words to the top */
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: var(--bento-ctl-sm);
  padding: 0 var(--ctl-px, 12px);
  border: 1px solid transparent;
  border-radius: var(--bento-pill);
  background-color: transparent;
  color: color-mix(in srgb, var(--ink) 80%, transparent);   /* a token, so the studio's white screen light re-inks it */
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
}
html[data-rr-page] .topbar :is(.toplink:not(.rec), .alt, .btn.ghost):hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--ink) 9%, transparent);
  border-color: transparent;
  color: var(--ink);
}

/* The account menu (reactor/account-controls.js mounts a .account-controls <details> in
   <div data-account-controls> on the board, the studio and the room): its summary reads "Account"
   (person glyph + word) and opens a panel (who is signed in, verify, admin, switch, sign out). The
   module paints itself from its own <style> (#20232c box, #626675 border, 10px corners, system-ui,
   navy panel, 3px #b4c9ff ring) at (0,1,0)–(0,2,1). Here the summary becomes a 34px gradient disc in
   a 44px target at every width, and the panel a bento tile (--bento-radius-md) with well rows, right-aligned
   to the bar's edge. The word "Account" stays the summary's text (its accessible name) at font-size
   0; the module's title is the tooltip. The module's layout, [hidden] toggles and behaviour stay its own. */
html[data-rr-page] .topbar > .account-controls {
  flex: 0 0 auto;
  margin-inline-start: 0;                         /* module: margin-inline-start:auto, which would share the ≤640 free space with the logo */
  margin-right: -5px;                             /* as #accountLink: the 34px disc ends on the column edge */
  font-family: var(--font);
  color: var(--bento-text);
}
html[data-rr-page] .topbar > .account-controls summary {
  position: relative;
  isolation: isolate;
  justify-content: center;
  gap: 0;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bento-navy);
  font-size: 0;                                   /* the word stays the accessible name; the disc shows the glyph only */
  line-height: 0;
}
html[data-rr-page] .topbar > .account-controls summary::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(140deg, #DAFCFF, #A3EEF6 40%, #7288F6);
  box-shadow: 0 0 0 2px var(--page), 0 0 0 3px rgba(163, 238, 246, .35);
}
html[data-rr-page] .topbar > .account-controls summary > svg { width: 17px; height: 17px; }
html[data-rr-page] .topbar > .account-controls summary:hover::before,
html[data-rr-page] .topbar > .account-controls details[open] > summary::before {
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px var(--page), 0 0 0 3px rgba(163, 238, 246, .6);
}
html[data-rr-page] .topbar > .account-controls summary:focus-visible {   /* module: .account-controls :focus-visible (0,2,0) */
  outline: 2px solid var(--bento-focus);
  outline-offset: 1px;                            /* hugs the 34px disc inside its 44px target */
}
html[data-rr-page] .topbar > .account-controls .ac-panel {
  right: 5px;                                     /* the column edge, not the 44px target's */
  top: calc(100% + 10px);                         /* clear of the bar's hairline (the target ends 8px above it) */
  padding: 16px;
  border-color: var(--bento-hairline-strong);
  border-radius: var(--bento-radius-md);
  background-color: var(--bento-tile);
  box-shadow: var(--bento-edge), var(--bento-shadow);
  font: 400 13px/1.4 var(--font);
}
/* M02 (round 4): `right:5px` above is anchored to the disc's OWN 44px box, not
   the bar's edge — correct only once the disc is actually last in the row,
   which the reading-flow reorder below only manages in Chromium. Elsewhere
   (Safari, Firefox) the disc still sits before the Record pill in DOM order,
   so its box — and this panel — land well short of the right edge; the
   280px-wide panel then opens mostly off the left of a phone screen. Below
   this width, anchor the panel to the viewport instead of the disc, so it
   opens in the same place in every engine regardless of that reorder. */
@media (max-width: 640px) {
  html[data-rr-page] .topbar > .account-controls .ac-panel {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    top: calc(var(--bento-bar-h) + 10px);
    width: auto;
  }
}
html[data-rr-page] .topbar > .account-controls .ac-person {
  margin-bottom: 8px;
  font: 600 14px/1.35 var(--font);
  letter-spacing: -.005em;
  color: var(--bento-text);
}
html[data-rr-page] .topbar > .account-controls .ac-panel :is(button, a) {
  min-height: 44px;
  margin-top: 8px;
  padding: 0 16px;
  border-color: transparent;
  border-radius: var(--bento-pill);
  background-color: var(--bento-well-2);
  color: var(--bento-text);
  font: 600 14px/1.25 var(--font);
  letter-spacing: -.005em;
  box-shadow: none;
}
html[data-rr-page] .topbar > .account-controls .ac-panel :is(button, a):hover:not(:disabled) {
  background-color: var(--bento-well-3);
  border-color: transparent;
  color: var(--bento-text);
}
html[data-rr-page] .topbar > .account-controls .ac-panel :is(button, a):focus-visible {
  outline: 2px solid var(--bento-focus);
  outline-offset: var(--bento-focus-offset);
}
html[data-rr-page] .topbar > .account-controls .ac-status {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bento-text-2);
}
@media (forced-colors: active) {                  /* the disc is a background: give the target its edge back */
  html[data-rr-page] .topbar > .account-controls summary { border: 1px solid CanvasText; }
}

/* The Record launcher: ONE recipe on every page that offers "record" from its
   bar — board #recLink, room #btnRecord, job and layout #recordLink. A cyan
   pill (--bento-ctl-bar, 38) with the red record dot and its glow at rest; the
   44px hit area is the ::after. Its words differ by page, its look never does. */
html[data-rr-page] .topbar :is(#recLink, #btnRecord, #recordLink) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  width: auto;
  height: var(--bento-ctl-bar);
  min-height: var(--bento-ctl-bar);
  margin: 0;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: var(--bento-pill);
  background: var(--bento-cyan);
  color: var(--bento-navy);
  font: 600 14px/1 var(--font);
  letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(163, 238, 246, .55);
}
html[data-rr-page] .topbar :is(#recLink, #btnRecord, #recordLink)::after {   /* 44px hit area around the 38px pill */
  content: "";
  position: absolute;
  inset: -3px 0;
}
html[data-rr-page] .topbar :is(#recLink, #btnRecord, #recordLink):hover {
  background: var(--bento-cyan-hover);
  color: var(--bento-navy);
  box-shadow: 0 12px 30px -8px rgba(163, 238, 246, .7);
}
html[data-rr-page] .topbar :is(#btnRecord, #recordLink)::before,
html[data-rr-page] .topbar #recLink > i {        /* the dot: an <i> on the board, a ::before elsewhere */
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bento-red);
  box-shadow: 0 0 0 3px rgba(1, 41, 79, .9);
}
html[data-rr-page] .topbar :is(#recLink, #btnRecord, #recordLink)[hidden] { display: none; }   /* the page hides it until it applies (a viewer can't record) */
html[data-rr-page] .topbar :is(#btnRecord, #recordLink) > svg { display: none; }
@media (max-width: 640px) {                      /* a phone: 36px, and the dot steps down with it */
  html[data-rr-page] .topbar :is(#recLink, #btnRecord, #recordLink) { height: 36px; min-height: 36px; padding: 0 12px 0 10px; gap: 8px; font-size: 13px; }
  html[data-rr-page] .topbar :is(#recLink, #btnRecord, #recordLink)::after { inset: -4px 0; }
  html[data-rr-page] .topbar :is(#btnRecord, #recordLink)::before,
  html[data-rr-page] .topbar #recLink > i { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] .topbar :is(#recLink, #btnRecord, #recordLink) { transition: transform .15s var(--bento-ease), box-shadow .15s ease, background-color .15s ease; }
  html.bento-motion[data-rr-page] .topbar :is(#recLink, #btnRecord, #recordLink):hover { transform: translateY(-1px); }
}


/* ---------------------------------------------------------------------------
   5. Controls. ONE recipe per kind of control, in three sizes, on every page.
   ".btn" means different things per page, so the colours are assigned by meaning:
     secondary  bare .btn on board / room / record, signin .secondary  (well fill)
     primary    .btn.primary everywhere; bare .btn on job / layout / upload / camera
                (their default IS the accent fill); camera's pairing form button;
                the entry pages' submit <button>/.action                (cyan, navy ink)
     ghost      .btn.ghost everywhere (outline; text-only inside a bar)
     danger     .btn.danger; danger-outline for the quiet destructive ones   (red)
     complete   .btn.complete (board, room)                                  (mint)
     icon       .btn.icon: a circle of the control height
   Sizes: --ctl-h picks the height for everything below it. md (44) is the
   default; the bars and dense toolbars are sm (34, 44 under a finger); the one
   main call to action of a screen is lg (48) and its page part says so with
   `--ctl-h: var(--bento-ctl-lg)`. Padding is 0 18 (md), 0 12 (sm), 0 24 (lg).
   States, the same on every control: hover (fill steps up one well), active
   (primary and danger dip to .98), selected ([aria-pressed=true] / .on: cyan-soft
   fill, 2px inset cyan ring, cyan text), disabled (well fill, --bento-text-disabled,
   not-allowed — never opacity), focus (section 2: one 2px cyan ring, offset 3).
   Page parts add only what is specific to one control (its glyph, its width);
   they take their height, radius and fills from these tokens and never repeat a
   value. No !important.
   ------------------------------------------------------------------------- */
html[data-rr-page] :is(.topbar, .top-actions, .controls) {
  --ctl-h: var(--bento-ctl-sm);
  --ctl-px: 12px;
}
html[data-rr-page] .btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: auto;
  min-height: var(--ctl-h, var(--bento-ctl-md));
  padding: 0 var(--ctl-px, 18px);
  border-radius: var(--bento-pill);
  font-size: var(--ctl-fs, 13.5px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
}
html[data-rr-page] .btn.icon {
  --ctl-px: 0px;                                 /* the bar's text pill reads it too, so an icon is never squeezed by side padding */
  width: var(--ctl-h, var(--bento-ctl-md));
  padding: 0;
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-rr-page] .btn,
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="beta"], [data-rr-page="auth"]) :is(button, .action),
  html[data-rr-page="camera"] form button {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease, transform .18s var(--bento-spring);
  }
}

/* neutral — (0,2,1) */
html:is([data-rr-page="board"], [data-rr-page="room"], [data-rr-page="record"]) .btn:where(:not(.primary, .ghost, .complete, .danger)),
html[data-rr-page="signin"] .secondary {
  background-color: var(--bento-well-2);
  border-color: transparent;
  color: var(--ink);
}
html:is([data-rr-page="board"], [data-rr-page="room"], [data-rr-page="record"]) .btn:where(:not(.primary, .ghost, .complete, .danger)):hover:not(:disabled, [aria-disabled="true"]),
html[data-rr-page="signin"] .secondary:hover:not(:disabled, [aria-disabled="true"]) {
  background-color: var(--bento-well-3);
  border-color: transparent;
}

/* primary — cyan fill, navy text. (0,3,1); entry pages' button:hover is (0,1,1). */
html[data-rr-page] .btn.primary,
html:is([data-rr-page="job"], [data-rr-page="layout"], [data-rr-page="upload"], [data-rr-page="camera"]) .btn:not(.ghost),
html[data-rr-page="camera"] form button,
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="beta"], [data-rr-page="auth"]) :is(button, .action):not(.google, .secondary, .linkbutton) {
  background-color: var(--bento-cyan);
  border-color: var(--bento-cyan);
  color: var(--bento-navy);
  font-weight: 600;
  border-radius: var(--bento-pill);
}
html[data-rr-page] .btn.primary:hover:not(:disabled, [aria-disabled="true"]),
html:is([data-rr-page="job"], [data-rr-page="layout"], [data-rr-page="upload"], [data-rr-page="camera"]) .btn:not(.ghost):hover:not(:disabled, [aria-disabled="true"]),
html[data-rr-page="camera"] form button:hover:not(:disabled, [aria-disabled="true"]),
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="beta"], [data-rr-page="auth"]) :is(button, .action):not(.google, .secondary, .linkbutton):hover:not(:disabled, [aria-disabled="true"]) {
  background-color: var(--bento-cyan-hover);
  border-color: var(--bento-cyan-hover);
  color: var(--bento-navy);
  box-shadow: var(--bento-glow-cyan);
}
html[data-rr-page] .btn.primary svg { color: currentColor; }

/* rr7-panel begin · magic — THE one main action of a screen (Kosta, 7 Oct 2026: "the make my video button should be super
   magical and priority looking" / "the export button should be more prominent and magical"). The Keynote gradient as a fill,
   navy ink (11:1 on the cyan end, 4.6:1 on periwinkle, 4.7:1 on violet), an inner top light and a soft periwinkle glow. Hover
   slides the gradient toward violet and lifts the glow; a sheen crosses it once when it becomes ready (shown, or no longer
   aria-disabled) and once per hover — motion only under html.bento-motion, never looping. ONE per screen: the studio's Create
   Video, the room's Export (Create New Version while a change is pending; Export then wears .ring), the job page's Open the
   Review Room, the upload page's Create Video, the layout page's Create New Version. Its size is the page's (lg in a panel's
   finish dock, --bento-ctl-bar in a top bar). Not ready (aria-disabled: a finish that answers its click with what is pending) or
   disabled: the one disabled look. Busy (aria-busy="true", sending): keeps its fill; the leading glyph becomes a still ring.
   A keycap (.kc: ⌘↵, Ctrl ↵ off a Mac, finish-keys.js) rides at the end of the label; a touch screen has no keys, so no keycap.
   The sheens are the two pseudo-elements, so a magic button never draws its glyph with ::before (room.css shows #btnExport's svg). */
html[data-rr-page] .btn.magic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background-color: var(--bento-periwinkle);
  background-image: var(--bento-grad);
  background-size: 170% 100%;
  background-position: 0% 50%;
  color: var(--bento-navy);
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .16),
              0 14px 34px -14px rgba(114, 136, 246, .7), 0 6px 18px -10px rgba(163, 238, 246, .45);
}
html[data-rr-page] .btn.magic:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  border-color: transparent;
  background-color: var(--bento-periwinkle);
  background-position: 100% 50%;
  color: var(--bento-navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .2),
              0 18px 40px -14px rgba(114, 136, 246, .85), 0 8px 22px -10px rgba(157, 123, 255, .55);
}
html[data-rr-page] .btn.magic svg { color: currentColor; }
html[data-rr-page] .btn.magic::before,
html[data-rr-page] .btn.magic::after {                /* the two sheens: off the left edge, clipped by the pill, until a sweep */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, .55) 50%, transparent 72%);
  opacity: 0;
  transform: translateX(-130%);
  pointer-events: none;
}
html[data-rr-page] .btn.magic:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
  background-image: none;
  background-color: var(--bento-well);
  box-shadow: none;
  color: var(--bento-text-disabled);
}
html[data-rr-page] .btn.magic:is(:disabled, [aria-disabled="true"])::before,
html[data-rr-page] .btn.magic:is(:disabled, [aria-disabled="true"])::after { content: none; }
html[data-rr-page] .btn.magic[aria-busy="true"] {
  background-color: var(--bento-periwinkle);
  background-image: var(--bento-grad);
  color: var(--bento-navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px -14px rgba(114, 136, 246, .55);
  cursor: progress;
}
html[data-rr-page] .btn.magic[aria-busy="true"] > svg:first-child {   /* the play glyph gives way to a still ring: busy, not a second action */
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
html[data-rr-page] .btn.magic[aria-busy="true"] > svg:first-child > * { display: none; }
/* the ring variant: the same gradient as a 1.5px ring on the well, for a magic action that has stepped back (the room's Export
   while a new version is pending or being made: Create New Version is the filled one then) */
html[data-rr-page] .btn.magic.ring,
html[data-rr-page="room"]:has(#epMake:is([aria-disabled="false"], [aria-busy="true"])) .topbar #btnExport.btn.magic {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bento-well-2), var(--bento-well-2)) padding-box, var(--bento-grad) border-box;
  color: var(--bento-text);
  box-shadow: none;
}
html[data-rr-page] .btn.magic.ring:hover:not(:disabled, [aria-disabled="true"]),
html[data-rr-page="room"]:has(#epMake:is([aria-disabled="false"], [aria-busy="true"])) .topbar #btnExport.btn.magic:hover {
  background: linear-gradient(var(--bento-well-3), var(--bento-well-3)) padding-box, var(--bento-grad) border-box;
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(114, 136, 246, .6);
}
html[data-rr-page] .btn.magic.ring svg,
html[data-rr-page="room"]:has(#epMake:is([aria-disabled="false"], [aria-busy="true"])) .topbar #btnExport.btn.magic svg { color: var(--bento-cyan); }
html[data-rr-page] .btn.magic.ring::before,
html[data-rr-page] .btn.magic.ring::after,
html[data-rr-page="room"]:has(#epMake:is([aria-disabled="false"], [aria-busy="true"])) .topbar #btnExport.btn.magic::before,
html[data-rr-page="room"]:has(#epMake:is([aria-disabled="false"], [aria-busy="true"])) .topbar #btnExport.btn.magic::after { content: none; }
/* the primary's glyph is one: the filled play triangle, 16px, on every Create button (the studio's dock and its phone bar, the room's dock);
   line glyphs are Export's (a download) and Open the Review Room's. Marked class="play" on the svg. */
html[data-rr-page] .btn.magic > svg.play { width: 16px; height: 16px; flex: none; fill: currentColor; stroke: none; }
/* the keycap: frosted on the gradient, the well's grey once the button is not ready */
html[data-rr-page] .btn .kc {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 22px;
  height: 20px;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .32);
  box-shadow: inset 0 -1px 0 rgba(1, 41, 79, .2);
  color: inherit;
  font: 600 11px/1 var(--font);
  letter-spacing: .02em;
  white-space: nowrap;
}
html[data-rr-page] .btn:is(:disabled, [aria-disabled="true"]) .kc { background: var(--bento-well-3); box-shadow: none; }
html[data-rr-page] .btn[aria-busy="true"] .kc { display: none; }   /* sending: the label says so, and a grey chip on the gradient would read as a fault */
@media (hover: none), (pointer: coarse) {
  html[data-rr-page] .btn .kc { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] .btn.magic:not(:disabled, [aria-disabled="true"])::after { animation: rr-magic-sheen 1.1s var(--bento-ease) .45s 1 both; }
  html.bento-motion[data-rr-page] .btn.magic:hover:not(:disabled, [aria-disabled="true"])::before { animation: rr-magic-sheen .9s var(--bento-ease) 1 both; }
  html.bento-motion[data-rr-page] .btn.magic:not(.ring):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) { transform: translateY(-1px); }
  html.bento-motion[data-rr-page] .btn.magic:not(.ring):hover:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) { transform: scale(.98); }
  html.bento-motion[data-rr-page] .btn.magic { transition: background-position .5s var(--bento-ease), box-shadow .25s ease, color .15s ease, transform .18s var(--bento-spring); }
  @keyframes rr-magic-sheen { from { opacity: 1; transform: translateX(-130%); } to { opacity: 1; transform: translateX(130%); } }
}
/* rr7-panel end · magic */

/* ghost — an outline: no fill, a hairline, the same ink. (0,3,1); layout's old .btn.ghost:hover rule was (0,4,0).
   Mixed from --ink so it also holds on the studio's white screen light. Inside a bar it
   is the quiet text pill of section 4 instead (no hairline, wash on hover). */
html[data-rr-page] .btn.ghost {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  color: color-mix(in srgb, var(--ink) 84%, transparent);
}
html[data-rr-page] .btn.ghost:hover:not(:disabled, [aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--ink) 9%, transparent);
  border-color: color-mix(in srgb, var(--ink) 24%, transparent);
  color: var(--ink);
}

/* complete — mint (board, room). */
html[data-rr-page] .btn.complete {
  background-color: var(--bento-mint);
  border-color: var(--bento-mint);
  color: #03170F;
}
html[data-rr-page] .btn.complete:hover:not(:disabled, [aria-disabled="true"]) {
  background-color: #6BE3B8;
  border-color: #6BE3B8;
}

/* danger — NM red-pink fill under white text (4.7:1). board: .selection-bar .danger (0,2,0). */
html[data-rr-page] .btn.danger {
  background-color: var(--bento-red-fill);
  border-color: var(--bento-red-fill);
  color: #fff;
  font-weight: 600;
}
html[data-rr-page] .btn.danger:hover:not(:disabled, [aria-disabled="true"]) {
  background-color: var(--bento-red-fill-hover);
  border-color: var(--bento-red-fill-hover);
  box-shadow: 0 10px 26px -12px rgba(255, 31, 75, .65);
}
/* danger-outline — a destructive action that is not the main choice ("Drop this
   take", a failed render's Retry, a phone Stop): red text on a red hairline. */
html[data-rr-page] :is(.btn.danger-outline, .btn.danger.outline, #waitCancel) {   /* #waitCancel: record.html's "Drop this take", marked up as a ghost */
  background-color: transparent;
  border-color: color-mix(in srgb, var(--bento-red-ink) 45%, transparent);
  color: var(--bento-red-ink);
}
html[data-rr-page] :is(.btn.danger-outline, .btn.danger.outline, #waitCancel):hover:not(:disabled, [aria-disabled="true"]) {
  background-color: var(--bento-red-soft);
  border-color: var(--bento-red-ink);
  color: var(--bento-red-ink);
  box-shadow: none;
}

/* selected / pressed — ONE recipe for every toggle, tool and tile: cyan-soft
   fill, 2px inset cyan ring, cyan text. Tokens: --bento-select-*. Page parts use the
   same three declarations for their own tiles (format tiles, layer tools, canvas
   toolbars) so they can never drift. Segmented tabs keep their grey thumb (section 9). */
html[data-rr-page] .btn:is([aria-pressed="true"], .on):not(.primary, .danger, .complete) {
  background-color: var(--bento-select-fill);
  border-color: transparent;
  box-shadow: var(--bento-select-ring);
  color: var(--bento-cyan);
}
html[data-rr-page] .btn:is([aria-pressed="true"], .on):not(.primary, .danger, .complete):hover:not(:disabled, [aria-disabled="true"]) {
  background-color: var(--bento-select-fill);
  border-color: transparent;
  color: var(--bento-cyan-hover);
}

/* disabled — ONE look: the well fill, the disabled ink, a not-allowed cursor.
   No opacity, no dimmed glows. Ghosts and icons keep no fill, only the ink. An
   aria-disabled control (a finish tile that answers a click with what is
   pending) looks the same and stays clickable. */
html[data-rr-page] .btn:is(:disabled, [aria-disabled="true"]) {
  background-color: var(--bento-well);
  border-color: transparent;
  box-shadow: none;
  color: var(--bento-text-disabled);
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}
html[data-rr-page] :is(.btn.ghost, .btn.icon, .btn.danger-outline):is(:disabled, [aria-disabled="true"]) { background-color: transparent; }

/* play — ONE recipe for every player (the studio deck and review player, the
   docked bar, the review room's transport, the layout editor): a cyan disc with a
   navy glyph. Only the size follows the player it sits in (44 dock / room / layout,
   54 deck, 64 review); the studio's own rules set theirs. */
html[data-rr-page] :is(.ctl.big, #btnPlay.btn) {
  border: 0;
  border-radius: 50%;
  background-color: var(--bento-cyan);
  color: var(--bento-navy);
}
html[data-rr-page] :is(.ctl.big, #btnPlay.btn):hover:not(:disabled) {
  background-color: var(--bento-cyan-hover);
  color: var(--bento-navy);
}

/* Inline-styled call-to-action links (beta "Continue to sign in", landing
   "Sign in with your email") paint white text on var(--accent) from a style=""
   attribute. The accent is now cyan, so the text must turn navy; only
   !important can beat an inline declaration, hence the two below. */
html[data-rr-page] a[style*="background:var(--accent)"] {
  color: var(--bento-navy) !important;          /* inline color:#fff → 1.3:1 on cyan; navy is 11.3:1 */
  border-radius: var(--bento-pill) !important;  /* inline 9px / var(--radius-sm); CTAs are pills in this skin */
}
html[data-rr-page] a[style*="background:var(--accent)"]:hover { box-shadow: var(--bento-glow-cyan); }

/* signin: the Google button stays Google-white (brand rule), just the shape. */
html[data-rr-page="signin"] .google { border-radius: var(--bento-pill); }


/* ---------------------------------------------------------------------------
   6. Fields: filled, 12px, cyan focus ring. background-COLOR only, so room's
   .ver-sel keeps its drawn arrow. (0,2,2) beats body.studio input[type=text]
   (0,2,2, earlier), .card input[type=text] (0,2,1), .search input (0,1,1).
   ------------------------------------------------------------------------- */
html[data-rr-page] :is(input[type=text], input[type=url], input[type=email], input[type=password], input[type=search], input[type=number], input:not([type]), select, textarea) {
  background-color: rgba(118, 118, 128, .18);
  border-color: var(--hairline);
  border-radius: var(--bento-radius-sm);
  color: var(--ink);
}
html[data-rr-page] :is(input[type=text], input[type=url], input[type=email], input[type=password], input[type=search], input[type=number], input:not([type]), select, textarea):hover:not(:disabled) {
  border-color: var(--bento-hairline-strong);
}
html[data-rr-page] :is(input[type=text], input[type=url], input[type=email], input[type=password], input[type=search], input[type=number], input:not([type]), select, textarea):focus {
  border-color: var(--bento-cyan);
  box-shadow: var(--bento-focus-halo);
  outline: 0;
}
html[data-rr-page] :is(input, textarea)::placeholder { color: var(--faint); opacity: 1; }

/* 6a. The one in-place text box (.ce-phrase): the caption's (direct-caption-edit.js) on the studio canvas and the room's preview, and a
   text's (in-place-text.js, the Text tool). One editable box over the thing on the picture, at its real position: no popup, no
   per-word fields. It stands in for the burned words, so it is black with the render's Arial (the script sets face, size and case
   from what is under it) and wears the cyan halo that says it is live. The :not(#_) lifts it over every field rule above, hover and
   focus included. Structure and skin both live here (the caption editor also injects its structure for a page without the skin). */
html[data-rr-page] textarea.ce-phrase:not(#_) {
  position: absolute; z-index: 30; transform: translate(-50%, -50%); box-sizing: border-box;
  min-height: 36px; max-width: calc(100% - 16px); margin: 0; padding: 5px 7px;
  border: 1px solid; outline: none;
  background-color: #000;
  border-color: var(--bento-cyan-line);
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--bento-cyan-soft);
  color: #fff;
  text-align: center; line-height: 1.12; resize: none; overflow: auto; touch-action: auto;
  white-space: pre-wrap; overflow-wrap: break-word;
}
html[data-rr-page] .ce-phrase-error { position: absolute; z-index: 31; padding: 5px 8px; color: #ffb1ab; background: #111; font: 12px/1.3 var(--font); text-align: center; }
html[data-rr-page] :is(.ce-phrase, .ce-phrase-error)[hidden] { display: none; }

/* 6b. Round 4 (M08) · no zoom on focus. iOS Safari zooms the page into any
   field whose text is under 16px and leaves it zoomed. Where the pointer is a
   finger (phones, tablets, a landscape phone: keyed on the pointer, not the
   width) every text field, select and textarea reads at least 16px. The two
   :not(#_) lift this rule to (2,2,1) so it wins over the page parts' field
   sizes, some of which are set through IDs (the studio's caption editor, the
   room's edit panel); a pointer query, not !important, keeps desktop as is. */
@media (pointer: coarse) {
  html[data-rr-page] :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image], [type=hidden]), select, textarea):not(#_):not(#_) {
    font-size: max(16px, 1em);
  }
}


/* ---------------------------------------------------------------------------
   7. Tiles, dialogs, toasts, progress
   ------------------------------------------------------------------------- */
/* .card is a panel/tile on every shell that has one (record inspector, room
   dialogs, job steps, upload form, gate form). Padding stays the page's. */
html[data-rr-page] .card {                   /* (0,2,1) answers body.studio .card (0,2,1, earlier) */
  background-color: var(--bento-tile);
  border-color: var(--bento-hairline);
  border-radius: var(--bento-radius);
}

/* Dialogs: board <dialog class=project-dialog>, layout .modal, room .scrim > .card.
   ONE spec: a --bento-radius-lg tile, padding 24, a 22/700 title, actions at the md
   control size (44) with the secondary in the well fill (the neutral .btn). */
html[data-rr-page] :is(.project-dialog, .modal) {
  padding: 24px;
  background-color: var(--bento-tile);
  border-color: var(--bento-hairline-strong);
  border-radius: var(--bento-radius-lg);
  box-shadow: var(--bento-shadow);
}
html[data-rr-page] .scrim > .card { padding: 24px; border-radius: var(--bento-radius-lg); border-color: var(--bento-hairline-strong); }
html[data-rr-page] :is(.project-dialog h2, .modal h2, .scrim > .card h3) {
  margin: 0 0 10px;
  font: 700 22px/1.2 var(--font);
  letter-spacing: -.02em;
}
html[data-rr-page] dialog::backdrop,
html[data-rr-page] :is(.scrim, .modal-back) {
  background-color: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
html[data-rr-page] :is(.project-dialog, .modal, .sheet) { overscroll-behavior: contain; }   /* a list scrolled to its end does not hand the drag to the page */
/* A modal is open: the page behind must not scroll. Where a finger (or a narrow window) drags on the fixed
   veil, the gesture chains to the page. Lock BODY, not html: the room (<= 1000px) and the layout editor
   (<= 900px) scroll through `body { overflow: auto }`, which propagates to the viewport, and overflow:hidden
   on html would stop that propagation, turn the 100%-tall body into its own scroller and snap the page to the
   top. Every page hides its overlays with [hidden] (or removes them), so :not([hidden]) is the open state.
   Not on a wide, fine-pointer desktop, where a classic scrollbar vanishing would shift the layout.
   The overlays are children of body, so the test is `:has(> ...)` on body itself: a descendant `:has()` on html
   is re-checked on every DOM change anywhere below it, and raised the room's style recalc about 3.4x during playback. */
@media (pointer: coarse), (max-width: 1000px) {
  html[data-rr-page] body:has(> dialog[open], > .scrim:not([hidden]), > .modal-back:not([hidden]), > .sheet-veil) { overflow: hidden; }
}

/* Canvas toolbars — the floating tool strips over a canvas: record's Pane / Picture bar
   (.arrange-bar, skinned the same way in record.css because its docked states override
   the frame), the setup canvas's frame tools (.composition-quickbar) and the review
   room's (.room-arrange-toolbar). ONE skin: a frosted --bento-radius-md bar, sm tools on
   --bento-radius-sm, the selected recipe (never white on cyan: that was a 1.3:1 contrast
   failure), the disabled ink, the shared focus ring. (The setup canvas's page rules are
   ID rules, so its selector carries #compositionPreview to stay level.) */
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) {
  border: 1px solid var(--bento-hairline-strong);
  border-radius: var(--bento-radius-md);
  background: rgba(28, 28, 30, .86);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .75);
}
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) { gap: 2px; padding: 4px; }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) button {
  width: var(--bento-ctl-sm);
  height: var(--bento-ctl-sm);
  border-radius: var(--bento-radius-sm);
  color: var(--bento-text);
}
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) button:hover:not(:disabled, [aria-pressed="true"]) { background: rgba(255, 255, 255, .08); }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) button[aria-pressed="true"] {
  background: var(--bento-select-fill);
  box-shadow: var(--bento-select-ring);
  color: var(--bento-cyan);
}
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) button:disabled { opacity: 1; color: var(--bento-text-disabled); cursor: not-allowed; }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) :is(button, input):focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) label { color: var(--bento-text-2); font-size: 12px; }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) input[type=range] { accent-color: var(--bento-cyan); }

/* The strips' grip (note bc49ceb1): the handle on a strip's side that carries it (frame-tools-drag.js). It shows
   only while the strip floats over the canvas ([data-movable], set by the module from the computed position): the
   phone row, the docked review row and the landscape-phone column are in flow or fixed and have none. The hover
   fill comes from the button rule above, so the grip sets no background of its own. */
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar, body.studio .arrange-bar) .qb-grip { display: none; }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar, body.studio .arrange-bar)[data-movable] .qb-grip {
  display: grid; place-items: center; flex: none; align-self: stretch;
  width: 20px; margin-right: 2px; padding: 0;
  border: 0; background: transparent; color: var(--bento-text-3);
  border-radius: var(--bento-radius-sm);
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
}
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar, body.studio .arrange-bar) .qb-grip svg { width: 14px; height: 18px; fill: currentColor; stroke: none; }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar, body.studio .arrange-bar)[data-movable] .qb-grip:hover { color: var(--bento-text); }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar, body.studio .arrange-bar)[data-dragging] { border-color: var(--bento-cyan-line); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .85); }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar, body.studio .arrange-bar)[data-movable][data-dragging] .qb-grip { color: var(--bento-cyan); cursor: grabbing; }   /* [data-movable] too: level with the :hover rule above, and later, so the pointer over the grip does not turn it back to white */
@media (pointer: coarse) { html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar, body.studio .arrange-bar)[data-movable] .qb-grip { width: 28px; } }

/* Kosta, 1 Oct — the frame-tools rail (reactor/frame-rail.js), every page that has one (the studio's two strips, the room's). "it should never block the frame where our video is … smaller, more
   elegant, better integrated and more responsive. apple style design". On a computer the setup strip (.composition-quickbar) and the
   review strip (#arrangeBar) leave the picture: a slim glass rail beside its right edge where the shape leaves a margin (data-dock=side),
   or a one-line capsule right under it, in the canvas caption's place, where the picture fills the width (data-dock=below). The module
   moves the strip into the area around the picture (the studio's .studio-surface, the room's .stage-col) and writes --rail-x / --rail-y; these rules are the whole skin there (the strip's own rules are
   scoped to its old parent; the :is() carries an ID so this one skin outweighs the strips' own :is(#compositionPreview …) rules). Icon-only: every tool keeps its name as its tooltip and aria-label. Phones keep their row under the canvas. */
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] {
  position: absolute; z-index: 6; box-sizing: border-box;
  left: var(--rail-x); top: var(--rail-y); right: auto; bottom: auto;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: max-content; max-width: none; min-height: 0; height: auto; margin: 0; padding: 4px;
  border: 1px solid var(--bento-hairline-strong); border-radius: 14px;
  background: rgba(30, 30, 32, .72);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: frame-rail-in .16s cubic-bezier(.2, .8, .2, 1);
}
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock="side"][class] { flex-direction: column; flex-wrap: nowrap; width: 46px; transform: none; --frame-rail-from: translateX(-4px); }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock="below"][class] { flex-direction: row; flex-wrap: nowrap; height: 40px; padding: 3px 5px; transform: translateX(-50%); --frame-rail-from: translate(-50%, -4px); }
@keyframes frame-rail-in { from { opacity: 0; transform: var(--frame-rail-from, none); } }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is(button, .tb, .seg3 button) {
  display: grid; place-items: center; box-sizing: border-box; flex: none;
  width: 36px; height: 36px; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--bento-text); font-size: 0; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock="below"][class] :is(button, .tb, .seg3 button) { width: 32px; height: 32px; border-radius: 9px; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] .seg3 { display: contents; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] > .qb-grip.qb-grip { display: none; }   /* docked: it has a place, nothing to carry (after the button rule above, and above it in weight) */
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is(button, .tb)[hidden] { display: none; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] .tb span { display: none; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is(button, .tb):hover:not(:disabled, [aria-pressed="true"]) { background: rgba(255, 255, 255, .09); }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is(button, .tb)[aria-pressed="true"] { background: var(--bento-select-fill); box-shadow: var(--bento-select-ring); color: var(--bento-cyan); }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is(button, .tb):disabled { color: var(--bento-text-disabled); cursor: not-allowed; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is(button, input):focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); }
/* the zoom: a short slider with its value, between hairlines; upright on the rail (writing-mode, so up zooms in), level in the capsule */
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-zoom-row], .arrange-zoom, #roomZoomRow) { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0 4px; min-height: 0; font-size: 0; color: var(--bento-text-2); }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-zoom-row], .arrange-zoom, #roomZoomRow)[hidden] { display: none; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-zoom-row], .arrange-zoom, #roomZoomRow) input { accent-color: var(--bento-cyan); margin: 0; min-height: 0; cursor: pointer; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-zoom-row], .arrange-zoom, #roomZoomRow) output { font-size: 10px; font-variant-numeric: tabular-nums; min-width: 0; letter-spacing: .01em; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock="side"][class] :is([data-quick-zoom-row], .arrange-zoom, #roomZoomRow) { flex-direction: column; padding: 8px 0 6px; margin: 2px 0; border-block: 1px solid var(--bento-hairline); }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock="side"][class] :is([data-quick-zoom-row], .arrange-zoom, #roomZoomRow) input { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 84px; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock="below"][class] :is([data-quick-zoom-row], .arrange-zoom, #roomZoomRow) { margin: 0 2px; padding: 0 8px; border-inline: 1px solid var(--bento-hairline); height: 24px; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock="below"][class] :is([data-quick-zoom-row], .arrange-zoom, #roomZoomRow) input { width: 84px; height: 20px; }
/* the order on the strip: how it moves, how much of the picture, how it fills, which way it faces, its shape, how the pair sits, its layer, its lock (rr7: the fit and
   arrangement toggles joined it, one slot per rail on every page) */
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-action="all"], #roomShowAll) { order: 1; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-action="fit"], #arrFit, #roomFit) { order: 2; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-action="mirror"], #roomMirror) { order: 3; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-action="shape"], #roomKeepShape) { order: 4; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-action="arrange"], #arrArrange, #roomArrangement) { order: 5; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-action="front"], #roomFront) { order: 6; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-action="back"], #roomBack) { order: 7; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is([data-quick-action="lock"], #roomLock) { order: 8; }
/* a linked video with Arrange off: nothing is selectable, so the strip goes, as it did over the canvas */
/* under the picture the capsule stands in the caption line's place (the same 44px), so nothing below it moves */
@media (prefers-reduced-motion: reduce) { html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] { animation: none; } }

/* rr7-layout begin — Kosta's 7 Oct layout round (app/review-room/releases/rr7/layout.md). Everything between the markers is the LAYOUT package's: the accent ring, Presets (ONE skin
   for the studio's setup tile and review section and the room's section), the Arrangement control. It adds no important flags. Where a rule has to beat a page part it says which. */

/* The accent ring: foundation §14's "Add text" recipe, a well pill wearing the Keynote gradient ring, as a class any control can take (New preset in Presets). Not the 2px cyan
   "selected" ring and not the filled cyan primary: it says "here is a thing to start", and keeps its fill, ink and ring when it is disabled or aria-disabled (muted, no ring).
   ONE recipe, written once: New preset names itself in each list (with the ids the pages' own button rules carry, which the class alone does not outweigh) rather than restating it.
   §14's own copy for Add text stays where it is (another feature's rules and pins); tests/presets-skin.test.mjs holds the two recipes equal, so they cannot drift apart. */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new.rr-accent-ring,
html[data-rr-page] .rr-accent-ring {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bento-well-2), var(--bento-well-2)) padding-box, var(--bento-grad) border-box;
  color: var(--bento-text);
  font-weight: 600;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new.rr-accent-ring:hover:not(:disabled):not([aria-disabled="true"]),
html[data-rr-page] .rr-accent-ring:hover:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(var(--bento-well-3), var(--bento-well-3)) padding-box, var(--bento-grad) border-box;
  color: #fff;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new.rr-accent-ring:is(:disabled, [aria-disabled="true"]),
html[data-rr-page] .rr-accent-ring:is(:disabled, [aria-disabled="true"]) { background: var(--bento-well); border-color: transparent; color: var(--bento-text-disabled); }

/* ---- Presets (composition-presets.js). The prefix carries an ID (1,2,1: the setup tile, the review card, the room's Layout body) because the pages' own field rules do (body.studio #compositionCard select, 1,1,2) and the module's fallback sheet is lighter still. */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] {
  --rr-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEAEB2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --rr-i-layout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237288F6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.6'/%3E%3Crect x='13' y='11' width='5.5' height='5.5' rx='1.2'/%3E%3C/svg%3E");
  display: block; min-width: 0; margin: 14px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--bento-hairline);
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets]:is(:empty, [hidden]) { display: none; }
/* the heading: "Presets · 2" at the left, New preset at the right */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] > .cp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-title { font: 600 13px/1.3 var(--font); letter-spacing: -.005em; color: var(--bento-text-2); white-space: nowrap; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-count { margin-left: 6px; font: 400 12px/1.3 var(--font); color: var(--bento-text-2); font-variant-numeric: tabular-nums; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-count:empty { display: none; }
/* New preset: the accent ring, a plus in cyan, its words; 34px (44 under a finger, --bento-ctl-sm) with the 44px hit box carried by ::after. Aria-disabled keeps it reachable: a press says why. */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 6px;
  box-sizing: border-box; height: var(--bento-ctl-sm); min-width: 0; margin: 0; padding: 0 14px 0 11px;
  border-radius: var(--bento-pill); font: 600 13px/1 var(--font); letter-spacing: -.005em; white-space: nowrap; cursor: pointer; opacity: 1;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new::after { content: ""; position: absolute; inset: -5px -2px; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new svg { width: 16px; height: 16px; flex: none; stroke-width: 1.9; color: var(--bento-cyan); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new:is(:disabled, [aria-disabled="true"]) svg { color: inherit; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new[aria-disabled="true"] { cursor: default; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new:disabled { cursor: not-allowed; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new [data-cp-icon="check"] { display: none; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new[data-saved="true"] { color: var(--bento-mint); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new[data-saved="true"] [data-cp-icon="plus"] { display: none; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new[data-saved="true"] [data-cp-icon="check"] { display: block; color: var(--bento-mint); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); }
/* the pick row: the preset pill (a periwinkle layout glyph leads the name), Apply, and a round ⋯. Each is a 32px visual in a 44px box (the transparent rings are the
   gaps: pill [5|5] · Apply [5|5] · ⋯ [5|7]); the pill's 5px start ring and the ⋯ box's 7px end ring hang into the column's gutters so the visuals start and end on its content edges */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] > .cp-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 0; margin: 0 -7px -6px -5px; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] select {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; width: 100%; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0 20px 0 28px;
  border: 0; border-block: 6px solid transparent; border-inline: 5px solid transparent; border-radius: 21px / 22px;
  background: var(--rr-i-layout) left 9px center / 14px 14px no-repeat, var(--rr-i-chev) right 5px center / 12px 12px no-repeat, var(--bento-well);
  background-clip: padding-box;
  color: var(--bento-text-soft); font: 500 13px/1.2 var(--font); text-overflow: ellipsis; opacity: 1;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] :is(button:not(.cp-new, .cp-notice-action), .cp-more > summary) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 44px; min-height: 44px; border: 0; background: var(--bento-well); color: var(--bento-text-soft); font: 500 13px/1.2 var(--font); opacity: 1; cursor: pointer;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-pick > button[data-cp="apply"] {
  padding: 0 10px; border-block: 6px solid transparent; border-inline: 5px solid transparent; border-radius: 21px / 22px; background-clip: padding-box;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-more > summary {
  width: 44px; height: 44px; padding: 0; list-style: none; border: 6px solid transparent; border-left-width: 5px; border-right-width: 7px; border-radius: 21px 23px 23px 21px / 22px; background-clip: padding-box;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-more > summary::-webkit-details-marker { display: none; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-more { position: relative; min-width: 0; }
/* focus rings hug the 32px visuals, 2px out: the pill's even rings take its own outline; Apply and ⋯ draw theirs on a ::after that fills the padding box (= the visual) */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-pick select:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: -3px; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-pick select:focus { box-shadow: none; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] :is(.cp-pick > button, .cp-pick > .cp-more > summary) { position: relative; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] :is(.cp-pick > button, .cp-pick > .cp-more > summary):focus-visible { outline: none; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] :is(.cp-pick > button, .cp-pick > .cp-more > summary):focus-visible::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); pointer-events: none;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] svg { width: 18px; height: 18px; stroke-width: 1.75; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new svg { width: 16px; height: 16px; stroke-width: 1.9; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] :is(button:not(.cp-new, .cp-notice-action), .cp-more > summary):hover:not(:disabled, [aria-disabled="true"]),
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-more[open] > summary,
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] select:hover:not(:disabled) { background-color: var(--bento-well-2); color: #fff; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] select:hover:not(:disabled) { cursor: pointer; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] :is(button:not(.cp-new, .cp-notice-action):disabled, select:disabled, summary[aria-disabled="true"]) { color: var(--bento-text-disabled); cursor: not-allowed; opacity: 1; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] :is(button:not(.cp-pick > button, .cp-new, .cp-notice-action), input, summary):focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); }
/* Update preset, under the pick row once a preset is chosen and the layout has moved on from it */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-update { margin: 14px 0 0; padding: 0 14px; border-radius: var(--bento-radius-sm); }
/* "Changed since you applied this preset.": one quiet line with a cyan dot under the pick row (the menu keeps the plain name; the old '(edited)' suffix was cut off in a narrow select) */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-edited { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 400 12.5px/1.35 var(--font); color: var(--bento-text-2); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-edited::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bento-cyan); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-edited[hidden] { display: none; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-edited + .cp-update { margin-top: 8px; }
/* the ⋯ menu as a glass popover, 44px items; it opens upward, clear of the scroller's edge */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-menu {
  width: 220px; padding: 6px; border: 1px solid var(--bento-hairline-strong); border-radius: 14px;
  background: rgba(44, 44, 46, .94); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--bento-shadow);
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-menu button { width: 100%; justify-content: flex-start; gap: 10px; padding: 0 12px; border-radius: 10px; background: transparent; color: var(--bento-text); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-menu button:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-menu .cp-hint { margin: 4px 0 0; padding: 8px 12px 6px; border-top: 1px solid var(--bento-hairline); font-size: 12px; line-height: 1.45; color: var(--bento-text-2); }
/* name this preset, rename, delete and update confirms */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-form { margin-top: 14px; padding: 14px; border: 0; border-radius: 16px; background: var(--bento-well); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-form label { font-size: 12.5px; color: var(--bento-text-2); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-form input {
  min-height: 44px; border: 1px solid var(--hairline); border-radius: var(--bento-radius-sm); background-color: rgba(118, 118, 128, .18); color: var(--bento-text); font-size: 13.5px;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-form input:focus { border-color: var(--bento-cyan); box-shadow: var(--bento-focus-halo); outline: 0; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-actions { gap: 8px; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-actions > button { padding: 0 16px; border-radius: 22px; background: var(--bento-well-2); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-actions > button[type="submit"]:not(:disabled) { background: var(--bento-cyan); color: var(--bento-navy); font-weight: 600; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-actions > button[type="submit"]:hover:not(:disabled) { background: var(--bento-cyan-hover); box-shadow: var(--bento-glow-cyan); color: var(--bento-navy); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-actions > button[data-cp="delete-confirm"]:not(:disabled) { background: var(--bento-red-fill); color: #fff; font-weight: 600; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-actions > button[data-cp="delete-confirm"]:hover:not(:disabled) { background: var(--bento-red-fill-hover); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-confirm { font-size: 13px; color: var(--bento-text); }
/* what a press on a New preset that cannot save says, with the way out */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-status { margin-top: 12px; font-size: 12.5px; color: var(--bento-text-2); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-status[data-error="true"] { color: var(--bento-red-ink); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-notice-action {
  display: inline-flex; align-items: center; min-height: 44px; margin: 2px 0 0; padding: 0; border: 0; border-radius: var(--bento-radius-xs); background: none; color: var(--bento-cyan); font: 600 12.5px/1 var(--font); cursor: pointer;
}
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-notice-action:hover { color: var(--bento-cyan-hover); text-decoration: underline; text-underline-offset: 3px; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-notice-action[hidden] { display: none; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-recovery { min-height: 44px; color: var(--bento-cyan); font-size: 12.5px; }
/* the call: once, when a Custom layout has changed and no preset is chosen, the ring pulses three times (the established finite cyan pulse); never infinite */
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new { transition: background-color .15s ease, color .15s ease, box-shadow .2s ease; }
  html.bento-motion[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) [data-composition-presets] .cp-new[data-attn="true"] { animation: rr-new-preset-call 1.2s var(--bento-ease) .4s 3; }
  @keyframes rr-new-preset-call { 50% { box-shadow: 0 0 0 6px rgba(163, 238, 246, .22); } }
}

/* ---- Arrangement (reactor/arrangement-control.js): "Arrangement  [ Side by side | Stacked ]", the same row in the studio's setup tile and review section and the room's section,
   under the Video shape tiles; the host is hidden for a shape that offers one arrangement. The halves are the page's own segmented skin (foundation §9: record selects by .on or
   aria-pressed, the room by .on): the module sets .on and aria-checked. */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 4px 14px; min-height: var(--bento-ctl-md); margin-top: 12px; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement[hidden] { display: none; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement > .rr-label { color: var(--bento-text-2); font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement > .seg2 { display: flex; margin: 0; padding: 3px; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement > .seg2 > button { flex: 1 1 0; min-width: 0; min-height: calc(var(--seg-h, var(--bento-ctl-md)) - 6px); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; font: 500 12.5px/1.2 var(--font); white-space: nowrap; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement > .seg2 > button svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* the drag-to-dock signpost: one quiet line under the row, across both columns */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement > .rr-hint { grid-column: 1 / -1; margin: 0; color: var(--bento-text-2); font: 400 12px/1.4 var(--font); }
/* --seg-h is the segmented track's height, set by each page under a finger (record 50px, the room's panel 50px, both 44px thumbs): the halves read it as the page's other segments do,
   so Arrangement is not the one control under 44px beside Source video | Your camera (review, 7 Oct). */
/* held (locked frames): reachable, with the reason; the same look as a disabled segment, and a press still goes to the page, which says why. The lit half keeps its thumb. */
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement > .seg2 > button[aria-disabled="true"]:not(.on) { color: var(--bento-text-disabled); }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement > .seg2 > button[aria-disabled="true"] { cursor: not-allowed; }
html[data-rr-page] :is(#compositionCard, #cardSend, #epLayoutBody) .rr-arrangement > .seg2 > button[aria-disabled="true"]:hover:not(.on) { color: var(--bento-text-disabled); }
/* the rails' Arrangement toggle, held: the rails' own :disabled look (the disabled ink, no hover wash) for aria-disabled too */
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is(button, .tb)[aria-disabled="true"] { color: var(--bento-text-disabled); cursor: not-allowed; }
html[data-rr-page] :is(#rr-frame-rail, .frame-rail)[data-dock][class] :is(button, .tb)[aria-disabled="true"]:hover:not([aria-pressed="true"]) { background: none; }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) button[aria-disabled="true"] { opacity: 1; color: var(--bento-text-disabled); cursor: not-allowed; }
html[data-rr-page] :is(#compositionPreview .composition-quickbar, .room-arrange-toolbar) button[aria-disabled="true"]:hover:not([aria-pressed="true"]) { background: none; }
/* rr7-layout end */

/* Toasts (board, room, record, layout): a floating glass capsule. */
html[data-rr-page] .toast {
  background-color: rgba(44, 44, 46, .92);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border-color: var(--bento-hairline-strong);
  border-radius: var(--bento-radius-md);
  color: var(--ink);
  box-shadow: var(--bento-shadow);
}

/* Progress bars: .bar > i on board (render rows), record (upload, waiting),
   job, upload, camera. Track loses its border, fill is the keynote gradient.
   board's .job.queued / .job.failed .bar i (0,3,1) keep their amber / red. */
html[data-rr-page] .bar {
  background-color: rgba(255, 255, 255, .12);
  border-color: transparent;
  border-radius: var(--bento-pill);
}
html[data-rr-page] .bar > i {
  background: var(--bento-grad-soft);
  border-radius: var(--bento-pill);
}


/* ---------------------------------------------------------------------------
   8. Switches — iOS: grey track off, cyan on, white knob. ONE size, 44×26, knob
   22 inset 2, on every page: room .card .switch and .mswitch, ui.js .sw (record),
   studio .screen-light-switch's track (role=switch). The 44px hit area is the
   switch itself; rows around it are at least 44 tall.
   ------------------------------------------------------------------------- */
html[data-rr-page] { --bento-switch-w: 44px; --bento-switch-h: 26px; }
html[data-rr-page] :is(.switch, .mswitch, .sw) {                /* (0,2,1) > room .card .switch (0,2,0) */
  width: var(--bento-switch-w);
  height: var(--bento-switch-h);
}
html[data-rr-page] :is(.switch, .mswitch, .sw) > i {            /* (0,2,2) > room .card .switch i (0,2,1) */
  background-color: var(--bento-track-off);
  border: 0;
  border-radius: var(--bento-pill);
}
html[data-rr-page] :is(.switch, .mswitch, .sw) > i::after {     /* (0,2,3) > .card .switch i::after (0,2,2) */
  top: 2px;
  left: 2px;
  width: calc(var(--bento-switch-h) - 4px);
  height: calc(var(--bento-switch-h) - 4px);
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
html[data-rr-page] :is(.switch, .mswitch, .sw) > input:checked + i {   /* (0,3,3) > .card .switch input:checked+i (0,3,2) */
  background-color: var(--bento-cyan);
}
html[data-rr-page] :is(.switch, .mswitch, .sw) > input:checked + i::after {
  transform: translateX(calc(var(--bento-switch-w) - var(--bento-switch-h)));
}
html[data-rr-page] :is(.switch, .mswitch, .sw) > input:disabled + i { opacity: 1; }        /* the knob greys instead */
html[data-rr-page] :is(.switch, .mswitch, .sw) > input:disabled + i::after { background-color: var(--bento-text-disabled); }
html[data-rr-page] :is(.switch, .mswitch, .sw) > input:disabled { cursor: not-allowed; }
html[data-rr-page] :is(.switch, .mswitch, .sw) > input:focus-visible + i {
  outline: 2px solid var(--bento-focus);
  outline-offset: var(--bento-focus-offset);
  box-shadow: none;
}
html[data-rr-page] .screen-light-track {
  flex: 0 0 var(--bento-switch-w);
  width: var(--bento-switch-w);
  height: var(--bento-switch-h);
  padding: 2px;
  border-radius: var(--bento-pill);
  background-color: var(--bento-track-off);
}
html[data-rr-page] .screen-light-switch[aria-checked=true] .screen-light-track {   /* (0,4,1) = studio's, later */
  background-color: var(--bento-cyan);
}
html[data-rr-page] .screen-light-track i {
  width: calc(var(--bento-switch-h) - 4px);
  height: calc(var(--bento-switch-h) - 4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}


/* rr7-audio begin · 8b. The duck control (reactor/duck-control.js; Kosta, 7 Oct 2026: "a switch to turn it on and off ... and a slider to control how much the volume ducks")
   ONE recipe where it is mounted: the studio's set-up tile 4 Audio, the studio's review Audio section and the room's Audio section. A switch that owns a control under it
   (this slider; Reduce noise's meter) is a CARD: a hairline, a cyan wash when it is on, the disabled well when it cannot be changed. A plain on/off with nothing under it
   (Censor swear words, Show captions) stays a plain row. `:not(#_)` beats the page rules that carry an id (§4). Tick dots are coloured by the module (data-fill, data-under). */
html[data-rr-page] .rr-duck { --duck-pos: 1; margin: 0; }
html[data-rr-page] .rr-duck .rr-duck-row.sw-row:not(#_) { margin-top: 0; min-height: 56px; padding: 6px 14px; border: 1px solid var(--bento-hairline); border-radius: var(--bento-radius-sm); background: var(--bento-tile-2); }
html[data-rr-page] .rr-duck .rr-duck-row.sw-row:not(#_) > b { font-size: 14px; font-weight: 600; color: var(--bento-text); }
html[data-rr-page] .rr-duck .rr-duck-row.sw-row.on:not(#_) { border-color: var(--bento-cyan-line); background: var(--bento-cyan-soft); }
/* a control that cannot be changed (a take being recorded or sent, a link whose duck is in its recording) is the disabled card, never the lit one */
html[data-rr-page] .rr-duck[data-locked="true"] .rr-duck-row.sw-row.on:not(#_) { border-color: var(--bento-hairline); background: var(--bento-well); }
html[data-rr-page] .rr-duck[data-locked="true"] .rr-duck-row.sw-row:not(#_) > b { color: var(--bento-text-disabled); }
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] .rr-duck .rr-duck-row.sw-row:not(#_) { transition: border-color .2s, background-color .2s; }
}
html[data-rr-page] .rr-duck-amount { margin: 12px 2px 0; }
html[data-rr-page] .rr-duck-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html[data-rr-page] .rr-duck-label { font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--bento-text-soft); }
html[data-rr-page] .rr-duck-readout { font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--bento-text-2); }
/* "Off" is a word, not a number: in the mono face its capital O reads as a zero (V-AUDIO-5) */
html[data-rr-page] .rr-duck[data-off] .rr-duck-readout { font-family: inherit; font-variant-numeric: normal; }
html[data-rr-page] .rr-duck-range { position: relative; margin-top: 2px; }
html[data-rr-page] .rr-duck-range input[type=range] { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; width: 100%; height: var(--bento-ctl-md); margin: 0; padding: 0; border: 0; border-radius: var(--bento-radius-xs); background: transparent; cursor: pointer; touch-action: pan-y; }
html[data-rr-page] .rr-duck-range input[type=range]:focus { outline: none; }
html[data-rr-page] .rr-duck-range input[type=range]:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); }
html[data-rr-page] .rr-duck-range input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--bento-cyan) calc(11px + (100% - 22px) * var(--duck-pos)), var(--bento-track-off) 0); }
html[data-rr-page] .rr-duck-range input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--bento-track-off); }
html[data-rr-page] .rr-duck-range input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--bento-cyan); }
html[data-rr-page] .rr-duck-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .2); }
html[data-rr-page] .rr-duck-range input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .2); }
html[data-rr-page] .rr-duck-range input[type=range]:disabled { cursor: not-allowed; }
html[data-rr-page] .rr-duck[data-dim] .rr-duck-range input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--bento-well-3) calc(11px + (100% - 22px) * var(--duck-pos)), var(--bento-well) 0); }
html[data-rr-page] .rr-duck[data-dim] .rr-duck-range input[type=range]::-moz-range-track { background: var(--bento-well); }
html[data-rr-page] .rr-duck[data-dim] .rr-duck-range input[type=range]::-moz-range-progress { background: var(--bento-well-3); }
html[data-rr-page] .rr-duck[data-dim] .rr-duck-range input[type=range]::-webkit-slider-thumb { background: var(--bento-text-disabled); box-shadow: none; }
html[data-rr-page] .rr-duck[data-dim] .rr-duck-range input[type=range]::-moz-range-thumb { background: var(--bento-text-disabled); box-shadow: none; }
/* the detents' dots: navy on the filled part, light on the rest, none under the thumb (the module marks them) */
html[data-rr-page] .rr-duck-dots { position: absolute; left: 0; right: 0; top: 20px; height: 4px; pointer-events: none; }
html[data-rr-page] .rr-duck-dots i { position: absolute; top: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, .34); }
html[data-rr-page] .rr-duck-dots i[data-fill="on"] { background: rgba(1, 41, 79, .55); }   /* --bento-navy */
html[data-rr-page] .rr-duck-dots i[data-under] { opacity: 0; }
html[data-rr-page] .rr-duck[data-dim] .rr-duck-dots i[data-fill] { background: rgba(255, 255, 255, .28); }
html[data-rr-page] .rr-duck-marks { position: relative; height: 18px; margin: 0 11px; }
html[data-rr-page] .rr-duck-marks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11.5px; line-height: 16px; white-space: nowrap; color: var(--bento-text-2); }
html[data-rr-page] .rr-duck-marks span[data-edge="start"] { left: 0; transform: none; margin-left: -11px; }
html[data-rr-page] .rr-duck-marks span[data-edge="end"] { right: 0; transform: none; margin-right: -11px; }
html[data-rr-page] .rr-duck-marks span[data-on] { color: var(--bento-cyan); font-weight: 600; }
html[data-rr-page] .rr-duck[data-dim] .rr-duck-marks span[data-on] { color: var(--bento-text-2); font-weight: 500; }
html[data-rr-page] .rr-duck-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 2px 0; }
html[data-rr-page] .rr-duck-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--bento-text-2); }
html[data-rr-page] .rr-duck-foot + .rr-duck-note { margin: 4px 2px 0; }
html[data-rr-page] .rr-duck [data-duck="hear"] { flex: none; min-height: var(--bento-ctl-md); height: auto; padding: 8px 14px; }
html[data-rr-page] .rr-voice { margin: 14px 2px 0; }
html[data-rr-page] .rr-voice .rr-duck-note + .rr-duck-note { margin-top: 6px; }
html[data-rr-page] .rr-voice .btn { display: inline-flex; align-items: center; min-height: var(--bento-ctl-md); margin-left: 4px; vertical-align: middle; }
html[data-rr-page] .rr-duck [hidden] { display: none; }
/* what the studio says about the microphone (reactor/studio-sound.js): a Bluetooth headset is a warning, so it wears the level coach's dot (amber) and a bold lead */
html[data-rr-page] .rr-advice { position: relative; padding-left: 14px; }
html[data-rr-page] .rr-advice::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--bento-amber); }
html[data-rr-page] .rr-advice > b { color: var(--bento-text-soft); font-weight: 600; }
/* rr7-audio end */

/* ---------------------------------------------------------------------------
   9. Segmented controls — iOS: well track, raised grey thumb, no accent. ONE spec:
   track radius 12 (--bento-radius-sm), padding 3, gap 2, thumb radius 9. --seg-h is
   the track's height: md 44 (the default) or sm 34 (--seg-h: var(--bento-ctl-sm));
   the thumb is 6px less. Each shell names its own: board .view-tabs, room
   .filters / .seg2, record .tabs / .seg2 / .seg3, layout .seg (NOT board/room
   .seg, which is the segment strip, nor layout #presets, the shape tiles).
   ------------------------------------------------------------------------- */
html[data-rr-page="board"] .view-tabs,
html[data-rr-page="room"] :is(.filters, .seg2),
html[data-rr-page="record"] :is(.tabs, .seg2, .seg3),
html[data-rr-page="layout"] .seg:not(#presets) {
  gap: 2px;
  padding: 3px;
  background-color: var(--bento-well);
  border-color: transparent;
  border-radius: var(--bento-radius-sm);
}
html[data-rr-page="room"] .filters,
html[data-rr-page="layout"] .seg:not(#presets) { --seg-h: var(--bento-ctl-sm); }
html[data-rr-page="board"] .view-tabs button,
html[data-rr-page="room"] :is(.filters, .seg2) button,
html[data-rr-page="record"] :is(.tabs, .seg2, .seg3) button,
html[data-rr-page="layout"] .seg:not(#presets) button {
  min-height: calc(var(--seg-h, var(--bento-ctl-md)) - 6px);
  border-radius: 9px;
  color: var(--bento-text-2);
}
html[data-rr-page="board"] .view-tabs button:hover,
html[data-rr-page="room"] :is(.filters, .seg2) button:hover,
html[data-rr-page="record"] :is(.tabs, .seg2, .seg3) button:hover,
html[data-rr-page="layout"] .seg:not(#presets) button:hover:not(:disabled) {
  color: var(--ink);
}
/* (0,3,2) answers body.studio .tabs button.on (0,3,2, earlier) */
html[data-rr-page="board"] .view-tabs button[aria-pressed=true],
html[data-rr-page="room"] :is(.filters, .seg2) button.on,
html[data-rr-page="record"] :is(.tabs, .seg2, .seg3) button:is(.on, [aria-pressed=true]),
html[data-rr-page="layout"] .seg:not(#presets) button.on {
  background-color: var(--bento-thumb);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .1);
}
/* The ring sits on the thumb, inside the track's 3px: no offset (the one place the ring is not 3px off). */
html[data-rr-page="board"] .view-tabs button:focus-visible,
html[data-rr-page="room"] :is(.filters, .seg2) button:focus-visible,
html[data-rr-page="record"] :is(.tabs, .seg2, .seg3) button:focus-visible,
html[data-rr-page="layout"] .seg:not(#presets) button:focus-visible { outline-offset: 0; }
html[data-rr-page="board"] .view-tabs button:disabled,
html[data-rr-page="room"] :is(.filters, .seg2) button:disabled,
html[data-rr-page="record"] :is(.tabs, .seg2, .seg3) button:disabled,
html[data-rr-page="layout"] .seg:not(#presets) button:disabled { opacity: 1; color: var(--bento-text-disabled); cursor: not-allowed; }


/* ---------------------------------------------------------------------------
   10. Motion — the skin only adds motion under no-preference; pages keep
   their own reduced-motion rules.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-rr-page] :is(.btn.primary, .btn.danger):active:not(:disabled) { transform: scale(.98); }
}

/* 11. Touch text fields: see 6b (one rule for every page; the room/sign-in/gate
   fields the round-4 review measured under 16px are covered there). */

/* rr7-panel begin -----------------------------------------------------------
   15. Inspector sections (PANEL, Kosta 7 Oct 2026: "at the beginning it's split into different widgets and I think that looks cool,
   then later it's merged into one big one with twirl downs. I like the idea of twirling things down to compress its size … make sure
   the side pannel … has consistent design accross all experiences. make it apple style"). ONE side-panel system on every page that
   has one: a column of separate bento tiles, each of which twirls down (reactor/panel-sections.js: no tabs, any number open).
   - Scope: a panel container carries data-rr-panel ("setup" | "review" | "room" | "layout"); its sections are .sec[data-sec].
   - A section is a tile of its own: --bento-tile, --bento-radius (22, as every tile), --bento-edge, 16px sides, 12px between tiles.
     The studio's setup steps (.card) and the layout page's panels (.panel) already are tiles whose heading holds the header button;
     they take the same header parts, placed by their page part (record-setup.css, flow.css).
   - Header (button.sec-h, the whole row): a 12px chevron at the left that turns 90° when open, a 22px badge (the setup steps' number,
     every other section its line glyph in the same cyan wash), the title (14.5/600), and at the right a quiet summary of the value
     that shows only while the section is folded (the values are in the body when it is open). A section holding a change that is
     not a version yet (the room) shows an amber "Changed" pill in both states. 56px tall. Hover never turns the title into a cyan
     link: the chevron brightens, and a folded tile lightens as a whole. Focus is the one ring, inside the tile's edge.
   - Body: under the header, 16px from the tile's foot; opening fades it in (html.bento-motion only, once, no height animation).
   - Column title (.rr-title, "Your setup" / "Your edit") 17/700 on the page, with an optional .rr-sub line; the finish dock
     (.rr-dock: status line, the one magic action, its secondary) is the column's last tile (studio: sticky at the bottom of the
     pinned column; room: under the sections, pinned while there is something to act on).
   - Every sub-disclosure inside a section (Custom words to mute, From your phone, a text's More, the captions look's Customize) uses the same left chevron, and so do the
     job page's (Keep editing in another app, Render details, Support details): no "+" glyph, no chevron at the right, anywhere.
   - Glyph per section: data-icon wins, else data-sec (layout, captions, text, audio, filler words, notes; the layout page's canvas,
     layers, layer, talk, keys, help); anything else gets the sliders glyph. A new section names its glyph with data-icon.
   ------------------------------------------------------------------------- */
html[data-rr-page] {
  --rr-g-layout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.6'/%3E%3Crect x='12.5' y='10.5' width='6' height='6' rx='1.2'/%3E%3C/svg%3E");
  --rr-g-captions: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.6'/%3E%3Cpath d='M10.4 10.1a2.4 2.4 0 1 0 0 3.8M16.6 10.1a2.4 2.4 0 1 0 0 3.8'/%3E%3C/svg%3E");
  --rr-g-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 6.5h13M12 6.5v12M9.5 18.5h5'/%3E%3C/svg%3E");
  --rr-g-audio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h1M7.5 9v6M11 5.5v13M14.5 8.5v7M18 10.5v3M20.5 12h.01'/%3E%3C/svg%3E");
  --rr-g-filler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4.5h11a3 3 0 0 1 3 3V14a3 3 0 0 1-3 3h-5.2L8 20v-3H6.5a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3z'/%3E%3Cpath d='M8.6 10.8h.01M12 10.8h.01M15.4 10.8h.01' stroke-width='2.5'/%3E%3C/svg%3E");
  --rr-g-notes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.3 4.2a2.2 2.2 0 0 1 3.1 3.1L8.1 18.6l-4.1 1.1 1.1-4.1z'/%3E%3Cpath d='m14.3 6.2 3.1 3.1'/%3E%3C/svg%3E");
  --rr-g-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 4 8.5 4.2L12 12.4 3.5 8.2z'/%3E%3Cpath d='m3.5 12.2 8.5 4.2 8.5-4.2M3.5 16.2l8.5 4.2 8.5-4.2'/%3E%3C/svg%3E");
  --rr-g-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5V17h13.5M3.5 7H17v13.5'/%3E%3C/svg%3E");
  --rr-g-talk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3.2' width='6' height='11' rx='3'/%3E%3Cpath d='M5.8 11.2a6.2 6.2 0 0 0 12.4 0M12 17.4v3.4'/%3E%3C/svg%3E");
  --rr-g-keys: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5 19.5 12 12 19.5 4.5 12z'/%3E%3C/svg%3E");
  --rr-g-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.2M12 7.8h.01'/%3E%3C/svg%3E");
  --rr-g-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3EEF6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h9M18 7.5h2M4 16.5h3M11 16.5h9'/%3E%3Ccircle cx='15.5' cy='7.5' r='2.3'/%3E%3Ccircle cx='8.8' cy='16.5' r='2.3'/%3E%3C/svg%3E");
  /* the disclosure chevron (a mask: its colour is the element's) — the 16-unit path of every page's own .sec-h .chev */
  --rr-g-disclose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
}
html[data-rr-page] [data-rr-panel] {
  --rr-sec-gap: 12px;
  --rr-sec-head-h: 56px;
}
/* the column's title: "Your setup" (drawn by record-setup.css) / "Your edit" (the studio after Stop, the room) */
html[data-rr-page] [data-rr-panel] .rr-title {
  margin: 0;
  padding-left: 6px;
  color: var(--bento-text);
  font: 700 17px/28px var(--font);
  letter-spacing: -.02em;
}
html[data-rr-page] [data-rr-panel] .rr-sub {
  margin: 0;
  padding-left: 6px;
  color: var(--bento-text-2);
  font: 400 12.5px/1.45 var(--font);
}
/* a section: a tile of its own */
html[data-rr-page] [data-rr-panel] .sec:not(.card, .panel) {
  position: relative;
  margin: var(--rr-sec-gap) 0 0;
  padding: 0 var(--bento-tile-pad);
  border: 0;
  border-radius: var(--bento-radius);
  background: var(--bento-tile);
  box-shadow: var(--bento-edge);
  color: var(--bento-text);
}
html[data-rr-page] [data-rr-panel] .sec[hidden] { display: none; }
html[data-rr-page] [data-rr-panel] .sec:not(.card, .panel) > .sec-b { padding: 0 0 var(--bento-tile-pad); }
/* the header: the whole row is the button, out to the tile's edges */
html[data-rr-page] [data-rr-panel] .sec:not(.card, .panel) > .sec-h {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% + 2 * var(--bento-tile-pad));
  min-height: var(--rr-sec-head-h);
  margin: 0 calc(-1 * var(--bento-tile-pad));
  padding: 0 var(--bento-tile-pad);
  border: 0;
  border-radius: var(--bento-radius);
  background: none;
  color: var(--bento-text);
  font: 600 14.5px/1.25 var(--font);
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
}
html[data-rr-page] [data-rr-panel] .sec.open:not(.card, .panel) > .sec-h { border-radius: var(--bento-radius) var(--bento-radius) 0 0; }
html[data-rr-page] [data-rr-panel] .sec-h:hover { color: var(--bento-text); }   /* never the old cyan "link" hover */
html[data-rr-page] [data-rr-panel] .sec:not(.card, .panel, .open) > .sec-h:hover { background: rgba(255, 255, 255, .03); }
html[data-rr-page] [data-rr-panel] .sec-h:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: -2px; }
/* the chevron: the pages' own 16-unit svg, first in the row */
html[data-rr-page] [data-rr-panel] .sec-h > .chev {
  order: -2;
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--bento-text-3);
}
html[data-rr-page] [data-rr-panel] :is(.sec.open > .sec-h, .sec.open > h2 > .sec-h, .sec.open > h3 > .sec-h) > .chev { transform: rotate(90deg); }
html[data-rr-page] [data-rr-panel] .sec-h:hover > .chev { color: var(--bento-text); }
/* the glyph badge (the setup steps carry their number in the same place) */
html[data-rr-page] [data-rr-panel] .sec { --rr-sec-g: var(--rr-g-sliders); }
html[data-rr-page] [data-rr-panel] .sec:is([data-sec="layout"], [data-sec="canvas"]) { --rr-sec-g: var(--rr-g-layout); }
html[data-rr-page] [data-rr-panel] .sec:is([data-sec="captions"], [data-sec="draft-captions"]) { --rr-sec-g: var(--rr-g-captions); }
html[data-rr-page] [data-rr-panel] .sec[data-sec="text"] { --rr-sec-g: var(--rr-g-text); }
html[data-rr-page] [data-rr-panel] .sec[data-sec^="audio"] { --rr-sec-g: var(--rr-g-audio); }
html[data-rr-page] [data-rr-panel] .sec[data-sec*="filler"] { --rr-sec-g: var(--rr-g-filler); }
html[data-rr-page] [data-rr-panel] .sec[data-sec="notes"] { --rr-sec-g: var(--rr-g-notes); }
html[data-rr-page] [data-rr-panel] .sec[data-sec="layers"] { --rr-sec-g: var(--rr-g-layers); }
html[data-rr-page] [data-rr-panel] .sec[data-sec="layer"] { --rr-sec-g: var(--rr-g-layer); }
html[data-rr-page] [data-rr-panel] .sec[data-sec="talk"] { --rr-sec-g: var(--rr-g-talk); }
html[data-rr-page] [data-rr-panel] .sec[data-sec="keys"] { --rr-sec-g: var(--rr-g-keys); }
html[data-rr-page] [data-rr-panel] .sec[data-sec="help"] { --rr-sec-g: var(--rr-g-help); }
html[data-rr-page] [data-rr-panel] .sec[data-icon="layout"] { --rr-sec-g: var(--rr-g-layout); }
html[data-rr-page] [data-rr-panel] .sec[data-icon="captions"] { --rr-sec-g: var(--rr-g-captions); }
html[data-rr-page] [data-rr-panel] .sec[data-icon="text"] { --rr-sec-g: var(--rr-g-text); }
html[data-rr-page] [data-rr-panel] .sec[data-icon="audio"] { --rr-sec-g: var(--rr-g-audio); }
html[data-rr-page] [data-rr-panel] .sec[data-icon="filler"] { --rr-sec-g: var(--rr-g-filler); }
html[data-rr-page] [data-rr-panel] :is(.sec:not(.card, .panel) > .sec-h, .sec > h3 > .sec-h)::before {
  content: "";
  order: -1;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rr-sec-g) center / 14px 14px no-repeat, rgba(163, 238, 246, .13);
}
/* the summary: the value at a glance, while folded */
html[data-rr-page] [data-rr-panel] .sec-h :is(.sum, .summary) {
  display: block;
  flex: 0 1000 auto;                        /* the value gives way long before the title does */
  min-width: 0;
  max-width: 58%;
  margin-left: auto;
  overflow: hidden;
  color: var(--bento-text-2);
  font: 500 12.5px/1.3 var(--font);
  letter-spacing: 0;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-rr-page] [data-rr-panel] .sec-h:hover :is(.sum, .summary) { color: var(--bento-text-soft); }
html[data-rr-page] [data-rr-panel] .sec-h :is(.sum, .summary):empty { display: none; }
html[data-rr-page] [data-rr-panel] :is(.sec.open:not([data-pending]) > .sec-h, .sec.open > h2 > .sec-h, .sec.open > h3 > .sec-h) :is(.sum, .summary) { display: none; }
/* a section holding a change that is not a version yet: amber = in progress, in both states */
html[data-rr-page] [data-rr-panel] .sec[data-pending] > .sec-h .sum {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--bento-pill);
  background: var(--bento-amber-soft);
  color: var(--bento-amber);
  font-weight: 600;
}
/* a plain tile in a panel (the studio's Project name) and the finish dock */
html[data-rr-page] [data-rr-panel] :is(.rr-tile, .rr-dock) {
  position: relative;
  margin: var(--rr-sec-gap) 0 0;
  padding: 14px var(--bento-tile-pad) var(--bento-tile-pad);
  border: 0;
  border-radius: var(--bento-radius);
  background: var(--bento-tile);
  box-shadow: var(--bento-edge);
}
/* every sub-disclosure inside a section: the same left chevron, turning 90° */
html[data-rr-page] :is(#customCensorControls, .ep-custom, .phone-library, .phone-script, .tx-more, .cl-more, .job-project, .job-details, #metaBox) > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
}
html[data-rr-page] :is(#customCensorControls, .ep-custom, .phone-library, .phone-script, .tx-more, .cl-more, .job-project, .job-details, #metaBox) > summary::-webkit-details-marker { display: none; }
html[data-rr-page] :is(#customCensorControls, .ep-custom, .phone-library, .phone-script, .tx-more, .cl-more, .job-project, .job-details, #metaBox) > summary::before {
  content: "";
  order: -2;
  flex: none;
  width: 12px;
  height: 12px;
  background-color: var(--bento-text-3);
  -webkit-mask: var(--rr-g-disclose) center / contain no-repeat;
          mask: var(--rr-g-disclose) center / contain no-repeat;
}
html[data-rr-page] :is(#customCensorControls, .ep-custom, .phone-library, .phone-script, .tx-more, .cl-more, .job-project, .job-details, #metaBox)[open] > summary::before { transform: rotate(90deg); }
html[data-rr-page] :is(#customCensorControls, .ep-custom, .phone-library, .phone-script, .tx-more, .cl-more, .job-project, .job-details, #metaBox) > summary:hover::before { background-color: var(--bento-text); }
html[data-rr-page] :is(#customCensorControls, .ep-custom, .phone-library, .phone-script, .tx-more, .cl-more, .job-project, .job-details, #metaBox) > summary:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: 0; border-radius: var(--bento-radius-sm); }
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] [data-rr-panel] .sec-h > .chev { transition: transform .22s var(--bento-ease), color .15s ease; }
  html.bento-motion[data-rr-page] [data-rr-panel] .sec-h { transition: background-color .15s ease; }
  html.bento-motion[data-rr-page] :is(#customCensorControls, .ep-custom, .phone-library, .phone-script, .tx-more, .cl-more, .job-project, .job-details, #metaBox) > summary::before { transition: transform .22s var(--bento-ease), background-color .15s ease; }
  html.bento-motion[data-rr-page] [data-rr-panel] .sec.open:not(.card, .panel) > .sec-b { animation: rr-sec-in .2s var(--bento-ease); }
  @keyframes rr-sec-in { from { opacity: 0; transform: translateY(-4px); } }
}
@media (forced-colors: active) {
  html[data-rr-page] [data-rr-panel] :is(.sec:not(.card, .panel), .rr-tile, .rr-dock) { border: 1px solid CanvasText; }
}
/* rr7-panel end · 15 */

/* ---------------------------------------------------------------------------
   12. Panel recipes — labelled fields, colour swatches, a list of lines, preset tiles, and the in-place text box.
   The Captions panel (draft-caption-ui.js) and the Text panel (text-panel.js) are built from these, in the studio and
   in the room, so a caption line and a text line are the same control. Page parts add hooks only, never a second look.
   ------------------------------------------------------------------------- */
html[data-rr-page] .seg2.sm { --seg-h: var(--bento-ctl-sm); }
/* a label and its control on one line: 72px of label, at least 44px tall */
html[data-rr-page] .rr-field {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
  min-height: var(--bento-ctl-md);
  margin-top: 6px;
}
/* a module hides a row with [hidden] (the room's Captions panel has no Position row): the display set on the recipes above must not beat it */
html[data-rr-page] :is(.rr-field, .rr-style, .rr-swatches, .rr-list, .rr-row, .rr-tune, .rr-chips, .rr-nudge, .rr-presets)[hidden] { display: none; }
html[data-rr-page] .rr-label { color: var(--bento-text-2); font-size: 12px; font-weight: 500; line-height: 1.3; }
html[data-rr-page] .rr-field > .seg2 { margin: 0; }
/* a field whose control may wrap onto a second line (the colour discs, then the letter case, in the room's narrow column): the label stays level with the first line, not centred between the two */
html[data-rr-page] .rr-field-top { align-items: start; }
html[data-rr-page] .rr-field-top > .rr-label { padding-top: calc((var(--bento-ctl-md) - 1.3em) / 2); }
html[data-rr-page] .rr-style { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
html[data-rr-page] .rr-style > .seg2 { flex: 0 0 auto; min-width: 96px; margin: 0; }
/* colour discs: a 22px disc in a 36 × 44 hit box; the ring hugs the disc (1px offset) */
html[data-rr-page] .rr-swatches { display: flex; flex-wrap: wrap; }
html[data-rr-page] .rr-swatch {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: var(--bento-ctl-md);
  padding: 0;
  border: 0;
  border-radius: var(--bento-radius-sm);
  background: none;
  cursor: pointer;
}
html[data-rr-page] .rr-swatch i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sw, #fff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
html[data-rr-page] .rr-swatch.on i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 2px var(--bento-tile), 0 0 0 4px var(--bento-cyan); }
html[data-rr-page] .rr-swatch:focus-visible { outline: 0; }
html[data-rr-page] .rr-swatch:focus-visible i { outline: 2px solid var(--bento-focus); outline-offset: 1px; }
html[data-rr-page] .rr-swatch.on:focus-visible i { outline-offset: 5px; }
html[data-rr-page] .rr-swatch:disabled { cursor: not-allowed; }
html[data-rr-page] .rr-swatch:disabled i { filter: grayscale(1) brightness(.7); }
/* a list of lines: hairline rows at least 44px tall; the playing one is the selected wash with a 2px cyan rule on its left */
html[data-rr-page] .rr-list {
  margin: 10px 0 0;
  border-top: 1px solid var(--bento-hairline);
  max-height: 236px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-rr-page] .rr-row {
  grid-template-columns: auto minmax(0, 1fr) var(--bento-ctl-sm) var(--bento-ctl-sm);
  border-bottom: 1px solid var(--bento-hairline);
}
html[data-rr-page] .rr-row.rr-on { background: var(--bento-select-fill); box-shadow: inset 2px 0 0 var(--bento-cyan); }
html[data-rr-page] .rr-time {
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px 0 10px;
  border: 0;
  background: none;
  color: var(--bento-text-2);
  font: 500 12px/1 var(--font);
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}
html[data-rr-page] .rr-time:hover:not(:disabled) { color: var(--bento-cyan); }
html[data-rr-page] .rr-row input[type=text].rr-text {          /* (0,3,2): a borderless line inside its row, over the filled field of section 6 */
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--bento-radius-xs);
  background-color: transparent;
  color: var(--bento-text);
  font: 500 13px/1.3 var(--font);
  text-overflow: ellipsis;
}
html[data-rr-page] .rr-row input[type=text].rr-text:hover:not(:disabled, :focus) { background-color: rgba(255, 255, 255, .05); border-color: transparent; }
html[data-rr-page] .rr-row input[type=text].rr-text:focus { background-color: var(--bento-well); border-color: transparent; }
html[data-rr-page] .rr-tune-btn,
html[data-rr-page] .rr-del {
  display: grid;
  place-items: center;
  width: var(--bento-ctl-sm);
  height: var(--bento-ctl-sm);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bento-text-3);
  font: 400 18px/1 var(--font);
  cursor: pointer;
}
html[data-rr-page] .rr-tune-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-rr-page] .rr-tune-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
html[data-rr-page] :is(.rr-tune-btn, .rr-del):hover:not(:disabled) { background: var(--bento-well-2); color: var(--bento-text); }
html[data-rr-page] .rr-del:hover:not(:disabled) { color: var(--bento-red-ink); }
html[data-rr-page] :is(.rr-time, .rr-tune-btn, .rr-del):disabled { color: var(--bento-text-disabled); cursor: not-allowed; }
html[data-rr-page] .rr-tune { display: grid; gap: 8px; padding: 2px 8px 12px 12px; }
html[data-rr-page] .rr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-rr-page] .rr-chip {
  min-height: var(--bento-ctl-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--bento-pill);
  background: var(--bento-well);
  color: var(--bento-text-soft);
  font: 500 12px/1 var(--font);
  cursor: pointer;
}
html[data-rr-page] .rr-chip.on { background: var(--bento-select-fill); box-shadow: var(--bento-select-ring); color: var(--bento-cyan); }
html[data-rr-page] .rr-nudge { display: flex; align-items: center; gap: 8px; }
html[data-rr-page] .rr-time-value { flex: 1 1 auto; min-width: 0; color: var(--bento-text-2); font: 500 12px/1.2 var(--font); font-variant-numeric: tabular-nums; text-align: center; }
html[data-rr-page] .rr-step {
  width: var(--bento-ctl-sm);
  height: var(--bento-ctl-sm);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bento-well-2);
  color: var(--bento-text);
  font: 500 18px/1 var(--font);
  cursor: pointer;
  touch-action: manipulation;
}
html[data-rr-page] .rr-step:hover:not(:disabled) { background: var(--bento-well-3); }
html[data-rr-page] .rr-step:disabled { background: var(--bento-well); color: var(--bento-text-disabled); cursor: not-allowed; }
html[data-rr-page] .dc-link { color: var(--bento-text-2); }
html[data-rr-page] .dc-link:hover { color: var(--bento-text); }
/* the Text tool's style tiles: five "Aa" faces in each style; selected is the one selected recipe */
html[data-rr-page] .rr-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
html[data-rr-page] .rr-preset {
  display: grid;
  place-items: center;
  min-height: var(--bento-ctl-md);
  padding: 0;
  border: 0;
  border-radius: var(--bento-radius-xs);
  background: var(--bento-well);
  cursor: pointer;
}
html[data-rr-page] .rr-preset.on { box-shadow: var(--bento-select-ring); }
html[data-rr-page] .rr-preset:hover:not(:disabled) { background: var(--bento-well-2); }
html[data-rr-page] .rr-preset:disabled { cursor: not-allowed; }
@media (max-width: 560px), (max-height: 500px) {
  html[data-rr-page] .rr-list { max-height: none; overflow: visible; }
}
/* the Text panel's lines (text-panel.js): the same row as a caption line, the words as a button that opens the line */
html[data-rr-page] .rr-line {
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--bento-radius-xs);
  background: none;
  color: var(--bento-text);
  font: 500 13px/1.3 var(--font);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
html[data-rr-page] .rr-line:hover { background: rgba(255, 255, 255, .05); }
html[data-rr-page] .tx-removed :is(.rr-time, .rr-line) { color: var(--bento-text-3); }
html[data-rr-page] .tx-removed .rr-line { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
html[data-rr-page] textarea.tx-text { width: 100%; min-height: 64px; padding: 8px 10px; resize: none; font: 500 13px/1.4 var(--font); box-sizing: border-box; }
/* the third allowed canvas overlay (text-layer.js): a selected text is a 1.5px cyan outline and four corner handles */
html[data-rr-page] .tx-item.tx-sel { outline: 1.5px solid var(--bento-cyan); outline-offset: 0; }
html[data-rr-page] .tx-item:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); }
html[data-rr-page] .tx-h { background: #fff; box-shadow: 0 0 0 1.5px var(--bento-cyan), 0 1px 3px rgba(0, 0, 0, .5); }
html[data-rr-page] .tx-guide { background: var(--bento-cyan); }
@media (pointer: coarse) { html[data-rr-page] .tx-h { width: 14px; height: 14px; margin: -7px 0 0 -7px; } }
/* the in-place text box of a caption or a text (.ce-phrase) is §6a's: one recipe */

/* ---------------------------------------------------------------------------
   13. The captions layer of the cut timeline (cut-timeline-ui.js ".ct-caps", caption-layer.js; note 957507317e104576) — one look on the studio's
   timeline and the room's, so nothing is added to record.css or room.css. A 14px pill in the periwinkle (a caption is not a clip and not a text),
   11px ruler-size ink, no icon, no hint text. The selected caption wears the ONE selected recipe; its two edges are the clips' handle look.
   A fine pointer presses a 26px-tall target (base rule), a finger 44px. Blocks only fade in, and only when motion is welcome.
   ------------------------------------------------------------------------- */
html[data-rr-page] .cut-timeline .ct-cap-body {
  border-radius: 7px;
  background: rgba(114, 136, 246, .34);
  box-shadow: inset 0 0 0 1px rgba(114, 136, 246, .75);
  color: var(--bento-text);
  font: 600 10.5px/1 var(--font);
}
html[data-rr-page] .cut-timeline .ct-cap-body:hover { background: rgba(114, 136, 246, .46); }
html[data-rr-page] .cut-timeline .ct-cap.sel .ct-cap-body { background: var(--bento-select-fill); box-shadow: var(--bento-select-ring); color: var(--bento-cyan); }
/* the selected caption wears 8px handles: the label starts clear of them */
html[data-rr-page] .cut-timeline .ct-cap.ct-edit.sel .ct-cap-body { padding-inline: 10px; }
html[data-rr-page] .cut-timeline .ct-cap-body:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); }
html[data-rr-page] .cut-timeline .ct-cap-edge { background: var(--bento-cyan); }
html[data-rr-page] .cut-timeline .ct-cap-edge::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 8px; margin: -4px 0 0 -1px; border-radius: 1px; background: var(--bento-navy); }
html[data-rr-page] .cut-timeline .ct-cap-edge:hover { background: var(--bento-cyan-hover); }
html[data-rr-page] .cut-timeline .ct-cap-edge:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: 1px; }
html[data-rr-page] .cut-timeline .ct-cap-guide { border-left-color: var(--bento-cyan); }
@media (pointer: coarse) {
  html[data-rr-page] .cut-timeline .ct-cap-body { font-size: 11px; }
  html[data-rr-page] .cut-timeline .ct-cap-edge::after { height: 12px; margin-top: -6px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] .cut-timeline .ct-cap { animation: ct-cap-in .15s ease-out; }
  @keyframes ct-cap-in { from { opacity: 0; } }
}

/* ---------------------------------------------------------------------------
   14. "Add text" on the cut timeline (cut-timeline-ui.js: a tool with accent / key / ghost / coach; text-tool.js) — one look on the studio's
   timeline and the room's. Kosta, 5 Oct: "the add text button that appears on the timeline should have some pizzazz to it. some users are taking a
   long time to figure out how to add text". The button is a well pill wearing the Keynote gradient ring (distinct from the filled cyan primary,
   which stays Send / Make new version, and from the 2px cyan "selected" ring), with a T-plus glyph, its words and a T keycap. While the take has
   no text, a dashed "+ Add text" row stands in the Text lane where the bars will be, and a one-time tip points at the button. Motion (the tip's
   fade, three calls of the ring) only where it is welcome; the pulse is finite.
   Specificity: the page parts style the pills as `html[data-rr-page="record"] body.studio #cutTimeline .ct-btn` / `... #roomCutTimeline .ct-btn`
   = (1,3,2), so every rule here names the ids and a class more, (1,4,1) and up, and adds no !important.
   ------------------------------------------------------------------------- */
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-btn.ct-add[data-ct-tool] {
  padding: 0 14px 0 12px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bento-well-2), var(--bento-well-2)) padding-box, var(--bento-grad) border-box;
  color: var(--bento-text);
  font-weight: 600;
  overflow: hidden;
}
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-btn.ct-add[data-ct-tool] svg { color: var(--bento-cyan); }
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-btn.ct-add[data-ct-tool]:hover:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(var(--bento-well-3), var(--bento-well-3)) padding-box, var(--bento-grad) border-box;
  color: #fff;
}
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-btn.ct-add[data-ct-tool]:is(:disabled, [aria-disabled="true"]) {
  background: var(--bento-well);
  border-color: transparent;
  color: var(--bento-text-disabled);
}
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-btn.ct-add[data-ct-tool]:is(:disabled, [aria-disabled="true"]) svg { color: inherit; }
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-key {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--bento-well-3);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35);
  color: var(--bento-text-2);
  font: 600 10.5px/1 var(--font);
}
/* a keycap is for a keyboard: not on a touch screen, and not where the tile is too narrow to spare it */
@media (hover: none), (pointer: coarse) {
  html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-key { display: none; }
}
@container cut-timeline (max-width: 520px) {
  html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-key { display: none; }
}
/* a phone's tile: the pill and the toolbar's separator give back a few px so Split, Delete, Undo, Redo and "Add text" share one row (the module's
   grid gives the Add group its own cell) */
@container cut-timeline (max-width: 460px) {
  html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-bar .ct-tools .ct-sep { margin: 0 2px; }
  html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-btn.ct-add[data-ct-tool] { padding: 0 10px 0 8px; gap: 3px; }
}
/* under 290px the words go (the module hides .ct-l) and the pill is the glyph alone; the dashed lane below still says "Add text" */
@container cut-timeline (max-width: 290px) {
  html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-btn.ct-add[data-ct-tool] { width: 44px; padding: 0; }
}
/* the empty Text lane: a dashed band across the lane with the invitation pinned at its left (the label is a module constant) */
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-ghost {
  border: 1px dashed var(--bento-cyan-line);
  border-radius: 7px;
  background: rgba(163, 238, 246, .06);
  color: var(--bento-cyan);
  font: 600 11px/1 var(--font);
}
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-ghost:hover { background: var(--bento-cyan-soft); border-style: solid; }
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline).ct-ghosting .ct-row::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 1px;
  bottom: 1px;
  border: 1px dashed var(--bento-hairline-strong);
  border-radius: 7px;
  pointer-events: none;
}
/* the one-time tip: the glass popover of the XS-16 tooltips (record.css), hung under the Add group, its caret over the button */
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach {
  border: 1px solid var(--bento-hairline-strong);
  border-radius: var(--bento-radius-sm);
  background: rgba(44, 44, 46, .94);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--bento-shadow);
  color: var(--bento-text-soft);
  font: 500 12.5px/1.4 var(--font);
}
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 50px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: rgba(44, 44, 46, .94);
  border-top: 1px solid var(--bento-hairline-strong);
  border-left: 1px solid var(--bento-hairline-strong);
}
/* a tile at the foot of the window: the module hangs the tip above the button instead (.ct-up), the caret on its lower edge pointing down */
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach.ct-up::before { top: auto; bottom: -6px; transform: rotate(225deg); }
@container cut-timeline (max-width: 290px) {
  html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach::before { right: 12px; }
}
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach b { color: var(--bento-text); font-weight: 600; }
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach-ok {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--bento-pill);
  background: var(--bento-well-3);
  color: var(--bento-text);
  font: 600 12.5px/1 var(--font);
  cursor: pointer;
}
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach-ok:hover { background: var(--bento-thumb); }
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach-ok:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); }
@media (pointer: coarse) {
  html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach-ok { min-height: 44px; }
}
/* while the tip shows, the button wears a still ring... */
html[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-btn.ct-add.ct-attn { box-shadow: 0 0 0 3px rgba(163, 238, 246, .22); }
/* ...and, where motion is welcome, calls three times (the established finite cyan pulse, record.css bento-rs-sugg); never infinite */
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-btn.ct-add.ct-attn { animation: ct-add-call 1.2s var(--bento-ease) .2s 3; }
  html.bento-motion[data-rr-page] :is(#cutTimeline, #roomCutTimeline) .ct-coach { animation: ct-coach-in .2s var(--bento-ease); }
  @keyframes ct-add-call { 50% { box-shadow: 0 0 0 7px rgba(163, 238, 246, .22); } }
  @keyframes ct-coach-in { from { opacity: 0; transform: translateY(-3px); } }
}

/* Text controls share the same persisted overlay values as the export. */
html[data-rr-page] .tx-scale { display:flex; align-items:center; gap:10px; font-size:12px; }
html[data-rr-page] .tx-scale input { flex:1; min-width:0; accent-color:var(--bento-cyan); }
html[data-rr-page] .tx-scale output { min-width:3.5em; text-align:right; }
html[data-rr-page] .tx-appearance { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; }
/* The selected Text editor uses the sidebar's scroll area; its Font, Color and Size controls stay together. */
html[data-rr-page] .rr-list.tx-list { max-height:none; overflow:visible; overscroll-behavior:auto; }
html[data-rr-page] .tx-appearance[hidden], html[data-rr-page] .tx-extra-colors[hidden], html[data-rr-page] .tx-color[hidden] { display:none; }
html[data-rr-page] .tx-font, html[data-rr-page] .tx-color { display:grid; gap:5px; min-width:0; font-size:12px; }
html[data-rr-page] .tx-font select { width:100%; min-width:0; min-height:36px; padding:6px 8px; border:1px solid var(--bento-hairline-strong); border-radius:8px; background:var(--bento-well); color:var(--bento-text); font:inherit; }
html[data-rr-page] .tx-color input { width:42px; height:36px; padding:3px; border:1px solid var(--bento-hairline-strong); border-radius:8px; background:var(--bento-well); cursor:pointer; }
html[data-rr-page] .tx-extra-colors { display:flex; gap:14px; margin:0 0 12px; }
html[data-rr-page] .tx-more > summary { min-height:36px; display:list-item; padding:7px 0; box-sizing:border-box; font-size:12px; cursor:pointer; }
html[data-rr-page] .tx-more[open] > summary { margin-bottom:4px; }
html[data-rr-page] .tx-add { margin-bottom:4px; }
html[data-rr-page] .tx-timing { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
html[data-rr-page] .tx-timing label { display:grid; gap:5px; font-size:12px; }
html[data-rr-page] .tx-timing input { width:100%; min-width:0; min-height:36px; padding:6px 8px; box-sizing:border-box; border:1px solid var(--bento-hairline-strong); border-radius:8px; color:var(--bento-text); background:var(--bento-well); }

/* rr7-captions begin
   Caption look controls (caption-look-panel.js, mounted by draft-caption-ui.js in the studio and the room) and the shared font strip (font-picker.js: the caption
   look's Font and the Text tool's). Built from the recipes above: .rr-field, .seg2.sm, .rr-swatch, the one selected ring. Apple-style: the looks are tiles drawn in
   their own look on a still of a picture, the faces a strip of "Aa" in their own face, the number beside the slider; no native select, no native colour well.
   Dark only, like every Bento surface; every value is a token or documented. No overrides by force. ---------------------------------------------------------- */
html[data-rr-page] :is(.cl-more-body .rr-field, .cl-hex, .cl-hint, .cl-note, .cl-looks, .cl-fonts, .rr-fonts, .rr-looks)[hidden] { display: none; }
/* Size: a slider with the three released sizes marked under its track, and the number */
html[data-rr-page] .cl-size-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-rr-page] .cl-slider { position: relative; flex: 1 1 auto; min-width: 0; }
html[data-rr-page] .cl-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--bento-ctl-md); margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y;
  --fill: 33%;
}
html[data-rr-page] .cl-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--bento-cyan) var(--fill), var(--bento-track-off) var(--fill)); }
html[data-rr-page] .cl-slider input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--bento-cyan) var(--fill), var(--bento-track-off) var(--fill)); }
html[data-rr-page] .cl-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 1px 4px rgba(0, 0, 0, .5); }
html[data-rr-page] .cl-slider input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 1px 4px rgba(0, 0, 0, .5); }
html[data-rr-page] .cl-slider input[type="range"]:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); border-radius: var(--bento-radius-xs); }
html[data-rr-page] .cl-slider input[type="range"]:disabled { cursor: not-allowed; }
html[data-rr-page] .cl-slider input[type="range"]:disabled::-webkit-slider-thumb { background: var(--bento-text-disabled); }
html[data-rr-page] .cl-ticks { position: absolute; inset: 0; pointer-events: none; }
html[data-rr-page] .cl-ticks i { position: absolute; top: calc(50% + 12px); left: calc(11px + (100% - 22px) * var(--p)); width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: var(--bento-text-3); }
html[data-rr-page] .cl-readout { flex: none; min-width: 3.6em; color: var(--bento-text); font: 600 12px/1 var(--font); font-variant-numeric: tabular-nums; text-align: right; }
html[data-rr-page] .cl-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Look: six tiles in three columns, each one a still of a picture with "Aa" drawn in that look, its name under it */
html[data-rr-page] .rr-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; }
html[data-rr-page] .rr-look {
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 4px; min-width: 0; min-height: 60px; padding: 5px 4px 5px;
  border: 0; border-radius: var(--bento-radius-xs); background: var(--bento-well); color: var(--bento-text-2); cursor: pointer; touch-action: manipulation;
}
html[data-rr-page] .rr-look:hover:not(:disabled) { background: var(--bento-well-2); }
html[data-rr-page] .rr-look.on { background: var(--bento-select-fill); box-shadow: var(--bento-select-ring); color: var(--bento-cyan); }
html[data-rr-page] .rr-look:disabled { cursor: not-allowed; color: var(--bento-text-disabled); }
html[data-rr-page] .rr-look-stage { display: grid; place-items: center; width: 100%; height: 30px; border-radius: 6px; background: #6b6b70; overflow: hidden; }
html[data-rr-page] .rr-look-aa { display: block; font: 700 17px/1.15 Arial, Helvetica, sans-serif; letter-spacing: .4px; }
html[data-rr-page] .rr-look-name { max-width: 100%; font: 500 10.5px/1.2 var(--font); text-align: center; text-wrap: balance; overflow-wrap: anywhere; }   /* a narrow column (the room's) wraps 'Yellow outline' on two lines instead of cutting it */
/* Font: the seven faces in a grid of four (a mouse has no way to scroll a hidden strip sideways, and every face stays in sight) */
html[data-rr-page] .cl-font-host, html[data-rr-page] .tx-font-host { min-width: 0; }
html[data-rr-page] .rr-fonts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 1px; overflow: visible; }
html[data-rr-page] .rr-font {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 50px; padding: 5px 4px;
  border: 0; border-radius: var(--bento-radius-xs); background: var(--bento-well); color: var(--bento-text); cursor: pointer; touch-action: manipulation;
}
html[data-rr-page] .rr-font:hover:not(:disabled) { background: var(--bento-well-2); }
html[data-rr-page] .rr-font.on { background: var(--bento-select-fill); box-shadow: var(--bento-select-ring); }
html[data-rr-page] .rr-font:disabled { cursor: not-allowed; color: var(--bento-text-disabled); }
html[data-rr-page] .rr-font-aa { display: block; font-size: 22px; line-height: 1.1; }
html[data-rr-page] .rr-font-name { font: 500 10.5px/1.2 var(--font); color: var(--bento-text-2); }
html[data-rr-page] .rr-font.on .rr-font-name { color: var(--bento-cyan); }
html[data-rr-page] .rr-font:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] .rr-font.rr-loading .rr-font-aa { animation: rr-font-load .9s var(--bento-ease) 6; }   /* finite: a face that is slow to load pulses, then rests */
  @keyframes rr-font-load { 50% { opacity: .35; } }
}
/* Customize: a quiet disclosure with the controls Look does not need to show */
html[data-rr-page] .cl-more { margin-top: 4px; border-top: 1px solid var(--bento-hairline); }
/* design pass (7 Oct): the one sub-disclosure of every section (foundation section 15): the left chevron turning 90 degrees, no chevron at the right */
html[data-rr-page] .cl-more > summary {
  padding: 0 2px;
  color: var(--bento-text-soft); font: 500 13px/1.2 var(--font);
}
html[data-rr-page] .cl-more > summary:hover { color: var(--bento-text); }
html[data-rr-page] .cl-more > summary:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: -2px; border-radius: var(--bento-radius-xs); }
html[data-rr-page] .cl-more-body { padding-bottom: 6px; }
html[data-rr-page] .cl-more-body :is(.switch-row, .sw-row) { margin-top: 6px; }
html[data-rr-page] .rr-swatch.cl-custom i { background: conic-gradient(#ff5a5a, #ffd84d, #43d9a3, #a3eef6, #7288f6, #9d7bff, #ff5a5a); }
/* the Custom disc with its hex field open: a hairline, not the selection ring (that is the chosen colour's alone) */
html[data-rr-page] .rr-swatch.cl-custom[aria-expanded="true"] i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 2px var(--bento-tile), 0 0 0 3px var(--bento-hairline-strong); }
html[data-rr-page] .cl-hex { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px 80px; }
html[data-rr-page] .cl-hex input { width: 112px; min-height: var(--bento-ctl-sm); padding: 0 10px; font: 500 13px/1 var(--bento-mono, ui-monospace, "SF Mono", monospace); text-transform: uppercase; }
html[data-rr-page] .cl-hex input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--bento-red-ink); }
html[data-rr-page] .cl-hint { margin: 8px 0 0; color: var(--bento-amber); font-size: 12px; line-height: 1.45; }
html[data-rr-page] .cl-note { margin: 4px 0 0; }
html[data-rr-page] .cl-reset { margin-top: 2px; }
@media (pointer: coarse) { html[data-rr-page] .cl-more-body .seg2.sm, html[data-rr-page] .cl-size .seg2.sm { --seg-h: 50px; } }
/* review round 1: a customised look says so (a quiet tag, the tile it started from ringed dotted), the radio tiles show their focus, a hex field names what it wants, Reset look is a ghost button, the box gesture line */
html[data-rr-page] .cl-tag[hidden] { display: none; }
html[data-rr-page] .cl-tag { display: block; margin-top: 3px; color: var(--bento-text-3); font: 500 10.5px/1.2 var(--font); font-style: normal; }
html[data-rr-page] .rr-look.near:not(.on) { outline: 1.5px dotted var(--bento-text-3); outline-offset: -3px; }
html[data-rr-page] .rr-look:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: -2px; }
html[data-rr-page] .cl-hex { flex-wrap: wrap; }
html[data-rr-page] .cl-hex-help { flex: 1 1 100%; margin: 0; color: var(--bento-red-ink); font: 500 11.5px/1.35 var(--font); }
html[data-rr-page] .cl-hex-help[hidden] { display: none; }
html[data-rr-page] .cl-reset { margin-top: 10px; }
html[data-rr-page] .dc-status:has(+ .dc-move:not([hidden])) { margin-bottom: 2px; }   /* the two gesture lines read as one note */
html[data-rr-page] .dc-move { margin-top: 0; }
html[data-rr-page] .tx-looks .rr-looks { min-width: 0; }
/* rr7-captions end */
/* rr7-timeline begin: Filler words (reactor/filler-words-ui.js), the studio's and the room's one list. Chips, rows and the time button are the panel recipes of section 12
   (.rr-chip, .rr-list, .rr-time); amber is what was found (the same amber as the ticks on the speech lane). Ink on the dark tile 4.5:1 or better, 44px rows. */
html[data-rr-page] .fw { gap: 10px; }
html[data-rr-page] .fw-status { margin: 0; color: var(--bento-text-2); font: 500 12px/1.5 var(--font); }
html[data-rr-page] .fw-help { margin: 0; color: var(--bento-text-3); font: 500 12px/1.5 var(--font); }
html[data-rr-page] .fw-group { margin: 12px 0 0; color: var(--bento-text-soft); font: 600 12px/1.4 var(--font); }
/* No scroller of its own (UUX-8): the panel already scrolls, and two lists each with a 296px window stacked their scroll areas (a half-cut row was the only hint, and the
   wheel over a list never reached the panel). The lists are as long as they are. */
html[data-rr-page] .fw-list { max-height: none; overflow: visible; overscroll-behavior: auto; margin: 4px 0 0; padding: 0; list-style: none; }
html[data-rr-page] .fw-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 0 2px; min-height: 52px; border-bottom: 1px solid var(--bento-hairline); }
html[data-rr-page] .fw-pick { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
html[data-rr-page] .fw-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--bento-cyan); cursor: pointer; }
html[data-rr-page] .fw-pick input:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: var(--bento-focus-offset); }
html[data-rr-page] .fw-pick input:disabled { cursor: not-allowed; }
html[data-rr-page] .fw-body { display: grid; gap: 1px; min-width: 0; padding: 6px 4px 6px 0; }
html[data-rr-page] .fw-ctx { color: var(--bento-text-2); font: 500 13px/1.35 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-rr-page] .fw-ctx b { color: var(--bento-amber); font-weight: 700; }
html[data-rr-page] .fw-meta { color: var(--bento-text-3); font: 500 11.5px/1.35 var(--font); font-variant-numeric: tabular-nums; }
html[data-rr-page] .fw-skip { color: var(--bento-amber); font: 600 11.5px/1.35 var(--font); }
html[data-rr-page] .fw-one { min-height: var(--bento-ctl-sm); padding: 0 12px; font-size: 12px; }
html[data-rr-page] .fw-done { padding: 0 12px; color: var(--bento-text-3); font: 600 12px/1 var(--font); }
html[data-rr-page] .fw-row[data-cut] .fw-body { opacity: .55; }
html[data-rr-page] .fw-row[data-cut] .fw-ctx { text-decoration: line-through; text-decoration-color: var(--bento-text-3); }
html[data-rr-page] .fw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
html[data-rr-page] .fw-help.fw-warn { color: var(--bento-amber); }
@media (pointer: coarse) { html[data-rr-page] .fw-one { min-height: 44px; } html[data-rr-page] .fw-time { min-height: 44px; } }
/* the hesitations chip is a label, not a switch: selected tint without the ring, no pointer, no hover */
/* UX-6 (interplay review): a label with a check, not a tinted chip, so only the chips that can be pressed look pressed when they are on */
html[data-rr-page] .rr-chip.fw-fixed { background: none; box-shadow: none; padding-left: 0; color: var(--bento-text-2); cursor: default; display: inline-flex; align-items: center; gap: 6px; }
html[data-rr-page] .rr-chip.fw-fixed::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--bento-cyan); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-rr-page] .fw-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-rr-page] .fw-status:focus { outline: none; }
/* rr7-timeline end */

/* rr7-design begin -----------------------------------------------------------
   The design lead's consistency pass over the round (7 Oct 2026). Kosta: "examine the side pannel with tools in all the experiences ...
   make sure the side pannel is maximum user friendly and has consistent design accross all experiences. make it apple style design with
   functionality inspired by premiere pro and capcut". Every rule here makes one control look the same wherever it appears; none changes
   what a control does, and every id, class and data attribute stays as the pages and tests know it.
   ------------------------------------------------------------------------- */
html[data-rr-page] {
  --rr-g-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 3-5 5 5 5M3 8h10a7 7 0 0 1 0 14'/%3E%3C/svg%3E");
  --rr-g-reset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11a9 9 0 1 1 2 7M3 3v8h8'/%3E%3C/svg%3E");
  --rr-g-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3z'/%3E%3C/svg%3E");
  --rr-g-cam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='m15 10 6-3v10l-6-3'/%3E%3C/svg%3E");
  --rr-g-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
/* 1. Undo | Reset layout. The setup tile draws them as glyph pills on the well (record-setup.css XP-08, .composition-history, glyphs from
      studio.js); the studio's review section and the room drew two wide filled pills with no glyph. One look everywhere: the setup's. */
html[data-rr-page] :is(#arrUndo, #arrReset, #epUndo, #epReset).btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--bento-radius-sm);
  background: var(--bento-well);
  box-shadow: none;
  color: var(--bento-text);
  font: 500 12.5px/1.2 var(--font);
}
html[data-rr-page] :is(#arrUndo, #arrReset, #epUndo, #epReset).btn::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--rr-g-undo) center / contain no-repeat;
          mask: var(--rr-g-undo) center / contain no-repeat;
}
html[data-rr-page] :is(#arrReset, #epReset).btn::before { -webkit-mask-image: var(--rr-g-reset); mask-image: var(--rr-g-reset); }
html[data-rr-page] :is(#arrUndo, #arrReset, #epUndo, #epReset).btn:hover:not(:disabled, [aria-disabled="true"]) { background: var(--bento-well-2); color: #fff; }
html[data-rr-page] :is(#arrUndo, #arrReset, #epUndo, #epReset).btn:is(:disabled, [aria-disabled="true"]) { background: var(--bento-well); color: var(--bento-text-disabled); cursor: not-allowed; }
html[data-rr-page] :is(.row:has(> #arrUndo), .ep-row:has(> #epUndo)) { justify-content: flex-start; }
/* 2. Which frame you edit (Source video | Your camera). The setup's picker carries a glyph before each word; the review's and the room's
      did not. The same 14px glyphs, before the words, in both. */
html[data-rr-page] :is(#layoutTarget, #epTarget) > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
html[data-rr-page] :is(#layoutTarget, #epTarget) > button::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--rr-g-source) center / contain no-repeat;
          mask: var(--rr-g-source) center / contain no-repeat;
}
html[data-rr-page] :is(#layoutTarget, #epTarget) > button[data-target="cam"]::before { -webkit-mask-image: var(--rr-g-cam); mask-image: var(--rr-g-cam); }
/* 3. Add caption and Add text: one "add" button in every list (the studio's and the room's Captions and Text sections). Add caption read
      as grey words with no edge, Add text as an outlined pill; both are now the outlined pill with a cyan plus, like the timeline's
      "+ Add text" lane and the Presets' New preset. */
html[data-rr-page] :is(#draftCaptionEditor, #epCaptionText, #textPanel, #epTextSec) :is(.dc-add, .tx-add).btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: var(--bento-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--bento-hairline-strong);
  color: var(--bento-text);
  font: 600 13px/1 var(--font);
}
html[data-rr-page] :is(#draftCaptionEditor, #epCaptionText, #textPanel, #epTextSec) :is(.dc-add, .tx-add).btn::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: var(--bento-cyan);
  -webkit-mask: var(--rr-g-plus) center / contain no-repeat;
          mask: var(--rr-g-plus) center / contain no-repeat;
}
html[data-rr-page] :is(#draftCaptionEditor, #epCaptionText, #textPanel, #epTextSec) :is(.dc-add, .tx-add).btn:hover:not(:disabled, [aria-disabled="true"]) { background: var(--bento-well); color: #fff; }
html[data-rr-page] :is(#draftCaptionEditor, #epCaptionText, #textPanel, #epTextSec) :is(.dc-add, .tx-add).btn:is(:disabled, [aria-disabled="true"]) { box-shadow: inset 0 0 0 1px var(--bento-hairline); color: var(--bento-text-disabled); cursor: not-allowed; }
html[data-rr-page] :is(#draftCaptionEditor, #epCaptionText, #textPanel, #epTextSec) :is(.dc-add, .tx-add).btn:is(:disabled, [aria-disabled="true"])::before { background-color: var(--bento-text-disabled); }
/* 4. Readouts beside a slider speak in the text face (the caption size "1.00x", the zoom "1.0x"); the duck's "-21 dB" was in the mono face,
      which drew a wide gap before "dB". */
html[data-rr-page] .rr-duck-readout { font: 500 12.5px/1 var(--font); font-variant-numeric: tabular-nums; }
/* rr7-design end */
/* rr7-fixer1 begin · the integration fixer's CSS (interplay / UX review round 1, 7 Oct 2026) */
/* UX-1 / UX-8: 44px under a finger. The Text card's colour wells and its Start / End fields were 42 x 36 and 151 x 38 beside rows that are all 44 high, and the colour discs were 36 wide
   (contiguous, so a finger lands on a neighbour). The empty Text lane's dashed "+ Add text" invitation stays 26px: it sits between the ruler (a scrub target) and the clip row, so a taller
   hit area would take theirs, and it is only a shortcut to the 44px Add text pill (aria-hidden, no tab stop). */
@media (pointer: coarse), (max-width: 640px) {
  html[data-rr-page] .tx-color input { width: 44px; height: 44px; }
  html[data-rr-page] .tx-timing input { min-height: 44px; }
  html[data-rr-page] .rr-swatch { width: 44px; }
}
/* rr7-fixer1 end */
/* rr7-nav begin ---------------------------------------------------------------
   16. The global header (Kosta, 7 Oct 2026: "I want this whole thing to be called Reaction Room. where the common word should be
   Reaction ... I also need a more straightforward way to move between recording and reviewing and editing where the button to go between
   them is clear"; his names, 8 Oct: Room · Review · Edit). One recipe on every creator page: the studio, the board, the room, the job
   page, the upload page and the layout page. The names live in reactor/product-names.js; reactor/app-nav.js draws the parts into the
   bar's one mount (<div data-app-nav="room|review|edit">) and the pages repeat no markup.
   - 16a The mount draws straight into the bar's row (display: contents): the area title sits beside the mark, the switcher's slot
         between the bar's left and right groups. The module centres the switcher on the bar (a relative `left`) wherever that clears
         the bar's own controls, and otherwise stops 16px short of them, so it never covers a button and never jumps between pages.
   - 16b The lockup: the NM mark alone (home: Reaction Review) and the area title, "Reaction" in the quiet weight and the area word
         emphasised, so the shared word reads as the family name. The wordmark and its "Reaction Room" label (§3) step aside here.
   - 16c The switcher: an Apple segmented control with line glyphs (a record button, the board's grid, the sliders of an edit), equal
         segments 44px tall (the whole segment is the target), the current one on the grey thumb (§9's thumb) with a cyan glyph.
         Edit with no project is aria-disabled: the disabled ink, no thumb, a press says why. No new colour: the record dot is the
         launcher's red-pink and only while you are in the room.
   - 16d The tooltip (hover after a moment, keyboard focus, a disabled press): the bento popover, the shortcut in a keycap.
   - 16e Phones (≤640px): the same three links as an iOS tab bar at the foot of the screen (app-nav moves the <nav> into a body-level
         .rr-tabbar so nothing on the page can paint over it), glyph over word, the safe-area inset under it, the page's own fixed
         things (the studio's Create Video bar, the draft notice, toasts, the access notice) ride above it. It steps away while a
         take counts down or records.
   - 16f Breadcrumbs: quiet, desktop only. In the room and the layout page "Reaction Review ›" leads the title row; on the job page a
         row takes the eyebrow's place ("Reaction Review › Creating ‘<title>’").
   - 16g The leave question (app-nav confirmLeave): the dialog recipe of §7, Keep it as the primary, Leave as the quiet destructive.
   Motion only under html.bento-motion and no-preference: colour fades, never a loop. No !important.
   ------------------------------------------------------------------------- */
/* 16a */
html[data-rr-page] [data-app-nav] { display: contents; }
html[data-rr-page] .rr-mode-desc[hidden] { display: none; }
html[data-rr-page] .rr-nav-slot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-inline: auto;
}
html[data-rr-page] .rr-nav-slot > .rr-modes { position: relative; }   /* app-nav sets `left` to centre it on the bar */

/* 16b · the mark replaces the wordmark; the brand's words stay in the DOM for screen readers (§3), its label goes */
html[data-rr-page] .topbar:has(> [data-app-nav]) > .brand {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  gap: 0;
  margin-left: -10px;                           /* the 24px mark sits on the column edge; its 44px target runs into the gutter */
  margin-right: 0;                              /* the board's phone rule pushed everything after the logo away (auto) */
  border-radius: 12px;
}
html[data-rr-page] .topbar:has(> [data-app-nav]) > .brand > .dot {
  width: 24px;
  height: 23px;                                 /* nm-mark.svg is 70.5 × 67.66 */
  background-image: url("nm-mark.svg");
  background-size: contain;
}
html[data-rr-page] .topbar:has(> [data-app-nav]) > .brand::after { content: none; }
html[data-rr-page] body.studio.screen-light .topbar:has(> [data-app-nav]) > .brand > .dot { background-image: url("nm-mark-navy.svg"); }
html[data-rr-page] .rr-area {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: -6px;                            /* 8px from the mark (the bar's gap is 14) */
  margin-right: auto;                           /* the bar's own controls keep to the right */
  overflow: hidden;
  font: 650 17px/22px var(--font);
  letter-spacing: -.018em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}
html[data-rr-page] .rr-area .rr-fam { font-weight: 450; color: color-mix(in srgb, var(--ink) 64%, transparent); }
/* the page's own large heading names the area (the board's mast, the studio's title): the bar's title waits until it scrolls away (app-nav data-large-title) */
html[data-rr-page] .rr-area[data-under-title="true"] { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] .rr-area { transition: opacity .18s ease, visibility .18s; }
}
/* the same family styling where a page titles its area in large type (the studio's stage head; the board's mast uses its own em) */
html[data-rr-page] h1 > .rr-fam { font-weight: 600; color: var(--bento-text-2); }
html[data-rr-page] body.studio.screen-light h1 > .rr-fam { color: #536175; }
html[data-rr-page] .rr-nav-slot:empty { display: none; }   /* a phone: the switcher is the tab bar */

/* 16c · the switcher */
html[data-rr-page] .rr-modes {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;                       /* equal segments, as Apple's segmented control */
  height: 44px;
  padding: 0;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
html[data-rr-page] .rr-modes .rr-mode {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 108px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  font: 600 13.5px/1 var(--font);
  letter-spacing: -.008em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
html[data-rr-page] .rr-modes .rr-mode::before {    /* the thumb, 4px inside the segment: the segment itself is the 44px target */
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 10px;
  background-color: transparent;
}
html[data-rr-page] .rr-modes .rr-glyph { flex: none; width: 17px; height: 17px; }
html[data-rr-page] .rr-modes .rr-rec { fill: currentColor; }
html[data-rr-page] .rr-modes .rr-mode:hover:not([aria-current], [aria-disabled="true"]) { color: var(--ink); }
html[data-rr-page] .rr-modes .rr-mode:hover:not([aria-current], [aria-disabled="true"])::before { background-color: color-mix(in srgb, var(--ink) 7%, transparent); }
html[data-rr-page] .rr-modes .rr-mode[aria-current] { color: var(--ink); cursor: default; }
html[data-rr-page] .rr-modes .rr-mode[aria-current]::before {
  background-color: var(--bento-thumb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
}
html[data-rr-page] .rr-modes .rr-mode[aria-current] .rr-glyph { color: var(--bento-cyan); }
html[data-rr-page] .rr-modes .rr-mode[data-mode="room"][aria-current] .rr-rec { fill: var(--bento-red); }   /* on air */
html[data-rr-page] .rr-modes .rr-mode[aria-disabled="true"] { color: color-mix(in srgb, var(--ink) 38%, transparent); cursor: not-allowed; }
html[data-rr-page] .rr-modes .rr-mode:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: -2px; }   /* inside the track (a segmented thumb's ring, §5) */
html[data-rr-page] .rr-modes .rr-mode:active:not([aria-current], [aria-disabled="true"])::before { background-color: color-mix(in srgb, var(--ink) 12%, transparent); }
/* the studio's white screen light: the thumb turns paper-white on the lit bar */
html[data-rr-page] body.studio.screen-light .rr-modes .rr-mode[aria-current]::before { background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(0, 0, 0, .06); }
html[data-rr-page] body.studio.screen-light .rr-modes .rr-mode[aria-current] .rr-glyph { color: #245cc2; }
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] .rr-modes .rr-mode { transition: color .15s ease; }
  html.bento-motion[data-rr-page] .rr-modes .rr-mode::before { transition: background-color .15s ease; }
}
/* a tablet or a narrow window (641 to 1023px, `width <` so that exactly 1024px keeps the full control): the segments tighten and KEEP their
   words. A glyph with no word cannot be learned by touch (there is no hover for the tooltip), and the words are the whole point of the
   switcher. Under 820px (the room's bar: help, tip, Share, Export and the account beside it) the glyph is the part that goes: the words
   alone fit a 700px window on one row. */
@media (min-width: 641px) and (width < 1024px) {
  html[data-rr-page] .rr-modes .rr-mode { min-width: 0; padding: 0 12px; gap: 6px; font-size: 13px; }
  html[data-rr-page] .rr-modes .rr-glyph { width: 16px; height: 16px; }
}
@media (min-width: 641px) and (width < 820px) {
  html[data-rr-page] .rr-modes .rr-mode { padding: 0 11px; }
  html[data-rr-page] .rr-modes .rr-glyph { display: none; }
}

/* 16d · the tooltip */
html[data-rr-page] .rr-nav-tip {
  position: fixed;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(340px, calc(100vw - 24px));
  padding: 8px 12px;
  border-radius: var(--bento-radius-sm);
  background-color: rgba(44, 44, 48, .97);
  box-shadow: var(--bento-edge), 0 14px 34px -12px rgba(0, 0, 0, .8);
  color: var(--bento-text);
  font: 500 12.5px/1.35 var(--font);
  letter-spacing: -.003em;
  pointer-events: none;
  opacity: 0;
}
html[data-rr-page] .rr-nav-tip[hidden] { display: none; }
html[data-rr-page] .rr-nav-tip.on { opacity: 1; }
html[data-rr-page] .rr-nav-tip kbd {
  flex: none;
  padding: 2px 6px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, .1);
  color: var(--bento-text-soft);
  font: 600 11.5px/1.2 var(--font);
}
@media (prefers-reduced-motion: no-preference) {
  html.bento-motion[data-rr-page] .rr-nav-tip { transition: opacity .12s ease; }
}

/* 16e · phones: the tab bar */
html[data-rr-page] .rr-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;                                  /* over the page and its fixed bars (the studio's Create Video bar is 32); under menus, sheets and dialogs */
  box-sizing: border-box;
  padding: 0 max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
  background-color: rgba(22, 22, 24, .88);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--bento-hairline);
}
html[data-rr-page] .rr-tabbar .rr-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html[data-rr-page] .rr-tabbar .rr-mode {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  height: 54px;
  padding: 7px 4px 5px;
  border-radius: 12px;
  color: var(--bento-text-2);
  font: 600 11px/1.15 var(--font);
  letter-spacing: .01em;
}
html[data-rr-page] .rr-tabbar .rr-mode::before { content: none; }
html[data-rr-page] .rr-tabbar .rr-glyph { width: 25px; height: 25px; }
html[data-rr-page] .rr-tabbar .rr-mode[aria-current] { color: var(--bento-cyan); }
html[data-rr-page] .rr-tabbar .rr-mode[aria-disabled="true"] { color: color-mix(in srgb, var(--ink) 34%, transparent); }
html[data-rr-page][data-rr-tabbar] { --rr-tabbar-h: calc(54px + env(safe-area-inset-bottom)); scroll-padding-bottom: var(--rr-tabbar-h); }
html[data-rr-page][data-rr-tabbar] body::after { content: ""; display: block; height: var(--rr-tabbar-h); }   /* the page's end clears the bar */
/* while a take counts down or records, nothing may take the person away: the bar steps aside (the header is inert) */
html[data-rr-page][data-rr-tabbar] body.studio:is([data-phase=countdown], [data-phase=recording]) > .rr-tabbar { display: none; }
html[data-rr-page][data-rr-tabbar] body.studio:is([data-phase=countdown], [data-phase=recording])::after { content: none; }
/* the page's own fixed things ride above it: the studio's Create Video bar sits on the tab bar as one surface (as a player rides on
   iOS's tab bar), the draft notice, toasts and the access notice */
html[data-rr-page][data-rr-tabbar] body.studio .rv-send-bar { bottom: var(--rr-tabbar-h); padding-bottom: 8px; border-top-color: var(--bento-hairline); background-color: rgba(22, 22, 24, .88); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); }
html[data-rr-page][data-rr-tabbar] body.studio:has(.rv-send-bar:not([hidden])) > .rr-tabbar { box-shadow: none; }
html[data-rr-page][data-rr-tabbar] body.studio:has(.rv-send-bar:not([hidden])) { padding-bottom: var(--rr-send-bar-height, 64px); }
html[data-rr-page][data-rr-tabbar] body.studio:has(.rv-send-bar:not([hidden]))::after { height: var(--rr-tabbar-h); }
/* One measured bottom clearance: the send bar sits above navigation, whose safe-area inset is counted once. */
html[data-rr-page]:has(body.studio .rv-send-bar:not([hidden])) { scroll-padding-bottom: var(--rr-studio-bottom-inset, calc(64px + env(safe-area-inset-bottom))); }
/* Typing on a software keyboard keeps the available screen for the field. Navigation returns on dismissal. */
html[data-rr-page][data-rr-keyboard] .rr-tabbar { display: none; }
html[data-rr-page][data-rr-tabbar][data-rr-keyboard] { --rr-tabbar-h: 0px; scroll-padding-bottom: 12px; }
/* (the room's finish dock is the last tile of its panel, not a fixed bar: it needs no offset, and `bottom` on a relatively positioned box
   would lift it over the section above it. The body's end spacer above already clears the tab bar.) */
html[data-rr-page][data-rr-tabbar] .ep-restored[data-open="true"] { bottom: calc(var(--rr-tabbar-h) + 64px); }
html[data-rr-page][data-rr-tabbar] body > .toast { bottom: calc(var(--rr-tabbar-h) + 16px); }
html[data-rr-page][data-rr-tabbar] body:has(.rv-send-bar:not([hidden])) > .toast { bottom: calc(var(--rr-tabbar-h) + 80px); }
html[data-rr-page][data-rr-tabbar] .rr-access-notice { bottom: calc(var(--rr-tabbar-h) + 12px); }

/* 16f · breadcrumbs */
html[data-rr-page] .rr-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font: 500 13px/18px var(--font);
  letter-spacing: -.005em;
  color: var(--bento-text-2);
  white-space: nowrap;
}
html[data-rr-page] .rr-crumbs .rr-crumb { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; border-radius: 6px; }
html[data-rr-page] .rr-crumbs > a.rr-crumb:first-child { flex-shrink: 0; }                        /* the home never shrinks; a project's title between the steps does */
html[data-rr-page] .rr-crumbs a.rr-crumb { padding: 13px 6px; margin: -13px -6px; }                 /* an 18px line of type, a 44px target: the way back is the path's first step */
html[data-rr-page] .rr-crumbs a.rr-crumb:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
html[data-rr-page] .rr-crumbs a.rr-crumb:focus-visible { outline: 2px solid var(--bento-focus); outline-offset: 2px; }
html[data-rr-page] .rr-crumbs [aria-current="page"] { color: var(--bento-text-soft); }
html[data-rr-page] .rr-crumb-gap { flex: none; display: inline-flex; align-items: center; }
html[data-rr-page] .rr-crumb-sep { flex: none; width: 13px; height: 13px; color: var(--bento-text-3); }
html[data-rr-page] .rr-crumbs-row { margin: 0 0 10px; }
@media (max-width: 640px) {
  html[data-rr-page] .rr-crumbs { display: none; }
}

/* 16g · the leave question */
html[data-rr-page] dialog.rr-leave {
  box-sizing: border-box;
  width: min(460px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--bento-hairline-strong);
  border-radius: var(--bento-radius-lg);
  background-color: var(--bento-tile);
  box-shadow: var(--bento-shadow);
  color: var(--bento-text);
}
html[data-rr-page] dialog.rr-leave h2 { margin: 0 0 10px; font: 700 20px/1.25 var(--font); letter-spacing: -.02em; text-wrap: balance; }
html[data-rr-page] dialog.rr-leave p { margin: 0; font: 400 14px/1.5 var(--font); color: var(--bento-text-2); }
html[data-rr-page] dialog.rr-leave .rr-leave-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; --ctl-h: var(--bento-ctl-md); }
html[data-rr-page] dialog.rr-leave .rr-leave-actions .btn { min-width: 112px; font-weight: 600; }
@media (max-width: 640px) {
  html[data-rr-page] dialog.rr-leave .rr-leave-actions { flex-direction: column-reverse; }
  html[data-rr-page] dialog.rr-leave .rr-leave-actions .btn { width: 100%; }
}
/* rr7-nav end */