/* shell.css (P2.T2.S1): the frame every page except the sign-in screen sits in (02 "The shell", "Shell parts and panels").
   Tokens only (L-01), logical properties only (L-04), a shadow only on overlays (L-03). Layout:

     +--------+----------------------------------------------+
     | brand  | top bar                                      |   --size-topbar
     +--------+----------------------------------------------+
     | rail   | page: main (width cap), context rail         |
     +--------+----------------------------------------------+

   The rail's mode is set by shell.js on the root as data-rail-mode="expanded | collapsed | drawer", from the user's collapse
   choice and the four breakpoints (wide 1440, standard 1280, narrow 1024, tablet 768), and --rail-w follows it: 232, 64 or 0.
   --rail-w is the one value outside components that must exist at the root, because the toast clears the rail with it. */

:root { --rail-w: var(--size-rail); }
:root[data-rail-mode="collapsed"] { --rail-w: var(--size-rail-collapsed); }
:root[data-rail-mode="drawer"] { --rail-w: 0; }

/* Pages with a sticky tab bar move the root's scroll padding down by the tab bar (base.css reads --sticky-offset). */
:root:has(main[data-sticky-tabs]) { --sticky-offset: calc(var(--size-topbar) + var(--size-tab)); }
main { --sticky-offset: var(--size-topbar); }
main[data-sticky-tabs] { --sticky-offset: calc(var(--size-topbar) + var(--size-tab)); }

html[data-scroll-lock] { overflow: hidden; }

/* Dates, times and numbers keep their own direction inside right-to-left text (02 Right-to-left): a <time> isolates itself and reads
   its direction from its first strong character, so "21 Oct 2026, 09:30" stays in order. */
time { unicode-bidi: plaintext; }

/* ---------------------------------------------------------------- skip link */

/* Hidden until focused, then the first thing on the page (WCAG 2.4.1). Built on .visually-hidden in the markup. */
.skip-link:focus {
  position: fixed;
  inset-inline-start: var(--space-5);
  inset-block-start: var(--space-3);
  z-index: var(--z-tooltip);
  inline-size: auto;
  block-size: auto;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  color: var(--text);
  font: var(--type-button);
}

/* ---------------------------------------------------------------- the grid */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: var(--size-topbar) auto;
  align-items: start;
}

.shell__header { display: contents; }

.shell__brand {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-shell);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-topbar);
  padding-inline: var(--space-5);
  background: var(--surface);
  border-block-end: var(--border-width) solid var(--border);
  border-inline-end: var(--border-width) solid var(--border);
  overflow: hidden;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  color: var(--text);
  font: var(--type-sub);
  text-decoration: none;
}
.brand-link:hover { text-decoration: none; }
.brand-link .logo-mark { flex: none; block-size: var(--size-logo); inline-size: var(--size-logo); color: var(--brand); }
.brand-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-shell);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-topbar);
  padding-inline: var(--space-5);
  background: var(--surface);
  border-block-end: var(--border-width) solid var(--border);
}
.topbar__spacer { flex: 1 1 auto; min-inline-size: 0; }
.topbar__group { display: flex; align-items: center; gap: var(--space-3); }
.topbar__group + .topbar__group { margin-inline-start: var(--space-2); }

.page {
  grid-column: 2;
  grid-row: 2;
  min-inline-size: 0;
  min-block-size: calc(100dvh - var(--size-topbar));
  background: var(--canvas);
}

/* ---------------------------------------------------------------- the main column and its three width caps */

.page__main {
  display: block;
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--space-7);
  padding-block: var(--space-7) var(--space-10);
}
.page__main[data-width="list"] { max-inline-size: var(--size-list-max); }
.page__main[data-width="overview"] { max-inline-size: var(--size-overview-max); }
.page__main[data-width="content"] { max-inline-size: var(--size-content-max); }

/* Page header block, top to bottom: breadcrumbs, title row, key facts, banners, tabs (02). */
.page-head { display: grid; gap: var(--space-5); margin-block-end: var(--space-8); }
.page-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); min-block-size: var(--space-9); }
.page-title-row h1 { min-inline-size: 0; overflow-wrap: anywhere; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Regions: the structure is hairlines on one surface, never floating cards (02 principle 2). */
.regions { display: grid; gap: var(--space-7); }
.region {
  min-inline-size: 0;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-region);
  overflow: hidden;
}
.region__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--size-toolbar);
  padding-inline: var(--space-5);
  border-block-end: var(--border-width) solid var(--border);
}
.region__head h2 { font: var(--type-section); }
.region__body { padding: var(--space-5); }

/* The 12-column body grid with a 24 px gutter. A column is `span-N` (1 to 12). */
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7); }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

/* Body plus the optional context rail. Wide (1440 and up): the rail sits beside the body in its own 320 px track, sticky.
   Below wide it is an ordinary region under the body, full width, in the same order (02 breakpoints). */
.page-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.context-rail { min-inline-size: 0; display: grid; gap: var(--space-7); align-content: start; }
@media (width >= 1440px) {
  .page-body[data-rail="true"] { grid-template-columns: minmax(0, 1fr) var(--size-context-rail); }
  .context-rail {
    position: sticky;
    inset-block-start: calc(var(--sticky-offset) + var(--space-7));
    max-block-size: calc(100dvh - var(--sticky-offset) - var(--space-7));
    overflow-y: auto;
    padding-inline-start: var(--space-5);
    border-inline-start: var(--border-width) solid var(--border);
    z-index: var(--z-sticky);
  }
}

/* ---------------------------------------------------------------- the nav rail */

.rail {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  inset-block-start: var(--size-topbar);
  align-self: start;
  block-size: calc(100dvh - var(--size-topbar));
  z-index: var(--z-shell);
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  background: var(--surface);
  border-inline-end: var(--border-width) solid var(--border);
}
.rail__drawer-head { display: none; }
.rail__nav { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: var(--space-3); }
.rail__nav :focus-visible,
.rail__foot :focus-visible { outline-offset: calc(-1 * var(--border-width-thick)); }
.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.rail__list li { max-inline-size: none; }
.rail__foot {
  flex: none;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-block-start: var(--border-width) solid var(--border);
}
.rail__foot ul { list-style: none; margin: 0; padding: 0; }
.rail__foot li { max-inline-size: none; }

/* A nav item: 40 tall, 12 inline padding, 12 gap, 20 icon, label in --type-button. The 3 px marker is drawn with
   border-inline-start, reserved transparent on every item so nothing shifts. */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--space-9);
  padding-inline: var(--space-4);
  border: 0;
  border-inline-start: var(--border-width-accent) solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-button);
  text-decoration: none;
  inline-size: 100%;
  text-align: start;
  cursor: pointer;
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav-item[aria-current] { background: var(--brand-subtle); color: var(--text); border-inline-start-color: var(--brand); }
.nav-item .icon { flex: none; inline-size: var(--icon-md); block-size: var(--icon-md); }
/* The Approvals item's Count badge: at the inline-end of the row when expanded, on the icon's corner when collapsed (CL-151). */
.nav-item { position: relative; }
.nav-item__badge { flex: none; margin-inline-start: auto; }
.nav-item__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Collapsed (64): icons only, the label stays in the DOM for the accessible name and is visually hidden. */
:root[data-rail-mode="collapsed"] .nav-item { justify-content: center; padding-inline: 0; }
:root[data-rail-mode="collapsed"] .nav-item__badge { position: absolute; inset-block-start: 0; inset-inline-end: 0; margin: 0; pointer-events: none; }
:root[data-rail-mode="collapsed"] .nav-item .nav-item__label,
:root[data-rail-mode="collapsed"] .role__text {
  position: absolute;
  inline-size: var(--border-width);
  block-size: var(--border-width);
  margin: calc(-1 * var(--border-width));
  padding: 0;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
}
:root[data-rail-mode="collapsed"] .brand-link span,
:root[data-rail-mode="collapsed"] .role__chevron,
:root[data-rail-mode="collapsed"] .role__caption { display: none; }
:root[data-rail-mode="collapsed"] .shell__brand { padding-inline: 0; justify-content: center; }

/* The collapse button is only offered where the rail has a choice: wide and standard widths. */
:root[data-rail-mode="drawer"] .rail__collapse,
:root[data-narrow="true"] .rail__collapse { display: none; }

/* The role switcher ("View as", labelled Demo) is the last block of the rail above the collapse button. */
.role { display: grid; gap: var(--space-2); }
.role__caption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-inline: var(--space-4); color: var(--text-secondary); font: var(--type-label); }
.role__caption span:last-child { font: var(--type-caption); color: var(--text-muted); }
.role__button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: var(--space-9);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  text-align: start;
}
.role__button:hover { background: var(--surface-hover); }
.role__text { display: grid; min-inline-size: 0; flex: 1 1 auto; }
.role__name { font: var(--type-button); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role__title { font: var(--type-caption); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role__chevron { flex: none; color: var(--text-secondary); }
:root[data-rail-mode="collapsed"] .role__button { justify-content: center; padding-inline: 0; }
:root[data-rail-mode="collapsed"] .role__avatar { display: none; }
.role__icon { display: none; }
:root[data-rail-mode="collapsed"] .role__icon { display: block; }

/* ---------------------------------------------------------------- nav drawer (tablet and below) */

:root[data-rail-mode="drawer"] .shell { grid-template-columns: minmax(0, 1fr); }
:root[data-rail-mode="drawer"] .shell__brand { display: none; }
:root[data-rail-mode="drawer"] .topbar { grid-column: 1; }
:root[data-rail-mode="drawer"] .page { grid-column: 1; }
:root[data-rail-mode="drawer"] .rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--size-rail);
  block-size: auto;
  z-index: var(--z-drawer);
  visibility: hidden;
  transform: translateX(calc(-1 * 100%));
  transition: transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
}
:root[dir="rtl"][data-rail-mode="drawer"] .rail { transform: translateX(100%); }
:root[data-rail-mode="drawer"] .rail[data-state="open"] {
  visibility: visible;
  transform: none;
  transition: transform var(--duration-base) var(--ease-standard);
  box-shadow: var(--shadow-overlay);
  border-start-end-radius: var(--radius-overlay);
  border-end-end-radius: var(--radius-overlay);
}
:root[dir="rtl"][data-rail-mode="drawer"] .rail[data-state="open"] { transform: none; }
:root[data-rail-mode="drawer"] .rail[data-state="closing"] { visibility: visible; transform: translateX(calc(-1 * 100%)); transition: transform var(--duration-fast) var(--ease-standard); }
:root[dir="rtl"][data-rail-mode="drawer"] .rail[data-state="closing"] { transform: translateX(100%); }
:root[data-rail-mode="drawer"] .rail__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: none;
  min-block-size: var(--size-topbar);
  padding-inline: var(--space-5);
  border-block-end: var(--border-width) solid var(--border);
}

/* ---------------------------------------------------------------- top bar parts */

/* Programme switcher trigger: 36 tall, 200 to 280 wide, dot, name, chevron. */
.switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-control);
  min-inline-size: var(--size-field-short);
  max-inline-size: var(--size-field-mid);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: var(--type-body);
  text-align: start;
}
.switcher:hover { border-color: var(--text-secondary); background: var(--surface-hover); }
.switcher__name { min-inline-size: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher .icon:last-child { flex: none; color: var(--text-secondary); }

/* Search trigger: looks like an input, 36 tall, 360 wide at wide and standard widths. */
.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 1 var(--size-popover-md);
  min-inline-size: var(--size-control);
  min-block-size: var(--size-control);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text-muted);
  font: var(--type-body);
  text-align: start;
}
.search-trigger:hover { border-color: var(--text-secondary); }
.search-trigger .icon { color: var(--text-secondary); }
.search-trigger__text { flex: 1 1 auto; }

/* The Keyboard hint (keyboard-hint.css), the Avatar (avatar.css) and the Count badge (count-badge.css) are primitives; the user button only frames the avatar. */
.user-btn { display: inline-flex; padding: 0; border: 0; border-radius: var(--radius-round); background: transparent; }
.user-btn:hover .avatar { background: var(--surface-hover); }

/* Hamburger shows from tablet down only. */
[data-component="icon-button"].topbar__menu { display: none; }
:root[data-rail-mode="drawer"] [data-component="icon-button"].topbar__menu { display: inline-flex; }

/* ---------------------------------------------------------------- narrower widths (02 responsive table) */

@media (width < 1024px) {
  .search-trigger { flex: none; inline-size: var(--size-control); padding-inline: 0; justify-content: center; }
  .search-trigger__text,
  .search-trigger .keyboard-hint { display: none; }
  .page__main { padding-inline: var(--space-5); }
}
@media (width < 768px) {
  .switcher { min-inline-size: 0; padding-inline: var(--space-3); }
  .switcher__name { display: none; }
  .topbar { padding-inline: var(--space-3); gap: var(--space-2); }
  .topbar__group + .topbar__group { margin-inline-start: 0; }
}

/* ---------------------------------------------------------------- overlay layers (scripts/components/_overlay.js) */

#overlay-root { display: contents; }

.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.scrim[data-scrim="drawer"] { z-index: var(--z-scrim-drawer); }
.scrim[data-scrim="dialog"] { z-index: var(--z-scrim-dialog); }
.scrim[data-state="open"] { opacity: 1; }
.scrim[data-state="closing"] { opacity: 0; transition-duration: var(--duration-fast); }

[data-overlay="drawer"] { z-index: var(--z-drawer); }
[data-overlay="dialog"] { z-index: var(--z-dialog); }

/* A popover is placed by the manager through --pop-x and --pop-y (the start edge and block start from the viewport). */
[data-overlay="popover"] {
  position: fixed;
  inset-block-start: var(--pop-y, 0);
  inset-inline-start: var(--pop-x, 0);
  z-index: var(--z-popover);
  max-inline-size: calc(100% - 2 * var(--size-viewport-gutter));
  max-block-size: calc(100dvh - 2 * var(--size-viewport-gutter));
  overflow: auto;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
[data-overlay="popover"][data-state="open"] { opacity: 1; }
[data-overlay="popover"][data-state="closing"] { opacity: 0; transition-duration: var(--duration-fast); }

/* The shell's panel popovers (programme switcher, View as, account, approvals tray) are the Menu and popover component's panel variant
   (menu.css draws the surface); the .shell-popover class only names their content. The sections below size each one (02 Shell parts). */
[data-component="menu"][data-variant="panel"].shell-popover { padding: var(--space-2); gap: var(--space-1); }
[data-component="menu"][data-variant="panel"][data-panel="Account"] { inline-size: var(--size-context-rail); }
.shell-popover .panel-body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.shell-popover .menu__body { gap: var(--space-1); }
.shell-popover__title { padding: var(--space-3) var(--space-4); color: var(--text-secondary); font: var(--type-label); }
.shell-popover__section { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.shell-popover__identity { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.shell-popover__identity-text { display: grid; min-inline-size: 0; }
.shell-popover__identity-name { font: var(--type-button); }
.shell-popover__identity-role { font: var(--type-caption); color: var(--text-secondary); }
.shell-popover__label { font: var(--type-label); color: var(--text-secondary); }
.shell-popover :focus-visible { outline-offset: calc(-1 * var(--border-width-thick)); }
.shell-popover [data-component="divider"], .shell-popover .divider { margin-block: var(--space-1); }

/* A row in a radio list: 40 tall, mark, optional dot, label, optional caption, optional chip at the inline-end. */
.option-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  inline-size: 100%;
  min-block-size: var(--space-9);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: var(--type-body);
  text-align: start;
}
.option-row:hover { background: var(--surface-hover); }
.option-row[aria-checked="true"] { background: var(--brand-subtle); }
.option-row__text { display: grid; min-inline-size: 0; flex: 1 1 auto; }
.option-row__caption { font: var(--type-caption); color: var(--text-secondary); }
.option-row__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-checkbox);
  block-size: var(--size-checkbox);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-round);
  background: var(--surface);
}
.option-row[aria-checked="true"] .option-row__mark { border-color: var(--brand); background: var(--brand); }
.option-row[aria-checked="true"] .option-row__mark::after { content: ""; inline-size: var(--space-3); block-size: var(--space-3); border-radius: var(--radius-round); background: var(--brand-contrast); }

/* The Menu inside the account panel: items are the Menu component's (32 tall); it needs no surface of its own there. */
.shell-popover [data-component="menu"][data-variant="action"] { position: static; inline-size: auto; padding: 0; border: 0; box-shadow: none; background: transparent; opacity: 1; }

/* Approvals tray (02 Shell parts): 480, header 48 tall, a scrolling body of approval items. The popover itself is capped at the tray height. */
[data-component="menu"][data-variant="panel"][data-panel="Approvals waiting for you"] {
  padding: 0;
  gap: 0;
  grid-template-rows: auto minmax(0, 1fr);
  max-block-size: min(var(--size-tray-max-h), calc(100dvh - var(--size-topbar) - var(--space-5)));
  overflow: hidden;
}
[data-panel="Approvals waiting for you"] .panel-body { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; min-block-size: 0; max-block-size: inherit; }
[data-panel="Approvals waiting for you"] .menu__body { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; min-block-size: 0; }
.tray__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--space-10); padding-inline: var(--space-5); border-block-end: var(--border-width) solid var(--border); }
.tray__title { margin: 0; font: var(--type-sub); }
.tray__count { color: var(--text-secondary); font-variant-numeric: tabular-nums lining-nums; }
.tray__all { font: var(--type-button); }
.tray__body { display: grid; align-content: start; min-block-size: 0; overflow-y: auto; }
.tray__body > [data-component="approval-item"] + [data-component="approval-item"] { border-block-start: var(--border-width) solid var(--border); }

/* Notifications drawer entries (02 Shell parts): at least 72 tall, an unread dot at the inline-start, a 20 px type icon, title, detail, time and link. */
.notice-filter { padding: var(--space-5); border-block-end: var(--border-width) solid var(--border); }
.notice-list { list-style: none; margin: 0; padding: 0; display: block; }
.notice { display: grid; grid-template-columns: var(--size-dot) var(--icon-md) minmax(0, 1fr); align-items: start; gap: var(--space-4); min-block-size: calc(var(--space-9) + var(--space-8)); padding: var(--space-5); border-block-end: var(--border-width) solid var(--border); max-inline-size: none; }
.notice__dot { align-self: center; inline-size: var(--size-dot); block-size: var(--size-dot); border-radius: var(--radius-round); background: transparent; }
.notice__dot[data-present="true"] { background: var(--brand); }
.notice__icon { color: var(--text-secondary); display: inline-flex; }
.notice__text { display: grid; gap: var(--space-1); min-inline-size: 0; }
.notice__title { margin: 0; font: var(--type-body); font-weight: 500; max-inline-size: none; }
.notice__detail { margin: 0; font: var(--type-caption); color: var(--text-secondary); max-inline-size: none; }
.notice__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); font: var(--type-caption); color: var(--text-secondary); }
.notice__link { font: var(--type-caption); }
.notice-region[data-state="error"] { padding: var(--space-5); }
.notice-footer__link { font: var(--type-body); }

/* Sign-in screen (02 Shell parts and panels): no shell; --canvas, one column of --size-signin, no shadow; the form region is a surface. */
.signin-page { background: var(--canvas); }
.signin-page main { display: flex; justify-content: center; padding-block-start: var(--offset-signin); padding-inline: var(--space-5); padding-block-end: var(--space-9); }
.signin__column { inline-size: var(--size-signin); max-inline-size: 100%; }
.signin__region { display: grid; gap: var(--space-7); padding: var(--space-8); background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-region); }
.signin__banners { display: grid; gap: var(--space-3); }
.signin__banners:empty { display: none; }
.signin__logo .logo-mark { block-size: var(--size-logo-lg); inline-size: var(--size-logo-lg); color: var(--brand); }
.signin__title { font: var(--type-page); margin: 0; }
.signin__lead { margin: 0; color: var(--text-secondary); font: var(--type-body); max-inline-size: none; }
.signin__org { margin: 0; font: var(--type-body); max-inline-size: none; }
.signin__actions { display: grid; gap: var(--space-3); }
[data-component="button"].signin__primary, [data-component="button"].signin__secondary { inline-size: 100%; }
[data-component="button"].signin__primary { min-block-size: var(--space-9); }
.signin__operator { margin: 0; color: var(--text-secondary); font: var(--type-caption); max-inline-size: none; }

/* Context rail blocks (02 The shell): Waiting-for-approval summary, Trace, five-entry activity preview. */
.context-rail__block { display: grid; gap: var(--space-4); padding-block: var(--space-5); border-block-end: var(--border-width) solid var(--border); }
.context-rail__block:last-child { border-block-end: 0; }
.context-rail__title { font: var(--type-sub); margin: 0; }
.context-rail__text { margin: 0; font: var(--type-body); max-inline-size: none; }
.context-rail__text--quiet { color: var(--text-secondary); }