@import url("/assets/bracketbridge-tokens.css");
/* ============================================================================
   hybrid-glass.css — Bracketbridge hybrid glass, production candidate
   Design: Claude Fable 5.1; integration and contrast corrections: Codex, 17 October 2026
   Load order: AFTER every current sheet (style.css … delegation.css).
   Scope: one coherent navigation/control plane (sidebar rail, topbar, board
   stage nav, personal dock, dialog header/footer), tactile controls and
   quieter content surfaces. Calendar and Overview now use the Bracketbridge
   design system at the end of this file (section 9).
   Not touched: functional handlers, markup, business data, board column and
   card dimensions, mobile drawer mechanics, focus-visible outlines.
   Honesty: `backdrop-filter` is frosted blur, not Apple lensing. Glass is used
   only where content really scrolls beneath a bar; text and task surfaces
   stay opaque. Every glass surface has an opaque no-blur, reduced-transparency,
   increased-contrast and forced-colors fallback at the end of this file.
   Cascade note: this sheet loads last, so any top-level declaration here
   overrides earlier @media rules of equal specificity. Each selector whose
   earlier mobile/accessibility override would be lost is re-asserted below.
   ========================================================================== */

:root{
  /* Legacy names kept for screens not yet migrated; every value comes from a --bb-* token below. */
  --glass-blur:var(--bb-shell-blur);
  --glass-sat:var(--bb-shell-saturate);
  --glass-bg:var(--bb-shell-fill);
  --glass-bg-strong:var(--bb-shell-fill-strong);
  --glass-tint:var(--bb-shell-tint);
  --glass-border:var(--bb-shell-border);
  --glass-highlight:var(--bb-shell-highlight);
  --glass-shadow:var(--bb-shell-shadow);
  --rail-color:var(--bb-shell-rail);
  --rail-border-color:var(--bb-shell-rail-border);
  --control-bg:var(--bb-shell-control);
  --control-bg-hover:var(--bb-shell-control-hover);
  --press:scale(var(--bb-shell-press));
  --ease-tactile:var(--bb-ease-tactile);
}

/* ---------------------------------------------------------------------------
   1. Navigation rail (inset sidebar). Nothing scrolls behind the desktop rail,
   so it is a solid light surface, not glass. Width of the content column is
   unchanged: .main-shell keeps margin-left:var(--sidebar).
   ------------------------------------------------------------------------- */
.sidebar{
  inset:12px auto 12px 12px;
  width:calc(var(--sidebar) - 24px);
  padding:22px 10px 14px;
  background:var(--rail-color);
  border:1px solid var(--rail-border-color);
  border-radius:18px;
  box-shadow:none;
}
.sidebar .brand{padding-inline:8px}
.nav-button{
  border-radius:10px;
  color:#4e4e4e;
  transition:background .15s,color .15s,box-shadow .15s;
}
.nav-button:hover{background:var(--control-bg);color:#141414}
.nav-button.active{
  background:#fff;
  color:#141414;
  font-weight:500;
  box-shadow:0 0 0 1px rgba(20,20,20,.06),0 1px 2px rgba(20,20,20,.05);
}
.nav-button:active{transform:var(--press)}
.nav-secondary{border-top-color:rgba(20,20,20,.08)}
.sidebar-overlay{background:rgba(20,20,20,.28)}

@media(max-width:720px){
  /* Mobile drawer: full height, slides from the edge. Opaque on purpose — a
     sliding frosted panel is where phones stutter, and the overlay already
     separates it from content. Transform/visibility rules are untouched. */
  .sidebar{
    inset:0 auto 0 0;
    width:var(--sidebar);
    padding:30px 12px 18px;
    background:#fafaf9;
    border:0;
    border-right:1px solid var(--rail-border-color);
    border-radius:0 20px 20px 0;
    box-shadow:8px 0 40px #14141415;
  }
}

/* ---------------------------------------------------------------------------
   2. Topbar as the one glass bar of the content column. Sticky so content
   passes under it when the page itself scrolls; in dock and board modes the
   shell already pins it, so sticky is a no-op there. Soft scroll-edge fade
   below instead of a hard rule (one edge effect per view).
   ------------------------------------------------------------------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-highlight);
}
.topbar::after{
  content:'';
  position:absolute;
  left:0;right:0;top:100%;
  height:10px;
  background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));
  pointer-events:none;
}
.breadcrumb strong{color:#141414;font-weight:500}
.workspace-search-toggle{
  background:var(--control-bg);
  border-color:transparent;
  color:#4e4e4e;
  transition:background .15s,color .15s,transform .12s var(--ease-tactile);
}
.workspace-search-toggle:hover{background:var(--control-bg-hover);color:#141414}
.workspace-search-toggle:active{transform:var(--press)}
.workspace-search-toggle kbd{color:#595959}
.icon-button{transition:background .15s,color .15s,transform .12s var(--ease-tactile)}
.icon-button:hover{background:var(--control-bg);color:#141414}
.icon-button:active{transform:var(--press)}
.sync-control{border-radius:999px}

/* ---------------------------------------------------------------------------
   3. Tactile controls. Pill shape and sizes come from workspace.css; this adds
   press feedback, a single dark "tinted" primary and quieter secondaries.
   ------------------------------------------------------------------------- */
.button{
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s var(--ease-tactile);
}
.button:active:not(:disabled){transform:var(--press)}
.button.primary{
  background:#141414;
  border-color:#141414;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(20,20,20,.12);
}
.button.primary:hover{background:#2a2a2a;border-color:#2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 6px rgba(20,20,20,.16)}
.button.secondary{background:#fff;border-color:rgba(20,20,20,.18);color:#141414}
.button.secondary:hover{background:#f6f6f5;border-color:rgba(20,20,20,.30);box-shadow:none}
.button.ghost{color:#3a3a3a}
.button.ghost:hover{color:#141414}
.button:disabled{transform:none}

/* Segmented tab groups inside toolbars (desktop only; phones keep plain tabs
   because a wrapped capsule reads badly). */
@media(min-width:721px){
  .toolbar .tabs{
    display:inline-flex;
    gap:2px;
    padding:3px;
    border-radius:999px;
    background:var(--control-bg);
  }
  .toolbar .tab{
    border-radius:999px;
    border-color:transparent;
    transition:background .15s,color .15s,box-shadow .15s;
  }
  .toolbar .tab:hover{color:#141414}
  .toolbar .tab.active{
    background:#fff;
    border-color:rgba(20,20,20,.08);
    color:#141414;
    box-shadow:0 1px 2px rgba(20,20,20,.08);
  }
}

.section-nav-link{border-radius:999px;transition:background .15s,color .15s}
.section-nav-link:hover{background:var(--control-bg);color:#141414}
.section-nav-link.active{background:#f1f1f1;color:#141414;font-weight:500;box-shadow:0 0 0 1px rgba(20,20,20,.06)}
.section-nav-count{background:#fff;color:#4e4e4e;box-shadow:0 0 0 1px rgba(20,20,20,.08)}

.home-quick-start{
  border-radius:12px;
  border-color:#e4e4e3;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .12s var(--ease-tactile);
}
.home-quick-start:hover{background:#fafaf9;border-color:#c9c9c8;box-shadow:0 1px 2px rgba(20,20,20,.05)}
.home-quick-start:active{transform:var(--press)}

.work-mailbox-option{
  background:#fff;
  border-radius:12px;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .12s var(--ease-tactile);
}
.work-mailbox-option:hover{border-color:#bcbcbc;box-shadow:0 2px 8px rgba(20,20,20,.06)}
.work-mailbox-option:active{transform:var(--press)}

.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{border-color:#8a8a88}

/* ---------------------------------------------------------------------------
   4. Content surfaces: quieter, never glass. Dimensions unchanged.
   ------------------------------------------------------------------------- */
.panel{border-color:#e6e6e5}
.panel-header{border-bottom-color:#efefee}
.list-row{border-bottom-color:#efefee}
.pill{background:#f1f1f0;color:#4e4e4e}
.weekly-review-stats>div{background:#f7f7f6;border-color:#e6e6e5}
.daily-count{background:#f1f1f0;color:#4e4e4e}
.note-box{border-color:#ededec;background:#fafaf9}

/* Board: lanes, cards and their controls use the design-system tokens in task-board.css
   ("Work board · Calendar design language"); nothing here overrides them. */

/* Board stage switcher: the shared segmented control (task-board.css, "Work board · Calendar parity");
   only the bar is glass. */
.board-filter-panel{border-color:#dcdcdb;border-radius:14px;box-shadow:0 1px 2px rgba(20,20,20,.05),0 18px 44px -20px rgba(20,20,20,.30)}

/* ---------------------------------------------------------------------------
   5. Personal dock and PA drawer. The dock floats over scrolling content, so it
   is glass; the drawer is a text surface and stays opaque.
   ------------------------------------------------------------------------- */
/* One glass capsule (board-manual): the dock box has no surface of its own; the launcher, and a pending
   check-in cue beside it, are each a single thick-glass capsule with one edge and one shadow. */
.personal-dock{background:none;border:0;padding:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.personal-dock .personal-launcher{min-height:44px;border:0;border-radius:var(--bb-radius-capsule);background:var(--bb-glass-fill-thick);-webkit-backdrop-filter:var(--bb-glass-filter-thick);backdrop-filter:var(--bb-glass-filter-thick);box-shadow:var(--bb-glass-edge),var(--bb-shadow-float);color:var(--bb-ink);font-weight:var(--bb-weight-medium);transition:box-shadow var(--bb-fast) ease,transform var(--bb-base) var(--bb-spring)}
.personal-dock .personal-launcher:hover{background:var(--bb-glass-fill-over);box-shadow:var(--bb-glass-edge),var(--bb-shadow-float-over)}
.personal-dock .personal-launcher:active{transform:scale(var(--bb-press))}
.personal-dock .personal-launcher:focus-visible{outline:2px solid var(--bb-focus);outline-offset:2px}
.personal-dock .personal-launcher .personal-mark{font-weight:var(--bb-weight-semibold);letter-spacing:-.04em}
.personal-dock .personal-launcher .personal-presence{width:6px;height:6px;border-radius:50%;background:var(--bb-forest);flex:none}
.personal-dock .personal-peek-heading{background:var(--bb-glass-fill-thick);-webkit-backdrop-filter:var(--bb-glass-filter-thick);backdrop-filter:var(--bb-glass-filter-thick);box-shadow:var(--bb-glass-edge),var(--bb-shadow-float);color:var(--bb-ink)}
.personal-dock.has-checkin .personal-mark::after{background:#bcbcbc}

.pa-drawer{
  /* Floating layer: restrained glass over the page (usability reset S3); reading areas inside stay opaque. */
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:0;
  border-radius:var(--bb-radius-sheet);   /* after delegation.css's shared 14 px dialog radius */
  box-shadow:var(--bb-glass-edge),var(--bb-shadow-sheet);
}
.pa-header{border-bottom-color:#ececea}
.pa-bottom{background:#fafaf9;border-top-color:#ececea}
.pa-composer{border-color:#dcdcda;border-radius:16px;transition:border-color .15s,box-shadow .15s}
.pa-composer:focus-within{border-color:#8a8a88;box-shadow:0 0 0 3px rgba(20,20,20,.05)}
.chat-message.from-user{background:#f2f2f1}
@media(max-width:700px){
  .pa-drawer{border:0;border-radius:0;box-shadow:none;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------------------------------------------------------------------------
   6. Dialogs. Sticky header and footer sit over the scrolling body, so they
   are the two glass strips of a sheet. Side drawer keeps its square edges.
   ------------------------------------------------------------------------- */
dialog{
  border-color:var(--glass-border);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(20,20,20,.06),0 36px 90px -28px rgba(20,20,20,.38);
}
dialog::backdrop{background:rgba(20,20,20,.26);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-header{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom-color:rgba(20,20,20,.06);
}
.modal-footer{
  background:rgba(250,250,249,.97);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-top-color:rgba(20,20,20,.06);
}
.source-drawer{border-radius:0}
.toast{border-radius:12px;box-shadow:0 10px 30px -10px rgba(20,20,20,.45)}

/* ---------------------------------------------------------------------------
   8. Honest fallbacks. Every glass surface becomes an opaque surface.
   ------------------------------------------------------------------------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pa-drawer{background:#fff}
  .topbar,.modal-header,.personal-dock .personal-launcher,.personal-dock .personal-peek-heading{background:#fff}

  .modal-footer{background:#fafaf9}
  dialog::backdrop{background:rgba(20,20,20,.36)}
}

@media(prefers-reduced-transparency:reduce){
  .pa-drawer{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .topbar,.modal-header,.personal-dock .personal-launcher,.personal-dock .personal-peek-heading{background:#fff}

  .modal-footer{background:#fafaf9}
  .topbar,.modal-header,.modal-footer,.personal-dock .personal-launcher,.personal-dock .personal-peek-heading,dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
  dialog::backdrop{background:rgba(20,20,20,.36)}
  .topbar::after{display:none}
  .topbar{box-shadow:none}
  .personal-dock .personal-launcher,.personal-dock .personal-peek-heading{box-shadow:0 0 0 1px #d4d4d2,0 3px 14px #14141414}
}

@media(prefers-contrast:more){
  .pa-drawer{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  :root{--glass-border:#939393;--rail-border-color:#939393}
  .topbar,.modal-header,.modal-footer,.personal-dock .personal-launcher,.personal-dock .personal-peek-heading{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px #939393}
  .topbar{box-shadow:none;border-bottom-color:#939393}
  .topbar::after{display:none}
  .sidebar{background:#fff;border-color:#939393}
  .sidebar,.topbar,.panel,.board-column,.board-card.task-row,dialog,.pa-drawer,.work-mailbox-option,.home-quick-start,.board-filter-panel{border-color:#939393}
  .button.secondary{border-color:#555}
  .nav-button.active,.section-nav-link.active,.board-stage-nav button.is-current,.toolbar .tab.active,.work-board-toolbar .tab.active{outline:1px solid #141414;outline-offset:-1px;box-shadow:none}
  dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,20,20,.5)}
}

@media(forced-colors:active){
  :root{--glass-shadow:none}
  .sidebar,.topbar,.personal-dock .personal-launcher,.personal-dock .personal-peek-heading,.modal-header,.modal-footer,dialog,.pa-drawer,.pa-bottom,.pa-composer,.board-column,.board-card.task-row,.board-filter-panel,.work-mailbox-option,.home-quick-start,.panel,.note-box,.weekly-review-stats>div{
    background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .topbar::after{display:none}
  .sidebar-overlay{background:Canvas;opacity:.6}
  dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-button.active,.section-nav-link.active,.board-stage-nav button.is-current,.toolbar .tab.active,.work-board-toolbar .tab.active{
    forced-color-adjust:none;background:Highlight;color:HighlightText;box-shadow:none;
  }
  .button.primary,.button.secondary,.personal-dock .personal-launcher{border:1px solid ButtonText}
  .button:active:not(:disabled),.icon-button:active,.workspace-search-toggle:active,.nav-button:active,.board-stage-nav button:active,.home-quick-start:active,.work-mailbox-option:active,.personal-dock .personal-launcher:active{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .button,.icon-button,.nav-button,.tab,.toolbar .tab,.work-board-toolbar .tab,.section-nav-link,.workspace-search-toggle,.home-quick-start,.work-mailbox-option,.board-stage-nav button,.board-card.task-row,.board-column,.board-add-card,.personal-dock .personal-launcher,.pa-composer{transition:none}
  .button:active:not(:disabled),.icon-button:active,.workspace-search-toggle:active,.nav-button:active,.board-stage-nav button:active,.home-quick-start:active,.work-mailbox-option:active,.personal-dock .personal-launcher:active{transform:none}
}

@media print{
  .topbar,.modal-header,.modal-footer,.personal-dock .personal-launcher{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .sidebar{background:#fff;border:0}
}

/* ===========================================================================
   9. Bracketbridge design system v1 (18 Oct 2026) — see DESIGN_SYSTEM.md
   A web adaptation of a glass material for controls, not Apple's native
   renderer: browser blur cannot bend or adapt light per pixel.

   Two layers. Floating controls (one bar, its menus, sheets) use glass;
   content uses the white canvas, hairlines and quiet fills. Never glass on
   content, never glass inside glass.

   Adoption. Tokens are global. Components are opt-in: new markup uses the
   .bb-* class; existing markup whose classes are pinned by tests is listed
   in the component's consumer selector. Consumer scopes use :where() so a
   component's weight stays one or two classes and feature stylesheets can
   refine it. Screens not listed keep their current appearance.
   ========================================================================= */
/* --- Component: glass bar (floating control layer) -------------------------
   Consumers: .bb-glass-bar, Calendar toolbar. The material sits on ::before
   so menus inside the bar sample the page, never the bar. --bb-lens is set
   only by the optional refraction runtime (app.js). */
:is(.bb-glass-bar,:where(.calendar-workspace) .calendar-toolbar){position:relative;z-index:0;border-radius:calc(var(--bb-control) / 2 + var(--bb-bar-pad));background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
:is(.bb-glass-bar,:where(.calendar-workspace) .calendar-toolbar)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bb-glass-fill);-webkit-backdrop-filter:var(--bb-glass-filter);backdrop-filter:var(--bb-lens, ) var(--bb-glass-filter);box-shadow:var(--bb-glass-edge),var(--bb-shadow-float);transition:box-shadow var(--bb-base) ease}
:is(.bb-glass-bar,:where(.calendar-workspace) .calendar-toolbar)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:var(--bb-glass-rim);pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
:is(.bb-glass-bar[data-scrolled],[data-scrolled] :where(.calendar-toolbar))::before{background:var(--bb-glass-fill-over);box-shadow:var(--bb-glass-edge),var(--bb-shadow-float-over)}

/* --- Component: button ------------------------------------------------------
   Ghost on glass, quiet (fill) on content, tinted near-black primary. All are
   capsules with press feedback and light that blooms from the press point. */
:is(.bb-button,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button,:where(.calendar-workspace) .calendar-disclosure>summary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) :is(.button,.home-quick-start),:where(.work-board-toolbar) :is(.button,.board-filters-toggle>summary)){
  --press-x:50%;--press-y:50%;
  appearance:none;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--bb-control);min-width:0;margin:0;padding:0 var(--bb-space-4);border:0;border-radius:var(--bb-radius-capsule);
  background:transparent;box-shadow:none;color:var(--bb-ink);font:var(--bb-weight-medium) var(--bb-text-body)/1.2 var(--bb-font);letter-spacing:var(--bb-tracking-body);
  white-space:nowrap;text-decoration:none;cursor:pointer;
  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);
}
:is(.bb-button,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button,:where(.calendar-workspace) .calendar-disclosure>summary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) :is(.button,.home-quick-start),:where(.work-board-toolbar) :is(.button,.board-filters-toggle>summary))::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--press-x) var(--press-y),rgba(255,255,255,.75),rgba(255,255,255,0) 62%);opacity:0;transition:opacity 320ms ease}
:is(.bb-button,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button,:where(.calendar-workspace) .calendar-disclosure>summary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) :is(.button,.home-quick-start),:where(.work-board-toolbar) :is(.button,.board-filters-toggle>summary)):hover:not(:disabled){background:var(--bb-fill-2)}
:is(.bb-button,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button,:where(.calendar-workspace) .calendar-disclosure>summary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) :is(.button,.home-quick-start),:where(.work-board-toolbar) :is(.button,.board-filters-toggle>summary)):active:not(:disabled){background:var(--bb-fill-3);transform:scale(var(--bb-press));transition-duration:60ms,60ms,60ms,90ms}
:is(.bb-button,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button,:where(.calendar-workspace) .calendar-disclosure>summary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) :is(.button,.home-quick-start),:where(.work-board-toolbar) :is(.button,.board-filters-toggle>summary)):active:not(:disabled)::after{opacity:1;transition-duration:40ms}
:is(.bb-button,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .button,:where(.work-board-toolbar) .button):disabled{color:var(--bb-text-3);opacity:.62;cursor:default;transform:none}
/* Quiet variant: a fill, for buttons on the white canvas. */
:is(.bb-button--quiet,:where(.shell.is-overview .main) :is(.button.secondary,.home-quick-start),:where(dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) :is(.button.secondary,.button.ghost),:where(.calendar-workspace) :is(.calendar-footer,.calendar-error,.calendar-options-footer,.calendar-timetable-heading,.calendar-connection-empty,.calendar-recent-changes) .calendar-button:not(.calendar-button-primary),:where(.overview-day) .calendar-button:not(.calendar-button-primary),:where(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-footer .calendar-button:not(.calendar-button-primary)){background:var(--bb-fill-1);box-shadow:inset 0 0 0 .5px var(--bb-hairline)}
/* Primary: near-black tinted, the only tinted control on a surface. */
:is(.bb-button--primary,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button-primary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .button.primary,:where(.work-board-toolbar) .button.primary){
  padding-inline:var(--bb-space-4) 18px;color:var(--bb-on-ink);font-weight:var(--bb-weight-semibold);
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 48%,rgba(255,255,255,0) 60%,rgba(255,255,255,.08) 100%),rgba(16,18,17,.93);box-shadow:var(--bb-shadow-primary)}
:is(.bb-button--primary,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button-primary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .button.primary,:where(.work-board-toolbar) .button.primary):hover:not(:disabled){background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 52%),#262626;color:var(--bb-on-ink)}
:is(.bb-button--primary,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button-primary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .button.primary,:where(.work-board-toolbar) .button.primary):active:not(:disabled){background:#2e2e2e;color:var(--bb-on-ink)}
:is(.bb-button--primary,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button-primary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .button.primary,:where(.work-board-toolbar) .button.primary)::after{background:radial-gradient(circle at var(--press-x) var(--press-y),rgba(255,255,255,.34),rgba(255,255,255,0) 62%)}

/* --- Component: focus ring (one forest ring that follows every radius) ----- */
:where(.calendar-workspace,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"]),.shell.is-overview .main,.bb-scope,.work-board-toolbar) :is(button,summary,a,input,select,textarea):focus-visible,
:where(.calendar-workspace,.bb-scope) :is(.calendar-segment,.bb-segment):has(input:focus-visible){outline:2px solid var(--bb-focus);outline-offset:2px}

/* --- Component: segmented control -----------------------------------------
   Consumers: .bb-segmented, Calendar layout/scale/agenda range, Overview
   scope (For me / Team work). No track fill: the selection is one bead (fill
   plus one hairline) that the runtime slides between options. */
:is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs){--thumb-x:0px;--thumb-w:0px;--seg-inset:0px;position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:2px;width:auto;min-height:var(--bb-control);margin:0;padding:3px;border:0;border-radius:var(--bb-radius-capsule);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;flex:none}
:is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs)>.bb-segmented-thumb{position:absolute;top:3px;bottom:3px;left:0;width:calc(var(--thumb-w) - 2 * var(--seg-inset));transform:translateX(calc(var(--thumb-x) + var(--seg-inset)));border-radius:var(--bb-radius-capsule);background:rgba(255,255,255,.72);box-shadow:var(--bb-shadow-bead);opacity:0;pointer-events:none;transition:transform var(--bb-base) var(--bb-ease),width var(--bb-base) var(--bb-ease),opacity var(--bb-fast) ease}
:is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs).has-thumb>.bb-segmented-thumb{opacity:1}
:is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs) :is(.bb-segment,.calendar-button,.calendar-segment,.tab){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:calc(var(--bb-control) - 6px);min-width:0;margin:0;padding:0 14px;border:0;border-radius:var(--bb-radius-capsule);background:transparent;box-shadow:none;color:#3a3f45;font:var(--bb-weight-medium) var(--bb-text-body)/1.2 var(--bb-font);white-space:nowrap;cursor:pointer;transition:color var(--bb-fast) ease,background-color var(--bb-fast) ease}
:is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs) :is(.bb-segment,.calendar-button,.calendar-segment,.tab):is([aria-pressed=true],:has(input:checked)){color:var(--bb-ink);font-weight:var(--bb-weight-semibold);background:rgba(255,255,255,.72);box-shadow:var(--bb-shadow-bead)}
:is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs).has-thumb :is(.bb-segment,.calendar-button,.calendar-segment,.tab):is([aria-pressed=true],:has(input:checked)){background:transparent;box-shadow:none}
:is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs) :is(.bb-segment,.calendar-button,.calendar-segment,.tab):hover:not([aria-pressed=true]):not(:has(input:checked)){background:var(--bb-fill-1);color:var(--bb-ink)}
:is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs) :is(.calendar-button,.tab)::after{display:none}
:is(.bb-segmented,.calendar-span-picker) input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}

/* --- Component: menu (glass popover that opens from its control) ---------- */
:is(.bb-menu,:where(.calendar-workspace) .calendar-disclosure-body){position:absolute;top:calc(100% + 10px);right:-4px;z-index:8;width:min(340px,calc(100cqw - 8px));padding:var(--bb-space-4);border:0;border-radius:var(--bb-radius-menu);background:var(--bb-glass-fill-thick);-webkit-backdrop-filter:var(--bb-glass-filter-thick);backdrop-filter:var(--bb-lens, ) var(--bb-glass-filter-thick);box-shadow:var(--bb-glass-edge),var(--bb-shadow-menu);transform-origin:top right;color:var(--bb-ink)}

/* --- Component: switch (native checkbox with switch semantics) ------------ */
:is(.bb-switch,.calendar-switch){position:relative;display:flex;align-items:center;gap:10px;min-height:var(--bb-target);margin:0;font:var(--bb-weight-medium) var(--bb-text-body)/1.3 var(--bb-font);color:var(--bb-ink);cursor:pointer;white-space:normal}
:is(.bb-switch,.calendar-switch) input{position:absolute;left:0;top:50%;width:38px;height:24px;margin:-12px 0 0;opacity:0;cursor:pointer}
:is(.bb-switch-track,.calendar-switch-track){position:relative;flex:none;width:38px;height:24px;border-radius:var(--bb-radius-capsule);background:var(--bb-fill-3);transition:background-color var(--bb-base) ease}
:is(.bb-switch-track,.calendar-switch-track)::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(18,22,20,.06),0 2px 5px rgba(18,22,20,.22);transition:transform var(--bb-base) var(--bb-spring),width var(--bb-fast) ease}
:is(.bb-switch,.calendar-switch) input:checked+:is(.bb-switch-track,.calendar-switch-track){background:var(--bb-forest)}
:is(.bb-switch,.calendar-switch) input:checked+:is(.bb-switch-track,.calendar-switch-track)::after{transform:translateX(14px)}
:is(.bb-switch,.calendar-switch):active :is(.bb-switch-track,.calendar-switch-track)::after{width:24px}
:is(.bb-switch,.calendar-switch) input:checked:active+:is(.bb-switch-track,.calendar-switch-track)::after{transform:translateX(10px)}
:is(.bb-switch,.calendar-switch) input:focus-visible+:is(.bb-switch-track,.calendar-switch-track){outline:2px solid var(--bb-focus);outline-offset:2px}

/* --- Component: sheet (modal glass over a light dimming layer) ------------
   Consumers: .bb-sheet, Calendar dialogs (editor, review, receipt, detail,
   planning). Groups and fields inside are thin overlays, never more glass.
   No specular rim: it competes with the title at this radius. */
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])){width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;overflow:auto;border:0;border-radius:var(--bb-radius-sheet);background:var(--bb-glass-sheet);-webkit-backdrop-filter:var(--bb-glass-filter-sheet);backdrop-filter:var(--bb-glass-filter-sheet);box-shadow:var(--bb-glass-edge),var(--bb-shadow-sheet);color:var(--bb-ink);scrollbar-width:thin;overscroll-behavior:contain}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"]))::backdrop{background:var(--bb-glass-dim);-webkit-backdrop-filter:none;backdrop-filter:none}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"]))[open]{transition:opacity var(--bb-base) ease,transform 360ms var(--bb-spring),overlay var(--bb-base) allow-discrete,display var(--bb-base) allow-discrete}
@starting-style{:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"]))[open]{opacity:0;transform:translateY(16px) scale(.97)}}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-header{position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--bb-space-4);padding:22px 20px 14px var(--bb-space-6);border:0;background:linear-gradient(180deg,rgba(255,255,255,.55) 55%,rgba(255,255,255,0));-webkit-backdrop-filter:none;backdrop-filter:none}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-header .eyebrow{margin:0 0 2px;font-size:var(--bb-text-footnote);font-weight:var(--bb-weight-medium);letter-spacing:0;text-transform:none;color:var(--bb-text-2)}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-header h2{margin:0;font-size:var(--bb-text-title-2);line-height:1.2;font-weight:var(--bb-weight-semibold);letter-spacing:var(--bb-tracking-title);color:var(--bb-ink)}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-header .icon-button{display:grid;place-items:center;width:var(--bb-control-compact);height:var(--bb-control-compact);flex:none;border-radius:50%;background:var(--bb-fill-2);color:var(--bb-text-2);transition:background-color var(--bb-fast) ease,transform var(--bb-base) var(--bb-spring)}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-header .icon-button:hover{background:var(--bb-fill-3);color:var(--bb-ink)}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-header .icon-button:active{transform:scale(.92)}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-body{padding:var(--bb-space-1) var(--bb-space-6) var(--bb-space-5);font-size:var(--bb-text-callout);line-height:var(--bb-leading-body);color:var(--bb-ink)}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-body p{color:var(--bb-text-2)}
/* The sticky footer sits over the scrolling body: it is opaque behind its own text and fades only at its
   top edge, so body text never shows through it (board-manual; measured on a 390 px editor). */
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-footer{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--bb-space-2);padding:14px 20px 18px var(--bb-space-6);border:0;background:linear-gradient(0deg,rgba(255,255,255,.96) calc(100% - 14px),rgba(255,255,255,0));-webkit-backdrop-filter:none;backdrop-filter:none}
@media (forced-colors: active){:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-footer{background:Canvas}}
:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button{min-height:var(--bb-target);padding-inline:18px}
@media (max-width: 600px){
 :is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])){width:auto;max-width:none;max-height:calc(100dvh - 20px);margin:auto 8px 8px;inset:auto 0 0 0}
 @starting-style{:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"]))[open]{opacity:0;transform:translateY(40px)}}
 :is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-header{padding:18px var(--bb-space-4) var(--bb-space-3) var(--bb-space-5)}
 :is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-body{padding-inline:var(--bb-space-4)}
 :is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .modal-footer{padding:var(--bb-space-3) var(--bb-space-4) calc(14px + env(safe-area-inset-bottom))}
}

/* Task sheets (detail, edit, add and review an update) use this sheet. Legacy small buttons inside
   them keep the 12px floor: same specificity as style.css .button.small, later in the cascade. */
:where(dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .button.small{font-size:var(--bb-text-caption)}

/* --- Component: field (filled rounded rectangle; white when focused) ------ */
:is(.bb-field input,.bb-field select,.bb-field textarea,:where(:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-editor) .field :is(input,select,textarea),:where(.calendar-workspace) :is(.calendar-sources,.calendar-zone,.calendar-field) :is(input,select),:where(.shell.is-overview .main) .home-other-work input){box-sizing:border-box;width:100%;min-width:0;min-height:46px;margin:0;padding:11px 14px;border:0;border-radius:var(--bb-radius-md);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 .5px rgba(18,24,20,.14);color:var(--bb-ink);font:var(--bb-weight-regular) var(--bb-text-callout)/1.35 var(--bb-font);transition:background-color var(--bb-fast) ease,box-shadow var(--bb-fast) ease}
:is(.bb-field input,.bb-field select,.bb-field textarea,:where(:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-editor) .field :is(input,select,textarea),:where(.calendar-workspace) :is(.calendar-sources,.calendar-zone,.calendar-field) :is(input,select),:where(.shell.is-overview .main) .home-other-work input):hover{background:rgba(255,255,255,.75)}
:is(.bb-field input,.bb-field select,.bb-field textarea,:where(:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-editor) .field :is(input,select,textarea),:where(.calendar-workspace) :is(.calendar-sources,.calendar-zone,.calendar-field) :is(input,select),:where(.shell.is-overview .main) .home-other-work input):focus{background:#fff;box-shadow:0 0 0 .5px var(--bb-hairline-strong),0 0 0 4px rgba(47,106,72,.16);outline:2px solid var(--bb-focus);outline-offset:0}
@media (max-width: 600px){:is(.bb-field input,.bb-field select,.bb-field textarea,:where(:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-editor) .field :is(input,select,textarea),:where(.calendar-workspace) :is(.calendar-sources,.calendar-zone,.calendar-field) :is(input,select),:where(.shell.is-overview .main) .home-other-work input){font-size:16px}}

/* --- Component: section (content-layer group: canvas, hairline, no glass) - */
:is(.bb-section,:where(.shell.is-overview .main) .panel){overflow:hidden;border:0;border-radius:var(--bb-radius-xl);background:var(--bb-canvas);box-shadow:inset 0 0 0 1px var(--bb-hairline)}
:is(.bb-section,:where(.shell.is-overview .main) .panel)>.panel-header{display:flex;align-items:center;justify-content:space-between;gap:var(--bb-space-3);min-height:60px;padding:var(--bb-space-2) var(--bb-space-3) var(--bb-space-2) var(--bb-space-5);border-bottom:1px solid var(--bb-hairline)}
:is(.bb-section,:where(.shell.is-overview .main) .panel)>.panel-header h2{margin:0;font-size:var(--bb-text-headline);line-height:1.3;font-weight:var(--bb-weight-semibold);letter-spacing:-.012em;color:var(--bb-ink)}
:is(.bb-section,:where(.shell.is-overview .main) .panel)>.panel-header>span{font-size:var(--bb-text-footnote);color:var(--bb-text-2)}

/* --- Component: action row (reason → title → owner · next action) --------
   Consumers: .bb-row, Overview attention rows. The whole row is the control;
   the next action is shown as a ghost capsule so it is visible without hover. */
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)){position:relative;display:flex;align-items:flex-start;gap:var(--bb-space-3);width:100%;min-height:var(--bb-target);margin:0;padding:14px var(--bb-space-5);border:0;border-bottom:1px solid var(--bb-hairline);background:transparent;color:var(--bb-ink);text-align:left;cursor:pointer;transition:background-color var(--bb-fast) ease}
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)):last-child{border-bottom:0}
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)):hover{background:var(--bb-fill-1)}
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)):active{background:var(--bb-fill-2)}
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)):focus-visible{outline:2px solid var(--bb-focus);outline-offset:-2px;border-radius:var(--bb-radius-lg)}
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)) .row-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;margin-top:2px;border-radius:var(--bb-radius-sm);background:var(--bb-fill-1);color:var(--bb-text-2)}
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)) .row-icon svg{width:16px;height:16px}
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)) .row-body{flex:1;min-width:0}
:is(.bb-row-reason,:where(.shell.is-overview .main) .attention-reason){display:flex;align-items:center;gap:6px;margin:0;font-size:var(--bb-text-footnote);line-height:1.4;font-weight:var(--bb-weight-medium);color:var(--bb-text-2)}
:is(.bb-row-reason,:where(.shell.is-overview .main) .attention-reason).is-deadline{color:var(--bb-deadline-ink)}
:is(.bb-row-reason,:where(.shell.is-overview .main) .attention-reason).is-deadline::before{content:"";width:7px;height:7px;flex:none;border-radius:1.5px;background:var(--bb-deadline);transform:rotate(45deg)}
:is(.bb-row-reason,:where(.shell.is-overview .main) .attention-reason).is-decision{color:var(--bb-ink);font-weight:var(--bb-weight-semibold)}
:is(.bb-row-reason,:where(.shell.is-overview .main) .attention-reason).is-waiting{color:var(--bb-text-3)}
:is(.bb-row-reason,:where(.shell.is-overview .main) .attention-reason).is-waiting::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--bb-text-3)}
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)) .row-body h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:3px 0 0;font-size:var(--bb-text-callout);line-height:1.4;font-weight:var(--bb-weight-medium);letter-spacing:-.008em;color:var(--bb-ink);white-space:normal;overflow-wrap:anywhere}
:is(.bb-row-meta,:where(.shell.is-overview .main) .attention-meta){display:flex;align-items:center;flex-wrap:wrap;gap:var(--bb-space-1) var(--bb-space-3);min-width:0;margin-top:var(--bb-space-1)}
:is(.bb-row-detail,:where(.shell.is-overview .main) .attention-detail){flex:1 1 160px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--bb-text-footnote);line-height:1.5;color:var(--bb-text-2)}
:is(.bb-row-next,:where(.shell.is-overview .main) .attention-next){display:inline-flex;align-items:center;gap:5px;flex:none;min-height:30px;margin:0 0 0 auto;padding:0 var(--bb-space-3);border-radius:var(--bb-radius-capsule);box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong);font-size:var(--bb-text-footnote);line-height:1;font-weight:var(--bb-weight-medium);color:var(--bb-ink);transition:background-color var(--bb-fast) ease}
:is(.bb-row-next,:where(.shell.is-overview .main) .attention-next) svg{width:13px;height:13px}
:is(.bb-row,:where(.shell.is-overview .main) :is(.attention-row,.run-row)):hover :is(.bb-row-next,.attention-next){background:#fff}

/* --- Component: notice (information, warning, stale) ---------------------- */
:is(.bb-notice,:where(.shell.is-overview .main) :is(.readiness-note,.daily-readiness-line)){display:flex;align-items:center;flex-wrap:wrap;gap:var(--bb-space-2) var(--bb-space-3);margin:0;padding:var(--bb-space-3) var(--bb-space-4);border:0;border-radius:var(--bb-radius-lg);background:var(--bb-fill-1);box-shadow:inset 0 0 0 .5px var(--bb-hairline);font-size:var(--bb-text-footnote);line-height:1.5;color:var(--bb-text-2)}
:is(.bb-notice--warning,:where(.shell.is-overview .main) .home-sync-warning,:where(.calendar-workspace,.overview-day) .calendar-error:not(.calendar-stale)){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--bb-space-2) var(--bb-space-4);margin:0 0 var(--bb-space-4);padding:var(--bb-space-3) var(--bb-space-3) var(--bb-space-3) 18px;border:0;border-radius:var(--bb-radius-xl);background:var(--bb-warning-fill);box-shadow:inset 0 0 0 .5px var(--bb-warning-line);color:var(--bb-deadline-ink);font-size:var(--bb-text-body);line-height:1.5}
:is(.bb-notice--stale,:where(.calendar-workspace,.overview-day) .calendar-error.calendar-stale){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--bb-space-2) var(--bb-space-4);margin:0 0 var(--bb-space-4);padding:var(--bb-space-3) var(--bb-space-3) var(--bb-space-3) 18px;border:0;border-radius:var(--bb-radius-xl);background:var(--bb-fill-1);box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong);color:var(--bb-text-2);font-size:var(--bb-text-body);line-height:1.5}

/* --- Component: empty and loading states ----------------------------------
   Placeholders only while an answer is pending; never "nothing" before the
   data is known. */
:is(.bb-empty,:where(.calendar-workspace) .calendar-empty){padding:56px var(--bb-space-5) 64px;text-align:center;color:var(--bb-text-2)}
:is(.bb-empty,:where(.calendar-workspace) .calendar-empty) strong{display:block;font-size:var(--bb-text-headline);font-weight:var(--bb-weight-semibold);letter-spacing:-.01em;color:var(--bb-ink)}
:is(.bb-empty,:where(.calendar-workspace) .calendar-empty) p{max-width:420px;margin:6px auto 0;font-size:var(--bb-text-body);line-height:1.55}
:is(.bb-skeleton,.calendar-skeleton){display:flex;flex-direction:column;gap:6px;margin:0}
:is(.bb-skeleton,.calendar-skeleton) span{display:block;height:44px;border-radius:var(--bb-radius-sm);background:var(--bb-fill-2);animation:bb-wait 1.6s ease-in-out infinite}
:is(.bb-skeleton,.calendar-skeleton) span+span{width:72%;animation-delay:.2s}
@keyframes bb-wait{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){:is(.bb-skeleton,.calendar-skeleton) span{animation:none}}
@media (forced-colors: active){
 :is(.bb-skeleton,.calendar-skeleton) span{animation:none;background:none;border:1px dashed GrayText}
 :is(.bb-glass-bar,:where(.calendar-workspace) .calendar-toolbar)::before,:is(.bb-menu,:where(.calendar-workspace) .calendar-disclosure-body),:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])){background:Canvas;border:1px solid CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none}
 :is(.bb-glass-bar,:where(.calendar-workspace) .calendar-toolbar)::after,.bb-segmented-thumb{display:none}
 :is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) :is(.modal-header,.modal-footer){background:Canvas}
 /* The bead is hidden here, so the selected option itself carries the selection. The .has-thumb
    variant matches the rule that clears its fill for the bead, and wins by coming later. */
 :is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs) :is(.bb-segment,.calendar-button,.calendar-segment,.tab):is([aria-pressed=true],:has(input:checked)),
 :is(.bb-segmented,.calendar-layout-picker,.calendar-view-picker,.calendar-span-picker,.home-scope-tabs).has-thumb :is(.bb-segment,.calendar-button,.calendar-segment,.tab):is([aria-pressed=true],:has(input:checked)),
 :is(.bb-switch,.calendar-switch) input:checked+:is(.bb-switch-track,.calendar-switch-track){forced-color-adjust:none;background:Highlight;color:HighlightText;box-shadow:none}
 :is(.bb-button,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button,:where(.calendar-workspace) .calendar-disclosure>summary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) :is(.button,.home-quick-start)){border:1px solid ButtonText}
 :is(.bb-button--primary,:where(.calendar-workspace,.overview-day,.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-button-primary,:where(.shell.is-overview .main,dialog:has(.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .button.primary){background:ButtonFace;color:ButtonText}
 :is(.bb-row-reason,.attention-reason)::before,:is(.bb-switch-track,.calendar-switch-track){forced-color-adjust:none;background:CanvasText;box-shadow:none}
 :is(.bb-row-next,.attention-next){border:1px solid CanvasText}
 /* Filled fields lose their fill here: give them a system boundary. */
 :is(.bb-field input,.bb-field select,.bb-field textarea,:where(:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"])) .calendar-editor) .field :is(input,select,textarea),:where(.calendar-workspace) :is(.calendar-sources,.calendar-zone,.calendar-field) :is(input,select),:where(.shell.is-overview .main) .home-other-work input){border:1px solid FieldText}
}
@media (prefers-reduced-motion: reduce){
 :is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"]))[open]{transition:opacity 120ms ease}
 @starting-style{:is(.bb-sheet,dialog:has([data-calendar-editor],[data-calendar-planning],[data-calendar-detail],.task-detail-body,form[data-form="task"],form[data-form="edit-task"],form[data-form^="workspace-task-update"]))[open]{opacity:0;transform:none}}
}
@media print{:is(.bb-glass-bar,:where(.calendar-workspace) .calendar-toolbar)::before{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}}