@layer layout {
  .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100%; }
  .sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--sp-4);
    background: var(--surface); border-right: 1px solid var(--line);
    padding: var(--sp-4) var(--sp-3) var(--sp-5);
  }
  .brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); }
  .brand img { height: 34px; width: auto; }
  .brand > div { display: flex; flex-direction: column; }
  .brand b { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; color: var(--navy); }
  .brand small { display: block; margin-top: 0; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; margin-top: -2px; }
  .scope {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
    font-size: var(--fs-sm);
  }
  .scope .ph { color: var(--teal); }
  .scope b { display: block; font-weight: 600; line-height: 1.25; }
  .scope span { color: var(--muted); font-size: var(--fs-xs); }
  .nav { display: flex; flex-direction: column; gap: var(--sp-4); }
  .nav-group { display: flex; flex-direction: column; gap: 2px; }
  .nav-label { padding: 0 var(--sp-3); margin-bottom: var(--sp-1); font-size: 0.75rem; font-weight: 600; color: var(--faint); }
  .nav-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 9px var(--sp-3); border-radius: var(--r-md);
    color: var(--text-2); font-weight: 400; font-size: var(--fs-md);
    transition: background 0.12s, color 0.12s;
  }
  .nav-item .ph { color: var(--muted); }
  .nav-item:hover { background: var(--surface-3); }
  .nav-item.is-active { background: var(--primary-weak); color: var(--primary); font-weight: 600; }
  .nav-item.is-active .ph { color: var(--primary); }
  .nav-item .count { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); text-align: center; font-variant-numeric: tabular-nums; }
  .nav-item .count.is-alert { background: var(--bad-weak); color: var(--bad); font-weight: 600; }
  .sidebar-foot { margin-top: auto; font-size: var(--fs-xs); color: var(--faint); padding: 0 var(--sp-3); }

  .main { min-width: 0; display: flex; flex-direction: column; }
  .topbar {
    position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
    display: flex; align-items: center; gap: var(--sp-4);
    padding: 0 var(--sp-5); background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  .topbar .grow { flex: 1; min-width: 0; }
  .crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; }
  .crumbs a:hover { color: var(--primary); }
  .crumbs .sep { color: var(--faint); }
  .crumbs [aria-current] { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  /* When the bar is tight the parent crumbs give way first; the current page keeps its name */
  .crumbs > * { flex: none; }
  .crumbs > a, .crumbs > span:not(.sep):not([aria-current]) { flex: 0 4 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; }
  .crumbs > [aria-current] { flex: 0 0 auto; max-width: 30ch; }
  .topbar > .crumbs { margin-right: var(--sp-2); }
  .topbar { gap: var(--sp-2); }
  @media (max-width: 1500px) { .topbar .tb-text--wide { display: none; } }
  @media (max-width: 1280px) { .topbar .tb-text { display: none; } }
  /* Laptops: the bar wraps before anything is pushed off the edge */
  @media (max-width: 1180px) { .topbar { height: auto; min-height: var(--topbar-h); flex-wrap: wrap; padding-block: var(--sp-2); } .topbar > .crumbs { flex: 1 1 100%; order: -1; margin-right: 0; } }
  .content { padding: var(--sp-5); width: 100%; max-width: 1360px; display: flex; flex-direction: column; gap: var(--sp-5); }
  .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
  .page-head .lead { color: var(--muted); margin-top: var(--sp-1); max-width: 70ch; }
  .page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

  .grid { display: grid; gap: var(--sp-4); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--main-aside { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .stack { display: flex; flex-direction: column; gap: var(--sp-4); }
  .stack--sm { gap: var(--sp-2); }
  .stack--lg { gap: var(--sp-5); }
  .row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .row--between { justify-content: space-between; }
  .row--end { justify-content: flex-end; }
  .grow { flex: 1; }

  /* Public pages (sign in, reset, 2FA) */
  .auth { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg); }
  .auth-side {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5);
    padding: var(--sp-6) var(--side-pad);
    /* Flat navy with a fine form ruling, the paper a claim is written on. Not a gradient wash. */
    background: url("../img/ledger.svg") 0 0 / 48px 48px, #17468f; color: #fff;
  }
  .auth-side { --side-pad: clamp(32px, 5vw, 72px); }
  .auth-side > * { position: relative; }
  /* The floor the claim route travels on: a darker band that bleeds to the panel edges */
  .auth-floor {
    display: flex; flex-direction: column; gap: var(--sp-5);
    margin: 0 calc(-1 * var(--side-pad)) calc(-1 * var(--sp-6)); padding: var(--sp-6) var(--side-pad) var(--sp-5);
    background: #133c7c; border-top: 1px solid rgba(127, 227, 247, 0.16);
  }
  .auth-side .logo-plate {
    align-self: flex-start; display: flex; align-items: center; gap: var(--sp-3);
    background: #fff; border-radius: var(--r-md); padding: 8px 16px 8px 12px; box-shadow: 0 6px 18px rgba(8, 28, 66, 0.28);
  }
  .auth-side .logo-plate img { height: 34px; }
  .auth-side .logo-plate span { padding-left: var(--sp-3); border-left: 1px solid var(--line); color: var(--navy); font-weight: 600; font-size: var(--fs-md); }
  .auth-side h2 { font-size: var(--fs-3xl); line-height: 1.15; font-weight: 600; max-width: 18ch; }
  .auth-side p { color: rgba(255, 255, 255, 0.86); max-width: 44ch; margin-top: var(--sp-3); }
  .auth-side ul { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
  .auth-side li { display: flex; gap: var(--sp-3); align-items: flex-start; color: rgba(255, 255, 255, 0.92); font-size: var(--fs-md); }
  .auth-side li .ph { margin-top: 2px; color: #7fe3f7; }
  .auth-side .route { max-width: 600px; }
  .auth-floor > small { color: rgba(255, 255, 255, 0.72); }
  @media (max-width: 1100px) { .auth-side .route-sub { display: none; } .auth-side .route-lbl { font-size: 18px; } }
  .auth-main { display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-5); min-width: 0; }
  .auth-card { margin: auto; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--sp-5); }
  .auth-card--wide { max-width: 520px; }
  .auth-ann { width: 100%; max-width: 760px; margin: 0 auto var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
  .auth-ann .auth-notes { align-self: flex-end; }

  @media (max-width: 1100px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--main-aside { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 900px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .topbar { position: static; height: auto; min-height: var(--topbar-h); flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); }
    .topbar > .crumbs { flex: 1 1 100%; order: -1; margin-right: 0; padding: var(--sp-1) 0; }
    .topbar .tb-text { display: none; }
    .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
    /* On a phone the menu becomes one strip that scrolls sideways, so the screen itself starts near the top */
    .sidebar .brand { flex-direction: row; align-items: center; gap: var(--sp-3); padding: 0; }
    .sidebar .brand img { height: 28px; }
    .sidebar .brand small, .sidebar-foot, .nav-label { display: none; }
    .scope { padding: 6px var(--sp-3); }
    .nav { flex-direction: row; gap: var(--sp-1); overflow-x: auto; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) 2px; scrollbar-width: thin; }
    .nav-group { flex-direction: row; gap: var(--sp-1); }
    .nav-group + .nav-group { padding-left: var(--sp-1); border-left: 1px solid var(--line); }
    .nav-item { white-space: nowrap; padding: 7px var(--sp-3); }
    .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-side { display: none; }
  }
  @media (max-width: 600px) {
    .content { padding: var(--sp-4); gap: var(--sp-4); }
    .auth-main { padding: var(--sp-4); }
    .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .page-head > div:first-child { min-width: 0; }
  }
}