/*
 * CertaRounds — app shell styles (src/app/shell.js, src/core/app.js, src/core/keys.js).
 * Shell chrome only; screens style themselves in src/styles/screens/<name>.css.
 * Semantic tokens only — no raw colours. Layout primitives live in layout.css.
 *
 * Chrome v2 = design/reference/desktop-dashboard.webp (measured ≈ 1:1 at 1440): sidebar ~215 wide
 * with 44px items on a ~54px pitch and a brand card at the foot; a 68px white top bar across the
 * content (search field + ⌘K chip · bell · divider · user chip). Phone = screens-restrained.webp.
 */

/* ============ Shell metrics ============ */
.shell {
  --sidebar-w: 224px;            /* mockup ≈ 215; brief §3 said 248 before §13.4 */
  --deskbar-h: 68px;
}
@media (min-width: 1024px) {
  html { scroll-padding-top: 84px; }        /* keyboard focus never hides under the sticky bar */
}
/* Phones: the fixed bottom tab bar must never cover the focused element (WCAG 2.2 SC 2.4.11, R4 c3).
   Focus screens (session, mock) hide the tab bar; their action bars pad themselves (layout.css, mock.css). */
@media (max-width: 767px) {
  html:has(> body > .shell:not([data-mode="focus"])) {
    scroll-padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
  }
  html:has(> body > .shell:not([data-mode="focus"]) .action-bar) {
    scroll-padding-bottom: calc(var(--tabbar-h) + var(--action-bar-h, 72px) + var(--safe-bottom) + 8px);
  }
}

/* ============ Boot, noscript, fatal ============ */
.app-boot {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--bg);
}
.app-boot__mark { width: 56px; height: 56px; border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.app-boot__text { color: var(--text-2); font-size: var(--fs-15); }

.app-noscript, .app-fatal {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(var(--sp-9) + var(--safe-top)) var(--gutter) var(--sp-9);
}
.app-noscript h1 { font-size: var(--fs-24); margin-bottom: var(--sp-3); }
.app-noscript p { color: var(--text-2); }

/* ============ Header (bar + optional progress + demo strip) ============ */
.app-header {
  height: auto;
  min-height: calc(var(--topbar-h) + var(--safe-top));
}
.app-header.is-strip-only { min-height: 0; padding-top: calc(var(--safe-top) + var(--sp-2)); }
/* Focus screens use the design system's TopBar: equal sides keep the title optically centred. */
.app-header .topbar__side { flex: 1 1 0; min-width: max-content; }
.app-header .topbar__center { flex: 0 1 auto; }
/* Focus-screen progress track: fully inside the opaque header with 8px of header under it. A bottom
   margin here collapsed out of the header (so scrolling text met the track); padding can't. */
.app-header .topbar-progress { margin-bottom: 0; }
.app-header.has-progress { padding-bottom: var(--sp-2); }
.app-header.has-progress.has-demo { padding-bottom: 0; }                 /* the strip brings its own */
.app-header .topbar-progress + .app-demo-strip { padding-top: var(--sp-2); }

/* Demo data: a slim strip under the phone / focus bar (DS5), a pill inside the desk bar. */
.app-demo-strip {
  display: flex; justify-content: center;
  padding: 2px 0 var(--sp-2);
}
.app-demo-strip .badge--demo, .app-bar-demo .badge--demo { cursor: pointer; }
.app-demo-strip .badge--demo:focus-visible,
.app-bar-demo .badge--demo:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-bar-demo { display: flex; margin-right: var(--sp-1); }

/* ============ Shared bar controls ============ */
.app-iconbtn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  color: var(--text);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.app-iconbtn:hover { background: var(--surface-hover); color: var(--text-strong); }
.app-iconbtn:active { background: var(--surface-pressed); }
.app-iconbtn[aria-expanded="true"] { background: var(--surface-hover); color: var(--text-strong); }
.app-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.app-bell__badge {
  position: absolute; top: 5px; left: 23px;
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);             /* counts are calm: violet; red only when something is urgent */
  color: var(--primary-fg);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}
.app-bell__badge.is-urgent { background: var(--danger); color: var(--danger-fg); }
.app-bell__badge[hidden] { display: none; }

.app-avatar {
  --av: 40px;
  display: inline-grid; place-items: center;
  width: var(--av); height: var(--av); flex: 0 0 var(--av);
  border-radius: 50%;
  background: var(--primary-gradient);
  color: var(--primary-fg);
  font-size: calc(var(--av) * .38);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  user-select: none;
}
.app-avatar-link {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  text-decoration: none;
}
.app-avatar-link:hover .app-avatar { box-shadow: 0 0 0 3px var(--accent-soft); }
.app-avatar-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============ Phone bar: ☰ · logo · bell + avatar ============ */
.app-bar {
  display: flex; align-items: center; gap: var(--sp-1);
  height: var(--topbar-h);
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
}
.app-bar__side { display: flex; align-items: center; gap: 2px; flex: 1 1 0; min-width: max-content; }
.app-bar__side--end { justify-content: flex-end; }
.app-bar__center { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.app-bar__title {
  font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-bar__brand { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border-radius: 10px; }
.app-bar__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============ 44px targets (WCAG 2.5.8 / brief §9) ============ */
/* The skip link (base.css) is 39px tall; the shell renders it, so the shell sizes it. */
.shell > .skip-link { display: inline-flex; align-items: center; min-height: 44px; }
/* Logo links in focus-screen bars (CR.ui.TopBar) and the drawer: a 44px hit area around a 26px logo. */
.app-header .topbar__brand, .app-drawer__brand { align-items: center; min-height: 44px; padding: 0 4px; }
/* Small pills keep their look; an invisible halo brings the hit area to 44px. */
.app-demo-strip .badge--demo, .app-bar-demo .badge--demo, .app-ntf__markall { position: relative; }
.app-bar-demo .badge--demo::after { content: ''; position: absolute; inset: -9px -2px; }
/* Under the phone bar the halo grows mostly downward (26 + 7 + 11 = 44 px), so it never covers the
   brand link above it (R4 c2: it took the link's bottom 3 px). */
.app-demo-strip .badge--demo::after { content: ''; position: absolute; inset: -7px -2px -11px; }
.app-ntf__markall::after { content: ''; position: absolute; inset: -4px 0; }

/* ============ Desk bar (tablet + desktop): search · demo · bell | user chip ============ */
.shell[data-header="desk"] .app-header {
  min-height: var(--deskbar-h);
  padding-left: 0; padding-right: 0;
  box-shadow: 0 1px 0 var(--divider);
}
.shell[data-header="desk"] .app-header.is-scrolled { box-shadow: 0 1px 0 var(--divider), 0 6px 16px -12px rgba(16, 27, 77, .18); }
@media (min-width: 1024px) {
  /* layout.css hides the top bar at ≥1024; v2 keeps it across the content (BUILD_BRIEF §13.4). */
  .shell:not([data-mode="focus"]) .shell__topbar:not([hidden]) { display: block; }
}

.app-deskbar {
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--deskbar-h);
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.app-deskbar--tablet { --deskbar-h: 64px; max-width: none; gap: var(--sp-3); }
.app-deskbar__lead { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; margin-left: calc(-1 * var(--sp-2)); }
.app-deskbar__lead--back { margin-left: calc(-1 * var(--sp-3)); }
/* Tablet titled bar: ‹ Title stays compact, the search field takes the rest (same field as sibling pages). */
.app-deskbar__lead--titled { flex: 0 0 auto; max-width: 38%; }            /* the title keeps its width; the field gives way */
.app-deskbar__lead--titled .app-bar__title { min-width: 0; }
.app-deskbar--tablet .app-deskbar__lead--titled + .app-search { flex: 1 1 auto; max-width: 360px; }
.app-backlink {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 14px 0 8px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: var(--fs-15); font-weight: var(--fw-medium);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.app-backlink:hover { background: var(--surface-hover); color: var(--text-strong); }
.app-backlink:active { background: var(--surface-pressed); }
.app-backlink:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-deskbar__end { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex-shrink: 0; }
.app-deskbar__divider { width: 1px; height: 32px; background: var(--divider); margin: 0 var(--sp-2); }

/* Search: a field-shaped trigger that opens Search (the Search screen owns the real input). */
.app-search {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 572px; min-width: 0;
  height: 44px;
  padding: 0 8px 0 14px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-3);
  font-size: var(--fs-15);
  text-align: left;
  transition: box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.app-search:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-hover); }
button.app-search:active { background: var(--surface-hover); }
.app-search:focus-visible,
.app-search:focus-within { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-hover), var(--focus-ring); }
/* The desk bar's field is a real input (Enter or a pause → #/search?q=…). */
form.app-search { cursor: text; margin: 0; }
.app-search__input {
  flex: 1 1 auto; min-width: 0;
  height: 100%;
  padding: 0;
  border: 0; border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit; font-size: var(--fs-15);
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.app-search__input::placeholder { color: var(--text-3); opacity: 1; }
.app-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.app-search:focus-within .app-search__kbd { display: none; }
.app-search__icon { flex-shrink: 0; color: var(--text-2); }
.app-search__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-search__kbd {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  line-height: 1.3;
  white-space: nowrap;
}
@media (hover: none) { .app-search__kbd { display: none; } }

/* User chip: avatar · name + training level · chevron → account menu */
.app-userchip {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 48px; max-width: 280px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  color: var(--text);
  text-align: left;
  transition: background var(--dur-1) var(--ease-out);
}
.app-userchip:hover, .app-userchip[aria-expanded="true"] { background: var(--surface-hover); }
.app-userchip.is-current { background: var(--nav-indicator); }
.app-userchip.is-current .app-userchip__name, .app-userchip.is-current .app-userchip__chev { color: var(--nav-active); }
.app-userchip:active { background: var(--surface-pressed); }
.app-userchip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-userchip__body { display: flex; flex-direction: column; min-width: 0; }
.app-userchip__name, .app-userchip__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-userchip__name { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; letter-spacing: -0.005em; }
.app-userchip__sub { font-size: var(--fs-13); color: var(--text-3); line-height: 1.35; }
.app-userchip__chev { flex-shrink: 0; color: var(--text-2); transition: transform var(--dur-2) var(--ease-out); }
.app-userchip[aria-expanded="true"] .app-userchip__chev { transform: rotate(180deg); }
/* Tablet: avatar + chevron only (the name and training level head the menu); the accessible name
   still carries both. */
.app-deskbar--tablet .app-userchip { gap: 6px; padding: 4px 8px 4px 4px; }
.app-deskbar--tablet .app-userchip__body { display: none; }

/* ============ Sidebar (≥1024) ============ */
.app-side {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  padding: var(--sp-6) 14px var(--sp-5);
  overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--surface) 40%, var(--surface-2) 100%);
}
.app-side__brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  align-self: flex-start;
  padding: 4px 10px;
  margin-bottom: var(--sp-7);
  border-radius: 10px;
  text-decoration: none;
}
.app-side__brand:hover { text-decoration: none; }
.app-side__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-side__tagline {
  margin-left: 33px;             /* aligned with the wordmark of a 28px lockup */
  font-size: 11.5px; font-style: italic;
  color: var(--text-3);
  letter-spacing: .01em;
  line-height: 1.2;
}
.app-side__list, .app-rail__list { list-style: none; margin: 0; padding: 0; }
.app-side__list { display: flex; flex-direction: column; gap: 10px; }

.app-nav { text-decoration: none; }
.app-nav:hover { text-decoration: none; }
.app-nav__icon { display: grid; place-items: center; flex-shrink: 0; }

.app-nav--side {
  display: flex; align-items: center; gap: 14px;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border-radius: 12px;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.app-nav--side .app-nav__icon { color: var(--text-2); }
.app-nav--side .app-nav__label { flex: 1 1 auto; min-width: 0; }
.app-nav--side:hover { background: var(--surface-hover); color: var(--text-strong); }
.app-nav--side:hover .app-nav__icon { color: var(--text); }
.app-nav--side:active { background: var(--surface-pressed); }
.app-nav--side[aria-current="page"] { background: var(--nav-indicator); color: var(--nav-active); font-weight: var(--fw-semibold); }
.app-nav--side[aria-current="page"] .app-nav__icon { color: var(--nav-active); }
.app-nav--side:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-nav__count {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* Brand card at the sidebar foot: quiet, drawn — a gem, the logo's arc, one line. */
.app-brandcard {
  position: relative;
  overflow: hidden;
  margin-top: auto;
  min-height: 184px;
  padding: var(--sp-5) 18px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-3);
  border-radius: 18px;
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--accent-soft) 100%);
  box-shadow: inset 0 0 0 1px var(--border);
}
.app-side__nav { margin-bottom: var(--sp-7); }
.app-brandcard__art {
  position: absolute; top: -22px; right: -30px;
  width: 136px; height: 136px;
  color: var(--accent);
  opacity: .14;
  pointer-events: none;
}
.app-brandcard__arcs { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; }
.app-brandcard__gem { position: absolute; top: 18px; left: 16px; line-height: 0; }
.app-brandcard__text {
  position: relative;
  max-width: 14ch;
  font-size: var(--fs-15); font-weight: var(--fw-semibold);
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--text-strong);
}
.app-brandcard__rule { width: 28px; height: 3px; border-radius: 2px; background: var(--accent); }
@media (max-height: 760px) { .app-brandcard { display: none; } }
@media (max-height: 640px) { .app-side__list { gap: 2px; } .app-side__brand { margin-bottom: var(--sp-5); } }

/* ============ Icon rail (768–1023) ============ */
.app-rail {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100%;
  padding: var(--sp-4) 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.app-rail__brand { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--sp-3); border-radius: 12px; }
.app-rail__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-rail__list { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.app-rail__foot { margin-top: auto; padding-top: var(--sp-3); }
.app-nav--rail {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 64px; padding: 6px 0;
  border-radius: 12px;
  color: var(--nav-fg);
  font-size: 11px; font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
}
.app-nav--rail .app-nav__icon { position: relative; width: 52px; height: 32px; border-radius: 16px; transition: background var(--dur-2) var(--ease-out); }
.app-nav--rail:hover { color: var(--text); }
.app-nav--rail:hover .app-nav__icon { background: var(--surface-hover); }
.app-nav--rail[aria-current="page"] { color: var(--nav-active); font-weight: var(--fw-semibold); }
.app-nav--rail[aria-current="page"] .app-nav__icon { background: var(--nav-indicator); }
.app-nav--rail:focus-visible { outline: none; }
.app-nav--rail:focus-visible .app-nav__icon { box-shadow: var(--focus-ring); }
/* On the pill's top-right corner: clear of the 22px glyph (icon spans x 15–37 of the 52px pill; a two-digit
   badge starts at x 38) — R3 c3/c4. No white ring on the selected pill, so it never reads as clipped (R2 c3). */
.app-nav__pip {
  position: absolute; top: -6px; left: auto; right: -8px;
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--primary); color: var(--primary-fg);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface);
}
.app-nav--rail[aria-current="page"] .app-nav__pip { box-shadow: none; }   /* no white halo on the lavender pill */

/* ============ Phone tab bar (ul > li > a; looks from components.css .tabbar) ============ */
.app-tabbar { list-style: none; margin: 0 auto; padding: 0; }
.app-tabbar__cell { display: flex; min-width: 0; }
.app-tabbar__cell > .tabbar__item { flex: 1 1 auto; min-width: 0; }

/* ============ Popover + menu (CR.app.popover / CR.app.menu) ============ */
.app-popover {
  position: fixed; top: 0; left: 0;
  z-index: calc(var(--z-overlay) - 1);
  max-width: calc(100vw - 16px);
  overflow: auto; overscroll-behavior: contain;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--border), var(--shadow-raised);
  opacity: 0;
  transform: translateY(-4px) scale(.985);
  transform-origin: top right;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  outline: none;
}
.app-popover[data-side="top"] { transform: translateY(4px) scale(.985); transform-origin: bottom right; }
.app-popover.is-open { opacity: 1; transform: none; }

.app-menu-wrap { padding: 6px; }
.app-menu { display: flex; flex-direction: column; gap: 2px; }
.app-menu__who {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 10px 14px;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--divider);
}
.app-menu__whotext { min-width: 0; }
.app-menu__name { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-menu__sub { font-size: var(--fs-13); color: var(--text-3); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-menu__demo { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--warning); }
.app-menu__item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: var(--fs-15); font-weight: var(--fw-medium);
  text-align: left;
}
.app-menu__icon { display: inline-flex; color: var(--text-2); }
.app-menu__label { flex: 1 1 auto; min-width: 0; }
.app-menu__item:hover, .app-menu__item:focus-visible { background: var(--surface-hover); color: var(--text-strong); outline: none; }
.app-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.app-menu__item:active { background: var(--surface-pressed); }
.app-menu__item[aria-current="page"], .app-menu__item[aria-current="page"] .app-menu__icon { color: var(--nav-active); }
.app-menu__item--danger, .app-menu__item--danger .app-menu__icon { color: var(--danger); }
.app-menu__item--danger:hover, .app-menu__item--danger:focus-visible { color: var(--danger); background: var(--danger-bg); }
.app-menu__hint {
  padding: 2px 7px;
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-3);
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
}
.app-menu__sep { height: 1px; margin: 6px 8px; background: var(--divider); }

/* ============ Notifications (popover ≥768, sheet <768) ============ */
.app-popover--ntf { width: 392px; }
.app-ntf__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}
.app-ntf__heading { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.app-ntf__meta { font-size: var(--fs-13); color: var(--text-2); }
.app-ntf__markall {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px;
  border-radius: 999px;
  color: var(--link);
  font-size: var(--fs-13); font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.app-ntf__markall:hover { background: var(--accent-soft); color: var(--link-hover); }
.app-ntf__markall:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-ntf__markall:disabled { color: var(--text-disabled); background: none; cursor: default; }
.app-ntf__markall[hidden] { display: none; }
.app-ntf__rows { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.app-ntf__row {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  width: 100%;
  padding: 12px 14px 12px 12px;
  border-radius: 12px;
  text-align: left;
  color: var(--text);
  transition: background var(--dur-1) var(--ease-out);
}
.app-ntf__row.is-unread { background: var(--surface-2); }
.app-ntf__row:hover { background: var(--surface-hover); }
.app-ntf__row:active { background: var(--surface-pressed); }
.app-ntf__row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.app-ntf__gem { flex: 0 0 36px; line-height: 0; margin-top: 1px; }
.app-ntf__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-ntf__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; }
.app-ntf__row:not(.is-unread) .app-ntf__title { font-weight: var(--fw-medium); }
.app-ntf__text { font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }
.app-ntf__time { margin-top: 2px; font-size: var(--fs-12); color: var(--text-3); }
.app-ntf__dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.app-ntf__row.is-urgent .app-ntf__dot { background: var(--danger); }
.app-ntf__empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  text-align: center;
}
.app-ntf__empty-art { line-height: 0; margin-bottom: var(--sp-1); }
.app-ntf__empty-title { font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--text-strong); }
.app-ntf__empty-body { max-width: 32ch; font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.app-ntf__foot {
  padding: 10px var(--sp-5) 12px;
  border-top: 1px solid var(--divider);
  font-size: var(--fs-12);
  color: var(--text-3);
}
/* Sheet variant (phones): the sheet supplies the title and the padding. */
.app-ntf--sheet .app-ntf__head--sheet { position: static; padding: 0 0 var(--sp-2); margin-top: calc(-1 * var(--sp-2)); border: 0; }
.app-ntf--sheet .app-ntf__markall { min-height: 44px; margin-right: -12px; }
.app-ntf--sheet .app-ntf__list { margin: 0 calc(-1 * var(--sp-3)); }
.app-ntf--sheet .app-ntf__rows { padding: 0; }
.app-ntf--sheet .app-ntf__foot { border: 0; padding: var(--sp-4) 0 0; text-align: center; }

/* ============ Phone drawer (☰) ============ */
.app-drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: var(--z-sheet);
  display: flex; flex-direction: column;
  width: min(320px, 86vw);
  padding: var(--safe-top) 0 var(--safe-bottom) var(--safe-left);
  background: var(--surface);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  box-shadow: var(--shadow-raised);
  transform: translateX(-104%);
  transition: transform var(--dur-3) var(--ease-out);
  outline: none;
}
.app-drawer.is-open { transform: none; }
.app-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topbar-h); flex-shrink: 0;
  padding: 0 var(--sp-2) 0 var(--sp-5);
}
.app-drawer__brand { display: inline-flex; border-radius: 10px; }
.app-drawer__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-drawer__body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
  overflow-y: auto; overscroll-behavior: contain;
}
.app-search--drawer { flex: none; margin: 0 var(--sp-1); }
.app-drawer__who { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2); }
.app-drawer__whotext { min-width: 0; }
.app-drawer__name { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-drawer__subline { font-size: var(--fs-13); color: var(--text-3); }
.app-drawer__group { display: flex; flex-direction: column; gap: 2px; }
.app-drawer__group--exit { padding-top: var(--sp-3); border-top: 1px solid var(--divider); }
.app-drawer__overline {
  padding: 0 10px 6px;
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
.app-drawer__row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 52px;
  padding: 6px 10px;
  border-radius: 14px;
  color: var(--text);
  text-align: left;
  transition: background var(--dur-1) var(--ease-out);
}
.app-drawer__row:hover { background: var(--surface-hover); }
.app-drawer__row:active { background: var(--surface-pressed); }
.app-drawer__row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.app-drawer__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
}
.app-drawer__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-drawer__label { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.app-drawer__sub { font-size: var(--fs-13); color: var(--text-3); line-height: 1.35; }
.app-drawer__row[aria-current="page"] { background: var(--nav-indicator); }
.app-drawer__row[aria-current="page"] .app-drawer__label { color: var(--nav-active); }
.app-drawer__row[aria-current="page"] .app-drawer__icon { background: var(--surface); color: var(--nav-active); }
.app-drawer__row--danger .app-drawer__label, .app-drawer__row--danger .app-drawer__icon { color: var(--danger); }
.app-drawer__row--danger .app-drawer__icon { background: var(--danger-bg); }
.app-drawer__foot {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  font-size: var(--fs-12); font-style: italic;
  color: var(--text-3);
}

/* No top bar (Welcome): keep content clear of the status bar / notch. */
.shell[data-header="none"] .shell__main { padding-top: var(--safe-top); }

/* ============ Page frame ============ */
/* Sticky things in screens sit below the sticky top bar: use top: var(--shell-sticky-top). */
.shell { --shell-sticky-top: 0px; }
.shell[data-header="desk"] { --shell-sticky-top: var(--deskbar-h); }
@media (min-width: 768px) and (max-width: 1023px) { .shell[data-header="desk"] { --shell-sticky-top: 64px; } }
@media (min-width: 1024px) {
  /* The mockup's greeting starts ~20px under the bar. */
  .shell[data-header="desk"] .app-page { padding-top: var(--sp-5); }
}
@media (min-width: 1200px) {
  .shell .app-grid > .app-rail-aside { top: calc(var(--shell-sticky-top) + var(--sp-5)); }
}
/* Right rail (DS4, R0): beside the content from 1200 (layout.css); at 1024–1199 the rail's
   cards form a row above the main column instead of trailing below it. */
/* At 1024–1199 the shell places the row right after the block holding the page title
   (screen.railPlacement 'header', the default), after the content ('end'), or — only when the
   page has no title at all — first in the grid. It never sits above a page title. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .shell .app-grid > .app-rail-aside--row { order: -1; }
  /* rail() returns one wrapper (home-rail, rv-rail, …) or several nodes: either way its cards
     become columns (3 across at 1024 with the 224px sidebar). */
  .shell .app-rail-aside--row > :only-child,
  .shell .app-rail-aside--row:not(:has(> :only-child)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: var(--sp-4);
    align-items: stretch;
  }
  .shell .app-rail-aside--row > :only-child > * { min-width: 0; }
  .shell .app-rail-aside--row { position: static; }
}

/* Headings focused after navigation are not controls: no focus ring on them. */
[data-route-focus]:focus, [data-route-focus]:focus-visible { outline: none; box-shadow: none; }
.shell__main:focus-visible { outline: none; }

/* ============ Error, not found, async loading ============ */
.app-state {
  min-height: calc(100vh - var(--topbar-h) - var(--tabbar-h) - var(--sp-9));
  min-height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - var(--sp-9));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.app-state .empty__title { font-size: var(--fs-24); }
.app-state__details {
  max-width: 44ch;
  margin-top: var(--sp-2);
  color: var(--text-3);
  font-size: var(--fs-13);
  text-align: center;
}
.app-state__details summary {
  cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-2);
  border-radius: var(--r-sm);
}
.app-state__details summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-state__details p { overflow-wrap: anywhere; }

.app-loading { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-4); }

/* ============ Keyboard shortcuts sheet ============ */
.app-keys { margin: 0; display: flex; flex-direction: column; }
.app-keys__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 44px;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--divider);
}
.app-keys__row:last-child { border-bottom: 0; }
.app-keys__label { color: var(--text); font-size: var(--fs-15); }
.app-keys__keys { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.app-keys__combo { display: inline-flex; gap: var(--sp-1); }
.app-keys__or { color: var(--text-3); font-size: var(--fs-13); }

@media (prefers-reduced-motion: reduce) {
  .app-popover, .app-drawer, .app-userchip__chev { transition: none; }
}