/* ============================================================================
   App shell — left rail, top bar, page frame, state-preview switcher.
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: 'rail topbar' 'rail main';
  height: 100vh;
  transition: grid-template-columns var(--motion);
}
.shell[data-rail="collapsed"] { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }

/* ------------------------------------------------------------- left rail */
.rail {
  grid-area: rail; background: var(--surface); border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.rail-brand {
  display: flex; align-items: center; gap: var(--s2);
  height: var(--topbar-h); padding: 0 var(--s4); flex: none;
  border-block-end: 1px solid var(--border);
}
/* The mark is an <img> of the brand logo, which carries its own colour on a
   transparent ground — so this paints no background, no fill and no shadow. */
.rail-mark {
  width: 26px; height: 26px; flex: none;
  display: grid; place-content: center;
}
.rail-name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); letter-spacing: -0.01em; line-height: 1.15; }
.rail-sub { font-size: 10px; color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; }
.rail-nav { flex: 1; overflow-y: auto; padding: var(--s3) var(--s2) var(--s4); }
.rail-nav::-webkit-scrollbar { width: 8px; }
.rail-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid var(--surface); }
.rail-group { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--faint); padding: var(--s3) var(--s3) var(--s1); }
.rail-link {
  display: flex; align-items: center; gap: var(--s3);
  padding: 7px var(--s3); border-radius: var(--r); margin-block-end: 1px;
  color: var(--muted); font-size: var(--t-sm); font-weight: 500;
  text-decoration: none; cursor: pointer; position: relative; white-space: nowrap;
  transition: background var(--motion), color var(--motion);
}
.rail-link:hover { background: var(--surface-3); color: var(--fg); }
.rail-link svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.rail-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; }
[data-theme="dark"] .rail-link[aria-current="page"] { color: var(--accent); }
.rail-link[aria-current="page"] svg { opacity: 1; }
.rail-link[aria-current="page"]::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 7px; bottom: 7px;
  width: 2.5px; border-radius: var(--r-full); background: var(--accent);
}
.rail-count {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-full); background: var(--surface-3); color: var(--muted);
}
.rail-count.alert { background: var(--danger); color: #fff; }
/* No rail foot: the collapse control lives at the head of the top bar, so the
   navigation list runs the full height of the rail. */

.shell[data-rail="collapsed"] .rail-name, .shell[data-rail="collapsed"] .rail-sub,
.shell[data-rail="collapsed"] .rail-group, .shell[data-rail="collapsed"] .rail-link span,
.shell[data-rail="collapsed"] .rail-count { display: none; }
.shell[data-rail="collapsed"] .rail-link { justify-content: center; padding: 9px 0; }
.shell[data-rail="collapsed"] .rail-brand { justify-content: center; padding: 0; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  grid-area: topbar; display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4); background: var(--surface);
  border-block-end: 1px solid var(--border); z-index: var(--z-chrome);
}
.topbar .search { flex: 1; max-width: 460px; }
/* Tooltips in this bar used to be clipped by the top of the window. That is now
   handled generally: the shared tooltip layer flips below its trigger whenever
   there is no room above it, wherever the trigger sits. See .tip-layer. */
.bell { position: relative; }
.bell-dot {
  position: absolute; top: 5px; inset-inline-end: 5px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--danger); border: 1.5px solid var(--surface);
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--surface-3); border: 1px solid var(--border);
  display: grid; place-content: center;
  font-size: var(--t-xs); font-weight: 600; color: var(--muted);
}
.menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: var(--z-menu);
  min-width: 216px; padding: var(--s1); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg);
  animation: rise 150ms cubic-bezier(0.32,0.72,0,1);
}
.menu-item {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: 7px var(--s2); border: 0; border-radius: var(--r-sm); background: none;
  font-size: var(--t-sm); text-align: start; cursor: pointer; color: var(--fg);
}
.menu-item:hover { background: var(--surface-3); }
.menu-item svg { width: 15px; height: 15px; opacity: 0.7; }
.menu-sep { height: 1px; background: var(--border); margin: var(--s1) 0; }
.menu-head { padding: var(--s2); font-size: var(--t-xs); color: var(--faint); }

/* ------------------------------------------------------------------ main */
.shell-main { grid-area: main; overflow: auto; scroll-behavior: smooth; }
/* Working density. An ops user is here all day against a queue, not reading a
   marketing page: the gutter is tight enough that a wide table earns the width,
   and the top padding is small because the object header below supplies the
   band. */
.page {
  padding: var(--s3) var(--s6) var(--s8);
  /* Wide enough that a 1920 monitor is actually worked on rather than framed
     with dead gutters — an ops tool earns the width a queue needs. Still
     capped, so an ultrawide does not produce 3,000px of line length; prose
     stays measured by .page-title p and the card bodies. */
  max-width: 1760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s4);
}

/* --------------------------------------------------- object header -------
   The header of the record you are working on stays with you. Scroll a
   90-row queue and the title, the breadcrumb and — the part that matters —
   the primary actions are still there; you never scroll back up to approve
   something. It bleeds to the page gutter so nothing shows past its edges,
   and it condenses once you are past the top: the standfirst folds away and
   the title steps down, so the pinned band costs ~48px instead of ~92px. */
.page-head {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin: calc(var(--s3) * -1) calc(var(--s6) * -1) 0;
  padding: var(--s3) var(--s6);
  background: var(--bg);
  border-block-end: 1px solid transparent;
  transition: padding var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.shell-main[data-scrolled="true"] .page-head {
  border-block-end-color: var(--border);
  box-shadow: 0 6px 16px -12px oklch(0 0 0 / 0.45);
  padding-block: var(--s2);
}
/* The standfirst is orientation, not reference — it earns its space on arrival
   and gives it back once you are working. */
.shell-main[data-scrolled="true"] .page-title p { display: none; }
.shell-main[data-scrolled="true"] .page-title h1 { font-size: var(--t-h2); }
.page-title { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.page-title h1 { transition: font-size var(--t-fast) var(--ease-out); }
.page-title p { font-size: var(--t-sm); color: var(--muted); max-width: 72ch; }
/* A dialog or drawer must not have a page header showing through it. */
body:has(.scrim) .page-head, body:has(.drawer) .page-head { z-index: 0; }
@media (max-width: 760px) { .page { padding: var(--s4); } }

/* system-level strips */
.sysbar {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  padding: 7px var(--s4); font-size: var(--t-sm); font-weight: 500;
}
.sysbar-offline { background: var(--warning); color: oklch(0.20 0.04 75); }
.sysbar-degraded { background: var(--warning-soft); color: var(--warning); border-block-end: 1px solid color-mix(in oklch, var(--warning) 40%, transparent); }

/* -------------------------------------------------- state preview switch */
.state-switcher {
  position: fixed; inset-block-end: var(--s4); inset-inline-start: 50%;
  transform: translateX(-50%); z-index: var(--z-switch);
  display: flex; align-items: center; gap: var(--s1);
  padding: var(--s1); border-radius: var(--r-full);
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 32px); overflow-x: auto;
}
[dir="rtl"] .state-switcher { transform: translateX(50%); }
.state-switcher > label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--faint); padding-inline: var(--s2) var(--s1); white-space: nowrap;
}
.state-btn {
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 5px var(--s3); border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.015em; color: var(--muted);
  transition: background var(--motion), color var(--motion);
}
.state-btn:hover { background: var(--surface-3); color: var(--fg); }
.state-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); font-weight: 600; }

/* full-screen frames: crash boundary, permission wall, auth */
.frame {
  min-height: calc(100vh - var(--topbar-h)); display: grid; place-items: center; padding: var(--s8) var(--s6);
}
.frame-inner { max-width: 470px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.frame-glyph {
  width: 60px; height: 60px; border-radius: var(--r-lg); display: grid; place-content: center;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--muted);
}
.frame-glyph svg { width: 28px; height: 28px; }
.frame-glyph.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.frame-glyph.warn   { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.ref-code {
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--faint);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  user-select: all;
}

/* -------------------------------------------------------- responsive nav */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'topbar' 'main'; }
  .rail {
    /* Below a scrim on purpose: a dialog raised while this drawer is out
       must not end up behind it. */
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-rail);
    width: var(--rail-w); transform: translateX(-100%); box-shadow: var(--shadow-lg);
    transition: transform var(--motion);
  }
  [dir="rtl"] .rail { transform: translateX(100%); }
  .shell[data-rail="open"] .rail { transform: translateX(0); }
  .topbar .search { max-width: none; }
  .topbar .hide-sm { display: none; }
}