/* ============================================================
   ORA SHELL · canonical chrome every page mounts into
   ------------------------------------------------------------
   THE FRAME (2026-08-31) is shadcn/ui's sidebar-07 + dashboard-01,
   ported to this repo's vanilla shell (MIT source, copy-in): a left
   rail that collapses to icons, a header bar, and the page's own
   content region below.

   TOKENS-ONLY, AND THE SHADCN NAMES FOR THE FRAME. Every surface,
   text and border colour in the frame is one of the shadcn variables
   lib/brand-inheritance.js derives per tenant from the brand lock —
   --sidebar, --sidebar-accent, --background, --border and so on. The
   rail therefore inherits whatever vertical it renders in with no
   per-vertical CSS anywhere, and tokens/shadcn-floor.css guarantees
   the names resolve on the first paint rather than the second.

   Each one still carries a fallback triple inside var(), for the one
   case the floor cannot cover: a surface that somehow loads this file
   without the boot path. Neutral on purpose — a fallback that guessed
   at brand colour would flash the wrong tenant.

   NO REPARENTING. The rail is position:fixed and the header is
   position:sticky in normal flow, so the page's own body content is
   never moved into a new container: document scroll, every sticky
   sub-header, and every fixed slide-out keep behaving exactly as they
   did. The only thing the frame does to a page is inset its left edge.

   The widget patterns below the frame are unchanged and still
   grounded in Mobbin: workspace switcher (Notion), notifications
   panel (Ditto), day/night control (Zoho CRM).
   ============================================================ */

:root{
  --ora-sb-w: 16rem;        /* upstream's SIDEBAR_WIDTH */
  --ora-sb-w-icon: 3rem;    /* upstream's SIDEBAR_WIDTH_ICON */
  --ora-header-h: 52px;
  --ora-sb-ease: 200ms cubic-bezier(.4, 0, .2, 1);
}

/* THE INSET. The page keeps its own document flow; only its left edge
   moves. padding-left is a LONGHAND on purpose: the Orbi dock sets
   padding-right on the same element when the voice panel opens, and a
   shorthand here would silently erase it. */
body[data-ora-shell]{
  padding-left: var(--ora-sb-w);
  transition: padding-left var(--ora-sb-ease);
}
html[data-sidebar="collapsed"] body[data-ora-shell]{ padding-left: var(--ora-sb-w-icon); }

/* ── THE RAIL ─────────────────────────────────────────────────── */
.ora-sb{
  position:fixed; top:0; bottom:0; left:0; z-index:320;
  width:var(--ora-sb-w);
  display:flex; flex-direction:column;
  background:hsl(var(--sc-sidebar, 0 0% 98%));
  color:hsl(var(--sc-sidebar-foreground, 0 0% 10%));
  border-right:1px solid hsl(var(--sc-sidebar-border, 0 0% 90%));
  font-family:var(--font-body);
  overflow:hidden;                 /* the labels clip as the rail narrows */
  transition:width var(--ora-sb-ease), transform var(--ora-sb-ease);
}
html[data-sidebar="collapsed"] .ora-sb{ width:var(--ora-sb-w-icon); }
.ora-sb a{ text-decoration:none; color:inherit; }

.ora-sb-head{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 8px; border-bottom:1px solid hsl(var(--sc-sidebar-border, 0 0% 90%));
}
.ora-sb-body{ flex:1; min-height:0; overflow-y:auto; padding:8px; scrollbar-width:thin; }
.ora-sb-foot{ padding:8px; border-top:1px solid hsl(var(--sc-sidebar-border, 0 0% 90%)); }

/* brand block */
.ora-brand{ display:flex; align-items:center; gap:10px; min-width:0;
  padding:4px 6px; border-radius:var(--sc-radius, 8px); }
.ora-brand:focus-visible{ outline:none; box-shadow:var(--focus-ring, 0 0 0 2px hsl(var(--sc-sidebar-ring, 0 0% 25%))); }
.ora-mark{ width:26px; height:26px; color:hsl(var(--sc-sidebar-primary, 0 0% 25%)); flex:0 0 auto;
  filter:drop-shadow(0 0 6px currentColor); }
.ora-brand-text{ display:flex; flex-direction:column; min-width:0; }
.ora-brand-name{ font-weight:600; font-size:var(--fs-md, 14px); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ora-brand-sub{ font-size:var(--fs-xs, 11px); color:hsl(var(--sc-muted-foreground, 0 0% 45%));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* tenant switcher (Mobbin: Notion workspace switcher) */
.ora-tenant{ position:relative; }
.ora-tenant-btn{
  display:flex; align-items:center; gap:8px; cursor:pointer; width:100%;
  border:1px solid hsl(var(--sc-sidebar-border, 0 0% 90%)); border-radius:var(--sc-radius, 8px);
  background:hsl(var(--sc-sidebar-accent, 0 0% 94%)); color:inherit;
  font:inherit; font-size:var(--fs-sm, 12px); padding:6px 8px; text-align:left;
}
.ora-tenant-btn:hover{ border-color:hsl(var(--sc-sidebar-primary, 0 0% 25%)); }
.ora-tenant-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring, 0 0 0 2px hsl(var(--sc-sidebar-ring, 0 0% 25%))); }
.ora-tenant-dot{ width:8px; height:8px; border-radius:var(--radius-circle,50%);
  background:hsl(var(--sc-sidebar-primary, 0 0% 25%)); flex:0 0 auto; }
.ora-tenant-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ora-tenant-caret{ font-size:9px; flex:0 0 auto; }
.ora-tenant-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:220px;
  background:hsl(var(--sc-popover, 0 0% 100%)); color:hsl(var(--sc-popover-foreground, 0 0% 10%));
  border:1px solid hsl(var(--sc-border, 0 0% 90%));
  border-radius:var(--radius-lg, 12px); box-shadow:var(--shadow-lg, 0 10px 30px rgba(0,0,0,.35));
  padding:6px; display:none; z-index:330;
}
.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:inherit;
  font-size:var(--fs-sm, 12px); padding:8px 10px; border-radius:var(--sc-radius, 8px);
}
.ora-tenant-opt:hover{ background:hsl(var(--sc-accent, 0 0% 96%)); }
.ora-tenant-opt:focus-visible{ outline:none; box-shadow:var(--focus-ring, 0 0 0 2px hsl(var(--sc-ring, 0 0% 25%))); }
.ora-tenant-opt[aria-current="true"]{ background:hsl(var(--sc-accent, 0 0% 96%)); }
.ora-tenant-opt .sw{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.ora-tenant-opt small{ color:hsl(var(--sc-muted-foreground, 0 0% 45%)); margin-left:auto; }
.ora-tenant-sep{ height:1px; background:hsl(var(--sc-border, 0 0% 90%)); margin:6px 4px; }

/* ── NAV ──────────────────────────────────────────────────────── */
.ora-nav{ display:flex; flex-direction:column; gap:2px; }
.ora-sb-grouplabel{
  font-size:var(--fs-xs, 11px); font-weight:var(--fw-semibold, 600);
  letter-spacing:var(--ls-wide, .04em); text-transform:uppercase;
  color:hsl(var(--sc-muted-foreground, 0 0% 45%));
  padding:6px 8px 4px; white-space:nowrap;
}
.ora-nav a{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  font-size:var(--fs-sm, 13px); color:hsl(var(--sc-sidebar-foreground, 0 0% 10%));
  padding:7px 8px; border-radius:var(--sc-radius, 8px); border:1px solid transparent;
  min-height:34px;
}
.ora-nav a:hover{ background:hsl(var(--sc-sidebar-accent, 0 0% 94%)); }
.ora-nav a:focus-visible{ outline:none; box-shadow:var(--focus-ring, 0 0 0 2px hsl(var(--sc-sidebar-ring, 0 0% 25%))); }
.ora-nav a[aria-current="page"]{
  color:hsl(var(--sc-sidebar-primary-foreground, 0 0% 98%));
  background:hsl(var(--sc-sidebar-primary, 0 0% 25%));
  font-weight:var(--fw-semibold, 600);
}
.ora-nav a[aria-current="page"] .ic{ color:inherit; }
.ora-nav a .ic{ font-size:13px; width:18px; text-align:center; flex:0 0 auto; }
.ora-nav-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* ── SETTINGS GROUP (2026-08-31) ──────────────────────────────────
   The one collapsible group in the rail: a parent toggle styled like
   every other .ora-nav a, then a nested list of children carrying the
   shadcn sidebar-menu-sub left rule (a hairline the children hang off
   rather than each having its own border), indented one step further
   than the parent's icon column. Same tokens as the flat nav - no new
   colour is introduced for this. */
.ora-nav-group{ display:flex; flex-direction:column; }
.ora-nav-group-toggle{
  display:flex; align-items:center; gap:10px; width:100%; white-space:nowrap;
  font:inherit; font-size:var(--fs-sm, 13px); color:hsl(var(--sc-sidebar-foreground, 0 0% 10%));
  background:none; padding:7px 8px; border-radius:var(--sc-radius, 8px); border:1px solid transparent;
  min-height:34px; cursor:pointer; text-align:left;
}
.ora-nav-group-toggle:hover{ background:hsl(var(--sc-sidebar-accent, 0 0% 94%)); }
.ora-nav-group-toggle:focus-visible{ outline:none; box-shadow:var(--focus-ring, 0 0 0 2px hsl(var(--sc-sidebar-ring, 0 0% 25%))); }
.ora-nav-group-toggle .ic:first-child{ font-size:13px; width:18px; text-align:center; flex:0 0 auto; }
/* "on the Settings page" reads the same as a normal active link, even
   though no single child is necessarily the current one. */
.ora-nav-group-toggle.is-on-page{
  color:hsl(var(--sc-sidebar-primary-foreground, 0 0% 98%));
  background:hsl(var(--sc-sidebar-primary, 0 0% 25%));
  font-weight:var(--fw-semibold, 600);
}
.ora-nav-group-toggle.is-on-page .ic{ color:inherit; }
.ora-nav-group-chev{
  margin-left:auto; font-size:10px; flex:0 0 auto;
  transition:transform var(--duration-fast, 150ms) var(--ease, ease);
}
.ora-nav-group-toggle[aria-expanded="true"] .ora-nav-group-chev{ transform:rotate(90deg); }
.ora-nav-group-children{
  list-style:none; margin:2px 0 2px 17px; padding:0 0 0 10px;
  border-left:1px solid hsl(var(--sc-sidebar-border, 0 0% 90%));
  display:flex; flex-direction:column; gap:1px;
}
.ora-nav-group-children[hidden]{ display:none; }
.ora-nav-group-children a{
  display:flex; align-items:center; white-space:nowrap;
  font-size:var(--fs-sm, 13px); color:hsl(var(--sc-muted-foreground, 0 0% 45%));
  padding:6px 8px; border-radius:var(--sc-radius, 8px); min-height:30px;
}
.ora-nav-group-children a:hover{ background:hsl(var(--sc-sidebar-accent, 0 0% 94%)); color:hsl(var(--sc-sidebar-foreground, 0 0% 10%)); }
.ora-nav-group-children a:focus-visible{ outline:none; box-shadow:var(--focus-ring, 0 0 0 2px hsl(var(--sc-sidebar-ring, 0 0% 25%))); }
.ora-nav-group-children a[aria-current="page"]{
  color:hsl(var(--sc-sidebar-primary, 0 0% 25%)); font-weight:var(--fw-semibold, 600);
  background:hsl(var(--sc-sidebar-accent, 0 0% 94%));
}
/* A collapsed icon-only rail has no room for an indented sub-list; the
   group still shows as one icon, centred exactly like every other
   top-level entry, and expand state is simply not offered there. */
html[data-sidebar="collapsed"] .ora-nav-group-toggle{ justify-content:center; padding-left:0; padding-right:0; }
html[data-sidebar="collapsed"] .ora-nav-group-chev,
html[data-sidebar="collapsed"] .ora-nav-group-children{ display:none; }

/* rail footer identity */
.ora-sb-user{
  display:flex; align-items:center; gap:10px; width:100%; min-height:34px;
  background:none; border:1px solid transparent; border-radius:var(--sc-radius, 8px);
  cursor:pointer; font:inherit; font-size:var(--fs-sm, 13px); color:inherit;
  padding:6px 8px; text-align:left;
}
.ora-sb-user:hover{ background:hsl(var(--sc-sidebar-accent, 0 0% 94%)); }
.ora-sb-user:focus-visible{ outline:none; box-shadow:var(--focus-ring, 0 0 0 2px hsl(var(--sc-sidebar-ring, 0 0% 25%))); }
.ora-sb-user .ic{ font-size:13px; width:18px; text-align:center; flex:0 0 auto; }
.ora-sb-user-text{ display:flex; flex-direction:column; min-width:0; }
.ora-sb-user-email{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ora-sb-user-sub{ font-size:var(--fs-xs, 11px); color:hsl(var(--sc-muted-foreground, 0 0% 45%)); }

/* ── THE COLLAPSE ─────────────────────────────────────────────────
   THE LABEL IS CLIPPED, NOT REMOVED. Upstream's sidebar-07 hides the
   label with `hidden` and hands the name to a hover tooltip, which
   leaves the link with no accessible name for a screen reader and no
   name at all for a keyboard user. Here every label keeps its box in
   the accessibility tree (the sr-only clip) while taking no visual
   space, so the collapsed rail reads identically to the expanded one
   in a screen reader. `title` on each link covers the pointer case.
   ---------------------------------------------------------------- */
html[data-sidebar="collapsed"] .ora-nav-label,
html[data-sidebar="collapsed"] .ora-brand-text,
html[data-sidebar="collapsed"] .ora-tenant-label,
html[data-sidebar="collapsed"] .ora-tenant-caret,
html[data-sidebar="collapsed"] .ora-sb-grouplabel,
html[data-sidebar="collapsed"] .ora-sb-user-text{
  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;
}
html[data-sidebar="collapsed"] .ora-sb-head,
html[data-sidebar="collapsed"] .ora-sb-body,
html[data-sidebar="collapsed"] .ora-sb-foot{ padding-left:4px; padding-right:4px; }
html[data-sidebar="collapsed"] .ora-nav a,
html[data-sidebar="collapsed"] .ora-sb-user,
html[data-sidebar="collapsed"] .ora-tenant-btn,
html[data-sidebar="collapsed"] .ora-brand{ justify-content:center; padding-left:0; padding-right:0; }
html[data-sidebar="collapsed"] .ora-mark{ width:22px; height:22px; }
/* the group label collapses to a hairline so the group still reads as a group */
html[data-sidebar="collapsed"] .ora-nav::before{
  content:''; display:block; height:1px; margin:4px 6px 6px;
  background:hsl(var(--sc-sidebar-border, 0 0% 90%));
}
/* the tenant menu would be clipped by the 3rem rail; float it clear */
html[data-sidebar="collapsed"] .ora-tenant-menu{ left:calc(100% + 6px); top:0; }

/* ── THE HEADER (dashboard-01) ────────────────────────────────── */
.ora-shell{
  position:sticky; top:0; z-index:300;
  display:flex; align-items:center; gap:var(--space-md);
  padding:0 var(--space-lg); height:var(--ora-header-h);
  background:hsl(var(--sc-background, 0 0% 100%));
  color:hsl(var(--sc-foreground, 0 0% 10%));
  border-bottom:1px solid hsl(var(--sc-border, 0 0% 90%));
  font-family:var(--font-body);
  backdrop-filter:blur(8px);
}
.ora-shell a{ text-decoration:none; color:inherit; }
.ora-sb-trigger{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:30px; height:30px; padding:0; cursor:pointer; font-size:13px;
  border:1px solid transparent; border-radius:var(--sc-radius, 8px);
  background:transparent; color:hsl(var(--sc-muted-foreground, 0 0% 45%));
}
.ora-sb-trigger:hover{ color:hsl(var(--sc-foreground, 0 0% 10%)); background:hsl(var(--sc-accent, 0 0% 96%)); }
.ora-sb-trigger:focus-visible{ outline:none; box-shadow:var(--focus-ring, 0 0 0 2px hsl(var(--sc-ring, 0 0% 25%))); }
.ora-sep{ width:1px; height:18px; background:hsl(var(--sc-border, 0 0% 90%)); flex:0 0 auto; }
.ora-crumb{ display:flex; align-items:center; gap:8px; flex:1; min-width:0;
  font-size:var(--fs-sm, 13px); overflow:hidden; }
.ora-crumb-root{ color:hsl(var(--sc-muted-foreground, 0 0% 45%)); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ora-crumb-sep{ color:hsl(var(--sc-muted-foreground, 0 0% 45%)); flex:0 0 auto; }
.ora-crumb-leaf{ font-weight:var(--fw-semibold, 600); white-space:nowrap; }

/* ── THE MOBILE SHEET ─────────────────────────────────────────────
   Below the breakpoint the rail is an overlay OVER the content, not a
   column beside it — the same swap upstream makes with its Sheet. The
   inset goes to zero and the rail slides in from the left; the
   persisted desktop state does not decide whether the sheet is open
   (lib/app-shell-state.js, rule 2).
   ---------------------------------------------------------------- */
.ora-sb-scrim{ display:none; }
@media (max-width:767px){
  body[data-ora-shell],
  html[data-sidebar="collapsed"] body[data-ora-shell]{ padding-left:0; }
  .ora-sb,
  html[data-sidebar="collapsed"] .ora-sb{
    width:var(--ora-sb-w); transform:translateX(-100%);
    box-shadow:var(--shadow-lg, 0 10px 30px rgba(0,0,0,.35));
  }
  /* the sheet is always the FULL rail: an icon-only overlay would be a
     worse nav than the one it covers */
  html[data-sidebar-sheet="open"] .ora-sb{ transform:none; }
  html[data-sidebar-sheet="open"] .ora-nav-label,
  html[data-sidebar-sheet="open"] .ora-brand-text,
  html[data-sidebar-sheet="open"] .ora-tenant-label,
  html[data-sidebar-sheet="open"] .ora-tenant-caret,
  html[data-sidebar-sheet="open"] .ora-sb-grouplabel,
  html[data-sidebar-sheet="open"] .ora-sb-user-text{
    position:static; width:auto; height:auto; margin:0; overflow:visible;
    clip:auto; clip-path:none;
  }
  html[data-sidebar-sheet="open"] .ora-nav a,
  html[data-sidebar-sheet="open"] .ora-sb-user,
  html[data-sidebar-sheet="open"] .ora-tenant-btn,
  html[data-sidebar-sheet="open"] .ora-brand{ justify-content:flex-start; padding-left:8px; padding-right:8px; }
  html[data-sidebar-sheet="open"] .ora-nav::before{ content:none; }
  html[data-sidebar-sheet="open"] .ora-sb-head,
  html[data-sidebar-sheet="open"] .ora-sb-body,
  html[data-sidebar-sheet="open"] .ora-sb-foot{ padding-left:8px; padding-right:8px; }
  html[data-sidebar-sheet="open"] .ora-tenant-menu{ left:0; top:calc(100% + 6px); }
  html[data-sidebar-sheet="open"] .ora-sb-scrim{
    display:block; position:fixed; inset:0; z-index:310;
    background:hsl(var(--sc-foreground, 0 0% 10%) / .5);
  }
  .ora-shell{ padding:0 var(--space-md); }
  .ora-crumb-root{ display:none; }
  .ora-crumb-sep{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .ora-sb, body[data-ora-shell]{ transition:none; }
  .ora-mark{ filter:none; }
}

/* 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 10px 30px rgba(0,0,0,.6)); 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; }

/* The action tooltips in the notification list ride THE ONE tooltip component
   (components/info-tip.css, C1): data-tip words, data-tip-align for the edge each
   button sits on, data-tip-side="below" on the first row of a group so its bubble
   is not clipped by the popover's top edge. No private tooltip rules live here any
   more. The dismiss x stays position:absolute in its own corner (0,2,0, so the
   component's own position:relative never pulls it back into flow). */
.ora-notif-pop .ora-notif-act[data-tip]{ position:relative; }
.ora-notif-pop .ora-notif-x[data-tip]{ position:absolute; }
.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(--status-down); }  /* estate state scheme */
.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); }

/* 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));
  }
}

/* ── ONE ALTITUDE STATEMENT (2026-09-04, S1 tightening 2026-09-06) ──
   The consolidated view (every client of the operator's org) and the
   singular view (one client's lens) differed by accent colour alone. The
   band under the header is the ONE statement of the consolidated altitude;
   the rail's tenant switcher is the switcher; the header pill that said the
   same thing a third time is gone (polish standard S1). Band only, no hatch
   (SPINE's ruling on the first cut). Tokens only. */
.ora-altitude-band{
  display:flex; align-items:center; gap:10px;
  padding:6px var(--space-lg);
  font-family:var(--font-body); font-size:var(--fs-sm);
  color:hsl(var(--sc-foreground, 0 0% 10%));
  background:hsl(var(--sc-accent, 0 0% 96%));
  border-bottom:1px solid hsl(var(--sc-border, 0 0% 90%));
}
.ora-altitude-band[hidden]{ display:none; }
.ora-altitude-band .ic{ color:hsl(var(--sc-muted-foreground, 0 0% 45%)); }
.ora-altitude-band-word{ font-weight:var(--fw-semibold); letter-spacing:var(--ls-wide); text-transform:uppercase; font-size:var(--fs-xs); }
.ora-altitude-band-sub{ color:hsl(var(--sc-muted-foreground, 0 0% 45%)); }
@media (max-width:767px){
  .ora-altitude-band{ padding:6px var(--space-md); }
}

/* THE DOCK BAR'S ROOM (polish wave 13). Under 480px the assistant dock is a
   bar along the bottom edge (components/canonical/orbi/OrbiDock.css); the page
   keeps the same height free below its last block so nothing is hidden. */
@media (max-width:480px){
  body[data-ora-shell]{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}