@import url("/assets/bracketbridge-tokens.css");
/* Bracketbridge Data OS presentation layer (Liquid Glass adoption), 18 October 2026.
   Generated by ui-liquid-glass-20261018/tools/build-style.mjs; do not edit here.
   Reference: agent-hub static/hybrid-glass.css sha256 888d1b65f1d08b3d57316360beb727d3cc329a67fab343a722bad3a3f9086fb5
              agent-hub static/task-board.css   sha256 fcd46e51add2e0672bd5e2ff4841992964590dc93c64aba749b37799a78d9ee9
   Adoption layer: source/liquid-glass/data-os.css sha256 2bea09b69c308cd8af7f38618e4c0179e9717d96b1efa353b03d496f48259586
   Replaces the 2026-10-16 brand overlay at this path; the previous bytes stay in the
   Stage 0 release for rollback. */

/* @bb-reference-status start: task-board.css line 647, verbatim */
:root{--bb-work-todo:#67747e;--bb-work-doing:#386a9b;--bb-work-waiting:#95641f;--bb-work-done:#387354;--bb-work-overdue:#a94136}
/* @bb-reference-status end */
/* ==========================================================================
   Data OS adoption layer for the Bracketbridge design system v1
   (Liquid Glass web adaptation). Authored source; tools/build-style.mjs
   appends it after the section 9 token block vendored byte-for-byte from the
   frozen reference (design-reference/integrated/hybrid-glass.css lines
   345-476) and the work-status tokens (task-board.css line 647).

   Successor of the 2026-10-16 brand overlay at the same path
   (/assets/bracketbridge-system.css), which the remote-session gateway
   allowlist already serves. Same scope rule as before: everything applies
   only under html[data-bb-design]; selectors and !important strength follow
   the overlay it replaces, so legacy page sheets keep losing where they lost
   before. Values now come from the reference tokens.

   Rules (DESIGN_SYSTEM.md §1, §7, §11):
   - Two layers. Glass only on the floating control layer: sticky staff top
     bars, menus/popovers and the floating booking dock. Content, forms,
     consent, dialogs, tables and the remote desktop are opaque.
   - Components reproduce the reference section 9 recipes (line numbers
     cited per block). They are not vendored as rules because Data OS
     already owns .bb-field/.bb-notice/.bb-empty in the admin workspace.
   - Letter spacing 0; 12px floor; capsules act, rounded rectangles hold.
   - Presentation only: no display/visibility change to gated containers;
     [hidden] always wins.
   ========================================================================== */

@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/inter-latin-300.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-600.woff2') format('woff2')}

/* --- 1. Token bridge -------------------------------------------------------
   Reference tokens are on :root (section 9). This block adds what Data OS
   needs and the reference lacks, and maps the existing Data OS names onto the
   reference so legacy page sheets recolour without edits. Reference tokens
   are not redefined in the light theme, so the reference accessibility
   overrides (contrast, forced colours, transparency) keep working. */
html[data-bb-design]{
  /* Reference font stack plus Arabic/Hebrew fallbacks (Inter ships Latin only). */
  --bb-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Arabic","Noto Sans Hebrew",Tahoma,sans-serif;
  /* Letter spacing is 0 on Data OS (brief); the reference tracking tokens follow. */
  --bb-tracking-display:0;--bb-tracking-title:0;--bb-tracking-body:0;
  /* Refraction is Chromium-only; Data OS does not depend on a per-engine effect. */
  --bb-refraction:0;
  --bb-shadow-primary:none;
  /* Opaque equivalents of --bb-fill-1/-2 over the canvas, for sticky table heads and field fills. */
  --bb-surface-1:#f7f8f7;--bb-surface-2:#f0f2f0;
  /* The selection bead (section 9 line 522 literal) as a token so dark mode can follow. */
  --bb-bead-fill:rgba(255,255,255,.72);
  /* Primary capsule fill (section 9 line 508) and hover (line 509). */
  --bb-primary-fill:var(--bb-ink);
  --bb-primary-fill-hover:var(--bb-text-2);
  /* Status washes (task-board.css lines 648-651 pattern, same alpha). */
  --bb-success-wash:rgba(56,115,84,.09);--bb-danger-wash:rgba(169,65,54,.08);

  /* Existing Data OS names -> reference tokens. */
  --bb-font-sans:var(--bb-font);
  --bb-muted:var(--bb-text-2);--bb-faint:var(--bb-text-3);
  --bb-paper:var(--bb-canvas);--bb-soft:var(--bb-surface-1);
  --bb-rule:var(--bb-hairline-strong);--bb-rule-soft:var(--bb-hairline);
  --bb-primary:var(--bb-ink);--bb-on-primary:var(--bb-on-ink);--bb-hover:#262626;
  --bb-success:var(--bb-work-done);--bb-success-bg:var(--bb-success-wash);
  --bb-warning:var(--bb-deadline-ink);--bb-warning-bg:var(--bb-warning-fill);
  --bb-danger:var(--bb-work-overdue);--bb-danger-bg:var(--bb-danger-wash);
  --bb-logo:url('/assets/bracketbridge.svg');--bb-studies-logo:url('/assets/bracketbridge-studies.svg');--bb-gutter:40px;
  --ink:var(--bb-ink);--ink-strong:var(--bb-ink);--ink-2:var(--bb-text-2);--ink-3:var(--bb-text-2);
  --muted:var(--bb-text-2);--blue:var(--bb-ink);--blue-deep:var(--bb-hover);--blue-soft:var(--bb-surface-1);
  --bg:var(--bb-canvas);--bg-2:var(--bb-surface-1);--surface:var(--bb-canvas);--panel:var(--bb-canvas);--panel-strong:var(--bb-surface-1);
  --line:var(--bb-hairline-strong);--line-2:var(--bb-hairline);--line-soft:var(--bb-hairline);--accent:var(--bb-ink);
  --text:var(--bb-ink);--text-strong:var(--bb-ink);--subtle:var(--bb-text-2);--paper:var(--bb-canvas);
  --canvas:var(--bb-canvas);--wash:var(--bb-surface-1);--soft:var(--bb-surface-1);--cream:var(--bb-surface-1);--line-strong:var(--bb-hairline-strong);
  --green:var(--bb-work-done);--green-soft:var(--bb-success-wash);--danger:var(--bb-work-overdue);
  --good:var(--bb-work-done);--good-bg:var(--bb-success-wash);--bad:var(--bb-work-overdue);--bad-bg:var(--bb-danger-wash);
  --warn:var(--bb-deadline-ink);--warn-bg:var(--bb-warning-fill);--warning:var(--bb-warning-fill);
  /* Shape: rounded rectangles hold (section 9 radius ladder). */
  --radius:var(--bb-radius-md);--panel-radius:var(--bb-radius-xl);--control-radius:var(--bb-radius-xs);--panel-shadow:none;
  /* Participant pages always render light, also under browser auto-dark. */
  color-scheme:only light;background:var(--bb-canvas);font-family:var(--bb-font);
}
/* Staff pages may be switched to dark by the existing moderator theme toggle only. */
html[data-bb-design]:is([data-bb-page^='moderator'],[data-bb-page='ops'],[data-bb-tool='worker'],[data-bb-tool='recordings'],[data-bb-tool='insights'],[data-bb-page='project-setup'],[data-bb-page='collection-account'],[data-bb-tool='german-call-center/moderator']){color-scheme:light}

/* Dark: the existing moderator theme (system.css 2026-10-16 values), expressed
   as reference token values. The reference has no dark mode; these are the
   only dark literals and each is defined once here. */
html[data-bb-design][data-moderator-theme='dark']{
  --bb-ink:#f3f3f3;--bb-text-2:#b6b6b6;--bb-text-3:#9a9a9a;--bb-on-ink:#141414;--bb-canvas:#141414;
  --bb-hairline:rgba(255,255,255,.11);--bb-hairline-strong:rgba(255,255,255,.2);
  --bb-fill-1:rgba(255,255,255,.04);--bb-fill-2:rgba(255,255,255,.07);--bb-fill-3:rgba(255,255,255,.11);
  --bb-surface-1:#1c1c1c;--bb-surface-2:#242424;
  --bb-forest:#8cc6a2;--bb-forest-ink:#a4d6b9;--bb-forest-wash:#1c3427;
  --bb-deadline:#d9a86c;--bb-deadline-ink:#e9c77d;--bb-warning-fill:#332c1d;--bb-warning-line:rgba(233,199,125,.3);
  --bb-work-done:#a4d6b9;--bb-work-overdue:#f4aaa3;--bb-work-waiting:#e9c77d;--bb-work-doing:#9cc2ea;--bb-work-todo:#b6b6b6;
  --bb-success-wash:#1c3427;--bb-danger-wash:#392321;
  --bb-bead-fill:rgba(255,255,255,.14);
  --bb-glass-fill:rgba(24,24,24,.58);--bb-glass-fill-over:rgba(24,24,24,.7);--bb-glass-fill-thick:rgba(30,30,30,.82);--bb-glass-sheet:rgba(30,30,30,.86);
  --bb-glass-edge:0 0 0 .5px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.06);
  --bb-glass-rim:none;--bb-glass-dim:rgba(0,0,0,.5);
  --bb-shadow-float:0 1px 2px rgba(0,0,0,.4),0 10px 24px -14px rgba(0,0,0,.7);
  --bb-shadow-menu:0 2px 6px rgba(0,0,0,.4),0 26px 56px -22px rgba(0,0,0,.8);
  --bb-shadow-sheet:0 2px 8px rgba(0,0,0,.4),0 40px 90px -34px rgba(0,0,0,.85);
  --bb-shadow-bead:0 0 0 .5px rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.4);
  --bb-shadow-primary:0 0 0 .5px rgba(255,255,255,.4);
  --bb-primary-fill:#f3f3f3;--bb-primary-fill-hover:#dddddd;--bb-hover:#dddddd;
  --bb-logo:url('/assets/bracketbridge-white.svg');--bb-studies-logo:url('/assets/bracketbridge-studies-white.svg');color-scheme:dark;
}
/* The booking page follows the device's dark setting with this same dark, never a palette of its
   own. A media query cannot share the rule above, so the values repeat here;
   tests/harness/browser-booking-dark.mjs compares every one. Other participant pages stay light. */
@media (prefers-color-scheme: dark){html[data-bb-design][data-bb-page='book']{
  --bb-ink:#f3f3f3;--bb-text-2:#b6b6b6;--bb-text-3:#9a9a9a;--bb-on-ink:#141414;--bb-canvas:#141414;
  --bb-hairline:rgba(255,255,255,.11);--bb-hairline-strong:rgba(255,255,255,.2);
  --bb-fill-1:rgba(255,255,255,.04);--bb-fill-2:rgba(255,255,255,.07);--bb-fill-3:rgba(255,255,255,.11);
  --bb-surface-1:#1c1c1c;--bb-surface-2:#242424;
  --bb-forest:#8cc6a2;--bb-forest-ink:#a4d6b9;--bb-forest-wash:#1c3427;
  --bb-deadline:#d9a86c;--bb-deadline-ink:#e9c77d;--bb-warning-fill:#332c1d;--bb-warning-line:rgba(233,199,125,.3);
  --bb-work-done:#a4d6b9;--bb-work-overdue:#f4aaa3;--bb-work-waiting:#e9c77d;--bb-work-doing:#9cc2ea;--bb-work-todo:#b6b6b6;
  --bb-success-wash:#1c3427;--bb-danger-wash:#392321;
  --bb-bead-fill:rgba(255,255,255,.14);
  --bb-glass-fill:rgba(24,24,24,.58);--bb-glass-fill-over:rgba(24,24,24,.7);--bb-glass-fill-thick:rgba(30,30,30,.82);--bb-glass-sheet:rgba(30,30,30,.86);
  --bb-glass-edge:0 0 0 .5px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.06);
  --bb-glass-rim:none;--bb-glass-dim:rgba(0,0,0,.5);
  --bb-shadow-float:0 1px 2px rgba(0,0,0,.4),0 10px 24px -14px rgba(0,0,0,.7);
  --bb-shadow-menu:0 2px 6px rgba(0,0,0,.4),0 26px 56px -22px rgba(0,0,0,.8);
  --bb-shadow-sheet:0 2px 8px rgba(0,0,0,.4),0 40px 90px -34px rgba(0,0,0,.85);
  --bb-shadow-bead:0 0 0 .5px rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.4);
  --bb-shadow-primary:0 0 0 .5px rgba(255,255,255,.4);
  --bb-primary-fill:#f3f3f3;--bb-primary-fill-hover:#dddddd;--bb-hover:#dddddd;
  --bb-logo:url('/assets/bracketbridge-white.svg');--bb-studies-logo:url('/assets/bracketbridge-studies-white.svg');color-scheme:dark;
}}
@media (prefers-color-scheme: dark) and (prefers-reduced-transparency: reduce){html[data-bb-design][data-bb-page='book']{--bb-glass-fill:#1c1c1c;--bb-glass-fill-over:#1c1c1c;--bb-glass-fill-thick:#1c1c1c;--bb-glass-sheet:#1c1c1c}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){@media (prefers-color-scheme: dark){html[data-bb-design][data-bb-page='book']{--bb-glass-fill:#1c1c1c;--bb-glass-fill-over:#1c1c1c;--bb-glass-fill-thick:#1c1c1c;--bb-glass-sheet:#1c1c1c}}}
@media (prefers-color-scheme: dark) and (prefers-contrast: more){html[data-bb-design][data-bb-page='book']{--bb-text-2:#d6d6d6;--bb-text-3:#c4c4c4;--bb-hairline:rgba(255,255,255,.34);--bb-hairline-strong:rgba(255,255,255,.58);--bb-glass-fill:#141414;--bb-glass-fill-over:#141414;--bb-glass-fill-thick:#141414;--bb-glass-sheet:#141414;--bb-glass-edge:0 0 0 1px #d6d6d6}}
@media (prefers-reduced-transparency: reduce){html[data-bb-design][data-moderator-theme='dark']{--bb-glass-fill:#1c1c1c;--bb-glass-fill-over:#1c1c1c;--bb-glass-fill-thick:#1c1c1c;--bb-glass-sheet:#1c1c1c}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){html[data-bb-design][data-moderator-theme='dark']{--bb-glass-fill:#1c1c1c;--bb-glass-fill-over:#1c1c1c;--bb-glass-fill-thick:#1c1c1c;--bb-glass-sheet:#1c1c1c}}
@media (prefers-contrast: more){html[data-bb-design][data-moderator-theme='dark']{--bb-text-2:#d6d6d6;--bb-text-3:#c4c4c4;--bb-hairline:rgba(255,255,255,.34);--bb-hairline-strong:rgba(255,255,255,.58);--bb-glass-fill:#141414;--bb-glass-fill-over:#141414;--bb-glass-fill-thick:#141414;--bb-glass-sheet:#141414;--bb-glass-edge:0 0 0 1px #d6d6d6}}

/* --- 3. Base ---------------------------------------------------------------- */
html[data-bb-design] *,html[data-bb-design] *::before,html[data-bb-design] *::after{box-sizing:border-box;letter-spacing:0!important}
html[data-bb-design] body{margin:0;background:var(--bb-canvas)!important;color:var(--bb-ink)!important;font-size:var(--bb-text-callout);line-height:var(--bb-leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-bb-design] :is(body,button,input,select,textarea,dialog){font-family:var(--bb-font)!important}
html[data-bb-design] :is(h1,h2,h3,h4,p,li,dd,label,a,button){overflow-wrap:break-word}
html[data-bb-design] :is(h1,h2,h3,h4){color:var(--bb-ink)!important;line-height:var(--bb-leading-tight);text-wrap:pretty}
html[data-bb-design] h1{font-size:var(--bb-text-title-1);font-weight:var(--bb-weight-semibold)!important;max-width:880px}
html[data-bb-design] h2{font-size:var(--bb-text-title-3);font-weight:var(--bb-weight-semibold)!important}
html[data-bb-design] h3{font-size:var(--bb-text-headline);font-weight:var(--bb-weight-semibold)!important;line-height:var(--bb-leading-snug)}
html[data-bb-design] h4{font-weight:var(--bb-weight-semibold)}
html[data-bb-design] :is(strong,b){font-weight:var(--bb-weight-semibold)}
html[data-bb-design] :is(.eyebrow,.kicker,.overline,.project-kicker,.section-kicker,.card-kicker,.study-kind){font-size:var(--bb-text-footnote);font-weight:var(--bb-weight-medium)!important;text-transform:none!important;color:var(--bb-text-2)!important}
html[data-bb-design] :is(.muted,.ops-muted,.six-note,.notice,.hint,.lead,.hero-summary,.intro p,.help,.field-help){color:var(--bb-text-2)}
html[data-bb-design] :is(a,.top-link,.text-link){color:inherit;text-underline-offset:4px}
/* The skip link and the booking page's primary link are filled capsules; inheriting ink would put ink on their own fill. */
html[data-bb-design] .product-skip-link{background:var(--bb-primary-fill);color:var(--bb-on-ink)}
html[data-bb-design] .primary-link{color:var(--bb-on-ink)}
html[data-bb-design] details>summary{color:var(--bb-ink)}
html[data-bb-design] a:hover{text-decoration-color:var(--bb-ink)}
/* Focus ring (section 9 lines 513-515): one 2px forest ring. */
html[data-bb-design] :focus-visible{outline:2px solid var(--bb-focus)!important;outline-offset:2px}
html[data-bb-design] :is(input,select,textarea):focus{outline:2px solid var(--bb-focus);outline-offset:0}
html[data-bb-design] ::selection{background:var(--bb-forest-wash);color:var(--bb-ink)}

/* Wordmark (unchanged lockup rules). */
html[data-bb-design] .brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;color:var(--bb-ink)!important;text-decoration:none;font-size:0!important}
html[data-bb-design] .brand img,html[data-bb-design] .auth-boot-card img{content:var(--bb-logo);width:164px!important;min-width:164px;height:34px!important;max-height:34px;object-fit:contain;flex:0 0 auto}
html[data-bb-design] .brand :is(.brand-mark:not(img),.dot){display:block!important;width:164px!important;min-width:164px;height:34px!important;border:0!important;border-radius:0!important;background:var(--bb-logo) center / contain no-repeat!important;box-shadow:none!important}
html[data-bb-design] .brand :is(.brand-mark:not(img),.dot)::before,html[data-bb-design] .brand :is(.brand-mark:not(img),.dot)::after{content:none!important}
html[data-bb-design] .brand>:is(img,.brand-mark,.dot)+:is(span,strong,.brand-name){display:none!important}
html[data-bb-design] .brand .brand-context{display:inline-block!important;font-size:var(--bb-text-caption);color:var(--bb-text-2);font-weight:var(--bb-weight-regular)}

/* --- 4. Top bars -----------------------------------------------------------
   Participant and public headers are content-layer chrome: opaque canvas and
   one hairline. Staff top bars are sticky, so dense work scrolls beneath
   them: they carry the section 9 glass bar material (lines 478-485) on
   ::before, so menus inside sample the page and never the bar. Full-width
   adaptation: no capsule radius and no rim (one edge: the lower hairline). */
html[data-bb-design] :is(.topbar,.site-header,header.header){background:var(--bb-canvas)!important;border:0;border-bottom:1px solid var(--bb-hairline)!important;box-shadow:none!important;min-height:72px;padding:14px 0;gap:var(--bb-space-5);border-radius:0;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-bb-design]:is([data-bb-page^='moderator'],[data-bb-tool='worker'],[data-bb-tool='recordings'],[data-bb-tool='insights'],[data-bb-page='project-setup'],[data-bb-page='collection-account']) .topbar,
html[data-bb-design][data-bb-page='ops'] .top,
html[data-bb-design][data-bb-tool='german-call-center/moderator'] .app-bar{isolation:isolate;background:none!important;border-bottom:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-bb-design]:is([data-bb-page^='moderator'],[data-bb-tool='worker'],[data-bb-tool='recordings'],[data-bb-tool='insights'],[data-bb-page='project-setup'],[data-bb-page='collection-account']) .topbar::before,
html[data-bb-design][data-bb-page='ops'] .top::before,
html[data-bb-design][data-bb-tool='german-call-center/moderator'] .app-bar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--bb-glass-fill-over);-webkit-backdrop-filter:var(--bb-glass-filter);backdrop-filter:var(--bb-glass-filter);box-shadow:inset 0 -1px 0 var(--bb-hairline),var(--bb-shadow-float)}
html[data-bb-design] :is(.primary-nav,.topbar-actions,.topbar-controls,.top-actions){gap:var(--bb-space-4);flex-wrap:wrap;min-width:0}
html[data-bb-design] :is(.primary-nav a,.nav-link,.topbar nav a){font-size:var(--bb-text-footnote);font-weight:var(--bb-weight-medium)!important;color:var(--bb-text-2);background:none;border-radius:var(--bb-radius-capsule)}
html[data-bb-design] :is(.primary-nav a,.nav-link)[aria-current='page']{color:var(--bb-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;border-color:transparent!important;background:none;box-shadow:none}
html[data-bb-design] :is(.primary-nav a,.nav-link)[aria-current='page']::after{content:none}
/* Small top-bar capsules: quiet button recipe (section 9 line 504). */
html[data-bb-design] :is(.nav-menu-trigger,.moderator-link,.top-link,.back-link){border-radius:var(--bb-radius-capsule);background:var(--bb-fill-1)!important;border:0!important;box-shadow:inset 0 0 0 .5px var(--bb-hairline)!important;color:var(--bb-ink)!important;min-height:var(--bb-control);padding:8px 14px;font-size:var(--bb-text-footnote);font-weight:var(--bb-weight-medium)!important}
html[data-bb-design] :is(.nav-menu-trigger,.moderator-link,.top-link,.back-link):hover{background:var(--bb-fill-2)!important}
/* Menus (section 9 line 532): thick glass from the control that opens them. */
html[data-bb-design] :is(.nav-popover,.menu-popover,.dropdown-menu){background:var(--bb-glass-fill-thick);-webkit-backdrop-filter:var(--bb-glass-filter-thick);backdrop-filter:var(--bb-glass-filter-thick);border:0;border-radius:var(--bb-radius-menu);box-shadow:var(--bb-glass-edge),var(--bb-shadow-menu);color:var(--bb-ink)}
html[data-bb-design] :is(.nav-popover a,.menu-popover a):hover{background:var(--bb-fill-2)}
html[data-bb-design] :is(.bb-locale-selector select,.public-locale-selector select,.locale-select,.locale){border:0!important;border-radius:var(--bb-radius-capsule)!important;font-size:var(--bb-text-footnote)!important;min-height:var(--bb-control)!important;padding-block:6px!important;padding-inline:12px 30px!important;background-color:var(--bb-fill-1)!important;box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong);max-width:170px}
html[data-bb-design] .bb-locale-selector__label{font-size:var(--bb-text-caption);color:var(--bb-text-2)}

/* --- 5. Buttons (section 9 lines 487-511) ----------------------------------
   Generic buttons keep a neutral base; recognised action classes become the
   reference capsules: primary = near-black tinted, secondary = quiet fill.
   Labels wrap instead of overflowing (long localized labels, 320px). */
html[data-bb-design] :is(button,.button,.btn,.primary-action,.secondary-action,.primary-button,.secondary-button,.button-primary,.button-secondary,.btn-primary,.btn-secondary){font-weight:var(--bb-weight-medium)!important;box-shadow:none!important;transition:background-color var(--bb-fast) ease,box-shadow var(--bb-fast) ease,color var(--bb-fast) ease,transform var(--bb-base) var(--bb-spring);max-width:100%}
html[data-bb-design] :is(button,.button,.btn){border-color:var(--bb-hairline-strong);color:var(--bb-ink);background:var(--bb-canvas)}
html[data-bb-design] :is(.primary-action,.primary-button,.button-primary,.btn-primary,.btn.primary,.button:not(.secondary),button[type=submit],.ops-primary){background:var(--bb-primary-fill)!important;border:1px solid transparent!important;color:var(--bb-on-ink)!important;box-shadow:var(--bb-shadow-primary)!important;border-radius:var(--bb-radius-capsule);min-height:var(--bb-target);padding:10px 20px;font-size:var(--bb-text-body);font-weight:var(--bb-weight-semibold)!important;text-decoration:none}
html[data-bb-design] :is(.primary-action,.primary-button,.button-primary,.btn-primary,.btn.primary,.button:not(.secondary),button[type=submit],.ops-primary):hover:not(:disabled){background:var(--bb-primary-fill-hover)!important;border-color:transparent!important}
html[data-bb-design] :is(.secondary-action,.secondary-button,.button-secondary,.btn-secondary,.button.secondary){background:var(--bb-fill-1)!important;border:1px solid transparent!important;box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong)!important;color:var(--bb-ink)!important;border-radius:var(--bb-radius-capsule);min-height:var(--bb-target);padding:10px 20px;font-size:var(--bb-text-body);text-decoration:none}
html[data-bb-design] :is(.secondary-action,.secondary-button,.button-secondary,.btn-secondary,.button.secondary):hover:not(:disabled){background:var(--bb-fill-2)!important}
html[data-bb-design] :is(.primary-action,.primary-button,.button-primary,.btn-primary,.btn.primary,.button,button[type=submit],.ops-primary,.secondary-action,.secondary-button,.button-secondary,.btn-secondary):active:not(:disabled){transform:scale(var(--bb-press))}
/* Disabled: predictable, readable, never hidden (section 9 line 502 colour; Data OS keeps its opacity). */
html[data-bb-design] :is(button,.button,.btn):disabled{opacity:.5!important;cursor:not-allowed;transform:none}
/* Chosen options (dates, times, toggles): filled ink, like the Calendar's selected day. */
html[data-bb-design] :is(button[aria-pressed='true'],.choice-button.active,.date-button.selected,.time-button.selected){background:var(--bb-primary-fill)!important;border-color:transparent!important;color:var(--bb-on-ink)!important}
html[data-bb-design] :is(.choice-button.active,.date-button.selected,.time-button.selected) :is(strong,small,span){color:inherit}
html[data-bb-design] .choice-button.group-choice.active .group-count{background:var(--bb-on-ink);color:var(--bb-ink)}
html[data-bb-design] :is(.choice-button,.date-button,.time-button){border-radius:var(--bb-radius-md);background:var(--bb-canvas);border:1px solid var(--bb-hairline-strong);color:var(--bb-ink)}
html[data-bb-design] :is(.choice-button,.date-button,.time-button):hover:not(:disabled):not(.active):not(.selected){background:var(--bb-fill-1)}
html[data-bb-design] :is(.danger,.btn.danger){color:var(--bb-danger)}

/* --- 6. Segmented tabs (section 9 lines 517-529, static bead) -------------
   No track fill; the chosen tab carries the bead (fill plus one hairline).
   Navigation between pages keeps link styling (reference: do not segment
   page navigation). */
html[data-bb-design] :is(.dashboard-tabs,.ops-tabs){gap:2px}
html[data-bb-design] :is(:is(.dashboard-tabs,.ops-tabs,.ops-nav) button,[role=tablist] [role=tab]){border:0!important;border-radius:var(--bb-radius-capsule);color:var(--bb-text-2);background:transparent!important;box-shadow:none!important;min-height:calc(var(--bb-control) - 6px)}
html[data-bb-design] :is(:is(.dashboard-tabs,.ops-tabs,.ops-nav) button,[role=tablist] [role=tab]):hover{background:var(--bb-fill-1)!important;color:var(--bb-ink)}
html[data-bb-design] :is(:is(.dashboard-tabs,.ops-tabs,.ops-nav) button,[role=tablist] [role=tab]):is([aria-selected=true],[aria-current=true],[aria-current=page],[aria-pressed=true],.active){background:var(--bb-bead-fill)!important;box-shadow:var(--bb-shadow-bead)!important;color:var(--bb-ink)!important;font-weight:var(--bb-weight-semibold)!important}

/* --- 7. Fields (section 9 lines 578-582) ----------------------------------
   Data OS forms sit on the canvas, not on glass: the field keeps the
   reference shape, padding, 15px text and focus ring, with the quiet fill
   and a hairline so it reads as a field without glass. */
html[data-bb-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){background-color:var(--bb-surface-1)!important;color:var(--bb-ink)!important;border:1px solid var(--bb-hairline-strong);border-radius:var(--bb-radius-md);min-width:0;max-width:100%;font-size:var(--bb-text-callout);line-height:1.35;box-shadow:none;transition:background-color var(--bb-fast) ease,box-shadow var(--bb-fast) ease}
html[data-bb-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):focus{background-color:var(--bb-canvas)!important;box-shadow:0 0 0 .5px var(--bb-hairline-strong),0 0 0 4px color-mix(in srgb,var(--bb-forest) 16%,transparent)}
html[data-bb-design] :is(input,select,textarea):disabled{background-color:var(--bb-surface-2)!important;color:var(--bb-text-2)!important}
html[data-bb-design] :is(input,textarea)::placeholder{color:var(--bb-text-3);opacity:1}
html[data-bb-design] :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--bb-ink)}
html[data-bb-design] :is(input,select,textarea)[aria-invalid=true]{border-color:var(--bb-danger)!important}
html[data-bb-design] :is(label,legend){font-weight:var(--bb-weight-medium)!important}

/* --- 8. Pills, status and notices (section 9 lines 614-617) ---------------- */
html[data-bb-design] :is(.status-pill,.badge,.pill,.chip,.tag,.ops-badge,.project-status,.secure-pill){background:var(--bb-fill-2);color:var(--bb-text-2);border-color:transparent;box-shadow:none!important;font-weight:var(--bb-weight-medium);font-size:var(--bb-text-caption);border-radius:var(--bb-radius-capsule)}
html[data-bb-design] .chip[aria-pressed=true]{background:var(--bb-ink);border-color:var(--bb-ink);color:var(--bb-on-ink)}
html[data-bb-design] .chip[aria-pressed=true] .muted{color:inherit}
html[data-bb-design] :is(.good,.success,.is-success,.status-open,.pill.good){color:var(--bb-success);background-color:var(--bb-success-bg)}
html[data-bb-design] :is(.pill.warn,.ops-badge.warn,.warning-note){color:var(--bb-warning);background-color:var(--bb-warning-bg)}
html[data-bb-design] :is(.pill.bad,.error-banner){color:var(--bb-danger);background-color:var(--bb-danger-bg)}
html[data-bb-design] :is(.error,.six-error,.ops-status.error,.status.error){color:var(--bb-danger)}
html[data-bb-design] :is(.six-toolbar,.toolbar-panel,.filter-panel,.ops-notice,.notice,.note,.launch-note,.minimum-volume-panel){background:var(--bb-fill-1);border-color:var(--bb-hairline);border-radius:var(--bb-radius-lg);box-shadow:none}
html[data-bb-design] :is(.six-toolbar,.ops-toolbar) :is(input,select){color:var(--bb-ink)!important}

/* --- 9. Sections and records (section 9 line 585) --------------------------
   Canvas, xl radius, one hairline; nested cards flatten into ruled parts. */
html[data-bb-design] :is(.card,.panel,.six-card,.ops-card,.project-card,.study-card,.summary-card,.info-card,.resource-card,.glance,.at-a-glance,.legal-card,.booking-card,.auth-card,.link-card){background:var(--bb-canvas)!important;border-color:var(--bb-hairline-strong)!important;border-radius:var(--bb-radius-xl)!important;box-shadow:none!important}
html[data-bb-design] :is(.card,.panel,.six-card,.ops-card) :is(.card,.panel,.six-card,.ops-card){border:0!important;border-top:1px solid var(--bb-hairline)!important;border-radius:0!important;padding-inline:0;box-shadow:none!important}
html[data-bb-design] :is(table,.table-wrap){border-color:var(--bb-hairline-strong);font-size:var(--bb-text-footnote)}
html[data-bb-design] :is(th,thead){background:var(--bb-surface-1);color:var(--bb-text-2);font-weight:var(--bb-weight-medium);border-color:var(--bb-hairline-strong)}
html[data-bb-design] td{border-color:var(--bb-hairline);font-variant-numeric:tabular-nums}
html[data-bb-design] :is(.table-wrap,.table-scroll){border-radius:var(--bb-radius-lg);overflow:auto;max-width:100%}

/* --- 10. Sheets and drawers (section 9 lines 545-572) ----------------------
   Reference sheet shape, radius, shadow and dim. Data OS sheets hold forms,
   consent and records, so the fill is the opaque canvas, and the dimming
   layer never blurs. */
html[data-bb-design] :is(.six-dialog,dialog,.company-ops,.drawer-panel,.code-panel){color:var(--bb-ink);background:var(--bb-canvas)!important;border-color:var(--bb-hairline-strong);box-shadow:0 0 0 .5px var(--bb-hairline-strong),var(--bb-shadow-sheet);border-radius:var(--bb-radius-sheet)}
html[data-bb-design] :is(.six-dialog,.company-ops)>header{color:var(--bb-ink);background:var(--bb-canvas);border-color:var(--bb-hairline);margin:0}
html[data-bb-design] dialog::backdrop{background:var(--bb-glass-dim);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-bb-design] .six-dialog{border-radius:0}
html[data-bb-design] :is(dialog,.drawer-panel,.code-panel) h2{font-size:var(--bb-text-title-3)}
html[data-bb-design] :is(.auth-boot-status,.auth-boot-card){color:var(--bb-ink);background:var(--bb-canvas)}
html[data-bb-design] .auth-boot-card strong{font-size:var(--bb-text-body);text-transform:none;font-weight:var(--bb-weight-medium)}
html[data-bb-design] .auth-boot-card span{color:var(--bb-text-2)}

/* --- 11. Glass boundary -----------------------------------------------------
   Legacy sheets blurred headers, docks and dimming layers. Only the control
   layer named in sections 4, 12 and 14 may blur; data, forms, consent and
   the remote desktop never sit under decorative blur. */
html[data-bb-design] :where(body *):not(:is(.nav-popover,.menu-popover,.dropdown-menu,.booking-selection-dock)){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-bb-design] ::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* --- 12. Public page rhythm and directory ----------------------------------
   Work-focused: modest titles, no giant heroes. */
html[data-bb-design] :is(.portal,.study-shell,.legal-shell,.booking-shell,.manage-shell,.payment-shell,.referral-shell,main.shell){width:min(1200px,calc(100% - var(--bb-gutter) * 2));margin-inline:auto;padding:8px 0 64px}
html[data-bb-design] .hero{padding:36px 0 24px;background:none!important;border:0;border-radius:0;box-shadow:none}
html[data-bb-design] .hero h1{font-size:var(--bb-text-display);line-height:var(--bb-leading-tight)}
html[data-bb-design] .hero>p:last-child{font-size:var(--bb-text-headline);line-height:1.6;color:var(--bb-text-2);max-width:680px}
html[data-bb-design] .portal .hero{padding:40px 0 28px;max-width:800px}
html[data-bb-design] .portal .hero h1{font-size:var(--bb-text-display);margin-bottom:var(--bb-space-3)}
html[data-bb-design] .projects{gap:var(--bb-space-5)}
html[data-bb-design] .catalog-state{min-height:148px;border:0;border-block:1px solid var(--bb-hairline);border-radius:0;padding:28px 0;background:var(--bb-canvas)!important;gap:var(--bb-space-5)}
html[data-bb-design] .catalog-state h2{font-size:var(--bb-text-title-3)}
html[data-bb-design] .catalog-state-icon{width:44px;height:44px;background:var(--bb-fill-1);color:var(--bb-ink);border:0;font-weight:var(--bb-weight-regular);border-radius:var(--bb-radius-capsule)}
html[data-bb-design] .catalog-spinner{border-color:var(--bb-hairline-strong);border-top-color:var(--bb-ink)}
html[data-bb-design] .project-card{padding:28px;gap:var(--bb-space-6);grid-template-columns:minmax(0,1fr) 220px}
html[data-bb-design] .project-card h2{font-size:var(--bb-text-title-2);line-height:1.25;margin:14px 0 12px}
html[data-bb-design] .project-card p{color:var(--bb-text-2);font-size:var(--bb-text-callout);line-height:1.6}
html[data-bb-design] .project-facts{border-color:var(--bb-hairline);background:none;gap:var(--bb-space-5)}
html[data-bb-design] .project-facts>div{border:0;border-inline-end:1px solid var(--bb-hairline);border-radius:0;background:none;padding:0;padding-inline-end:var(--bb-space-5)}
html[data-bb-design] .project-facts>div:last-child{border-inline-end:0}
html[data-bb-design] .project-facts dt{text-transform:none;color:var(--bb-text-2);font-size:var(--bb-text-caption)}
html[data-bb-design] .project-facts dd{color:var(--bb-ink);font-size:var(--bb-text-body);font-weight:var(--bb-weight-medium)}
html[data-bb-design] .project-actions{gap:10px}
html[data-bb-design] .resource-footer{margin-top:64px;border-top:1px solid var(--bb-hairline);padding:32px 0 0;gap:48px;grid-template-columns:minmax(220px,.8fr) minmax(0,1.8fr)}
html[data-bb-design] .resource-footer-intro strong{font-size:var(--bb-text-title-3);font-weight:var(--bb-weight-medium);line-height:1.35}
html[data-bb-design] .resource-footer-intro p{font-size:var(--bb-text-footnote);max-width:320px;color:var(--bb-text-2)}
html[data-bb-design] .resource-links{gap:24px 36px}
html[data-bb-design] .resource-links a{border:0;border-radius:0;background:none;padding:0;font-size:var(--bb-text-footnote);color:var(--bb-ink);font-weight:var(--bb-weight-medium)}
html[data-bb-design] .resource-links small{font-size:var(--bb-text-caption);font-weight:var(--bb-weight-regular);color:var(--bb-text-2);line-height:1.6}
html[data-bb-design] .legal-footer{border-color:var(--bb-hairline);color:var(--bb-text-2);background:none}

/* Study details, preparation and legal documents: ruled editorial sections. */
html[data-bb-design] .study-shell .hero{align-items:start;gap:48px}
html[data-bb-design] .study-shell .hero h1{font-size:var(--bb-text-display);max-width:760px}
html[data-bb-design] :is(.study-facts,.at-a-glance,.glance){border:0;border-inline-start:1px solid var(--bb-hairline);border-radius:0!important;padding-block:8px;padding-inline:28px 0;background:none!important;box-shadow:none}
html[data-bb-design] :is(.study-facts,.at-a-glance,.glance) dt{font-size:var(--bb-text-caption);color:var(--bb-text-2)}
html[data-bb-design] :is(.study-facts,.at-a-glance,.glance) dd{font-size:var(--bb-text-body);font-weight:var(--bb-weight-medium)}
html[data-bb-design] :is(.section-grid,.category-section,.consent-summary,.principles){border-color:var(--bb-hairline);background:none;border-radius:0;box-shadow:none}
html[data-bb-design] .section-grid{padding-block:40px}
html[data-bb-design] :is(.principles article,.step-list li){background:none!important;border:0!important;border-top:1px solid var(--bb-hairline)!important;border-radius:0;padding:20px 0;box-shadow:none!important}
html[data-bb-design] .principles article>span{color:var(--bb-text-2)!important;font-weight:var(--bb-weight-regular)!important}
html[data-bb-design] .step-list li>span{background:var(--bb-fill-1)!important;color:var(--bb-ink)!important;border:0;box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong);font-size:var(--bb-text-footnote);font-weight:var(--bb-weight-semibold)!important;width:32px;height:32px;border-radius:var(--bb-radius-capsule)}
html[data-bb-design] .legal-shell .hero{max-width:860px}
html[data-bb-design] .legal-grid{display:block;max-width:880px}
html[data-bb-design] .legal-card{border:0!important;border-top:1px solid var(--bb-hairline)!important;border-radius:0!important;padding:28px 0;margin:0;background:none!important}
html[data-bb-design] .legal-card h2{font-size:var(--bb-text-title-3);margin:0 0 16px}
html[data-bb-design] .legal-card :is(p,li){font-size:var(--bb-text-callout);line-height:1.8}

/* Booking (book/, book/german-call-center): content layer, ruled panels. */
html[data-bb-design] :is(.booking-board,.booking-sidebar,.schedule-panel,.calendar-panel,.time-panel,.contact-panel){background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}
html[data-bb-design] .booking-sidebar{padding-block:24px;padding-inline:0 28px;border-top:1px solid var(--bb-hairline)!important}
html[data-bb-design] .schedule-panel{padding:24px 0;border-top:1px solid var(--bb-hairline)!important}
html[data-bb-design] :is(.calendar-panel,.time-panel,.contact-panel){padding:0}
html[data-bb-design] .contact-panel{margin-top:28px;padding-top:28px;border-top:1px solid var(--bb-hairline)!important}
html[data-bb-design] .booking-locale-switch{border:0;background:none;padding:0}
html[data-bb-design] :is(.flow-heading,.panel-head) h2{font-size:var(--bb-text-title-3)!important}
/* The floating booking dock is a control layer over the scrolling schedule:
   thick glass capsule rectangle (section 9 menu material, line 532). */
html[data-bb-design] .booking-selection-dock{background:var(--bb-glass-fill-thick)!important;-webkit-backdrop-filter:var(--bb-glass-filter-thick)!important;backdrop-filter:var(--bb-glass-filter-thick)!important;border:0!important;border-radius:var(--bb-radius-menu)!important;box-shadow:var(--bb-glass-edge),var(--bb-shadow-menu)!important;color:var(--bb-ink)}
html[data-bb-design] .booking-selection-dock[data-has-waiting-match='true']{background:color-mix(in srgb,var(--bb-forest-wash) 70%,transparent)!important;box-shadow:inset 0 0 0 1px var(--bb-forest),var(--bb-shadow-menu)!important}

/* --- 13. Account, referral and staff rhythm (unchanged structure). -------- */
html[data-bb-design][data-bb-page^='join'] main{width:min(1200px,calc(100% - var(--bb-gutter) * 2));max-width:1200px;padding:8px 0 64px}
html[data-bb-design][data-bb-page^='referrals'] header.header{width:min(1200px,calc(100% - var(--bb-gutter) * 2));margin-inline:auto}
html[data-bb-design][data-bb-page^='join'] main>header{min-height:72px;padding:14px 0;border-bottom:1px solid var(--bb-hairline);margin-bottom:40px}
html[data-bb-design][data-bb-page^='join'] .intro{max-width:720px;margin-bottom:32px}
html[data-bb-design][data-bb-page^='join'] .intro h1{font-size:var(--bb-text-title-1)}
html[data-bb-design][data-bb-page^='join'] .card.auth{padding:28px;max-width:480px}
html[data-bb-design][data-bb-page^='join'] .card:not(.auth){border:0;border-top:1px solid var(--bb-hairline)!important;border-radius:0!important;padding:24px 0}
html[data-bb-design] :is(.metrics,.ops-grid){gap:0;border-block:1px solid var(--bb-hairline);padding-block:16px}
html[data-bb-design] :is(.metrics>div,.ops-stat){background:none;border:0;border-inline-end:1px solid var(--bb-hairline);border-radius:0;padding:12px 20px}
html[data-bb-design] :is(.metrics>div,.ops-stat):last-child{border-inline-end:0}
html[data-bb-design] :is(.metrics strong,.ops-stat strong){font-size:var(--bb-text-title-1);font-weight:var(--bb-weight-semibold)!important;line-height:1.25;font-variant-numeric:tabular-nums}
html[data-bb-design] :is(.moderator-shell,.worker-shell,.insights-shell,.setup-shell) h1{font-size:var(--bb-text-title-1)}
html[data-bb-design] :is(.moderator-shell,.worker-shell,.insights-shell,.setup-shell) h2{font-size:var(--bb-text-title-3)}
html[data-bb-design] :is(.workspace-heading,.operator-section-heading,.live-control-heading,.selected-room-heading,.project-snapshot-head){background:none!important;border-color:var(--bb-hairline);border-radius:0;box-shadow:none}
html[data-bb-design] :is(.six-card,.ops-card) h3{font-size:var(--bb-text-headline)}
html[data-bb-design] .company-ops{border-radius:var(--bb-radius-xl);font-size:var(--bb-text-body);background:var(--bb-canvas);color:var(--bb-ink)}
html[data-bb-design] .company-ops :is(button,input,textarea,select){border-color:var(--bb-hairline-strong);color:var(--bb-ink);border-radius:var(--bb-radius-xs)}
html[data-bb-design] .ops-empty{border-color:var(--bb-hairline-strong);border-radius:var(--bb-radius-lg);color:var(--bb-text-2)}

/* --- 14. Operations (/ops/) ------------------------------------------------- */
html[data-bb-design][data-bb-page='ops']{--rail-width:216px}
html[data-bb-design][data-bb-page='ops'] body{font-size:var(--bb-text-body)}
html[data-bb-design][data-bb-page='ops'] .app{grid-template-rows:64px 1fr}
html[data-bb-design][data-bb-page='ops'] .top{height:64px;padding-inline:24px;z-index:6}
html[data-bb-design][data-bb-page='ops'] .brand{width:180px}
html[data-bb-design][data-bb-page='ops'] .rail{top:64px;height:calc(100dvh - 64px);background:var(--bb-canvas);border-color:var(--bb-hairline);padding:20px 12px}
html[data-bb-design][data-bb-page='ops'] .rail a{border-radius:var(--bb-radius-sm);padding:9px 12px;font-size:var(--bb-text-footnote);font-weight:var(--bb-weight-medium);color:var(--bb-text-2);min-height:36px}
html[data-bb-design][data-bb-page='ops'] .rail a:hover{background:var(--bb-fill-1);color:var(--bb-ink)}
html[data-bb-design][data-bb-page='ops'] .rail a[aria-current=page]{background:var(--bb-fill-2);color:var(--bb-ink);font-weight:var(--bb-weight-semibold);box-shadow:inset 2px 0 var(--bb-forest)}
html[data-bb-design][data-bb-page='ops'][dir='rtl'] .rail a[aria-current=page],html[data-bb-design][data-bb-page='ops'] [dir='rtl'] .rail a[aria-current=page]{box-shadow:inset -2px 0 var(--bb-forest)}
html[data-bb-design][data-bb-page='ops'] .rail-label{font-size:var(--bb-text-caption);color:var(--bb-text-3)}
html[data-bb-design][data-bb-page='ops'] .view{max-width:1440px;padding:28px 36px 64px;min-width:0}
html[data-bb-design][data-bb-page='ops'] h1{font-size:var(--bb-text-title-1)}
html[data-bb-design][data-bb-page='ops'] h2{font-size:var(--bb-text-headline)}
html[data-bb-design][data-bb-page='ops'] .stats{gap:0;border-block:1px solid var(--bb-hairline);margin-block:24px 32px}
html[data-bb-design][data-bb-page='ops'] .stat{border:0;border-inline-end:1px solid var(--bb-hairline);border-radius:0;padding:18px}
html[data-bb-design][data-bb-page='ops'] a.stat:hover{background:var(--bb-fill-1)}
html[data-bb-design][data-bb-page='ops'] .stat:last-child{border-inline-end:0}
html[data-bb-design][data-bb-page='ops'] .stat strong{font-size:var(--bb-text-title-1);font-weight:var(--bb-weight-semibold);font-variant-numeric:tabular-nums}
html[data-bb-design][data-bb-page='ops'] .card{border:1px solid var(--bb-hairline)!important;border-radius:var(--bb-radius-xl)!important}
html[data-bb-design][data-bb-page='ops'] .card-head{padding:14px 16px;border-color:var(--bb-hairline);min-height:52px}
html[data-bb-design][data-bb-page='ops'] .card-head .n{background:var(--bb-fill-2);font-variant-numeric:tabular-nums}
html[data-bb-design][data-bb-page='ops'] .card-head .n.hot{background:var(--bb-ink);color:var(--bb-on-ink)}
html[data-bb-design][data-bb-page='ops'] .rows li{border-color:var(--bb-hairline)}
html[data-bb-design][data-bb-page='ops'] .row{padding:10px 16px;min-height:var(--bb-target);text-align:start}
html[data-bb-design][data-bb-page='ops'] .row:hover{background:var(--bb-fill-1)}
html[data-bb-design][data-bb-page='ops'] .btn{border-radius:var(--bb-radius-capsule);border:1px solid transparent;background:var(--bb-fill-1);box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong)!important;min-height:var(--bb-control);height:auto;padding:0 var(--bb-space-4)}
html[data-bb-design][data-bb-page='ops'] .btn:hover:not(:disabled){background:var(--bb-fill-2);border-color:transparent}
html[data-bb-design][data-bb-page='ops'] .btn.primary{box-shadow:var(--bb-shadow-primary)!important;min-height:var(--bb-control)}
html[data-bb-design][data-bb-page='ops'] .btn.small{min-height:32px;padding:0 var(--bb-space-3);font-size:var(--bb-text-footnote)}
html[data-bb-design][data-bb-page='ops'] .chip{border:0;background:var(--bb-fill-1);box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong);min-height:32px;font-size:var(--bb-text-footnote)}
html[data-bb-design][data-bb-page='ops'] .chip[aria-pressed=true]{background:var(--bb-ink);color:var(--bb-on-ink)}
html[data-bb-design][data-bb-page='ops'] .table-wrap{border:1px solid var(--bb-hairline)}
html[data-bb-design][data-bb-page='ops'] th{position:sticky;top:0;z-index:1;font-size:var(--bb-text-caption)}
html[data-bb-design][data-bb-page='ops'] tr.clickable:hover td{background:var(--bb-fill-1)}
html[data-bb-design][data-bb-page='ops'] .note{border:0;box-shadow:inset 0 0 0 .5px var(--bb-hairline)}
html[data-bb-design][data-bb-page='ops'] .note.error{background:var(--bb-warning-fill);box-shadow:inset 0 0 0 .5px var(--bb-warning-line);color:var(--bb-deadline-ink)}
html[data-bb-design][data-bb-page='ops'] .signin{max-width:400px;margin:40px auto;padding-block:24px}
html[data-bb-design][data-bb-page='ops'] .signin h1{font-size:var(--bb-text-title-1)}
html[data-bb-design][data-bb-page='ops'] .signin input{height:auto;min-height:46px;padding:11px 14px}
html[data-bb-design][data-bb-page='ops'] .drawer{background:var(--bb-glass-dim)}
html[data-bb-design][data-bb-page='ops'] .drawer-panel{border-radius:var(--bb-radius-sheet) 0 0 var(--bb-radius-sheet);padding:32px}
html[data-bb-design][data-bb-page='ops'] .drawer-panel h1{font-size:var(--bb-text-title-2);padding-inline-end:30px}
html[data-bb-design][data-bb-page='ops'] .drawer-close{border:0;background:var(--bb-fill-2);border-radius:50%}
html[data-bb-design][data-bb-page='ops'] .toast{border-radius:var(--bb-radius-lg);background:var(--bb-ink);color:var(--bb-on-ink);box-shadow:var(--bb-shadow-menu)}
html[data-bb-design][data-bb-page='ops'] .toast.error{background:var(--bb-danger)}
html[data-bb-design][data-bb-page='ops'] .steps li.current{border-color:var(--bb-forest);color:var(--bb-ink)}
html[data-bb-design][data-bb-page='ops'] .steps li.done{border-color:var(--bb-work-done);color:var(--bb-work-done)}
html[data-bb-design][data-bb-page='ops'] .check.consent{background:var(--bb-warning-fill);border-radius:var(--bb-radius-sm)}

/* --- 15. Shared tool sizing for both sides of a remote session ------------- */
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']){--bb-control-height:var(--bb-target);--bb-control-size:var(--bb-text-body);--bb-field-radius:var(--bb-radius-md);--bb-page-gutter:40px}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) body{font-size:var(--bb-text-body);line-height:1.5}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) h1{font-size:var(--bb-text-title-1)!important;font-weight:var(--bb-weight-semibold)!important;line-height:1.2}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) h2{font-size:var(--bb-text-title-3)!important;font-weight:var(--bb-weight-semibold)!important;line-height:1.3}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) h3{font-size:var(--bb-text-callout)!important;font-weight:var(--bb-weight-semibold)!important;line-height:1.4}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) :is(button,.primary-button,.secondary-button,.help-link,.topbar nav a){font-size:var(--bb-control-size);font-weight:var(--bb-weight-medium)!important;line-height:1.4}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) :is(button,.primary-button,.secondary-button){min-height:var(--bb-control-height);box-shadow:none}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) label{font-size:var(--bb-text-body);font-weight:var(--bb-weight-regular)!important}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) :is(input:not([type='checkbox']),select,textarea){min-height:var(--bb-control-height);border-color:var(--bb-hairline-strong);border-radius:var(--bb-field-radius);font-size:16px;line-height:1.5;color:var(--bb-ink)}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) .eyebrow{font-size:var(--bb-text-caption);font-weight:var(--bb-weight-medium)!important;text-transform:none;color:var(--bb-text-2)}
html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) dialog{border:0;border-radius:var(--bb-radius-sheet);background:var(--bb-canvas);color:var(--bb-ink)}
html[data-bb-design][data-bb-page='remote-session'] .desktop-bar h2{font-size:var(--bb-text-headline)!important;font-weight:var(--bb-weight-semibold)!important}
html[data-bb-design][data-bb-page='remote-session'] .sheet-header h2{font-size:var(--bb-text-title-3)!important}

/* --- 16. Responsive -------------------------------------------------------- */
@media(min-width:1600px){html[data-bb-design]{--bb-gutter:60px}}
@media(max-width:900px){
  html[data-bb-design]{--bb-gutter:24px}
  html[data-bb-design] .topbar{flex-wrap:wrap;gap:12px}
  html[data-bb-design] .project-card{grid-template-columns:minmax(0,1fr) 200px;padding:24px}
  html[data-bb-design] .resource-footer{grid-template-columns:1fr;gap:24px}
  html[data-bb-design] .study-shell .hero{gap:28px}
}
@media(max-width:640px){
  html[data-bb-design]{--bb-gutter:16px}
  html[data-bb-design] body{font-size:var(--bb-text-body)}
  html[data-bb-design] h1{font-size:var(--bb-text-title-2)}
  html[data-bb-design] h2{font-size:var(--bb-text-title-3)}
  html[data-bb-design] :is(.topbar,.site-header,header.header){min-height:64px;padding:12px 0;gap:12px}
  html[data-bb-design] .brand img,html[data-bb-design] .brand :is(.brand-mark:not(img),.dot){width:140px!important;min-width:140px;height:29px!important}
  html[data-bb-design] .brand{max-width:100%}
  html[data-bb-design] .portal .topbar{grid-template-columns:minmax(0,1fr) auto 44px;gap:12px}
  html[data-bb-design] .portal .nav-menu-trigger{width:44px;height:44px;min-height:44px;padding:10px;justify-content:center}
  html[data-bb-design] .portal .nav-menu-trigger :is(.mobile-menu-label,.desktop-menu-label){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  html[data-bb-design] .portal .nav-menu-trigger .menu-chevron{display:none}
  html[data-bb-design] :is(.topbar-actions,.topbar-controls,.top-actions){gap:8px}
  html[data-bb-design] :is(.hero,.portal .hero){padding:24px 0 16px}
  html[data-bb-design] :is(.hero h1,.portal .hero h1,.study-shell .hero h1){font-size:var(--bb-text-title-1)!important;line-height:1.2}
  html[data-bb-design] .booking-sidebar{padding:24px 0}
  html[data-bb-design] .hero>p:last-child{font-size:var(--bb-text-callout)}
  html[data-bb-design] .catalog-state{min-height:164px;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:24px 0}
  html[data-bb-design] .catalog-state h2{font-size:var(--bb-text-headline)}
  html[data-bb-design] .catalog-state p{font-size:var(--bb-text-footnote)}
  html[data-bb-design] .catalog-retry{grid-column:2;justify-self:start}
  html[data-bb-design] .project-card{display:flex;flex-direction:column;padding:20px;gap:20px}
  html[data-bb-design] .project-card h2{font-size:var(--bb-text-title-3)}
  html[data-bb-design] .project-actions{width:100%}
  html[data-bb-design] .project-facts{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:16px}
  html[data-bb-design] .resource-footer{margin-top:40px;padding-top:24px;gap:28px}
  html[data-bb-design] .resource-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  html[data-bb-design] :is(.study-facts,.at-a-glance,.glance){border-inline-start:0;border-top:1px solid var(--bb-hairline);padding:24px 0}
  html[data-bb-design] .section-grid{padding-block:28px;gap:20px}
  html[data-bb-design] .legal-card{padding:24px 0}
  html[data-bb-design] .legal-card :is(p,li){font-size:var(--bb-text-body)}
  html[data-bb-design][data-bb-page^='join'] main>header{margin-bottom:28px;gap:16px}
  html[data-bb-design][data-bb-page^='join'] .intro h1{font-size:var(--bb-text-title-2)}
  html[data-bb-design][data-bb-page^='join'] .card.auth{padding:20px}
  html[data-bb-design] :is(.metrics strong,.ops-stat strong){font-size:var(--bb-text-title-2)}
  html[data-bb-design] :is(dialog,.code-panel){max-width:calc(100vw - 16px)}
  html[data-bb-design] .six-dialog{max-width:100vw}
  html[data-bb-design] .company-ops{max-width:100vw;width:100vw;border-radius:0}
  html[data-bb-design] :is(.six-body,.ops-main){padding:20px}
}
@media(max-width:760px){
  html[data-bb-design][data-bb-page='ops'] .app{grid-template-rows:auto 1fr}
  html[data-bb-design][data-bb-page='ops'] .top{height:auto;min-height:64px;padding:12px 16px;gap:10px}
  html[data-bb-design][data-bb-page='ops'] .brand{width:auto}
  html[data-bb-design][data-bb-page='ops'] .project-picker{flex-basis:100%}
  html[data-bb-design][data-bb-page='ops'] .table-wrap table{min-width:640px}
  html[data-bb-design][data-bb-page='ops'] .rail{height:auto;position:static}
  html[data-bb-design][data-bb-page='ops'] .view{padding:20px 16px 48px}
  html[data-bb-design][data-bb-page='ops'] .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-bb-design][data-bb-page='ops'] .stat{padding:14px}
  html[data-bb-design][data-bb-page='ops'] .stat:nth-child(2n){border-inline-end:0}
  html[data-bb-design][data-bb-page='ops'] .signin{margin:16px auto}
  html[data-bb-design][data-bb-page='ops'] .drawer-panel{padding:24px;border-radius:0}
  html[data-bb-design][data-bb-page='ops'] .menu-toggle{min-height:var(--bb-target);border:0;border-radius:var(--bb-radius-capsule);background:var(--bb-fill-1);box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong);padding:0 var(--bb-space-4)}
}
@media(max-width:600px){
  html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']){--bb-page-gutter:16px}
  html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) h1{font-size:var(--bb-text-title-2)!important}
  html[data-bb-design]:is([data-bb-tool='moderator-desk'],[data-bb-page='remote-session']) h2{font-size:var(--bb-text-title-3)!important}
}
@media(max-width:380px){html[data-bb-design] .portal .brand img{width:116px!important;min-width:116px;height:24px!important}html[data-bb-design] .portal .topbar select{width:100px;max-width:100px}}
/* Coarse pointers: every control is a 44px target (--bb-target). */
@media(pointer:coarse){html[data-bb-design] :is(button,.btn,.button,select,input:not([type=checkbox]):not([type=radio]):not([type=range]),.chip,.nav-link,.rail a){min-height:var(--bb-target)}}

/* --- 17. Accessibility modes (section 9 lines 470-476 tokens cover glass;
   these cover the Data OS consumers). ---------------------------------------- */
@media(prefers-reduced-motion:reduce){html[data-bb-design] *,html[data-bb-design] *::before,html[data-bb-design] *::after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(prefers-contrast:more){
  html[data-bb-design] :is(button,.button,.btn,.secondary-action,.secondary-button,.button-secondary,.btn-secondary,.button.secondary,.nav-menu-trigger,.top-link,.back-link,.moderator-link){box-shadow:inset 0 0 0 1px var(--bb-hairline-strong)!important}
  html[data-bb-design] :is(:is(.dashboard-tabs,.ops-tabs,.ops-nav) button,[role=tablist] [role=tab]):is([aria-selected=true],[aria-current=true],[aria-current=page],[aria-pressed=true],.active){outline:1px solid var(--bb-ink);outline-offset:-1px}
}
@media(forced-colors:active){
  html[data-bb-design] :is(button,.button,.btn,.primary-action,.secondary-action,.primary-button,.secondary-button,.button-primary,.button-secondary,.btn-primary,.btn-secondary,.nav-menu-trigger,.top-link,.back-link,.moderator-link,.chip,.choice-button,.date-button,.time-button){border:1px solid ButtonText!important;forced-color-adjust:auto}
  html[data-bb-design] :is(.primary-action,.primary-button,.button-primary,.btn-primary,.btn.primary,.button:not(.secondary),button[type=submit],.ops-primary){background:ButtonFace!important;color:ButtonText!important}
  html[data-bb-design] :is(button[aria-pressed='true'],.choice-button.active,.date-button.selected,.time-button.selected,.chip[aria-pressed=true]),
  html[data-bb-design] :is(:is(.dashboard-tabs,.ops-tabs,.ops-nav) button,[role=tablist] [role=tab]):is([aria-selected=true],[aria-current=true],[aria-current=page],[aria-pressed=true],.active),
  html[data-bb-design][data-bb-page='ops'] .rail a[aria-current=page]{forced-color-adjust:none;background:Highlight!important;color:HighlightText!important;box-shadow:none!important}
  html[data-bb-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){border:1px solid FieldText!important}
  html[data-bb-design] :is(.nav-popover,.menu-popover,.dropdown-menu,.booking-selection-dock,dialog,.drawer-panel,.card,.panel,.notice,.note,.status-pill,.badge,.pill){background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html[data-bb-design]:is([data-bb-page^='moderator'],[data-bb-tool='worker'],[data-bb-tool='recordings'],[data-bb-tool='insights'],[data-bb-page='project-setup'],[data-bb-page='collection-account']) .topbar::before,
  html[data-bb-design][data-bb-page='ops'] .top::before,
  html[data-bb-design][data-bb-tool='german-call-center/moderator'] .app-bar::before{background:Canvas;box-shadow:inset 0 -1px 0 CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media print{html[data-bb-design] body{background:#fff!important;color:#141414!important}html[data-bb-design] :is(h1,h2,h3){color:#141414!important}html[data-bb-design] :is(dialog,.drawer){box-shadow:none}html[data-bb-design] *::before{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* --- 18. Direction -----------------------------------------------------------
   Data OS rules above use logical properties. These correct the physical
   rules of reference components if bb-* markup is ever used here. */
html[data-bb-design] [dir='rtl'] :is(.bb-row,.calendar-no-items),html[data-bb-design][dir='rtl'] :is(.bb-row,.calendar-no-items){text-align:start}

/* --- 18b. Moderator desk slice (moderator-desk/, session-desk-v2.css) -----
   Explicit consumers for the desk's own classes, which carry id selectors
   and !important: the session panel's buttons, fields, view switches,
   notices, Mac cards, state badges and dialogs; the calendar's schedule
   range, month controls, days and agenda. Specificity is raised by the
   page scope plus the same ids, never by new markup. */
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui{background:var(--bb-canvas)!important;color:var(--bb-ink)!important}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2{color:var(--bb-ink)}
/* Buttons: quiet capsule; .primary is the near-black tinted capsule; .danger keeps its warning text. */
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 button{border:1px solid transparent;border-radius:var(--bb-radius-capsule)!important;background:var(--bb-fill-1);box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong)!important;color:var(--bb-ink);font-size:var(--bb-text-body);font-weight:var(--bb-weight-medium);padding:10px var(--bb-space-4);min-height:var(--bb-target)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 button:hover:not(:disabled){background:var(--bb-fill-2)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 button:active:not(:disabled){background:var(--bb-fill-3);transform:scale(var(--bb-press))}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(button.primary,button[type=submit]){background:var(--bb-primary-fill)!important;color:var(--bb-on-ink)!important;box-shadow:var(--bb-shadow-primary)!important;font-weight:var(--bb-weight-semibold)!important}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(button.primary,button[type=submit]):hover:not(:disabled){background:var(--bb-primary-fill-hover)!important}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 button.danger{color:var(--bb-danger);background:var(--bb-danger-bg);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--bb-danger) 35%,transparent)!important}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 button:disabled{opacity:.5}
/* Fields inside the panel: the field recipe (section 7). */
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border:1px solid var(--bb-hairline-strong);border-radius:var(--bb-radius-md)!important;background-color:var(--bb-surface-1)!important;color:var(--bb-ink);box-shadow:none}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{background-color:var(--bb-canvas)!important}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 label{color:var(--bb-text-2);font-size:var(--bb-text-footnote)}
html[data-bb-design][data-bb-tool='moderator-desk'] :is(#remoteDesktopPanel.remote-desk-v2 :is(button,input,select,textarea,summary),.remote-workspace-nav button):focus-visible{outline:2px solid var(--bb-focus)!important;outline-offset:2px}
/* View switches (Sessions/Calendar/Project; Open sessions/Invitations/History): segmented control
   with the static bead (section 9 lines 517-529) instead of underlines. */
html[data-bb-design][data-bb-tool='moderator-desk'] .remote-workspace-nav{gap:2px;border-bottom:0;margin:var(--bb-space-4) 0 0;flex-wrap:wrap}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .remote-tabs{gap:2px;border-bottom:0;flex-wrap:wrap}
html[data-bb-design][data-bb-tool='moderator-desk'] :is(#workspace .remote-workspace-nav button,#remoteDesktopPanel.remote-desk-v2 .remote-tabs button){min-height:var(--bb-target);padding:0 var(--bb-space-4)!important;border:0!important;border-radius:var(--bb-radius-capsule)!important;background:transparent!important;box-shadow:none!important;color:var(--bb-text-2)!important;font-size:var(--bb-text-body);font-weight:var(--bb-weight-medium)}
html[data-bb-design][data-bb-tool='moderator-desk'] :is(#workspace .remote-workspace-nav button,#remoteDesktopPanel.remote-desk-v2 .remote-tabs button):hover:not([aria-pressed=true]){background:var(--bb-fill-1)!important;color:var(--bb-ink)!important}
html[data-bb-design][data-bb-tool='moderator-desk'] :is(#workspace .remote-workspace-nav button,#remoteDesktopPanel.remote-desk-v2 .remote-tabs button)[aria-pressed=true]{background:var(--bb-bead-fill)!important;box-shadow:var(--bb-shadow-bead)!important;color:var(--bb-ink)!important;font-weight:var(--bb-weight-semibold)!important}
/* Notices (section 9 lines 614-617): neutral; test mode, blockers and errors use the warm warning. */
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(.remote-mode,#remoteFeedback){border:0;border-radius:var(--bb-radius-lg);background:var(--bb-fill-1);box-shadow:inset 0 0 0 .5px var(--bb-hairline);color:var(--bb-text-2)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .remote-mode strong{color:var(--bb-ink)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(.remote-mode[data-mode=test],#remoteFeedback.is-error,.remote-blocker){border:0;border-radius:var(--bb-radius-lg);background:var(--bb-warning-fill);box-shadow:inset 0 0 0 .5px var(--bb-warning-line);color:var(--bb-deadline-ink)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 ul.remote-blocker span{color:var(--bb-deadline-ink)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .is-error{color:var(--bb-deadline-ink)}
/* Sections and rows: Mac cards are content-layer sections; rows are hairline-separated. */
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .remote-device{border:0;border-radius:var(--bb-radius-xl);background:var(--bb-canvas);box-shadow:inset 0 0 0 1px var(--bb-hairline)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(.remote-session-row,.remote-stats,.remote-macs,.remote-stats>div,#remoteInvitation){border-color:var(--bb-hairline)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .remote-stats strong{font-weight:var(--bb-weight-semibold)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(.eyebrow,.remote-caption,.remote-sync,.remote-session-time,.remote-stats span,.remote-device p,.remote-device-facts dt,.remote-footnote,.remote-session-detail,.remote-signals small,#remoteInvitation>p,.remote-empty,.remote-project){color:var(--bb-text-2)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(.remote-device-facts,.remote-session-detail,.remote-signals small){font-size:var(--bb-text-caption)}
/* Mac status in the narrow side panel: each label sits above its value (no copy or DOM change), so values
   use the full card width instead of a ~100px column. */
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .remote-device .remote-device-facts{grid-template-columns:minmax(0,1fr);gap:0}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .remote-device .remote-device-facts dt{margin-top:var(--bb-space-2)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .remote-device .remote-device-facts dt:first-of-type{margin-top:0}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .remote-device .remote-device-facts dd{font-size:var(--bb-text-footnote)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 h2{font-size:var(--bb-text-title-2)!important;font-weight:var(--bb-weight-semibold)!important}
/* State badges: capsules; colour always accompanies the written state (task-board.css status tones). */
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .remote-state:not(.tone-text){border-radius:var(--bb-radius-capsule);padding:2px 10px;font-size:var(--bb-text-caption)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .tone-green:not(.tone-text){background:var(--bb-success-wash);color:var(--bb-work-done)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .tone-blue:not(.tone-text){background:color-mix(in srgb,var(--bb-work-doing) 10%,transparent);color:var(--bb-work-doing)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .tone-amber:not(.tone-text){background:var(--bb-warning-fill);color:var(--bb-deadline-ink)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .tone-red:not(.tone-text){background:var(--bb-danger-bg);color:var(--bb-danger)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .tone-neutral:not(.tone-text){background:var(--bb-fill-2);color:var(--bb-text-2)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .tone-text.tone-green{color:var(--bb-work-done)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .tone-text.tone-blue{color:var(--bb-work-doing)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .tone-text.tone-amber{color:var(--bb-deadline-ink)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 .tone-text.tone-red{color:var(--bb-danger)}
/* Dialogs: sheet radius and shadow, opaque, no blurred dimming. */
html[data-bb-design][data-bb-tool='moderator-desk'] :is(#remoteDesktopPanel.remote-desk-v2 dialog,dialog){border:0;border-radius:var(--bb-radius-sheet);background:var(--bb-canvas)!important;color:var(--bb-ink);box-shadow:0 0 0 .5px var(--bb-hairline-strong),var(--bb-shadow-sheet)}
html[data-bb-design][data-bb-tool='moderator-desk'] :is(#remoteDesktopPanel.remote-desk-v2 dialog,dialog)::backdrop{background:var(--bb-glass-dim)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 dialog .check{color:var(--bb-ink)}
html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 dialog .check input{accent-color:var(--bb-ink)}
/* Calendar view: schedule range is a segmented control; days follow the reference week grid
   (calendar.css lines 140-168): canvas, hairlines, today = forest ring on the date. */
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .schedule-tabs{gap:2px;padding:3px;border:0;border-radius:var(--bb-radius-capsule);background:transparent;box-shadow:none}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .schedule-tabs button{min-height:calc(var(--bb-target) - 6px);padding:0 var(--bb-space-4);border:0!important;border-radius:var(--bb-radius-capsule)!important;background:transparent!important;box-shadow:none!important;color:var(--bb-text-2)!important;font-weight:var(--bb-weight-medium)}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .schedule-tabs button:hover:not([aria-pressed=true]){background:var(--bb-fill-1)!important;color:var(--bb-ink)!important}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .schedule-tabs button[aria-pressed=true]{background:var(--bb-bead-fill)!important;box-shadow:var(--bb-shadow-bead)!important;color:var(--bb-ink)!important;font-weight:var(--bb-weight-semibold)!important}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .month-controls button{border:1px solid transparent;border-radius:var(--bb-radius-capsule);background:var(--bb-fill-1)!important;box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong)!important;color:var(--bb-ink);min-height:var(--bb-control);min-width:var(--bb-control)}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .month-controls button:hover{background:var(--bb-fill-2)!important}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui :is(.calendar-panel,.agenda-panel){border-color:var(--bb-hairline);border-radius:var(--bb-radius-xl);background:var(--bb-canvas);box-shadow:none}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .calendar-day{border-color:var(--bb-hairline);background:var(--bb-canvas)}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .calendar-day.is-outside{background:var(--bb-surface-1);color:var(--bb-text-3)}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .calendar-day.is-today .day-number{background:transparent;color:var(--bb-forest-ink);box-shadow:inset 0 0 0 1.5px var(--bb-forest);font-weight:var(--bb-weight-semibold)}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui :is(.weekday-row span,.calendar-day-times span,.agenda-time){color:var(--bb-text-2)}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .agenda-item{border-color:var(--bb-hairline)}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .agenda-item:hover{background:var(--bb-fill-1)}
html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui :is(.schedule-extras,.desk-calendar-tools)>summary{border-radius:var(--bb-radius-capsule)}
/* Sign-in gate: one content-layer section (section 9 line 585). */
html[data-bb-design][data-bb-tool='moderator-desk'] .gate-card{border:0!important;border-radius:var(--bb-radius-xl)!important;background:var(--bb-canvas)!important;box-shadow:inset 0 0 0 1px var(--bb-hairline)!important}
@media(prefers-contrast:more){html[data-bb-design][data-bb-tool='moderator-desk'] :is(#workspace .remote-workspace-nav button,#remoteDesktopPanel.remote-desk-v2 .remote-tabs button,body.moderator-ui .schedule-tabs button)[aria-pressed=true]{outline:1px solid var(--bb-ink);outline-offset:-1px}}
@media(forced-colors:active){
  html[data-bb-design][data-bb-tool='moderator-desk'] :is(#workspace .remote-workspace-nav button,#remoteDesktopPanel.remote-desk-v2 .remote-tabs button,body.moderator-ui .schedule-tabs button)[aria-pressed=true]{forced-color-adjust:none;background:Highlight!important;color:HighlightText!important;box-shadow:none!important}
  html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 button{border:1px solid ButtonText!important}
  html[data-bb-design][data-bb-tool='moderator-desk'] #remoteDesktopPanel.remote-desk-v2 :is(.remote-device,.remote-mode,#remoteFeedback,.remote-blocker,.remote-state){border:1px solid CanvasText!important;box-shadow:none!important}
}

/* --- 18c. Booking slice (book/, book/german-call-center, manage/) ---------- */
html[data-bb-design] :is(.booking-locale-switch select,#bookingLocaleSelector select){border:0!important;border-radius:var(--bb-radius-capsule)!important;min-height:var(--bb-control)!important;padding-block:6px!important;padding-inline:12px 30px!important;background-color:var(--bb-fill-1)!important;box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong)!important}
/* Latin time ranges keep their order inside Arabic and Hebrew text and never wrap mid-range. */
html[data-bb-design] :is(.agenda-time,.calendar-day-times span){direction:ltr;unicode-bidi:isolate;white-space:nowrap;text-align:match-parent}
html[data-bb-design] .time-button{border-radius:var(--bb-radius-md);min-height:var(--bb-target)}
html[data-bb-design] :is(.study-offer-item,.existing-booking-panel,.confirmation-panel,.booking-closed-panel){border-color:var(--bb-hairline)!important;border-radius:var(--bb-radius-xl)!important;box-shadow:none!important}
html[data-bb-design] .voluntary-acknowledgement{border-color:var(--bb-hairline)!important;border-radius:var(--bb-radius-lg)!important;background:var(--bb-surface-1)!important}
html[data-bb-design] :is(.status-pill#availabilityStatus){min-height:32px}

/* --- 18d. Editable fields on phones and touch screens ------------------------
   iOS zooms into a focused field under 16px. Same selector as section 7, so it
   wins by position over the base size, and loses only to id rules that ask for
   larger text (for example the remote session code). Locale selects carry
   !important sizes, so they are named here too. */
@media (max-width:640px),(pointer:coarse){
  html[data-bb-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){font-size:16px}
  html[data-bb-design] :is(.bb-locale-selector select,.public-locale-selector select,.locale-select,.locale,.booking-locale-switch select,#bookingLocaleSelector select,.staff-locale-selector select){font-size:16px!important}
}

/* --- 18e. GCC moderator bar (german-call-center/moderator/) ------------------
   The language selector and connection state wrap under the brand on phones
   instead of pushing the page sideways. */
html[data-bb-design][data-bb-tool='german-call-center/moderator'] .app-bar{flex-wrap:wrap;row-gap:var(--bb-space-2);min-width:0}
html[data-bb-design][data-bb-tool='german-call-center/moderator'] .app-bar nav{flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
html[data-bb-design][data-bb-tool='german-call-center/moderator'] .app-bar :is(.staff-locale-selector,.staff-locale-selector select){min-width:0;max-width:100%}
/* Staff language control: one edge (the select's); the label wrapper draws none. */
html[data-bb-design] .staff-locale-selector{border-color:transparent!important;background:transparent!important;box-shadow:none!important}

/* --- 18f. Touch targets on phones and touch screens ------------------------
   Every segmented option, tab and language selector is a 44px target
   (--bb-target). The selectors repeat the slice rules above so this block wins
   by position, not by new specificity. */
@media (max-width:640px),(pointer:coarse){
  html[data-bb-design] :is(.bb-locale-selector select,.public-locale-selector select,.locale-select,.locale,.booking-locale-switch select,#bookingLocaleSelector select,.staff-locale-selector select){min-height:var(--bb-target)!important}
  html[data-bb-design] :is(:is(.dashboard-tabs,.ops-tabs,.ops-nav) button,[role=tablist] [role=tab]){min-height:var(--bb-target)}
  html[data-bb-design] :is(.nav-menu-trigger,.moderator-link,.top-link,.back-link){min-height:var(--bb-target)}
  html[data-bb-design][data-bb-tool='moderator-desk'] :is(#workspace .remote-workspace-nav button,#remoteDesktopPanel.remote-desk-v2 .remote-tabs button){min-height:var(--bb-target)}
  html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .schedule-tabs button{min-height:var(--bb-target)}
  html[data-bb-design][data-bb-tool='moderator-desk'] body.moderator-ui .month-controls button{min-height:var(--bb-target);min-width:var(--bb-target)}
  /* !important: book-short-v1.css forces min-height:0!important on the booking-for choices, and the desk
     fixes its password toggle at 42px with an id rule. */
  html[data-bb-design] :is(.choice-button,.date-button,.time-button){min-height:var(--bb-target)!important}
  html[data-bb-design] .password-control>button{min-height:var(--bb-target)!important;min-width:var(--bb-target)!important}
  html[data-bb-design][data-bb-page='ops'] :is(.btn,.btn.small,.chip,.rail a,.menu-toggle){min-height:var(--bb-target)}
  /* Native selects (r2). WebKit/Safari ignores min-height and padding on the native menulist
     appearance: measured 24-25px in Playwright WebKit against 44px in Chrome (desk status filter,
     desk and booking language selects). appearance:none lets the 44px target apply in every
     engine; the dropdown indicator is drawn with two CSS gradients in currentColor (no image,
     data URL or script), mirrored in right-to-left pages. Selects that already draw their own
     indicator (booking country code, legacy moderator context and language controls) keep it.
     The indicator properties are !important because desk and legacy sheets reset `background` with id
     selectors (measured: the desk status filter lost its arrow). Without the native look WebKit no
     longer clips the chosen option's text: a long project name in the recordings project picker made
     the page 450px wide on a 390px iPhone (2 Nov), so the text is cut with an ellipsis. */
  html[data-bb-design] select:not([multiple]):not([size]):not(:is(.phone-control,.project-context-control,.interface-language-control) select){-webkit-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)!important;background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important;padding-inline-end:34px}
  html[data-bb-design] :is([dir='rtl'] select,select[dir='rtl']):not([multiple]):not([size]):not(:is(.phone-control,.project-context-control,.interface-language-control) select),html[data-bb-design][dir='rtl'] select:not([multiple]):not([size]):not(:is(.phone-control,.project-context-control,.interface-language-control) select){background-position:13px 50%,18px 50%!important}
}
/* Forced colours (r2): system colour schemes drop the gradient indicator, and the platforms that
   have forced colours size native selects, so the native control and its own arrow return there. */
@media (forced-colors:active){
  html[data-bb-design] select:not([multiple]):not([size]):not(:is(.phone-control,.project-context-control,.interface-language-control) select){-webkit-appearance:auto;appearance:auto;background-image:none!important;padding-inline-end:revert}
}

/* --- 18g. Locale controls and localized desk widths (master plan H/I, 19 Oct) --
   Scoped to the staff language selector, the booking language selector and the
   session-desk filter; no global select rule. Logical padding keeps the text side
   (start) and the arrow side (end) right in both directions; the width follows
   the selected native language name within bounds instead of a fixed 145px, so
   long names (Português (Brasil), Bahasa Indonesia) and Arabic are not clipped;
   one arrow (native on fine pointers, the 18f gradient on phones); 44px targets. */
html[data-bb-tool="moderator-desk"] body.moderator-ui .staff-locale-selector select{padding-block:10px!important;padding-inline:16px 34px!important;width:auto!important;min-width:120px!important;max-width:min(15rem,100%)!important;min-height:44px!important;height:auto!important}
html[data-bb-tool="moderator-desk"] body.moderator-ui .staff-locale-selector{max-width:none!important}
@media (max-width:600px){html[data-bb-tool="moderator-desk"] body.moderator-ui .topbar-actions{flex-wrap:wrap;row-gap:8px}html[data-bb-tool="moderator-desk"] body.moderator-ui .staff-locale-selector{flex:0 0 auto!important}html[data-bb-tool="moderator-desk"] body.moderator-ui .staff-locale-selector select{max-width:min(12.5rem,calc(100vw - 2*var(--bb-page-gutter,16px)))!important}}
html[data-bb-design] #remoteDesktopPanel.remote-desk-v2 .remote-queue-toolbar{grid-template-columns:minmax(0,1fr) minmax(180px,max-content)}
@media (max-width:640px){html[data-bb-design] #remoteDesktopPanel.remote-desk-v2 .remote-queue-toolbar{grid-template-columns:minmax(0,1fr)}}
html[data-bb-design] #remoteDesktopPanel.remote-desk-v2 .remote-filter select{padding-inline:12px 34px!important;width:100%}

/* --- 19. State guards (last, so they win every tie) --------------------------
   Presentation never reveals what the application hides or gates: the hidden
   attribute always removes the element; inert, aria-hidden and auth-gated
   containers keep the display and visibility their own sheets give them
   (this layer sets neither on them). */
html[data-bb-design] [hidden]:not([hidden='until-found']),html[data-bb-design] .brand [hidden]{display:none!important}

/* Time ranges retain left-to-right digits but wrap their translated next-day suffix. */
html[data-bb-design] .time-button .time-copy strong{direction:ltr;unicode-bidi:isolate;white-space:normal;text-align:match-parent;overflow-wrap:anywhere}