/* BENCH — Studio Bench design system.
   Source of truth: docs/design/handover/Studio Bench.dc.html + BUILD-PLAN.md.
   This file wholly replaces tokens.css / desktop-tokens.css / signal.css's palette for Studio.
   Every value below is lifted from the approved design. Class prefix bn-. */

/* al: "the fonts are still wrong." Root cause traced to this file's own @font-face block, not
   anything in the Chain drawer that was actually being looked at: chain.css's header says
   outright "Supersedes bench.css entirely... Bench is a stale, voided design," but studio.html
   still links this stylesheet (some .bn- classes are still reachable), and this block re-declared
   the SAME four Urbanist weights chain.css already declares. Two @font-face rules for the same
   (family, weight) register two separate FontFace objects — confirmed live: weight 500 ended up
   with one loaded and one permanently unloaded, and document.fonts.check('500 11px Urbanist')
   returned false. 500 is every legend, every primary action, every SVG label in the instruments
   (studio.html's own font-warmup comment) — with the check failing, the browser SYNTHESISES a
   fake bold from 400 for every one of them, the smeared look the report was describing.
   Removed here, not by dropping the whole stylesheet link (blast-radius risk to the .bn- classes
   still in use) — chain.css's identical block is the one and only source of truth going forward. */

:root{
  /* ── ground ─────────────────────────────────────────────────────────── */
  --bn-page:            #070D0E;
  --bn-shell:           radial-gradient(80% 60% at 16% 90%, #16262A 0%, #0E1719 44%, #0B1214 100%);
  --bn-shell-0:         #16262A;
  --bn-shell-1:         #0E1719;
  --bn-shell-2:         #0B1214;
  --bn-well:            #08100F;   /* viewer only — a fourth dark, not a gradient stop */

  /* ── ink ────────────────────────────────────────────────────────────── */
  --bn-ink:             #EEF2F1;
  --bn-ink-rgb:         238,242,241;
  --bn-ink-on-amber:    #1A0D03;
  --bn-ink-on-knob:     #0F1A1C;
  --bn-ink-on-white:    #0B1214;

  /* ── amber (engaged / on / primary) ─────────────────────────────────── */
  --bn-amber:           #E8863A;
  --bn-amber-rgb:       232,134,58;
  --bn-amber-hi:        #F5A44E;   /* hover on Render and links */
  --bn-amber-grad:      linear-gradient(150deg, #F0A455, #E8863A 52%, #C25F22);
  --bn-amber-90:        rgba(232,134,58,0.9);   /* selected cursor tool */
  --bn-amber-45:        rgba(232,134,58,0.45);  /* open-module border */
  --bn-amber-19:        rgba(232,134,58,0.19);  /* open-module gradient stop 0 */
  --bn-amber-glow:      0 0 34px -12px rgba(232,134,58,0.8);
  --bn-on-amber-1:      rgba(26,13,3,0.6);      /* group index  — keep distinct */
  --bn-on-amber-2:      rgba(26,13,3,0.62);     /* group count  — keep distinct */
  --bn-knob-on:         #FFEFDF;                /* toggle knob — NOT --bn-ink */

  /* ── lime (needles, tick markers, live dots, live readouts) ─────────── */
  --bn-lime:            #C6E848;
  --bn-lime-glow:       0 0 8px #C6E848;

  /* ── surfaces ───────────────────────────────────────────────────────── */
  --bn-surf:            rgba(238,242,241,0.05);   /* every panel / card / bar */
  --bn-surf-off:        rgba(238,242,241,0.028);  /* module card OFF (recessed) */
  --bn-surf-pill:       rgba(238,242,241,0.06);   /* LOCAL pill */
  --bn-surf-btn:        rgba(238,242,241,0.08);   /* steppers, FIT, inactive segment */
  --bn-surf-track:      rgba(238,242,241,0.14);   /* toggle track OFF */
  --bn-module-open:     linear-gradient(160deg, rgba(232,134,58,0.19) 0%,
                                                rgba(110,140,130,0.13) 58%,
                                                rgba(238,242,241,0.05) 100%);

  /* ── borders / rules ────────────────────────────────────────────────── */
  --bn-line-off:        rgba(238,242,241,0.07);  /* module card OFF */
  --bn-line-head:       rgba(238,242,241,0.09);  /* command-bar bottom */
  --bn-line-div:        rgba(238,242,241,0.10);  /* dividers, tool-row top, dial ring */
  --bn-line:            rgba(238,242,241,0.11);  /* every panel / card border */
  --bn-line-2:          rgba(238,242,241,0.12);  /* pill border, toolbar divider */
  --bn-line-btn:        rgba(238,242,241,0.14);  /* stepper / FIT borders */
  --bn-line-chip:       rgba(238,242,241,0.20);  /* unselected chip */
  --bn-line-check:      rgba(238,242,241,0.30);  /* unchecked tool box */
  --bn-line-knob:       rgba(238,242,241,0.30);  /* dial knob rim */
  --bn-line-marks:      rgba(255,255,255,0.35);  /* viewer corner brackets — raw white, deliberate */

  /* ── ink alpha ladder ───────────────────────────────────────────────── */
  --bn-t-16:  rgba(238,242,241,0.16);  /* unfilled tick */
  --bn-t-22:  rgba(238,242,241,0.22);  /* empty rating dot */
  --bn-t-25:  rgba(238,242,241,0.25);  /* group dot, 0 active */
  --bn-t-30:  rgba(238,242,241,0.30);  /* module state label OFF */
  --bn-t-35:  rgba(238,242,241,0.35);  /* tool value OFF */
  --bn-t-40:  rgba(238,242,241,0.40);  /* tool name OFF */
  --bn-t-45:  rgba(238,242,241,0.45);  /* nav links, module title OFF */
  --bn-t-50:  rgba(238,242,241,0.50);  /* axis labels, ALL OFF/ON, chevron, knob OFF */
  --bn-t-55:  rgba(238,242,241,0.55);  /* nav captions, zone ticks below cursor */
  --bn-t-60:  rgba(238,242,241,0.60);  /* ZONE SCALE, module state ON, chips, status bar */
  --bn-t-62:  rgba(238,242,241,0.62);  /* slider tick filled */
  --bn-t-68:  rgba(238,242,241,0.68);  /* dial tick filled */
  --bn-t-70:  rgba(238,242,241,0.70);  /* LOCAL text */
  --bn-t-75:  rgba(238,242,241,0.75);  /* cursor icon stroke */
  --bn-t-80:  rgba(238,242,241,0.80);  /* zoom glyphs, inactive segment text */
  --bn-t-85:  rgba(238,242,241,0.85);  /* group title, FIT text */
  --bn-t-90:  rgba(238,242,241,0.90);  /* tool name ON */
  --bn-t-92:  rgba(238,242,241,0.92);  /* dial parameter label */
  --bn-t-12:  rgba(238,242,241,0.12);  /* slider ticks, tool disabled */

  /* ── hover ladder (the complete approved set — 4 backgrounds, 2 colours) */
  --bn-hov-08: rgba(238,242,241,0.08); /* command buttons, from transparent */
  --bn-hov-14: rgba(238,242,241,0.14); /* COMPARE, cursor tools, zoom ± */
  --bn-hov-18: rgba(238,242,241,0.18); /* FIT, from 0.08 */
  --bn-hov-20: rgba(238,242,241,0.20); /* all four ± steppers, from 0.08 */

  /* ── type ───────────────────────────────────────────────────────────── */
  --bn-font: 'Urbanist', system-ui, sans-serif;
  --bn-w-thin: 200;  --bn-w-light: 300;  --bn-w-reg: 400;  --bn-w-med: 500;

  --bn-fs-7:    7px;    --bn-ls-22: 0.22em;   /* dial unit */
  --bn-fs-8:    8px;    --bn-ls-14: 0.14em;   /* nav button captions */
  --bn-fs-85:   8.5px;  --bn-ls-12: 0.12em;   /* group count */
  --bn-fs-9:    9px;    --bn-ls-18: 0.18em;   /* module state label, group index */
  --bn-fs-95:   9.5px;  --bn-ls-24: 0.24em;   /* ZONE SCALE, group title */
  --bn-fs-10:   10px;   --bn-ls-20: 0.20em;   /* top-right nav */
  --bn-fs-105:  10.5px; --bn-ls-16: 0.16em;   /* zoom %, cursor label */
  --bn-fs-11:   11px;   --bn-ls-10: 0.10em;   /* group short name, chip label */
  --bn-fs-115:  11.5px;
  --bn-fs-12:   12px;
  --bn-fs-125:  12.5px;
  --bn-fs-13:   13px;
  --bn-fs-14:   14px;
  --bn-fs-15:   15px;
  --bn-fs-17:   17px;   --bn-ls-n2: -0.02em;  /* slider value */
  --bn-fs-26:   26px;   --bn-ls-n3: -0.03em;  /* dial value */

  /* ── radius ─────────────────────────────────────────────────────────── */
  --bn-r-1:  1px;    /* ticks */
  --bn-r-5:  5px;    /* tool checkbox */
  --bn-r-8:  8px;    /* zoom buttons, tool ± */
  --bn-r-9:  9px;    /* cursor tool */
  --bn-r-10: 10px;   /* command-bar button */
  --bn-r-11: 11px;   /* dial ± */
  --bn-r-13: 13px;   /* group card */
  --bn-r-14: 14px;   /* viewer toolbar, EXIF strip */
  --bn-r-15: 15px;   /* module card */
  --bn-r-16: 16px;   /* zone panel, dial panel */
  --bn-r-18: 18px;   /* viewer frame */
  --bn-r-pill: 999px;

  /* ── layout ─────────────────────────────────────────────────────────── */
  --bn-bar-h:       66px;
  --bn-bar-pad:     18px;
  --bn-bar-gap:     18px;
  --bn-body-pad:    12px;
  --bn-body-gap:    12px;
  --bn-col-w:       372px;
  --bn-col-gap:     10px;
  --bn-vtool-h:     40px;
  --bn-exif-h:      36px;
  --bn-mod-gap:     6px;
  --bn-dial:        128px;
  --bn-zone-h:      44px;
  --bn-slider-h:    20px;

  /* ── motion (decision #21 — approved: the design's own bnIn easing) ─── */
  --bn-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --bn-t-state:     180ms;
  --bn-t-needle:    260ms;

  /* ── disabled (decision #13 — approved) ──────────────────────────────── */
  --bn-disabled-alpha: 0.35;

  /* ── focus (decision #19 — approved) ─────────────────────────────────── */
  --bn-focus-ring:  2px solid rgba(232,134,58,0.6);
  --bn-focus-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SHELL
   ══════════════════════════════════════════════════════════════════════ */

html.bn-app, html.bn-app body{ margin:0; padding:0; height:100%; background:var(--bn-page); overflow:hidden; }
html.bn-app body{ font-family:var(--bn-font); -webkit-font-smoothing:antialiased; }
html.bn-app *{ box-sizing:border-box; }
html.bn-app a{ color:var(--bn-amber); text-decoration:none; }
html.bn-app a:hover{ color:var(--bn-amber-hi); }

html.bn-app :focus-visible{ outline:var(--bn-focus-ring); outline-offset:var(--bn-focus-offset); }

/* Step 3 — the old top nav is demolished as UI but kept in the DOM: every id inside it
   (cmdkChip, navFullFrameBtn, navSaveSessionBtn, navOpenSessionBtn, navNewSessionBtn,
   navMonoBtn, navPrintBtn, stackToggleBtn) is a live ⌘K router target or onboarding-tour
   anchor. Deleting the markup would silently drop those; hiding it does not. */
.nav{ display:none !important; }

/* Step 4 — old preview chrome, same treatment: hidden, not deleted. #zoomOutBtn/#zoomLabel/
   #zoomInBtn/#zoomFitBtn/#beforeBtn/#afterBtn/#assetFileName/#assetFrameSize/#assetExifLine/
   #metadataInfoBtn/#galleryPrevBtn/#galleryNextBtn/#previewLockBtn/#clipIndicatorBtn/
   #fullFrameBtn all stay live inside it — proxied from .bn-vtools/.bn-exif, and reachable
   directly from ⌘K and the onboarding tour, which is why none of it is deleted. */
.preview-assetbar, .preview-head, .pv-ground{ display:none !important; }
/* The rest of the old .preview-col (filmstrip, batch panels, the tb-toolbar import/export bar)
   is hidden the same way, wholesale, rather than picked off piece by piece — its two live
   children worth keeping, #canvasWrap and #sessionRestoreBanner, are already relocated into
   .bn-frame by the Step 4 boot script before this rule has any effect on them. Filmstrip and
   Batch have no design module yet (BUILD-PLAN.md §3 decision #24) — hidden, not deleted, same
   as everything else on this list. */
.preview-col{ display:none !important; }
.bn-right > .studio{ flex:none; height:0; overflow:hidden; }

/* Step 5 — #stackCol relocated into .bn-left by the boot script below, marked .bn-relocated so
   this override (two classes) beats the base .stack-col rule (one class) regardless of which
   stylesheet loaded first. The whole summon mechanism (transform slide, the fixed 384px panel,
   the edge tick) is retired by these resets, not by deleting the old rules — same reasoning as
   everywhere else on this list: .stack-col is reused as the floating Tools panel inside
   full-frame review (body.pv-cinema-on.pv-tools-open), so the base rule must stay intact for
   that path even though the summon path is dead. */
.stack-col.bn-relocated{
  position:static; top:auto; right:auto; bottom:auto; width:100%; z-index:auto;
  transform:none; transition:none;
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-left:none; box-shadow:none;
  padding:0; flex:1; min-height:0;
}
/* Active-only / Precision have no home in the design yet (BUILD-PLAN.md decision #24 territory)
   — kept reachable only via ⌘K, like the rest of the old secondary strip. */
.stack-col.bn-relocated > .stack-toolbar{ display:none; }
.stack-tick{ display:none !important; }

/* Step 7 — the old #stack (built by the untouched renderStack()) stays hidden but still
   rendering, exactly like every other "keep hidden, don't delete" surface on this list: its
   side effects (bindStageCard, initVolSliders, syncGroundLine, the Solver, pickers,
   mountFilmBenchBody) are still load-bearing even though its markup is not shown. .bn-modlist
   lives inside the SAME .stack-scroll so the existing scrollTop save/restore in renderStack()
   (breakage list #7) keeps working for it too — .stack-scroll is the one scroller, not
   .bn-modlist itself. */
.stack-scroll #stack{ display:none !important; }
.stack-scroll .bn-modlist{ overflow:visible; flex:none; }
.bn-left > .bn-tiles, .bn-left > .bn-grouphead{ flex:none; margin:0 14px; }
.bn-left > .bn-tiles{ margin-top:0; }
.stack-scroll .bn-tiles, .stack-scroll .bn-grouphead{ margin:0 0 10px; }

.bn-shell{
  position:relative; display:flex; flex-direction:column;
  width:100%; height:100dvh; overflow:hidden;
  background:var(--bn-shell); color:var(--bn-ink);
  font-family:var(--bn-font); -webkit-font-smoothing:antialiased;
  animation:bnIn .7s var(--bn-ease) both;
}
.bn-grain{                          /* DOM-first child — paints beneath bar and body */
  position:absolute; inset:0; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:bnGrain 8s steps(3) infinite;
}
@keyframes bnIn   { from{opacity:0; filter:blur(10px)} to{opacity:1; filter:blur(0)} }
@keyframes bnGrain{ 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)}
                    50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,-1%)}
                    100%{transform:translate(0,0)} }
@keyframes bnPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.bn-bar{ position:relative; flex:none; height:var(--bn-bar-h);
         display:flex; align-items:center; gap:var(--bn-bar-gap);
         padding:0 var(--bn-bar-pad);
         border-bottom:1px solid var(--bn-line-head); }
.bn-bar .sp{ flex:1; }

.bn-body{ position:relative; flex:1; min-height:0;
          display:flex; gap:var(--bn-body-gap); padding:var(--bn-body-pad); }

.bn-left { flex:none; width:var(--bn-col-w); min-height:0;
           display:flex; flex-direction:column; gap:var(--bn-col-gap); }
.bn-right{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--bn-col-gap); }

.bn-vtools{ flex:none; height:var(--bn-vtool-h); display:flex; align-items:center; gap:6px;
            padding:0 12px; border-radius:var(--bn-r-14);
            background:var(--bn-surf); border:1px solid var(--bn-line); }
.bn-vtools .sp{ flex:1; }

/* ══════════════════════════════════════════════════════════════════════
   COMPONENT LAYER
   ══════════════════════════════════════════════════════════════════════ */

/* ── wordmark ─────────────────────────────────────────────────────────── */
.bn-wordmark{ font-size:var(--bn-fs-12); font-weight:var(--bn-w-med);
              letter-spacing:var(--bn-ls-18); padding-right:6px; }
.bn-wordmark i{ color:var(--bn-amber); font-style:normal; }

/* ── command-bar button ───────────────────────────────────────────────── */
.bn-cmdbtn{ display:flex; flex-direction:column; align-items:center; gap:5px;
            width:54px; padding:6px 0; border-radius:var(--bn-r-10);
            background:transparent; border:0; cursor:pointer; color:inherit;
            font-family:inherit; }
.bn-cmdbtn:hover{ background:var(--bn-hov-08); }
.bn-cmdbtn svg{ width:19px; height:19px; fill:none; stroke:var(--bn-ink);
                stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.bn-cmdbtn span{ font-size:var(--bn-fs-8); letter-spacing:var(--bn-ls-14); color:var(--bn-t-55); }
.bn-cmdbtn[aria-pressed="true"]{ background:var(--bn-hov-14); }
.bn-cmdbtn[disabled]{ opacity:var(--bn-disabled-alpha); cursor:default; }
.bn-cmdbtn[disabled]:hover{ background:transparent; }
.bn-cmdgrp{ display:flex; align-items:center; gap:4px; }
.bn-vrule{ width:1px; height:30px; background:var(--bn-line-div); flex:none; }

/* ── status pill ──────────────────────────────────────────────────────── */
.bn-status{ display:flex; align-items:center; gap:9px; height:28px; padding:0 13px;
            border-radius:var(--bn-r-pill); background:var(--bn-surf-pill);
            border:1px solid var(--bn-line-2);
            font-size:var(--bn-fs-95); letter-spacing:var(--bn-ls-18); color:var(--bn-t-70); }
.bn-status i{ width:5px; height:5px; border-radius:50%; display:block;
              background:var(--bn-lime); box-shadow:var(--bn-lime-glow);
              animation:bnPulse 2.6s ease-in-out infinite; }

/* ── nav links + primary CTA ──────────────────────────────────────────── */
.bn-nav{ display:flex; gap:16px; font-size:var(--bn-fs-10);
         letter-spacing:var(--bn-ls-20); color:var(--bn-t-45); }
.bn-nav a{ color:inherit; text-decoration:none; }
.bn-nav a:hover{ color:var(--bn-ink); }
.bn-nav a[aria-current="page"]{ color:var(--bn-ink); }

.bn-cta{ display:flex; align-items:center; height:32px; padding:0 18px; border:0;
         border-radius:var(--bn-r-pill); background:var(--bn-amber);
         color:var(--bn-ink-on-amber); font-family:inherit;
         font-size:var(--bn-fs-115); font-weight:var(--bn-w-med);
         box-shadow:var(--bn-amber-glow); cursor:pointer; }
.bn-cta:hover{ background:var(--bn-amber-hi); }

/* ── card / panel base ────────────────────────────────────────────────── */
.bn-card{ background:var(--bn-surf); border:1px solid var(--bn-line); }
.bn-panel{ flex:none; border-radius:var(--bn-r-16); padding:13px 14px 12px;
           background:var(--bn-surf); border:1px solid var(--bn-line); }

/* ── zone scale panel ─────────────────────────────────────────────────── */
.bn-zone-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.bn-zone-head .l{ font-size:var(--bn-fs-95); letter-spacing:var(--bn-ls-24); color:var(--bn-t-60); }
.bn-zone-head .r{ font-size:var(--bn-fs-95); letter-spacing:var(--bn-ls-14); color:var(--bn-t-60); }
.bn-zone-head .r b{ color:var(--bn-lime); font-weight:inherit; }
.bn-zone-legend{ display:flex; justify-content:space-between; margin-top:9px;
                 font-size:var(--bn-fs-85); letter-spacing:var(--bn-ls-18); color:var(--bn-t-50); }

/* ── tick strip (one primitive, two configurations) ───────────────────── */
.bn-ticks{ display:flex; align-items:flex-end; }
.bn-ticks span{ flex:1; margin:0 1.5px; border-radius:var(--bn-r-1);
                background:var(--bn-t-16); }
.bn-ticks--zone{ height:var(--bn-zone-h); }
.bn-ticks--zone span{ height:24px }
.bn-ticks--zone span:nth-child(7n+1){ height:40px }          /* i % 7 === 0 */
.bn-ticks--zone span.below{ background:var(--bn-t-55) }
.bn-ticks--zone span.at   { background:var(--bn-lime) }

.bn-ticks--slider{ position:relative; height:var(--bn-slider-h); margin-top:9px; }
.bn-ticks--slider span{ height:11px }
.bn-ticks--slider span:nth-child(6n+1){ height:17px }        /* i % 6 === 0 */
.bn-ticks--slider span.on{ background:var(--bn-t-62) }
.bn-ticks--slider.off span{ background:var(--bn-t-12) }

/* ── slider marker ─────────────────────────────────────────────────────── */
.bn-marker{ position:absolute; top:-11px; pointer-events:none; }
.bn-marker i{ display:block; width:0; height:0; margin-left:-5px;
              border-left:5px solid transparent; border-right:5px solid transparent;
              border-top:7px solid var(--bn-lime); }

/* ── group tile (4-up) ────────────────────────────────────────────────── */
.bn-tiles{ flex:none; display:flex; gap:6px; }
.bn-tile{ flex:1; border-radius:var(--bn-r-13); padding:9px 10px 10px; cursor:pointer;
          background:var(--bn-surf); border:1px solid var(--bn-line);
          text-align:left; font-family:inherit; }
.bn-tile-top{ display:flex; align-items:center; justify-content:space-between; }
.bn-tile-idx{ font-size:var(--bn-fs-85); letter-spacing:var(--bn-ls-18); color:var(--bn-t-45); }
.bn-tile-dot{ width:5px; height:5px; border-radius:50%; display:block; background:var(--bn-t-25); }
.bn-tile-dot.live{ background:var(--bn-lime); }
.bn-tile-name{ margin-top:7px; font-size:var(--bn-fs-11); color:var(--bn-ink); }
.bn-tile-count{ margin-top:3px; font-size:var(--bn-fs-85); letter-spacing:var(--bn-ls-12);
                color:var(--bn-t-45); }

.bn-tile[aria-selected="true"]{ background:var(--bn-amber-grad); border-color:transparent; }
.bn-tile[aria-selected="true"] .bn-tile-idx  { color:var(--bn-on-amber-1); }
.bn-tile[aria-selected="true"] .bn-tile-count{ color:var(--bn-on-amber-2); }
.bn-tile[aria-selected="true"] .bn-tile-name { color:var(--bn-ink-on-amber); }
.bn-tile[aria-selected="true"] .bn-tile-dot.live{ background:var(--bn-ink-on-amber); }

/* ── group header strip ───────────────────────────────────────────────── */
.bn-grouphead{ flex:none; display:flex; align-items:center; gap:10px; padding:0 4px; }
.bn-grouphead .t{ font-size:var(--bn-fs-95); letter-spacing:var(--bn-ls-24); color:var(--bn-t-85); }
.bn-grouphead .rule{ flex:1; height:1px; background:var(--bn-line); }
.bn-grouphead button{ background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
                      font-size:var(--bn-fs-85); letter-spacing:var(--bn-ls-14); color:var(--bn-t-50); }
.bn-grouphead button:hover{ color:var(--bn-ink); }

/* ── module list + module card ────────────────────────────────────────── */
.bn-modlist{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column;
             gap:var(--bn-mod-gap); padding-right:2px;
             scrollbar-width:thin; scrollbar-gutter:stable;
             scrollbar-color:var(--bn-line-btn) transparent; }
.bn-modlist::-webkit-scrollbar{ width:6px }
.bn-modlist::-webkit-scrollbar-thumb{ background:var(--bn-line-btn); border-radius:3px }
.bn-modlist::-webkit-scrollbar-track{ background:transparent }

.bn-mod{ flex:none; border-radius:var(--bn-r-15);
         background:var(--bn-surf-off); border:1px solid var(--bn-line-off); }
.bn-mod.on          { background:var(--bn-surf);        border-color:var(--bn-line); }
.bn-mod.on.open     { background:var(--bn-module-open); border-color:var(--bn-amber-45); }
.bn-mod-head{ display:flex; align-items:center; gap:11px; padding:10px 12px; }
.bn-mod-title{ flex:1; min-width:0; font-size:var(--bn-fs-13); color:var(--bn-t-45); cursor:pointer;
               background:none; border:0; text-align:left; font-family:inherit; }
.bn-mod.on .bn-mod-title{ color:var(--bn-ink); }
.bn-mod-state{ font-size:var(--bn-fs-9); letter-spacing:var(--bn-ls-14); color:var(--bn-t-30); }
.bn-mod.on .bn-mod-state{ color:var(--bn-t-60); }
.bn-mod-body{ padding:0 12px 12px; }

/* ── chevron ───────────────────────────────────────────────────────────── */
.bn-chev{ display:flex; align-items:center; cursor:pointer; background:none; border:0; padding:0;
          transition:transform var(--bn-t-state) var(--bn-ease); }
.bn-mod.open .bn-chev{ transform:rotate(180deg); }
.bn-chev svg{ width:13px; height:13px; fill:none; stroke:var(--bn-t-50); stroke-width:1.3;
              stroke-linecap:round; stroke-linejoin:round; }

/* ── module toggle switch ─────────────────────────────────────────────── */
.bn-switch{ width:34px; height:19px; border-radius:var(--bn-r-pill); flex:none;
            padding:2px; box-sizing:border-box; display:block; position:relative;
            background:var(--bn-surf-track); border:0; cursor:pointer;
            transition:background-color var(--bn-t-state) linear; }
.bn-switch i{ position:absolute; top:2px; left:2px;
              width:15px; height:15px; border-radius:50%; display:block;
              background:var(--bn-t-50);
              transition:transform var(--bn-t-state) var(--bn-ease),
                         background-color var(--bn-t-state) linear; }
.bn-switch[aria-checked="true"]{ background:var(--bn-amber); }
.bn-switch[aria-checked="true"] i{ transform:translateX(15px); background:var(--bn-knob-on); }

/* ── tool row ──────────────────────────────────────────────────────────── */
.bn-tool{ border-top:1px solid var(--bn-line-div); padding:10px 0 2px; }
.bn-tool-head{ display:flex; align-items:center; gap:10px; }
.bn-check{ width:14px; height:14px; border-radius:var(--bn-r-5); flex:none; display:block;
           background:transparent; border:1px solid var(--bn-line-check); cursor:pointer; padding:0; }
.bn-check[aria-checked="true"]{ background:var(--bn-amber); border-color:transparent; }
.bn-tool-name{ flex:1; font-size:var(--bn-fs-12); color:var(--bn-t-40); }
.bn-tool.on .bn-tool-name{ color:var(--bn-t-90); }
.bn-val{ display:flex; align-items:center; gap:9px; }
.bn-val b{ font-size:var(--bn-fs-17); font-weight:var(--bn-w-thin);
           letter-spacing:var(--bn-ls-n2); color:var(--bn-t-35); }
.bn-tool.on .bn-val b{ color:var(--bn-ink); }
.bn-step{ width:24px; height:24px; border-radius:var(--bn-r-8);
          display:flex; align-items:center; justify-content:center;
          font-family:inherit; font-size:var(--bn-fs-13); font-weight:var(--bn-w-light);
          background:var(--bn-surf-btn); border:1px solid var(--bn-line-btn);
          color:inherit; cursor:pointer; }
.bn-step:hover{ background:var(--bn-hov-20); }
.bn-step[disabled]{ opacity:var(--bn-disabled-alpha); cursor:default; }
.bn-step[disabled]:hover{ background:var(--bn-surf-btn); }
.bn-chipsum{ font-size:var(--bn-fs-10); letter-spacing:var(--bn-ls-12); color:var(--bn-t-35); }
.bn-tool.on .bn-chipsum{ color:var(--bn-ink); }

/* ── chips ─────────────────────────────────────────────────────────────── */
.bn-chips{ display:flex; gap:5px; margin-top:9px; flex-wrap:wrap; }
.bn-chip{ font-family:inherit; font-size:var(--bn-fs-95); letter-spacing:var(--bn-ls-10);
          padding:6px 11px; border-radius:var(--bn-r-pill); cursor:pointer;
          background:transparent; border:1px solid var(--bn-line-chip); color:var(--bn-t-60); }
.bn-chip[aria-selected="true"]{ background:var(--bn-ink); border-color:transparent;
                                color:var(--bn-ink-on-white); }

/* ── the dial ──────────────────────────────────────────────────────────── */
.bn-dialcard{ flex:none; display:flex; align-items:center; gap:14px;
              border-radius:var(--bn-r-16); padding:12px 14px;
              background:var(--bn-surf); border:1px solid var(--bn-line); }
.bn-dial{ position:relative; width:var(--bn-dial); height:var(--bn-dial); flex:none; }
.bn-dial svg{ width:100%; height:100%; }
.bn-dial-read{ position:absolute; left:0; right:0; top:48px; text-align:center; pointer-events:none; }
.bn-dial-read b{ display:block; font-size:var(--bn-fs-26); font-weight:var(--bn-w-thin);
                 letter-spacing:var(--bn-ls-n3); line-height:1; color:var(--bn-ink-on-knob); }
.bn-dial-read i{ display:block; margin-top:4px; font-style:normal;
                 font-size:var(--bn-fs-7); letter-spacing:var(--bn-ls-22);
                 color:rgba(15,26,28,0.55); }
.bn-dial-panel{ flex:1; min-width:0; }
.bn-dial-eyebrow{ font-size:var(--bn-fs-85); letter-spacing:var(--bn-ls-20); color:var(--bn-t-50); }
.bn-dial-label{ margin-top:7px; font-size:var(--bn-fs-125); line-height:1.3; color:var(--bn-t-92); }
.bn-dial-btns{ display:flex; gap:7px; margin-top:12px; }
.bn-dial-btns button{ flex:1; height:32px; border-radius:var(--bn-r-11);
                      display:flex; align-items:center; justify-content:center;
                      font-family:inherit; font-size:var(--bn-fs-15); font-weight:var(--bn-w-light);
                      background:var(--bn-surf-btn); border:1px solid var(--bn-line-btn);
                      color:inherit; cursor:pointer; }
.bn-dial-btns button:hover{ background:var(--bn-hov-20); }
.bn-dial-btns button[disabled]{ opacity:var(--bn-disabled-alpha); cursor:default; }
.bn-dial-btns button[disabled]:hover{ background:var(--bn-surf-btn); }
.bn-dial line.needle{ transition:transform var(--bn-t-needle) var(--bn-ease); }
.bn-dial.dead .bn-dial-read b{ color:var(--bn-t-50); }
.bn-dial.dead line.needle{ opacity:.35; }

/* ── viewer toolbar parts ──────────────────────────────────────────────── */
.bn-cursor{ width:28px; height:28px; border-radius:var(--bn-r-9);
            display:flex; align-items:center; justify-content:center;
            background:transparent; border:0; cursor:pointer; }
.bn-cursor svg{ width:15px; height:15px; fill:none; stroke:var(--bn-t-75); stroke-width:1.3;
                stroke-linecap:round; stroke-linejoin:round; }
.bn-cursor:not([aria-pressed="true"]):hover{ background:var(--bn-hov-14); }
.bn-cursor[aria-pressed="true"]{ background:var(--bn-amber-90); }
.bn-cursor[aria-pressed="true"] svg{ stroke:var(--bn-ink-on-amber); }
.bn-cursor[disabled]{ opacity:var(--bn-disabled-alpha); cursor:default; }
.bn-cursor[disabled]:hover{ background:transparent; }

.bn-vrule-sm{ width:1px; height:20px; background:var(--bn-line-2); flex:none; }
.bn-cursor-label{ font-size:var(--bn-fs-95); letter-spacing:var(--bn-ls-16); color:var(--bn-t-60); }

.bn-zoombtn{ width:26px; height:26px; border-radius:var(--bn-r-8);
             display:flex; align-items:center; justify-content:center;
             background:transparent; border:0; cursor:pointer;
             font-family:inherit; font-size:var(--bn-fs-14); font-weight:var(--bn-w-light);
             color:var(--bn-t-80); }
.bn-zoombtn:hover{ background:var(--bn-hov-14); }
.bn-zoombtn[disabled]{ opacity:var(--bn-disabled-alpha); cursor:default; }
.bn-zoombtn[disabled]:hover{ background:transparent; }
.bn-zoomread{ font-size:var(--bn-fs-105); letter-spacing:var(--bn-ls-10);
              width:44px; text-align:center; color:var(--bn-ink); }

.bn-ghost{ font-family:inherit; font-size:var(--bn-fs-95); letter-spacing:var(--bn-ls-14);
           padding:6px 12px; border-radius:var(--bn-r-pill); margin-left:4px; cursor:pointer;
           background:var(--bn-surf-btn); border:1px solid var(--bn-line-btn); color:var(--bn-t-85); }
.bn-ghost:hover{ background:var(--bn-hov-18); }

.bn-seg{ font-family:inherit; font-size:var(--bn-fs-95); letter-spacing:var(--bn-ls-14);
         padding:6px 13px; border-radius:var(--bn-r-pill); border:0; cursor:pointer;
         background:var(--bn-surf-btn); color:var(--bn-t-80); }
.bn-seg + .bn-seg{ margin-left:4px; }
.bn-seg[aria-pressed="true"]{ background:var(--bn-ink); color:var(--bn-ink-on-white); }

/* ── viewer frame + corner brackets ───────────────────────────────────── */
.bn-frame{ position:relative; flex:1; min-height:0; border-radius:var(--bn-r-18);
           overflow:hidden; background:var(--bn-well); border:1px solid var(--bn-line); }
.bn-frame > canvas, .bn-frame > .bn-canvaswrap, .bn-frame > .canvas-wrap{ position:absolute; inset:0;
                                                width:100%; height:100%; }
/* The session-restore banner is a rare, off-by-default alert (only when a saved session offers
   a restore). It used to push the photo down as a flex sibling; inside .bn-frame's absolute
   composition it overlays the top edge instead — same Restore/Discard behaviour, a smaller
   visual footprint. */
.bn-frame > .session-restore-banner{ position:absolute; top:10px; left:10px; right:10px;
                                      z-index:5; margin:0; }
.bn-marks{ position:absolute; inset:14px; pointer-events:none; }
.bn-marks i{ position:absolute; width:20px; height:20px; }
.bn-marks i:nth-child(1){ top:0;    left:0;  border-top:1px solid var(--bn-line-marks);
                                            border-left:1px solid var(--bn-line-marks); }
.bn-marks i:nth-child(2){ top:0;    right:0; border-top:1px solid var(--bn-line-marks);
                                            border-right:1px solid var(--bn-line-marks); }
.bn-marks i:nth-child(3){ bottom:0; left:0;  border-bottom:1px solid var(--bn-line-marks);
                                            border-left:1px solid var(--bn-line-marks); }
.bn-marks i:nth-child(4){ bottom:0; right:0; border-bottom:1px solid var(--bn-line-marks);
                                            border-right:1px solid var(--bn-line-marks); }

/* ── EXIF strip + rating dots ──────────────────────────────────────────── */
.bn-exif{ flex:none; height:var(--bn-exif-h); display:flex; align-items:center; gap:18px;
          padding:0 14px; border-radius:var(--bn-r-14);
          background:var(--bn-surf); border:1px solid var(--bn-line);
          font-size:var(--bn-fs-95); letter-spacing:var(--bn-ls-14); color:var(--bn-t-60); }
.bn-exif b{ color:var(--bn-ink); font-weight:inherit; }
.bn-exif .file{ color:var(--bn-ink); letter-spacing:var(--bn-ls-10); }
.bn-exif .sp{ flex:1; }
.bn-rating{ display:flex; gap:5px; }
.bn-rating i{ width:5px; height:5px; border-radius:50%; display:block; background:var(--bn-t-22); }
.bn-rating i.on{ background:var(--bn-amber); }