/* ============================================================
   ORA SHELL · canonical chrome every page mounts into
   Token-only. Dark + light via tokens.css. No raw hex.
   Patterns grounded in Mobbin: workspace switcher (Notion),
   date-range presets (ElevenLabs), notifications panel (Ditto),
   day/night control (Zoho CRM). Cited in the build handover.
   ============================================================ */
.ora-shell{
  position:sticky; top:0; z-index:300;
  display:flex; align-items:center; gap:var(--space-md);
  padding:0 var(--space-lg); height:52px;
  background:var(--color-bg-elevated, var(--surface));
  border-bottom:1px solid var(--color-border-subtle);
  font-family:var(--font-body);
  backdrop-filter:blur(8px);
}
.ora-shell a{ text-decoration:none; color:inherit; }

/* brand block */
.ora-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.ora-mark{ width:26px; height:26px; color:var(--color-accent); flex:0 0 auto;
  filter:drop-shadow(0 0 6px currentColor); }
.ora-brand-name{ font-weight:600; font-size:var(--fs-md, 14px); color:var(--color-text); white-space:nowrap; }
.ora-brand-sub{ font-size:var(--fs-xs, 11px); color:var(--color-text-tertiary); white-space:nowrap; }

/* tenant switcher (Mobbin: Notion workspace switcher) */
.ora-tenant{ position:relative; }
.ora-tenant-btn{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--color-border-default); border-radius:var(--radius-md);
  background:var(--color-bg-glass); color:var(--color-text);
  font:inherit; font-size:var(--fs-sm, 12px); padding:5px 10px;
}
.ora-tenant-btn:hover{ border-color:var(--color-accent); }
.ora-tenant-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.ora-tenant-dot{ width:8px; height:8px; border-radius:var(--radius-circle,50%); background:var(--color-accent); }
.ora-tenant-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:220px;
  background:var(--color-bg-elevated, var(--surface)); border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg, 0 8px 24px rgba(0,0,0,.35));
  padding:6px; display:none; z-index:310;
}
.ora-tenant-menu.open{ display:block; }
.ora-tenant-opt{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; font:inherit; color:var(--color-text);
  font-size:var(--fs-sm, 12px); padding:8px 10px; border-radius:var(--radius-md);
}
.ora-tenant-opt:hover{ background:var(--color-accent-soft); }
.ora-tenant-opt:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.ora-tenant-opt[aria-current="true"]{ background:var(--color-accent-soft); }
.ora-tenant-opt .sw{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.ora-tenant-opt small{ color:var(--color-text-tertiary); margin-left:auto; }
.ora-tenant-sep{ height:1px; background:var(--color-border-subtle); margin:6px 4px; }

/* nav */
.ora-nav{ display:flex; align-items:center; gap:2px; flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none; }
.ora-nav::-webkit-scrollbar{ display:none; }
.ora-nav a{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:var(--fs-sm, 12px); color:var(--color-text-secondary);
  padding:6px 10px; border-radius:var(--radius-md); border:1px solid transparent;
}
.ora-nav a:hover{ color:var(--color-text); background:var(--color-bg-glass); }
.ora-nav a:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.ora-nav a[aria-current="page"]{
  color:var(--color-accent); background:var(--color-accent-soft);
  border-color:color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.ora-nav a .ic{ font-size:11px; }

/* right cluster */
.ora-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.ora-iconbtn{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border:1px solid var(--color-border-default); border-radius:var(--radius-md);
  background:var(--color-bg-glass); color:var(--color-text-secondary); cursor:pointer; font-size:12px;
}
.ora-iconbtn:hover{ color:var(--color-text); border-color:var(--color-accent); }
.ora-iconbtn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* DISPATCH T · the global top-bar range control was retired; each surface owns
   ONE range control next to its data (the .tabs-time pill, lib/time-range.js). */

/* notifications panel (Mobbin: Ditto) */
.ora-notif{ position:relative; }
/* 440px, not 360 (dispatch O item 5). The humanised headlines shipped in #219
   ("Conduct Connect billing balances and due dates are stale") wrapped to three
   lines at 360 and pushed the subtitle out of view. 440 is the Jira/Dovetail tray
   band for rows that carry identity + two lines + actions; it still clears a
   375px viewport via the min(). */
.ora-notif-pop{
  position:absolute; right:0; top:calc(100% + 6px); width:min(440px, calc(100vw - 24px)); display:none; z-index:310;
  background:var(--color-bg-elevated, var(--surface)); border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg, 0 8px 24px rgba(0,0,0,.35)); padding:var(--space-md);
}
.ora-notif-pop.open{ display:block; }

/* PLATFORM/WORK split + search -- same visual language as the nav's
   active-tab treatment and the tenant switcher's option rows, not a new
   component family. */
.ora-notif-tabs{ display:flex; gap:2px; margin:2px 0 8px; border-bottom:1px solid var(--color-border-subtle); }
.ora-notif-tab{
  flex:1; text-align:center; background:none; border:0; cursor:pointer; font:inherit;
  font-size:var(--fs-sm, 12px); color:var(--color-text-secondary);
  padding:6px 4px; border-bottom:2px solid transparent;
}
.ora-notif-tab:hover{ color:var(--color-text); }
.ora-notif-tab[aria-selected="true"]{ color:var(--color-accent); border-bottom-color:var(--color-accent); font-weight:var(--fw-semibold); }
.ora-notif-search{ width:100%; margin-bottom:8px; font-size:var(--fs-sm, 12px); padding:5px 8px; }

/* severity/status groups within the list -- reuses .ora-notif-item, just
   adds a small section header, same type scale as the popover's own h4 */
.ora-notif-group{ margin-bottom:8px; }
.ora-notif-group + .ora-notif-group{ padding-top:8px; border-top:1px solid var(--color-border-subtle); }
.ora-notif-group__h{ font-size:var(--fs-xs, 11px); text-transform:uppercase; letter-spacing:var(--ls-wide, .04em);
  color:var(--color-text-tertiary); font-weight:var(--fw-semibold); margin-bottom:4px; }
.ora-notif-group__h--critical{ color:var(--danger); }
/* one muted line under a group heading, for a group whose count is context
   rather than a queue (WORK tab's advisory no_telemetry group) */
.ora-notif-note{ font-size:var(--fs-xs, 11px); line-height:1.45; color:var(--color-text-tertiary);
  margin:-2px 0 6px; }

/* paused/expected rows: same item shell, muted -- never rendered as an
   alarm. This is the fix for the disabled-feed-alarming bug. */
.ora-notif-item--muted{ opacity:.65; cursor:default; }
.ora-notif-item--muted:hover{ border-color:var(--color-border-subtle); background:none; }

/* Row actions are ICON affordances (dispatch O item 5). Square, 26px, tooltip on
   hover/focus -- the pattern every reference tray uses at this density. */
.ora-notif-actions{ display:flex; gap:6px; margin-top:6px; }
.ora-notif-act{
  border:1px solid var(--color-border-default); border-radius:var(--radius-md);
  background:var(--color-bg-glass); color:var(--color-text-secondary); cursor:pointer;
  font:inherit; font-size:var(--fs-sm, 12px); line-height:1;
  width:26px; height:26px; padding:0; display:inline-flex; align-items:center; justify-content:center;
}
.ora-notif-act:hover{ color:var(--color-text); border-color:var(--color-accent); }
.ora-notif-act:disabled{ opacity:.5; cursor:default; }
.ora-notif-act:disabled:hover{ border-color:var(--color-border-default); }
/* ora-canon.css loads AFTER this file and paints every `.ora-notif-item .ic`
   with --accent (+2px top margin) -- correct for the inline glyphs it was written
   for, wrong for a button's own icon, which must take the button's state colour
   and sit centred. 0,3,0 to clear it. */
.ora-notif-item .ora-notif-act .ic{ color:inherit; margin-top:0; }
/* acknowledged reads as done, not as a dead control */
.ora-notif-item .ora-notif-act:disabled .ic{ color:var(--ok); opacity:.9; }

/* tooltip for the icon actions + the dismiss x. Scoped to the popover so it can
   never collide with a page's own [data-tip] helper. Appears on hover AND on
   keyboard focus -- an icon-only control that only explains itself to a mouse
   is not an accessible control. */
/* :not(.ora-notif-x) matters -- the dismiss x is already position:absolute in its
   own corner, and a blanket [data-tip]{position:relative} here outranks it (0,2,0
   vs 0,1,0) and drops it back into flow above the headline. */
.ora-notif-pop [data-tip]:not(.ora-notif-x){ position:relative; }
/* Anchored left, not centred. .ora-notif-list is an overflow-y:auto scroll box, so
   it clips horizontally too -- a centred tooltip on the left-most action button had
   its first words cut off at the list edge. Left-anchoring keeps every tooltip
   inside the box, because the buttons it belongs to all sit at the row's left. */
.ora-notif-pop [data-tip]::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:0;
  background:var(--color-bg-elevated, var(--surface)); color:var(--color-text);
  border:1px solid var(--color-border-default); border-radius:var(--radius-md);
  padding:5px 8px; font-size:var(--fs-xs, 11px); font-weight:var(--fw-regular); line-height:1.4;
  white-space:normal; width:max-content; max-width:190px; text-align:left;
  pointer-events:none; opacity:0; transition:opacity var(--duration-fast, .12s) var(--ease, ease);
  box-shadow:var(--shadow-lg, 0 8px 24px rgba(0,0,0,.35)); z-index:2;
}
.ora-notif-pop [data-tip]:hover::after,
.ora-notif-pop [data-tip]:focus-visible::after{ opacity:1; }
/* the x sits on the popover's right edge -- a centred tooltip would overflow it */
.ora-notif-x[data-tip]::after{ left:auto; right:0; }
@media (prefers-reduced-motion:reduce){ .ora-notif-pop [data-tip]::after{ transition:none; } }
/* first row's tooltip would clip on the popover's top edge -- flip it below */
/* The row after a group heading IS the group's first row -- .ora-notif-item:first-child
   never matches, because the heading div is the group's actual first child. */
.ora-notif-group:first-child .ora-notif-group__h + .ora-notif-item [data-tip]::after{
  bottom:auto; top:calc(100% + 6px);
}
.ora-notif-pop h4{ margin:0 0 6px; font-size:var(--fs-sm,12px); color:var(--color-text); }
.ora-notif-empty{ display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:var(--space-lg) 0; color:var(--color-text-tertiary); font-size:var(--fs-xs,11px); text-align:center; }
.ora-notif-empty .ora-mark{ width:22px; height:22px; opacity:.7; }
/* notification items + unread count badge on the bell */
.ora-notif-count{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--radius-pill); background:var(--danger); color:var(--color-text-inverse);
  font-family:var(--font-mono); font-size:var(--fs-xs); line-height:16px; font-weight:var(--fw-bold);
  text-align:center; pointer-events:none; }
/* RESOLVE-UX-2 · the same count badge, inline on a nav section (active resolve requests) */
.ora-nav a .ora-nav-count{ display:inline-flex; align-items:center; justify-content:center; margin-left:6px;
  min-width:16px; height:16px; padding:0 4px; border-radius:var(--radius-pill);
  background:var(--danger); color:var(--color-text-inverse);
  font-family:var(--font-mono); font-size:var(--fs-xs); line-height:16px; font-weight:var(--fw-bold);
  text-align:center; pointer-events:none; }
.ora-notif-list{ display:flex; flex-direction:column; gap:6px; max-height:320px; overflow-y:auto; }
.ora-notif-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.ora-notif-head h4{ margin:0; }
.ora-notif-clear{ border:0; background:transparent; color:var(--color-accent); cursor:pointer;
  font-family:var(--font-body); font-size:var(--fs-xs); padding:2px 4px; border-radius:var(--radius-md); }
.ora-notif-clear:hover{ text-decoration:underline; }
/* Scoped to .ora-notif-pop (0,2,0) on purpose. ora-canon.css loads after this file
   and its own `.ora-notif-item` (0,1,0) sets display:flex + padding:8px 10px --
   written for a different, inline-glyph row shape. Unscoped, it won this cascade
   and turned every bell row into a flex row whose headline, subtitle and action
   buttons sat side by side, with the dismiss x overlapping the text. These rows are
   a stacked block: headline, subtitle, then actions. */
.ora-notif-pop .ora-notif-item{ position:relative; display:block; background:transparent; cursor:pointer;
  border:1px solid var(--color-border-subtle); border-radius:var(--radius-md);
  padding:8px 28px 8px 10px; color:var(--color-text); font-family:var(--font-body); }
.ora-notif-item:hover{ border-color:var(--color-accent); background:var(--color-bg-glass); }
.ora-notif-item .ndot{ display:inline-block; width:8px; height:8px; border-radius:var(--radius-circle);
  margin-right:7px; vertical-align:middle; background:var(--color-text-tertiary); }
/* operator altitude: the dot carries the CLIENT's brand accent so a consolidated
   list reads at a glance. Slightly larger with a halo so a mid-tone brand colour
   (TNT's #7E5B7A) still separates from the row background in both themes. */
.ora-notif-item .ndot.is-client{ width:9px; height:9px; cursor:help;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--color-text) 8%, transparent); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.ora-notif-item .ndot.down{ background:var(--danger); }
.ora-notif-item .ndot.ok{ background:var(--ok); }
.ora-notif-item .ndot.info{ background:var(--info); }
.ora-notif-item .ndot.warn{ background:var(--warn); }
.ora-notif-item .nt{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.ora-notif-item .nb{ font-size:var(--fs-xs); color:var(--color-text-tertiary); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ora-notif-x{ position:absolute; top:6px; right:6px; width:18px; height:18px; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center; border:0; background:transparent;
  color:var(--color-text-tertiary); cursor:pointer; border-radius:var(--radius-circle);
  font-size:var(--fs-md); font-family:var(--font-body); }
.ora-notif-x:hover{ color:var(--danger); background:var(--danger-bg); }

/* DELIVERY HONESTY footer -- permanent, both tabs, never a dismissible notice.
   The tray must not imply an alert was sent anywhere: ops.alert_channels is empty,
   so every delivery is parked at ready_no_channel. Muted, not an alarm: the state
   is expected, not broken. */
.ora-notif-foot{ display:flex; gap:7px; align-items:flex-start; margin-top:var(--space-sm);
  padding-top:8px; border-top:1px solid var(--color-border-subtle);
  font-size:var(--fs-xs, 11px); line-height:1.45; color:var(--color-text-tertiary); }
.ora-notif-foot .ic{ margin-top:2px; flex:none; }
.ora-notif-foot b{ color:var(--color-text-secondary); font-weight:var(--fw-semibold); }

/* altitude note under the shell when scope is pinned */
.ora-scope-note{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-xs, 11px); color:var(--color-text-tertiary);
  padding:4px var(--space-lg); border-bottom:1px solid var(--color-border-subtle);
  background:var(--color-bg-glass);
}
.ora-scope-note .sw{ width:8px; height:8px; border-radius:50%; background:var(--color-accent); }

/* hide page-local theme toggles · the shell owns ONE toggle and proxies
   clicks to the page handler so page-side repaint hooks still run */
body[data-ora-shell] #theme-toggle, body[data-ora-shell] #themeBtn{ display:none !important; }

@media (max-width:900px){
  .ora-shell{ flex-wrap:wrap; height:auto; padding:6px var(--space-md); row-gap:4px; }
  .ora-nav{ order:3; flex-basis:100%; }
  .ora-brand-sub{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .ora-mark{ filter:none; } }

/* VOICE-ORB-OVERLAY-FIX (2026-07-20) · orb + side panel go SIDE BY SIDE.
   The orb dock's own push layout only steps the customer slide-out
   (`body.orbi-open #liveSO.so-panel`) left of the orb. The network subscriber
   panel (#so-panel, #ab-panel) and the Resolve request drawer (#rrDrawer) are
   the other fixed, right-anchored slide-outs; being fixed, body padding-right
   cannot move them, so without this they sit UNDER the orb. Mirror the dock's
   shift for them. --orbi-panel-w + the 1200px breakpoint are the dock's
   contract (bundle-injected); the fallbacks keep this correct if the dock
   has not injected yet. Absolute-positioned .so-panel surfaces (appointments,
   tickets, billing) already yield via the shell's padding and are untouched. */
@media (min-width:1200px){
  body.orbi-open #so-panel.so-panel,
  body.orbi-open #ab-panel.so-panel,
  body.orbi-open #rrDrawer.drawer{
    right: var(--orbi-panel-w, min(420px, 36vw));
    border-right: 1px solid var(--color-border-default, var(--border));
  }
}