@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/rocgrotesk-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/roc-grotesk-medium.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/rocgrotesk-bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/roc-grotesk-black.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

:root {
  --background: #faf8f2;
  --surface: #f3f0e8;
  --border: #e9e5dc;
  --border-strong: #ddd8ce;
  --foreground: #1c1a17;
  --muted: #6b665d;
  --primary: #114d61;
  --accent: #e8aa57;
  --green: #059669;
  --amber: #d97706;
  --red: #dc2626;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 44px;
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --component-line-color: #ded8cb;
  --primary-foreground: #faf8f2;
  --status-red: #b42318;
  --status-amber: #9a5808;
  --status-green: #17694b;
  --status-red-fill: color-mix(in srgb, var(--status-red) 13%, var(--surface));
  --status-red-line: color-mix(in srgb, var(--status-red) 46%, var(--component-line-color));
  --status-amber-fill: color-mix(in srgb, var(--status-amber) 15%, var(--surface));
  --status-amber-line: color-mix(in srgb, var(--status-amber) 48%, var(--component-line-color));
  --status-green-fill: color-mix(in srgb, var(--status-green) 13%, var(--surface));
  --status-green-line: color-mix(in srgb, var(--status-green) 46%, var(--component-line-color));
  --status-on: var(--background);
  --status-divider: var(--background);
  --st-neutral: #6b665d;
  --st-info: #114d61;
  --st-good: var(--status-green);
  --st-warn: var(--status-amber);
  --st-bad: var(--status-red);
  --elev-1: 0 1px 2px rgba(28, 26, 23, 0.07);
  --elev-2: 0 8px 20px rgba(28, 26, 23, 0.11);
  --elev-3: 0 18px 40px rgba(28, 26, 23, 0.17);
  /* WP13: one token for every focus indicator. --focus is redefined per
     theme, so the ring keeps 3:1 contrast without using --accent. */
  --focus: #114d61;
  --focus-ring: var(--focus);
  --dark-background: #0b2e3b;
  --dark-surface: #0f3a4a;
  --dark-elevated: #134757;
  --dark-border: #1a5268;
  --dark-text: #f0ede6;
  --dark-muted: #90b5c3;
  --dark-action: #f0be72;
  --dark-data: #5cc0dc;
  --radius: 8px;
  --line: 1px solid var(--border);
  /* Runtime replaces this with the measured sticky stack on phones so
     conditional Search and View-as rows remain part of the anchor offset. */
  --core-header-h: 72px;
  --core-mobile-identity-h: 56px;
  --core-mobile-rail-h: 48px;
  --personal-settings-anchor-x: 24px;
  --personal-settings-anchor-y: 78px;
  --personal-settings-header-h: var(--core-header-h);
  color: var(--foreground);
  background: var(--background);
  font-family: "Roc Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --background: var(--dark-background);
  --surface: var(--dark-surface);
  --border: var(--dark-border);
  --border-strong: #2a6378;
  --foreground: var(--dark-text);
  --muted: var(--dark-muted);
  --primary: var(--dark-action);
  --accent: var(--dark-action);
  --red: #ff9d92;
  --component-line-color: #1a5268;
  --primary-foreground: #0b2e3b;
  --status-red: #fca5a5;
  --status-amber: #f2a66e;
  --status-green: #7fd8b8;
  --st-neutral: #90b5c3;
  --st-info: #5cc0dc;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --elev-2: 0 8px 20px rgba(0, 0, 0, 0.34);
  --elev-3: 0 18px 40px rgba(0, 0, 0, 0.42);
  --focus: #f0be72;
  --line: 1px solid var(--dark-border);
  color-scheme: dark;
}

/* ────────────────────────────────────────────────────────────────
   RESPONSIVE CONVENTION (2026-07 mobile pass)

   Two canonical tiers. All NEW rules use these and only these.

     PHONE TIER   @media (max-width: 760px)      Delivery
                  @media (max-width: 767.98px)   Core
     SHELL TIER   @media (max-width: 1099.98px)  topbar/header chrome only

   Why Delivery's phone tier is 760 and not 768: scripts/check-delivery-
   static-app.mjs:1782 asserts the literal string "@media (max-width: 760px)"
   plus ".planning-desktop-workspace {\n    display: none;". Renumbering that
   block breaks the build. The 761-767px band is not a real device width; it
   receives desktop content rules (correct - tables scroll at that width) and
   the SHELL TIER chrome.

   Why the shell tier is 1099.98 and not 768: the 4-column .topbar/.global-
   header grid needs ~1100px to fit its own content (36 avatar + 200 lockup
   + 459 nav + ~326 tools + 36 gaps + 40 padding). Between 761px and ~1100px
   the nav track collapses to 61px and its links paint on top of the search
   field. See WP3.

   LEGACY tiers still present and NOT renumbered in this pass:
     Delivery 680 / 720 / 900 / 960 / 1080
     Core     980
   Migrate opportunistically, one block at a time, with a screenshot diff
   per block. Do not renumber in bulk.
   ──────────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  letter-spacing: 0;
}

body[data-core-auth-state="checking"] .shell,
body[data-core-auth-state="login"] .shell {
  display: none;
}

body[data-core-auth-state="authenticated"] .core-login-screen,
body[data-core-auth-state="checking"] .core-login-screen {
  display: none;
}

.core-boot-screen {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: var(--background);
  z-index: 60;
}

body[data-core-auth-state="checking"] .core-boot-screen {
  display: grid;
}

.core-boot-brand {
  display: grid;
  justify-items: center;
  gap: 16px;
  opacity: 0;
  animation: core-boot-appear 240ms ease-out 120ms forwards;
}

.core-boot-brand h1 {
  margin: 0;
  color: var(--foreground);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

/* Matches .core-login-title p so the sign-in status reads identically whether
   it appears on the login card or on the boot splash. */
.core-boot-status {
  margin: 0;
  min-block-size: 20px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.core-boot-pulse {
  inline-size: 128px;
  block-size: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: core-boot-sweep 1.4s ease-in-out infinite;
}

.core-boot-hint {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  animation: core-boot-appear 400ms ease-out 8s forwards;
}

@keyframes core-boot-appear {
  to {
    opacity: 1;
  }
}

@keyframes core-boot-sweep {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .core-boot-brand {
    animation-delay: 0ms;
    animation-duration: 0ms;
  }

  .core-boot-pulse {
    background: var(--border-strong);
    animation: none;
  }

  .core-boot-hint {
    animation-duration: 0ms;
  }
}

.core-login-screen {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  inline-size: 100vw;
  min-inline-size: 100vw;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding: 0;
  background: var(--background);
  overflow: auto;
  z-index: 50;
}

.core-signin-art {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.core-signin-art svg {
  position: absolute;
  inset-block-start: 12%;
  inset-inline-start: -22%;
  inline-size: 78%;
  block-size: auto;
}

.core-signin-art path { fill: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
:root[data-theme="dark"] .core-signin-art path { fill: color-mix(in srgb, var(--dark-data) 13%, var(--surface)); }

.core-signin-form-column { display: grid; align-content: center; justify-items: start; padding: clamp(28px, 5vw, 64px); }

.core-login-card { display: grid; gap: 0; inline-size: min(384px, 100%); min-inline-size: 0; margin: 0; padding: 0; }
.core-login-title { display: grid; justify-items: start; text-align: start; }
.core-signin-mark { display: block; block-size: 64px; inline-size: auto; margin: -8px 0 0 -11px; }
.core-login-title h1 { margin: 14px 0 10px; color: var(--foreground); font-size: 44px; font-weight: 900; letter-spacing: -0.022em; line-height: 1; }
.core-signin-purpose { margin: 0; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.5; max-inline-size: 32ch; }

.core-login-card > .entra-button,
.core-login-card > .entra-divider,
.core-login-card > [data-auth-credentials],
.core-login-card > .core-signin-sso-only { margin-block-start: 26px; }

.core-login-card .entra-button { min-block-size: 48px; inline-size: 100%; justify-content: center; background: var(--surface); border: 1px solid var(--border-strong); color: var(--foreground); font-size: 15px; }
.core-login-card .entra-button:hover:not(:disabled) { border-color: var(--primary); }
.core-login-card .entra-button svg { block-size: 16px; inline-size: 16px; margin-inline-end: 10px; }
.core-login-card .entra-divider { margin-block-end: 0; }

.core-signin-field { display: grid; gap: 6px; margin-block-end: 16px; color: var(--foreground); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; }
.core-signin-field input { min-block-size: 48px; inline-size: 100%; border: var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 62%, var(--background)); color: var(--foreground); padding: 0 14px; font-size: 16px; font-weight: 400; }
.core-signin-field input:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 1px; border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.core-signin-field input:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }
.core-signin-field.error input { background: color-mix(in srgb, var(--red) 7%, var(--background)); border-color: var(--red); }
.core-signin-field.error input:focus-visible { outline-color: var(--red); }
.core-signin-field-error { display: flex; align-items: center; gap: 6px; color: var(--red); font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.core-signin-field-error svg { flex: none; inline-size: 14px; block-size: 14px; }
.core-signin-alert[hidden],
.core-signin-support[hidden],
.core-signin-field-error[hidden] { display: none; }

.core-login-card .command-button { min-height: 48px; justify-content: center; font-size: 16px; width: 100%; }
.core-signin-actions { margin-block-start: 6px; }

.core-signin-alert { display: flex; align-items: flex-start; gap: 10px; margin-block-start: 20px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--red) 42%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--red) 8%, var(--background)); color: var(--red); font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.core-signin-alert[hidden] { display: none; }
.core-signin-alert > svg { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; }
.core-signin-alert strong, .core-signin-alert [data-auth-detail] { display: block; }
.core-signin-alert strong { min-height: 0; margin-block-end: 2px; color: inherit; font-size: inherit; font-weight: 700; text-align: start; }
.core-signin-support { display: inline-flex; align-items: center; min-block-size: 48px; margin-block-start: 2px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.core-signin-sso-only { margin-block-end: 0; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; }

.core-login-card .command-button[aria-busy="true"] { position: relative; overflow: hidden; opacity: 1; }
.core-login-card .command-button[aria-busy="true"]::before, .core-login-card .command-button[aria-busy="true"]::after { position: absolute; inset-block-end: 0; block-size: 3px; content: ""; }
.core-login-card .command-button[aria-busy="true"]::before { inset-inline: 0; background: color-mix(in srgb, var(--background) 26%, transparent); }
.core-login-card .command-button[aria-busy="true"]::after { inset-inline-start: 0; inline-size: 42%; background: color-mix(in srgb, var(--background) 70%, transparent); animation: core-signin-progress 1.1s linear infinite; }
@keyframes core-signin-progress { from { transform: translateX(-110%); } to { transform: translateX(340%); } }

@media (prefers-reduced-motion: reduce) { .core-login-card .command-button[aria-busy="true"]::after { animation: none; inline-size: 62%; } }

.core-login-card > [data-auth-user] { min-height: 18px; color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }

@media (max-width: 859.98px) {
  .core-login-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: 140px minmax(0, 1fr); }
  .core-signin-art { block-size: 140px; }
  .core-signin-art svg { inline-size: 150%; inset-block-start: -24%; inset-inline-start: -46%; }
  .core-signin-form-column { align-content: start; padding: 30px 20px 40px; }
  .core-login-card { inline-size: 100%; }
  .core-login-title h1 { margin-block-start: 18px; font-size: 34px; }
  .core-signin-purpose { font-size: 14px; }
}

@media (min-width: 620px) and (max-width: 859.98px) and (max-height: 500px) and (orientation: landscape) {
  .core-login-screen { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); grid-template-rows: minmax(0, 1fr); }
  .core-signin-art { block-size: auto; }
  .core-signin-art svg { inset-block-start: 6%; inset-inline-start: -26%; inline-size: 88%; }
  .core-signin-form-column { align-content: start; padding: 14px 20px 24px; }
  .core-signin-mark { block-size: 40px; margin: -5px 0 0 -7px; }
  .core-login-title h1 { margin: 5px 0 4px; font-size: 28px; }
  .core-signin-purpose { font-size: 12.5px; line-height: 1.35; }
  .core-login-card > .entra-button,
  .core-login-card > .entra-divider,
  .core-login-card > [data-auth-credentials],
  .core-login-card > .core-signin-sso-only { margin-block-start: 12px; }
}

a,
button {
  color: inherit;
  font: inherit;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
}

/* ── WP13: global focus indicator ─────────────────────────────────
   Core shipped no global focus rule at all: five bespoke :focus-visible
   selectors, three of them grouped with :hover so focus looked exactly
   like hover. [tabindex="-1"] is excluded on purpose — those are
   programmatic focus targets (see #main-content), not tab stops. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* The search fields are borderless inputs inside a bordered wrapper, so
   they keep their outline: 0 and the wrapper carries the ring — one ring,
   drawn around the control the user actually sees. */
.global-search:focus-within,
.matrix-search:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* WP13: skip link. First tab stop on the page, invisible until focused. */
.skip-link {
  left: -9999px;
  position: absolute;
  top: 0;
  z-index: 100;
}

.skip-link:focus {
  align-items: center;
  background: var(--background);
  border: 2px solid var(--focus-ring);
  border-radius: 8px;
  color: var(--foreground);
  display: inline-flex;
  left: 8px;
  min-height: 44px;
  padding: 12px 16px;
  top: 8px;
  width: auto;
}

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.global-header {
  align-items: center;
  border-bottom: var(--line);
  background: var(--surface);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(180px, auto) minmax(0, 1fr) auto;
  min-height: 72px;
  padding: 10px 20px;
}

.workspace {
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

aside {
  min-height: calc(100vh - 96px);
  min-height: calc(100dvh - 96px);
  min-width: 0;
  border-right: var(--line);
  padding: 24px 20px;
  background: var(--surface);
}

.product-lockup,
.topbar-tools {
  display: flex;
  align-items: center;
}

.product-lockup {
  min-width: 0;
  align-items: baseline;
  gap: 10px;
  position: relative;
}

.product-name {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.user-menu,
.app-switcher {
  position: relative;
  flex: 0 0 auto;
}

.icon-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.icon-button:hover,
.icon-button[aria-expanded="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--background);
}

.user-menu-panel,
.app-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  box-shadow: var(--elev-3);
  padding: 6px;
}

:root[data-theme="dark"] .user-menu-panel,
:root[data-theme="dark"] .app-menu {
  background: var(--dark-elevated);
  box-shadow: var(--elev-3);
}

.user-menu-panel {
  right: 0;
  width: 220px;
}

/* Left-anchored and clamped. Do not right-anchor it: the switcher button's
   right edge sits at ~268px, so a right-anchored panel clips off the *left*
   viewport edge in the 768-1100px band. */
.app-menu {
  left: 0;
  width: 236px;
  max-width: calc(100vw - 24px);
}

.user-menu-panel[hidden],
.app-menu[hidden] {
  display: none;
}

/* The menu opened with two bare items and no identity, so the one app that
   owns impersonation never said whose account you were in. Populated at
   runtime; stays [hidden] until a session exists, hence no display here. */
.user-menu-identity {
  border-bottom: var(--line);
  margin-bottom: 4px;
  padding: 8px 10px;
}

.user-menu-identity strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
}

/* Addresses are long and the panel is 220px: wrap rather than overflow. */
.user-menu-identity span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.user-menu-item {
  width: 100%;
  min-height: 38px;
  display: block;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--foreground);
  padding: 0 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.user-menu-item:hover,
.app-option:hover,
.app-option[aria-current="true"] {
  background: var(--surface);
}

:root[data-theme="dark"] .user-menu-item:hover,
:root[data-theme="dark"] .app-option:hover,
:root[data-theme="dark"] .app-option[aria-current="true"] {
  background: var(--dark-surface);
}

/* Sign-out is destructive and sat flush against "Personal settings"; on a
   sheet under the thumb that is one mistap from ending the session. */
.user-menu-item.logout {
  border-top: var(--line);
  margin-top: 4px;
  padding-top: 4px;
  color: var(--red);
}

.app-switcher-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--primary);
  padding: 0 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.app-switcher-button:hover,
.app-switcher-button[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--background);
}

:root[data-theme="dark"] .app-switcher-button:hover,
:root[data-theme="dark"] .app-switcher-button[aria-expanded="true"] {
  background: var(--dark-elevated);
}

.chevron {
  font-size: 15px;
  line-height: 1;
}

.app-option {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--foreground);
  padding: 9px 8px;
  text-align: left;
}

.app-option[aria-current="true"] {
  color: var(--primary);
}

/* The label track is ~69px wide, and "Projectomgeving" is 117px. Let the
   long Dutch descriptions wrap instead of painting under the status pill.
   Truncation is not an option here: at 69px it would eat the app names. */
.app-option-label {
  min-width: 0;
}

.app-option-label strong,
.app-option-label span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-option > .pill {
  align-self: start;
  justify-self: end;
  white-space: nowrap;
}

.app-option-label strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

.app-option-label span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.glyph {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: var(--primary);
  color: var(--background);
  font-size: 13px;
  font-weight: 900;
}

.pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Author display beats the UA `[hidden]` rule: `.pill` sets `display: inline-flex`,
   which outranks the user-agent stylesheet's `[hidden] { display: none }`. Without
   this an empty status pill still paints its border and occupies its grid cell. */
.pill[hidden] {
  display: none;
}

.pill.good {
  border-color: #98d7c1;
  background: #ecfdf5;
  color: #196b4d;
}

.pill.warn {
  border-color: #f2d6a5;
  background: #fffbeb;
  color: #9a5808;
}

.pill.danger {
  border-color: rgba(220, 38, 38, 0.26);
  background: #fef2f2;
  color: #b42318;
}

.pill.dark {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--background);
}

:root[data-theme="dark"] .pill {
  border-color: rgba(240, 237, 230, 0.24);
  background: transparent;
  color: var(--dark-muted);
}

:root[data-theme="dark"] .pill.dark,
:root[data-theme="dark"] .pill.warn {
  border-color: var(--dark-action);
  background: var(--dark-action);
  color: #1c1a17;
}

:root[data-theme="dark"] .pill.good {
  border-color: rgba(92, 192, 220, 0.38);
  background: rgba(92, 192, 220, 0.12);
  color: var(--dark-data);
}

:root[data-theme="dark"] .pill.danger {
  border-color: rgba(252, 165, 165, 0.44);
  background: rgba(220, 38, 38, 0.16);
  color: #fecaca;
}

.language-toggle {
  min-width: 46px;
  padding: 0 10px;
}

.nav {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  min-width: 0;
}

.nav a {
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  min-height: 34px;
  padding: 8px 10px;
  white-space: nowrap;
}

.nav a:hover,
.nav a[aria-current="page"] {
  background: var(--background);
  color: var(--primary);
}

.topbar-tools {
  gap: 10px;
  justify-content: flex-end;
  min-width: 0;
}

.global-header > .user-menu .user-menu-panel {
  left: 0;
  right: auto;
}

.global-search {
  align-items: center;
  background: var(--background);
  border: var(--line);
  border-radius: var(--radius);
  display: flex;
  flex: 0 1 280px;
  gap: 8px;
  font-size: 14px;
  line-height: 1.25;
  max-width: 280px;
  min-width: 180px;
  padding: 8px 12px;
  width: auto;
}

.global-search span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.global-search input {
  background: transparent;
  border: 0;
  color: var(--foreground);
  font: inherit;
  min-width: 0;
  outline: 0;
  width: 100%;
}

.global-search input::placeholder {
  color: var(--muted);
}

.header-logo {
  align-items: center;
  display: inline-flex;
  height: 34px;
  width: 34px;
}

.header-logo img {
  display: block;
  height: 34px;
  object-fit: contain;
  object-position: center;
  width: 34px;
}

main {
  min-width: 0;
}

.content {
  padding: 28px 24px 44px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 28px;
  align-items: stretch;
}

.kicker {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  max-width: 760px;
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 900;
  line-height: 0.96;
}

h2 {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.hero p:not(.kicker) {
  max-width: 640px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.live-state {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: var(--line);
  background: var(--surface);
  padding: 18px;
}

.live-state strong {
  font-size: 16px;
  font-weight: 900;
}

.live-state span {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--line);
  border-bottom: var(--line);
  margin-top: 30px;
}

.signal {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: var(--line);
  padding: 0 18px;
}

.signal:last-child {
  border-right: 0;
}

.signal span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.num {
  margin-top: 8px;
  color: var(--primary);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 28px;
  margin-top: 30px;
}

.section-title,
.row,
.app-row {
  display: grid;
  align-items: center;
}

.section-title {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-bottom: 12px;
}

.row {
  grid-template-columns: minmax(0, 1fr) 140px auto auto;
  gap: 14px;
  min-height: 74px;
  border-top: var(--line);
}

.row strong,
.app-row strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
}

.row span,
.muted {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.row div span {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  line-height: 1.4;
}

.command-button {
  min-height: 34px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--background);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
}

.command-button.secondary {
  border: var(--line);
  background: transparent;
  color: var(--foreground);
}

.command-button.secondary.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--background);
}

.command-button.danger {
  background: var(--red);
  color: #fff;
}

.command-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Anchored under the header rather than at a literal 78px: the header grows
   to three rows below 768px, and the panel had no height cap at all, so its
   Save button rendered off-screen on a phone. */
.settings-panel {
  position: fixed;
  top: var(--personal-settings-anchor-y);
  left: var(--personal-settings-anchor-x);
  z-index: 100;
  width: min(420px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 96px));
  max-height: min(560px, calc(100dvh - 96px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--background);
  box-shadow: 0 18px 40px rgba(28, 26, 23, 0.14);
  padding: 18px;
}

.settings-panel[hidden],
.personal-settings-scrim[hidden] {
  display: none;
}

.personal-settings-scrim {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: color-mix(in srgb, var(--dark-background) 72%, transparent);
}

.settings-panel-header,
.settings-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.settings-panel-header h2 {
  margin: 4px 0 0;
  font-size: 24px;
}

.personal-settings-grab-handle {
  display: none;
}

@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
  .personal-settings-grab-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .personal-settings-grab-handle,
  .settings-panel-header {
    touch-action: none;
  }
}

.settings-fields {
  display: grid;
  gap: 16px;
  margin: 0;
}

.settings-panel-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 0;
}

.settings-fields fieldset {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
}

.settings-fields legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px;
}

.segmented-control button {
  min-height: 44px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 850;
}

.segmented-control button.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--background);
}

.settings-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.settings-panel-footer {
  border-top: var(--line);
  padding-top: 14px;
}

.settings-panel-footer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

:root[data-density="compact"] .core-admin {
  gap: 20px;
}

:root[data-density="compact"] .admin-panel {
  padding-top: 18px;
}

.core-admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.admin-overview,
.admin-panel {
  min-width: 0;
}

/* No border-bottom/padding-bottom: .admin-panel already carries a border-top
   and the 28px .core-admin gap sits between them, so the two hairlines
   painted 26px apart as a double rule. */
.admin-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

/* display: grid above defeats the hidden attribute, so showCorePanel could
   never hide Home: it painted above every other panel you navigated to. */
.admin-overview[hidden] {
  display: none;
}

.admin-overview h1 {
  max-width: 820px;
  font-size: clamp(26px, 2.6vw + 12px, 40px);
}

.home-kicker {
  display: none;
}

@media (min-width: 620px) {
  .home-kicker {
    display: block;
  }

  .admin-overview h1 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

.admin-overview p:not(.kicker) {
  display: -webkit-box;
  max-width: 760px;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Explicit steps rather than auto-fit: at 768px auto-fit produced 3 + 1 and
   orphaned the fourth card, and at 1440px it stretched four cards to ~40%
   empty. 1 / 2 / 4 with a width cap keeps the row honest at every width. */
.core-app-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1120px;
}

@media (min-width: 620px) {
  .core-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .core-app-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.core-app-card {
  height: 138px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  text-align: left;
}

.core-app-card[hidden] {
  display: none;
}

.core-app-card-glyph {
  display: none;
}

.core-app-card-copy {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  gap: 4px;
}

.core-app-card-copy strong {
  font-size: 18px;
  font-weight: 900;
}

.core-app-card-copy > span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.core-app-card-aside {
  display: contents;
}

.core-app-card-state {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.core-app-card-open {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  justify-self: end;
  color: var(--primary);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.core-app-card-footer {
  display: inline-flex;
  grid-column: 1;
  grid-row: 3;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.core-app-card-footer > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.core-app-card-restriction {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.core-app-card-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 1px solid var(--primary);
  border-radius: 50%;
  background: var(--primary);
}

.core-app-card[data-access="read"] .core-app-card-dot {
  background: transparent;
}

.core-app-card[data-reachability="down"] .core-app-card-dot {
  border-color: var(--bad);
  background: var(--bad);
}

.core-app-card[data-reachability="unknown"] .core-app-card-dot {
  border-color: var(--muted);
  background: var(--muted);
}

.core-app-card.active {
  border-color: rgba(17, 77, 97, 0.34);
}

.core-app-card.disabled {
  cursor: default;
}

.core-app-card.disabled .core-app-card-footer {
  color: var(--muted);
}

.core-app-card-skeleton {
  position: relative;
  overflow: hidden;
  display: block;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background:
    linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%) left top / 42% 18px no-repeat,
    linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%) left 30px / 76% 12px no-repeat,
    linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%) left bottom / 36% 11px no-repeat;
}

.core-app-card-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--surface) 52%, transparent) 50%, transparent 100%);
  content: "";
  transform: translateX(-100%);
  animation: core-app-skeleton-sweep 1.4s linear infinite;
}

@keyframes core-app-skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}

.core-app-card-skeleton[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .core-app-card-skeleton::after {
    animation: none;
  }
}

.core-app-card[data-loading="true"] .core-app-card-glyph,
.core-app-card[data-loading="true"] .core-app-card-copy,
.core-app-card[data-loading="true"] .core-app-card-state,
.core-app-card[data-loading="true"] .core-app-card-open,
.core-app-card[data-loading="true"] .core-app-card-footer {
  visibility: hidden;
}

@media (max-width: 619.98px) {
  .core-app-grid {
    gap: 0;
    border-top: var(--line);
  }

  .core-app-card {
    min-height: 72px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    border: 0;
    border-bottom: var(--line);
    border-radius: 0;
    background: transparent;
    padding: 10px 2px;
  }

  .core-app-card.active {
    border-color: var(--border);
  }

  .core-app-card-glyph {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1 / -1;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--primary);
    font-size: 15px;
    font-weight: 900;
  }

  .core-app-card-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .core-app-card-copy strong {
    font-size: 16px;
  }

  /* The aside is a real third column instead of `display: contents`, so the pill,
     the open arrow and the footer stack inside their own track and can never be
     placed into the same card cell. */
  .core-app-card-aside {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    gap: 5px;
    justify-items: end;
    min-width: 0;
    max-width: 44vw;
    text-align: right;
  }

  .core-app-card-state,
  .core-app-card-open,
  .core-app-card-footer {
    grid-column: auto;
    grid-row: auto;
  }

  .core-app-card-footer {
    justify-self: end;
    max-width: 100%;
    text-align: right;
  }

  .core-app-card[data-view-as-restriction] {
    position: relative;
    margin-bottom: 64px;
  }

  .core-app-card-restriction {
    position: absolute;
    top: 72px;
    right: 0;
    left: 52px;
    padding: 6px 0 8px;
    border-bottom: var(--line);
  }

  .core-app-card-skeleton {
    background:
      linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%) left center / 40px 40px no-repeat,
      linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%) 52px 8px / 31% 15px no-repeat,
      linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%) 52px 31px / 46% 10px no-repeat,
      linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%) right bottom / 104px 10px no-repeat;
  }
}

.auth-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: end;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
}

.auth-gate[data-auth-state="ready"] {
  border-color: rgba(17, 77, 97, 0.32);
}

.auth-gate[data-auth-state="signed-in"] {
  border-color: rgba(5, 150, 105, 0.4);
}

.auth-gate[data-auth-state="loading"] {
  border-color: rgba(232, 170, 87, 0.55);
}

.auth-copy h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.05;
}

.auth-copy p {
  max-width: 720px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.auth-copy strong {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: var(--line);
  border-radius: 999px;
  background: var(--background);
  color: var(--primary);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.auth-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.auth-form input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  padding: 0 12px;
  font-size: 14px;
}

.auth-form input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.auth-form input:disabled,
.auth-form button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.admin-panel {
  scroll-margin-top: 116px;
  border-top: var(--line);
  padding-top: 24px;
}

.admin-title {
  align-items: end;
  margin-bottom: 16px;
}

.admin-title h2 {
  font-size: 24px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-title p:not(.kicker) {
  max-width: 720px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.core-readiness-panel {
  min-width: 0;
  margin-top: 18px;
  border-top: var(--line);
  padding-top: 12px;
}

.core-readiness-head {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.core-readiness-status {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
}

.core-readiness-status[hidden] {
  display: none;
}

.core-readiness-list {
  margin-top: 4px;
}

.core-readiness-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 8px 4px;
}

.core-readiness-item:last-child {
  border-bottom: 0;
}

.core-readiness-name {
  font-size: 13px;
  font-weight: 650;
}

.core-readiness-item small {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.core-readiness-item .pill {
  margin-left: auto;
}


@media (max-width: 980px) {
  .global-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 16px;
  }

  .global-header > .user-menu {
    grid-column: 1;
    grid-row: 1;
  }

  .product-lockup {
    grid-column: 2;
    grid-row: 1;
  }

  .topbar-tools {
    grid-column: 3;
    grid-row: 1;
  }

  .nav {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .hero,
  .work,
  .core-readiness-panel {
    grid-template-columns: 1fr;
  }

  .auth-gate,
  .auth-form {
    grid-template-columns: 1fr;
  }

  .signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signal:nth-child(2) {
    border-right: 0;
  }

  .signal:nth-child(n + 3) {
    border-top: var(--line);
  }

}

/* PHONE TIER. 768px itself stays on the 980 tier, so the verified tablet
   render is untouched; only 621-767px gains the stacked header, block
   workspace and tighter padding it should always have had. */
@media (max-width: 767.98px) {
  :root {
    /* Three stacked rows: identity, nav, tools. Measured at 177px across
       320-767px once the touch tier's 44px controls apply; rounded up so a
       jump lands just below the chrome rather than just behind it. */
    --core-header-h: 180px;
  }

  .shell {
    display: flex;
  }

  .global-header {
    grid-template-columns: auto minmax(0, 1fr);
    position: sticky;
    top: 0;
    z-index: 10;
    padding: calc(12px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
  }

  .global-header > .user-menu {
    grid-column: 1;
    grid-row: 1;
  }

  .product-lockup {
    grid-column: 2;
    grid-row: 1;
  }

  /* One scrolling row instead of a wrapping block: wrapping the six links
     costs a second 34px row of sticky chrome on every screen. The mask
     fades the right edge so it reads as scrollable. */
  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a {
    flex: 0 0 auto;
  }

  /* The 34px lockup is illegible at this size and the "Birdhouse" wordmark
     in row 1 already carries the identity. */
  .header-logo {
    display: none;
  }

  /* Anchor jumps otherwise land ~77px too high: the desktop value is sized
     for the 72px single-row header. */
  .admin-panel {
    scroll-margin-top: calc(var(--core-header-h, 72px) + 12px);
  }

  .workspace {
    display: block;
  }

  aside {
    min-height: auto;
    border-right: 0;
    border-bottom: var(--line);
    padding: 12px 14px 14px;
  }

  .product-lockup {
    flex-wrap: wrap;
    gap: 4px 6px;
  }

  .product-name,
  .app-switcher-button {
    font-size: 15px;
  }

  .topbar-tools {
    align-items: center;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    justify-content: stretch;
    gap: 8px;
    width: 100%;
  }

  .global-search {
    flex-basis: 100%;
    max-width: none;
    width: 100%;
    min-width: 0;
  }

  /* The "Search"/"Filter" prefix eats most of the field on a phone, leaving
     a 69x20px typing area. Hide it visually; the placeholder carries the
     same meaning and the span stays for assistive tech. Same clipping
     technique as .sr-only, applied by selector so desktop keeps the label. */
  .global-search span,
  .matrix-search span {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .global-search,
  .matrix-search {
    min-height: 44px;
    position: relative;
  }

  .global-search input {
    min-height: 24px;
  }

  /* Kept from WP4 so nothing in the lockup can act as a containing block for
     the sheets below, and so .settings-panel resolves against the viewport
     rather than against a 34px-wide inline box. */
  .app-switcher,
  .product-lockup {
    position: static;
  }

  /* WP5: the two header dropdowns become bottom sheets. Both are 220-236px
     panels anchored to controls that sit at the top of a 180px-tall header,
     which on a phone means a long reach and, for .app-menu at 320px, 68px of
     the panel off-screen. Pinned to the bottom edge they land under the
     thumb and can never leave the viewport. */
  .app-menu,
  .user-menu-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 70;
    width: auto;
    min-width: 0;
    /* Undo the desktop viewport clamp on .app-menu; a sheet is full-bleed. */
    max-width: none;
    max-height: 70vh;
    max-height: 70dvh;
    border-radius: 14px 14px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }

  /* Beats the (0,3,0) `right: auto` that left-anchors the desktop dropdown. */
  .global-header > .user-menu .user-menu-panel {
    left: 0;
    right: 0;
  }

  /* Scrim. Keyed off aria-expanded because that is what the toggle handlers
     actually maintain - a data-open attribute would never match. The click
     target of a pseudo-element is its originating element, so the outside-
     click handler in browser.ts tests the toggle and the panel rather than
     the .app-switcher/.user-menu wrapper; tapping the scrim therefore lands
     outside both and dismisses the sheet. */
  .app-switcher:has(> [data-app-toggle][aria-expanded="true"])::before,
  .user-menu:has(> [data-user-menu-toggle][aria-expanded="true"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 69;
    background: color-mix(in srgb, var(--dark-background) 72%, transparent);
  }

  /* The page behind a sheet must not scroll with it. */
  body[data-overlay-open] {
    overflow: hidden;
  }

  /* Personal settings is a third sheet. Its own padding-bottom moves to the
     footer so the sticky footer can sit flush against the screen edge. */
  .settings-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - var(--personal-settings-header-h) - 12px);
    max-height: calc(100dvh - var(--personal-settings-header-h) - 12px);
    border-radius: 18px 18px 0 0;
    padding-bottom: 0;
  }

  .settings-panel-footer {
    flex-wrap: wrap;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .settings-panel-footer .command-button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  @media (orientation: landscape) {
    .settings-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-panel-footer {
      flex-wrap: nowrap;
    }

    .settings-panel-footer .command-button {
      width: auto;
      flex: 0 0 auto;
    }
  }

  /* Modals: let the overlay's safe-area padding set the height budget, and
     keep Cancel/Create reachable while the body scrolls behind them. */
  /* :not([hidden]) only to outrank the base rule, which is declared further
     down the file at equal specificity. */
  .core-modal-overlay:not([hidden]) {
    padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  }

  /* Descendant selector so it also outranks the touch tier's
     `.entra-repair-dialog { padding: 20px }`, which would otherwise leave a
     dead strip under the sticky footer. */
  .core-modal-overlay .core-modal {
    max-height: 100%;
    padding-bottom: 0;
  }

  .core-modal-foot {
    position: sticky;
    bottom: 0;
    flex-direction: column-reverse;
    background: inherit;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .core-modal-foot .command-button {
    width: 100%;
    min-height: 48px;
  }

  /* WP1: safe-area insets. The viewport meta is viewport-fit=cover, so on a
     notched phone in landscape the content box must clear the cutout and the
     home indicator. max()/calc() degrade to the previous values elsewhere. */
  .content {
    padding-top: 22px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  h1 {
    font-size: 34px;
  }

  .admin-title {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .admin-actions {
    justify-content: flex-start;
  }

  /* 411px of a 390x844 screen went to the Home hero before the first app
     card appeared. The eyebrow duplicates the nav item you just tapped, the
     headline does not need to be 30px, and two lines of intro is enough to
     orient. Overrides .admin-overview h1's clamp(), which outranks the
     phone tier's bare h1 rule. */
  .admin-overview h1 {
    font-size: 26px;
  }

  .content .kicker {
    display: none;
  }

  .admin-overview p:not(.kicker) {
    margin-top: 10px;
  }

  .core-readiness-panel {
    grid-template-columns: 1fr;
  }

  .auth-gate {
    padding: 14px;
  }

  .signals {
    grid-template-columns: 1fr;
  }

  .signal {
    min-height: 74px;
    border-right: 0;
    border-bottom: var(--line);
  }

  .signal:last-child {
    border-bottom: 0;
  }

  .row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 0;
  }

  .row .pill {
    width: max-content;
  }

  .command-button {
    width: max-content;
  }

}

.core-login-card .entra-button {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--foreground);
}

.core-login-card .entra-button:hover {
  border-color: var(--primary);
}

.core-login-card .entra-button svg {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  flex: none;
}

.entra-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* display: flex above defeats the hidden attribute, so the "or" divider
   painted in every state — including a blocked sign-in, where it sat above
   nothing at all. */
.entra-divider[hidden] {
  display: none;
}

.entra-divider::before,
.entra-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

body[data-core-user-role]:not([data-core-user-role="admin"]) [data-admin-only] {
  display: none !important;
}

body[data-core-user-role="admin"] [data-member-only] {
  display: none !important;
}

.core-view-as-banner {
  position: static;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #114d61;
  color: #faf8f2;
  padding: 11px 20px;
}

.core-view-as-banner[hidden] {
  display: none;
}

:root[data-theme="dark"] .core-view-as-banner {
  background: var(--dark-elevated);
  border-bottom: 1px solid rgba(92, 192, 220, 0.45);
  color: var(--dark-text);
}

.core-view-as-banner svg {
  flex: 0 0 auto;
  opacity: 0.9;
}

.core-view-as-text {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}

.core-view-as-text b {
  font-weight: 900;
}

.core-view-as-text small {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.75;
}

.core-view-as-exit {
  margin-left: auto;
  border: 1px solid rgba(250, 248, 242, 0.55);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  min-height: 36px;
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 700;
}

.core-view-as-exit:hover,
.core-view-as-exit:focus-visible {
  border-color: #faf8f2;
  background: rgba(250, 248, 242, 0.12);
}

/* The banner background *is* --primary, so the global ring would be
   invisible on it. Re-colour rather than drop it. */
.core-view-as-banner button:focus-visible {
  outline-color: #faf8f2;
}

:root[data-theme="dark"] .core-view-as-banner button:focus-visible {
  outline-color: var(--dark-data);
}

:root[data-theme="dark"] .core-view-as-exit {
  border-color: rgba(92, 192, 220, 0.55);
  color: var(--dark-data);
}

:root[data-theme="dark"] .core-view-as-exit:hover,
:root[data-theme="dark"] .core-view-as-exit:focus-visible {
  border-color: var(--dark-data);
  background: rgba(92, 192, 220, 0.12);
}

.core-app-card small {
  margin-top: 4px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.core-app-card.disabled small {
  color: var(--muted);
}

.core-unavailable {
  margin-top: 20px;
}

.core-unavailable-head {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.core-unavailable-list {
  list-style: none;
  width: 100%;
  max-width: 1120px;
  margin: 0;
  padding: 0;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
}

/* An explicit grid, not a wrapping flex: with flex the status pill landed in
   a different place on each of the three sibling rows depending on how long
   the description was. Areas keep the pill in one column on every row. */
.core-unavailable-list li {
  display: grid;
  grid-template-areas:
    "name pill"
    "desc desc";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  border-bottom: var(--line);
  padding: 11px 16px;
}

.core-unavailable-list li[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .core-unavailable-list li {
    grid-template-areas: "name desc pill";
    grid-template-columns: 108px minmax(0, 1fr) auto;
  }
}

.core-unavailable-list li:last-child {
  border-bottom: 0;
}

.core-unavailable-list strong {
  grid-area: name;
  font-size: 14px;
  font-weight: 900;
}

.core-unavailable-list li > span:not(.pill) {
  grid-area: desc;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}

.core-unavailable-list li > .pill {
  grid-area: pill;
  justify-self: end;
}

.acc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 46px;
  min-height: 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
}

/* Filled vs outline, borrowed from the .pill.dark / .segmented-control
   button.selected pair. Two 9%-vs-transparent tints of the same hue made
   "who has full access to Delivery?" a reading exercise; a filled chip is
   scannable down a column. */
.acc.full {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--background);
}

.acc.read {
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  background: transparent;
  color: var(--primary);
}

.acc.none {
  min-width: 0;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.odot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.matrix-toolbar {
  position: sticky;
  top: calc(var(--core-header-h, 72px) + 8px);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  background: var(--background);
  padding: 8px 0;
}

.matrix-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 300px;
  min-width: 180px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  padding: 7px 12px;
}

.matrix-search span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.matrix-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  color: var(--foreground);
  font: inherit;
  font-size: 16px;
}

[data-core-user-role-filter],
.role-select {
  min-height: 36px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  padding: 0 9px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.matrix-status {
  margin: 0 0 12px;
  border: var(--line);
  background: var(--surface);
  padding: 8px 12px;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.matrix-status[data-tone="good"] {
  border-color: color-mix(in srgb, var(--green) 48%, var(--border));
}

.matrix-status[data-tone="bad"] {
  border-color: color-mix(in srgb, var(--red) 48%, var(--border));
}

.matrix-count {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.matrix-loading-state {
  display: grid;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  overflow: hidden;
}

.matrix-loading-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(190px, 1.5fr) minmax(120px, 0.7fr) minmax(360px, 2fr);
  gap: 20px;
  min-height: var(--matrix-loading-row-h, 72px);
  border-top: var(--line);
  padding: 12px 16px;
}

.matrix-loading-row:first-child {
  border-top: 0;
}

.matrix-loading-block {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 18%, var(--surface));
}

.matrix-loading-block.identity {
  width: 72%;
}

.matrix-loading-block.role {
  width: 88%;
}

.matrix-loading-block.apps {
  width: 100%;
  height: 34px;
}

/* ── WP1: canonical horizontal scroller ───────────────────────── */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* stops the drag becoming browser back-swipe */
  -webkit-overflow-scrolling: touch; /* no-op on iOS 13+; kept for parity with .matrix-wrap */
  scrollbar-width: thin;
}

/* Existing scrollers adopt the same behaviour without a markup change. */
.scroll-x,
.matrix-wrap {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── WP1: screen-reader-only utility ──────────────────────────── */
.sr-only {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.matrix-scroll-affordance {
  min-width: 0;
  position: relative;
}

.matrix-wrap {
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.matrix-scroll-fade {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 44px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--background));
}

.matrix-scroll-cue {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

/* border-collapse: separate, not collapse. Collapsed borders belong to the
   table rather than to the cell, so Chrome and Safari leave them behind when
   a cell is position: sticky — the identity column would scroll away from
   its own hairlines. The row rules are inset box-shadows for the same
   reason. */
table.matrix {
  width: 100%;
  min-width: 1150px;
  border-collapse: separate;
  border-spacing: 0;
}

/* The sticky identity cell paints over the columns scrolling under it, so
   every row needs an opaque background of its own to inherit. */
.matrix tbody tr {
  background: var(--background);
}

:root[data-theme="dark"] .matrix tbody tr {
  background: var(--dark-surface);
}

.matrix thead th {
  box-shadow: inset 0 -1px 0 var(--border);
  background: var(--surface);
  color: var(--muted);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.matrix thead th.appcol {
  text-align: center;
}

.matrix thead th.appcol small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.75;
  text-transform: none;
}

.matrix tbody td,
.matrix tbody th {
  box-shadow: inset 0 -1px 0 var(--border);
  padding: 10px 12px;
  vertical-align: middle;
  font-size: 13px;
}

/* The name cell is a row header for assistive tech; it must not look like
   one. */
.matrix tbody th {
  font-weight: inherit;
  text-align: left;
}

.matrix tbody tr:last-child td,
.matrix tbody tr:last-child th {
  box-shadow: none;
}

/* Opaque, not a transparent tint: the sticky identity cell inherits this and
   would otherwise let the scrolling columns show through it on hover. */
.matrix tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 4%, var(--background));
}

:root[data-theme="dark"] .matrix tbody tr:hover {
  background: color-mix(in srgb, var(--dark-action) 8%, var(--dark-surface));
}

/* Sticky identity column. Below 768px the table is replaced by the card
   list, so this is a tablet-and-up affordance only. */
@media (min-width: 768px) {
  .matrix thead th:first-child,
  .matrix tbody td:first-child,
  .matrix tbody th:first-child {
    position: sticky;
    left: 0;
    min-width: 268px;
    width: 268px;
    z-index: 2;
    background: inherit;
    border-right: 1px solid var(--border-strong);
    box-shadow: inset 0 -1px 0 var(--border);
  }

  .matrix thead th:first-child {
    z-index: 3;
    background: var(--surface);
  }

  .matrix tbody tr:last-child td:first-child,
  .matrix tbody tr:last-child th:first-child {
    box-shadow: none;
  }
}

.matrix td.cell {
  text-align: center;
}

.matrix-user {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  white-space: nowrap;
}

.matrix-user strong {
  font-weight: 900;
}

.matrix-user-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  white-space: nowrap;
}

.matrix-user-meta small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.matrix-provider-stack {
  display: grid;
  justify-items: start;
  gap: 3px;
}

.entra-identity-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.entra-identity-status[data-identity-state="ready"] {
  color: #196b4d;
}

.entra-identity-status[data-identity-state="blocked"] {
  color: #b42318;
}

.entra-identity-status-icon {
  min-width: 1em;
  font-weight: 900;
  text-align: center;
}

.prov {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  border: var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tag-you {
  border: var(--line);
  border-radius: 6px;
  color: var(--muted);
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.matrix .signin {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tr.blocked .matrix-user strong,
tr.blocked .matrix-user-meta small,
.user-access-card.blocked .user-access-card-head strong,
.user-access-card.blocked .user-access-card-email {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Was opacity: 0.42 on the role, last-sign-in and access chips, which put
   them at 1.81:1 light / 2.17:1 dark — unreadable, on exactly the rows an
   admin reads during a security review. A row tint carries the same signal
   at full contrast. Opaque so the sticky identity cell can inherit it, and
   mixed into the row background rather than layered over :hover. */
.matrix tbody tr.blocked,
.user-access-card.blocked {
  background: color-mix(in srgb, var(--red) 6%, var(--background));
}

.matrix tbody tr.blocked:hover {
  background: color-mix(in srgb, var(--red) 8%, var(--background));
}

:root[data-theme="dark"] .matrix tbody tr.blocked,
:root[data-theme="dark"] .user-access-card.blocked {
  --muted: #a8cad6;
  background: color-mix(in srgb, var(--red) 16%, var(--dark-surface));
}

:root[data-theme="dark"] .matrix tbody tr.blocked:hover {
  background: color-mix(in srgb, var(--red) 22%, var(--dark-surface));
}

/* -webkit-text-fill-color is required: Safari and iOS gray a disabled
   <select> regardless of colour or opacity. */
.role-select:disabled {
  -webkit-text-fill-color: var(--muted);
  background: var(--surface);
  color: var(--muted);
  opacity: 1;
}

.cell-button {
  border: 1px dashed transparent;
  border-radius: 999px;
  background: transparent;
  padding: 2px;
}

.cell-button:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* WP13: focus was styled identically to hover, which made it impossible to
   tell where the keyboard was inside a 1000-cell grid. Tight offset because
   these sit 4px apart. */
.cell-button:focus-visible {
  border-color: var(--focus-ring);
  outline-offset: 1px;
}

[data-matrix-app-state] .cell-button,
[data-matrix-app-state] > .acc {
  border-style: dashed;
}

.cell-editor {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.matrix-mini {
  min-height: 28px;
  border: var(--line);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}

.matrix-mini:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.matrix-mini:focus-visible {
  border-color: var(--focus-ring);
  color: var(--foreground);
  outline-offset: 1px;
}

.matrix-mini.danger {
  color: var(--red);
}

.matrix-mini.danger:hover {
  border-color: var(--red);
  color: var(--red);
}

.matrix-mini.danger:focus-visible {
  border-color: var(--red);
  color: var(--red);
  outline-color: var(--red);
}

.matrix .rowact {
  text-align: right;
  white-space: nowrap;
}

.matrix .rowact > .matrix-mini {
  min-height: 44px;
}

.matrix .rowact > .matrix-mini + .matrix-row-actions-menu,
.matrix .rowact > .matrix-row-actions-menu + .matrix-mini {
  margin-left: 6px;
}

.matrix-row-actions-menu {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.matrix-row-actions-menu summary {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: var(--line);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
}

.matrix-row-actions-menu summary::-webkit-details-marker {
  display: none;
}

.matrix-row-actions-menu summary:hover,
.matrix-row-actions-menu summary:focus-visible,
.matrix-row-actions-menu[open] summary {
  border-color: var(--primary);
  color: var(--primary);
}

.matrix-row-actions-menu summary span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.matrix-row-actions-popover {
  position: fixed;
  z-index: 8;
  display: grid;
  min-width: 210px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  box-shadow: var(--elev-2);
  padding: 6px;
}

/* `display: grid` on the popover outranks the UA rule that keeps closed-details
   children out of the box tree, so pin it closed until the disclosure is open. */
.matrix-row-actions-menu:not([open]) .matrix-row-actions-popover {
  display: none;
}

.matrix-row-actions-popover .matrix-mini {
  min-height: 44px;
  border: 0;
  text-align: left;
}

.matrix-row-actions-popover .matrix-mini + .matrix-mini {
  border-top: var(--line);
}

.matrix-empty {
  margin: 0;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

/* The no-results state is a standalone block rather than a row inside the
   table: a <tr> would drag the table's own 1150px min-width in behind it,
   so "no people match" used to scroll sideways. */
.matrix-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  padding: 8px 16px 20px;
}

.matrix-empty-state [data-core-user-filter-clear] {
  min-height: 44px;
}

.matrix-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.matrix-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* WP12: the users × apps matrix is 1150px wide at its narrowest, which is
   three viewport-widths of horizontal panning on a phone with no sticky
   identity column. Both views are rendered and the visible one is chosen by
   media query — a matchMedia branch read once at render time leaves the
   wrong DOM behind after a rotate. */
.user-matrix-host {
  min-width: 0;
}

.user-access-card-list {
  display: none;
}

.user-access-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.user-access-card-head strong {
  font-size: 15px;
  font-weight: 900;
}

.user-access-card-email {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.user-access-card-signin {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

  .user-access-card-role {
    display: grid;
    gap: 5px;
  }

  .user-access-card-head strong {
    font-size: 16px;
  }

  .user-access-card-email {
    font-size: 13px;
  }

  .user-access-card-role .role-select {
    width: 100%;
  }

.user-access-card-app {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
}

@media (max-width: 767.98px) {
  .matrix-wrap {
    display: none;
  }

  .matrix-scroll-fade,
  .matrix-scroll-cue {
    display: none;
  }

  .user-access-card-list {
    display: grid;
    gap: 0;
    border: var(--line);
    border-radius: var(--radius);
    background: var(--background);
  }

  .user-access-card {
    display: grid;
    gap: 10px;
    border-top: var(--line);
    padding: 14px;
  }

  .user-access-card-role > .role-select {
    width: 100%;
  }

  .matrix-count {
    flex-basis: 100%;
    margin-left: 0;
  }

  .matrix-loading-row {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 0.5fr);
    grid-template-rows: auto 1fr;
  }

  .matrix-loading-block.apps {
    grid-column: 1 / -1;
    align-self: stretch;
    height: auto;
  }

  .user-access-card:first-child {
    border-top: 0;
  }

  .user-access-card-apps {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two fixed rows — label, then a 44px control row — so a blocked user's
     bare chip occupies the same box as an editable button and the two
     columns stay level. */
  .user-access-card-app-cell {
    display: grid;
    align-items: center;
    gap: 4px;
    grid-template-rows: auto minmax(44px, auto);
  }

  .user-access-card-app-cell > .acc {
    justify-self: start;
  }

  .user-access-card-apps .cell-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 10px;
  }

  /* The editor replaces the button inside the same cell, so it has to fill
     the same box rather than sit as an inline chip row. */
  .user-access-card-app-cell .cell-editor {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .user-access-card-app-cell .cell-editor .matrix-mini {
    padding: 0 4px;
  }

  .user-access-card-actions {
    display: grid;
    gap: 6px;
  }

  .user-access-card-actions .matrix-mini {
    width: 100%;
    min-height: 44px;
  }

  :root[data-theme="dark"] .user-access-card-list {
    background: var(--dark-surface);
  }

  .matrix-access-editor-sheet:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    align-items: end;
    background: rgb(28 26 23 / 0.5);
  }

  .matrix-access-editor-dialog {
    width: 100%;
    border: var(--line);
    border-radius: 18px 18px 0 0;
    background: var(--background);
    box-shadow: 0 -14px 30px rgb(28 26 23 / 0.16);
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  }

  :root[data-theme="dark"] .matrix-access-editor-dialog {
    background: var(--dark-surface);
  }

  .matrix-access-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }

  .matrix-access-editor-head .kicker {
    display: block;
    margin: 0 0 4px;
  }

  .matrix-access-editor-head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
  }

  .matrix-access-editor-head .icon-button {
    min-width: 44px;
    min-height: 44px;
  }

  .matrix-access-editor-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .matrix-access-editor-option {
    min-height: 48px;
    border: var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--foreground);
    padding: 0 8px;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
  }

  .matrix-access-editor-option:hover,
  .matrix-access-editor-option:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
  }
}

.resource-mapping-panel {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  border-top: var(--line);
  padding-top: 22px;
}

.resource-mapping-panel h3 {
  margin: 3px 0 6px;
  font-size: 17px;
}

.resource-mapping-panel p:not(.kicker):not(.matrix-status) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.resource-mapping-qualifying {
  margin-top: 8px !important;
  color: var(--foreground) !important;
}

.resource-mapping-groups {
  display: grid;
  gap: 14px;
}

.resource-mapping-summary {
  margin: 0 !important;
  color: var(--foreground) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.resource-mapping-group,
.resource-mapping-linked {
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  overflow: hidden;
}

.resource-mapping-group-heading,
.resource-mapping-group > h4,
.resource-mapping-linked > summary {
  margin: 0;
  background: var(--surface);
  padding: 12px 14px;
}

.resource-mapping-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.resource-mapping-group h4 {
  margin: 0;
  font-size: 14px;
}

.resource-mapping-linked > summary {
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.resource-mapping-directory .resource-mapping-row {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.7fr);
}

.resource-mapping-reverse {
  max-width: none !important;
  border-bottom: var(--line);
  padding: 12px 14px;
}

.resource-mapping-population-explanation {
  max-width: none !important;
  border-bottom: var(--line);
  padding: 12px 14px;
}

.resource-mapping-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.75fr) minmax(190px, 1.1fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-top: var(--line);
  padding: 10px 14px;
}

.resource-mapping-group > .resource-mapping-row:first-of-type,
.resource-mapping-linked > .resource-mapping-row:first-of-type {
  border-top: 0;
}

.resource-mapping-identity,
.resource-mapping-resource {
  min-width: 0;
}

.resource-mapping-identity strong,
.resource-mapping-resource strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-mapping-identity span,
.resource-mapping-resource span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-mapping-state {
  width: max-content;
  max-width: 100%;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.15;
}

.resource-mapping-state[data-state="linked"] {
  color: var(--green);
}

.resource-mapping-state[data-state="proposal"] {
  color: var(--amber);
}

.resource-mapping-state[data-state="unlinked"] {
  color: var(--red);
}

.resource-mapping-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.resource-mapping-actions input {
  width: 100%;
  min-width: 220px;
  min-height: 44px;
  flex: 1 1 260px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.resource-mapping-population {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.resource-mapping-population > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.resource-mapping-population select {
  width: 100%;
  min-height: 44px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.resource-mapping-panel .command-button {
  min-height: 44px;
}

:root[data-theme="dark"] .resource-mapping-group,
:root[data-theme="dark"] .resource-mapping-linked,
:root[data-theme="dark"] .resource-mapping-actions input,
:root[data-theme="dark"] .resource-mapping-population select {
  background: var(--dark-surface);
}

@media (max-width: 900px) {
  .resource-mapping-group-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .resource-mapping-row {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 14px;
  }

  .resource-mapping-directory .resource-mapping-row {
    grid-template-columns: 1fr;
  }

  .resource-mapping-identity {
    order: 1;
  }

  .resource-mapping-state {
    order: 2;
  }

  .resource-mapping-resource,
  .resource-mapping-population,
  .resource-mapping-actions {
    order: 3;
  }

  .resource-mapping-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .resource-mapping-actions input,
  .resource-mapping-actions .command-button,
  .resource-mapping-group-heading .command-button {
    width: 100%;
  }
}

.core-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(28, 26, 23, 0.5);
  padding: 20px;
}

.core-modal-overlay[hidden] {
  display: none;
}

.matrix-access-editor-sheet {
  display: none;
}

.core-modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  border: var(--line);
  border-radius: 18px;
  background: var(--background);
  box-shadow: 0 18px 40px rgba(28, 26, 23, 0.2);
  padding: 24px;
}

.core-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.core-modal-head h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
}

.core-modal-sub {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.core-modal-field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.core-modal-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.core-modal-field input,
.core-modal-field select {
  min-height: 40px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--foreground);
  padding: 0 13px;
  font: inherit;
  font-size: 14px;
}

/* A card inside a card: the dialog is already a bordered surface, so the
   nested box only ate 30px of a 320px screen. A rule above it separates the
   grants preview from the role field just as well. */
.core-modal-grants {
  border: 0;
  border-top: var(--line);
  border-radius: 0;
  background: transparent;
  padding: 14px 0 0;
  margin-bottom: 14px;
}

.core-modal-grants > span {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.core-modal-grants div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 9px;
}

.core-modal-grants small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.core-modal-note {
  margin: 0 0 18px;
  border-top: var(--line);
  color: var(--muted);
  padding: 12px 0 0;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.5;
}

.core-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: var(--line);
  padding-top: 16px;
}

.entra-repair-dialog {
  width: min(440px, 100%);
}

.entra-repair-dialog [aria-disabled="true"] {
  cursor: wait;
  opacity: 0.55;
}

.entra-repair-person {
  margin: 0 0 14px;
  border-bottom: var(--line);
  padding: 0 0 12px;
  font-size: 15px;
  font-weight: 900;
}

.core-toast {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 12px;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  max-width: min(380px, calc(100vw - 32px));
  border-radius: var(--radius);
  background: var(--primary);
  box-shadow: 0 10px 28px rgba(28, 26, 23, 0.18);
  color: var(--background);
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.core-toast[hidden] {
  display: none;
}

.core-toast-text {
  flex: 1 1 auto;
}

/* Access overrides write immediately and are cheap to reverse, so they get an
   undo on the toast instead of a confirmation in front of every change. */
.core-toast-action {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 850;
  white-space: nowrap;
}

.core-confirm-dialog {
  width: min(420px, 100%);
}

.access-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.access-block {
  min-width: 0;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  padding: 18px;
}

.access-block > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.access-block-body {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.access-block-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.access-block-body .role-pill {
  width: max-content;
}

.access-block-body strong {
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.access-app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: var(--line);
  padding-top: 10px;
}

.access-app-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.access-app-row strong {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 900;
}

.readonly-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  border: var(--line);
  background: var(--surface);
  padding: 13px 16px;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.int-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 14px;
}

.intcard {
  min-width: 0;
  border: var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 20px 22px;
}

.intcard.failing {
  border-color: #f0aaa4;
}

.int-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.int-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
}

.int-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  padding: 9px 0;
}

.kv:last-of-type {
  border-bottom: 0;
}

.kv span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.kv strong {
  font-size: 12.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.int-err {
  display: block;
  margin: 11px 0 4px;
  border: 1px solid #f0aaa4;
  border-radius: var(--radius);
  background: #fef2f2;
  color: #b42318;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

:root[data-theme="dark"] .int-err {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(252, 165, 165, 0.4);
  color: #fca5a5;
}

.apps-status-list {
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  overflow: hidden;
}

.approw {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) 118px minmax(220px, 1.7fr) 176px;
  gap: 14px;
  align-items: center;
  border-bottom: var(--line);
  padding: 14px 18px;
}

.approw:last-child {
  border-bottom: 0;
}

.app-id strong {
  display: block;
  font-size: 14.5px;
  font-weight: 900;
}

.app-id small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.reg {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  padding: 2px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 750;
}

.reach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.errtext {
  border: 1px solid #f0aaa4;
  border-radius: 6px;
  background: #fef2f2;
  color: #b42318;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

:root[data-theme="dark"] .errtext {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(252, 165, 165, 0.4);
  color: #fca5a5;
}

.verified {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.audit-scope {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 170px 140px auto auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
}

.audit-search {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.audit-search input,
.audit-scope select {
  width: 100%;
  min-height: 44px;
  border: var(--line);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
}

.audit-denied-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border: var(--line);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.audit-denied-toggle[aria-pressed="true"] {
  border-color: var(--status-red-line);
  background: var(--status-red-fill);
  color: var(--status-red);
}

.audit-denied-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.audit-scope-count {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.audit-scope[data-state="disabled"] {
  opacity: 0.72;
}

.audit-feed {
  border: var(--line);
  border-radius: var(--radius);
  background: var(--background);
  overflow: hidden;
}

.audit-feed:empty {
  display: none;
}

.audit-entry {
  border-bottom: var(--line);
}

.audit-entry:last-child {
  border-bottom: 0;
}

.audit-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(130px, 180px) auto minmax(145px, auto) 20px;
  gap: 14px;
  align-items: center;
  min-height: 70px;
  padding: 11px 16px;
  cursor: pointer;
}

.audit-row:hover {
  background: color-mix(in srgb, var(--primary) 4%, var(--background));
}

.audit-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.audit-event-sentence {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.audit-person {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.audit-person strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-person span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-person .audit-denial-reason {
  color: var(--bad);
}

.audit-row > .pill {
  width: max-content;
  justify-self: start;
  white-space: nowrap;
}

.audit-time {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.audit-time b {
  color: var(--foreground);
  font-weight: 800;
}

.audit-chevron {
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease);
}

.audit-row[aria-expanded="true"] .audit-chevron {
  transform: rotate(180deg);
}

.audit-detail {
  border-top: var(--line);
  padding: 12px 16px;
  cursor: text;
  user-select: text;
}

.audit-evidence {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 7px 16px;
  margin: 0;
  font-size: 12px;
}

.audit-evidence dt {
  color: var(--muted);
  font-weight: 700;
}

.audit-evidence dd {
  min-width: 0;
  margin: 0;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

.audit-evidence-machine {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.audit-empty {
  padding: 22px 18px;
  text-align: left;
}

.audit-empty strong {
  color: var(--foreground);
  font-size: 14px;
}

.audit-empty p {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.audit-empty .command-button {
  margin-top: 14px;
}

.audit-error {
  border-inline-start: 1px solid var(--border);
}

.audit-error-status {
  margin-top: 14px;
}

.audit-skeleton {
  cursor: default;
}

.audit-skeleton:hover {
  background: transparent;
}

.audit-skeleton i {
  display: block;
  width: 72%;
  height: 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--muted) 10%, transparent) 0%,
    color-mix(in srgb, var(--muted) 18%, transparent) 50%,
    color-mix(in srgb, var(--muted) 10%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: audit-skeleton-sweep 1.4s linear infinite;
}

.audit-skeleton i:nth-child(2) {
  width: 58%;
}

.audit-skeleton i:nth-child(3) {
  width: 72px;
}

.audit-skeleton i:nth-child(4) {
  width: 85%;
  justify-self: end;
}

@keyframes audit-skeleton-sweep {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .core-app-card-skeleton::after {
    animation: none;
  }

  .audit-skeleton i {
    animation: none;
  }
}

:root[data-theme="dark"] .matrix-wrap,
:root[data-theme="dark"] .matrix-empty-state,
:root[data-theme="dark"] .apps-status-list,
:root[data-theme="dark"] .audit-feed,
:root[data-theme="dark"] .access-block,
:root[data-theme="dark"] .core-unavailable-list {
  background: var(--dark-surface);
}

:root[data-theme="dark"] .core-modal {
  background: var(--dark-surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

/* .core-modal-grants deliberately absent: it is a transparent section of the
   dialog now, not a nested card. */
:root[data-theme="dark"] .core-modal-field input,
:root[data-theme="dark"] .core-modal-field select {
  background: var(--dark-elevated);
}

:root[data-theme="dark"] .entra-identity-status[data-identity-state="ready"] {
  color: #7fd8b8;
}

:root[data-theme="dark"] .entra-identity-status[data-identity-state="blocked"] {
  color: #fca5a5;
}

:root[data-theme="dark"] .core-toast {
  color: #1c1a17;
}

/* Same treatment the dark theme gives .pill.dark: --dark-action is a light
   cyan, so the filled chip needs dark text rather than --background. */
:root[data-theme="dark"] .acc.full {
  border-color: var(--dark-action);
  background: var(--dark-action);
  color: #1c1a17;
}

:root[data-density="compact"] .access-block,
:root[data-density="compact"] .intcard {
  padding: 12px;
}

:root[data-density="compact"] .matrix tbody td {
  padding-top: 7px;
  padding-bottom: 7px;
}

@media (max-width: 980px) {
  .access-grid,
  .int-grid {
    grid-template-columns: 1fr;
  }

  .approw {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .approw .reach {
    grid-column: 1 / -1;
  }

  .approw .verified {
    grid-column: 1 / -1;
    text-align: left;
  }

  .audit-scope {
    grid-template-columns: minmax(180px, 1fr) 160px 130px;
  }

  .audit-denied-toggle {
    justify-self: start;
  }

  .audit-scope-count {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: end;
  }

  .audit-row {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 170px) auto 145px 20px;
  }
}

/* ── WP1: touch tier (mirror of Delivery) ─────────────────────── */
/* Matches phones AND touch-only devices of any width. Deliberately does
   NOT match hover-capable touch laptops, which would widen desktop
   controls for no benefit. Appended last so it wins the cascade against
   every earlier component rule without raising specificity. */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
  .audit-scope {
    grid-template-columns: 1fr 1fr;
  }

  .audit-search,
  .audit-denied-toggle,
  .audit-scope-count {
    grid-column: 1 / -1;
  }

  .audit-denied-toggle {
    width: 100%;
  }

  .audit-scope-count {
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }

  .audit-row {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    gap: 5px 9px;
    min-height: 87px;
    padding: 11px 12px;
  }

  .audit-event-sentence {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .audit-row > .pill {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .audit-chevron {
    grid-column: 3;
    grid-row: 1;
  }

  .audit-person {
    display: flex;
    grid-column: 1 / -1;
    gap: 5px;
    align-items: baseline;
  }

  .audit-person span::before {
    content: "· ";
  }

  .audit-time {
    display: flex;
    grid-column: 1 / -1;
    gap: 6px;
    text-align: left;
  }

  .audit-evidence {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .audit-evidence dd + dt {
    margin-top: 7px;
  }

  /* Keep the existing anchored dropdown interaction on wide coarse-pointer
     landscapes, but cap its height so WP1's 44px rows remain reachable. */
  .app-menu,
  .user-menu-panel {
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 16px floor on every focusable text control, so iOS Safari stops
     zooming the page on focus. High specificity (0,3,2) so it beats
     .global-search input, .matrix-search input and .role-select without
     enumerating them. Enumeration is how this regresses six months from
     now. */
  body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body select,
  body textarea {
    font-size: 16px;
  }

  /* 44px minimum hit area. */
  .icon-button,
  .command-button,
  .matrix-mini,
  .cell-button,
  .core-toast-action,
  .segmented-control button,
  .core-view-as-exit,
  .app-switcher-button,
  .user-menu-item,
  .app-option,
  .nav a,
  /* WP13: the last two 36px controls WP1 missed — both are the primary
     control of their surface (role per user, role filter above the grid). */
  .role-select,
  [data-core-user-role-filter],
  /* WP13: the three Add-user fields sit at 40px of their own accord, so the
     16px font floor above never lifted them to the touch minimum. This is
     the only way a person enters Birdhouse. */
  .core-modal-field input,
  .core-modal-field select {
    min-height: 44px;
  }

  .icon-button {
    min-width: 44px;
    width: 44px;
  }

  .icon-button.language-toggle {
    width: auto;
    min-width: 52px;
  }

  /* .nav a is inline-level; give it a real box so min-height applies. */
  .nav a {
    display: inline-flex;
    align-items: center;
  }

  .cell-button {
    min-width: 44px;
    padding: 6px;
  }

  /* Checkboxes/radios: grow the control itself, not the font. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
  }

  /* Text inputs that inherit their size from a wrapper. */
  .global-search,
  .matrix-search {
    font-size: 16px;
    min-height: 44px;
  }

  /* WP4: folded in from the former "(max-width: 620px), (pointer: coarse)"
     block, whose condition became a byte-identical duplicate of this one
     once the phone tier moved to 767.98px. */
  .matrix-mini[data-core-entra-repair-open] {
    min-height: 44px;
  }

  .core-toast {
    right: 16px;
    bottom: 16px;
    left: 16px;
  }

  .entra-repair-dialog {
    padding: 20px;
  }

  /* WP13: Core paints up to 278 text nodes below 12px on a single phone
     screen — badges, meta lines and the whole matrix chrome. 12px is the
     floor here; anything smaller is unreadable at arm's length on a
     390px-wide device. Every one of these lives in a wrapping or
     horizontally-scrolling container, so a half-pixel bump reflows
     nothing. .acc.none is listed separately because its own rule outranks
     .acc. Desktop keeps the tighter sizes. */
  .app-option-label span,
  .core-readiness-item small,
  .core-view-as-text small,
  .acc,
  .acc.none,
  .matrix thead th.appcol small,
  .matrix-user-meta small,
  .entra-identity-status,
  .prov,
  .tag-you,
  .matrix-mini,
  .matrix-legend,
  .app-id small,
  .reg,
  .errtext,
  .verified,
  .etime {
    font-size: 12px;
  }
}

/* MK-64 shell ------------------------------------------------------ */

.core-search-toggle,
.core-search-row {
  display: none;
}

.nav-link-skeleton {
  display: none;
}

.nav[data-core-navigation-state="loading"] a {
  pointer-events: none;
}

.nav[data-core-navigation-state="loading"] .nav-link-label {
  visibility: hidden;
}

.nav[data-core-navigation-state="loading"] .nav-link-skeleton {
  position: absolute;
  inset-inline: 10px;
  top: 50%;
  display: block;
  height: 14px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%);
  transform: translateY(-50%);
}

.nav[data-core-navigation-state="loading"] [data-nav-link] {
  position: relative;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
  .global-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 16px;
  }

  .global-header > .user-menu {
    grid-column: 1;
    grid-row: 1;
  }

  .product-lockup {
    grid-column: 2;
    grid-row: 1;
  }

  .topbar-tools {
    grid-column: 3;
    grid-row: 1;
  }

  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 767.98px) {
  :root {
    --core-header-h: calc(
      var(--core-mobile-identity-h)
      + var(--core-mobile-rail-h)
      + 1px
      + env(safe-area-inset-top)
    );
  }

  .matrix-toolbar {
    top: calc(var(--core-header-h, 105px) + 2px);
  }

  .core-sticky-shell {
    position: sticky;
    top: 0;
    z-index: 60;
  }

  .global-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: var(--core-mobile-identity-h) var(--core-mobile-rail-h);
    gap: 0;
    min-height: 0;
    border-bottom: var(--line);
    background: var(--surface);
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    position: static;
  }

  .global-header > .user-menu {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
  }

  .product-lockup {
    align-items: center;
    align-self: stretch;
    flex-wrap: nowrap;
    gap: 4px;
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
    position: static;
  }

  .product-name {
    flex: 0 1 auto;
    font-size: 16px;
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
  }

  .app-switcher {
    min-width: 0;
    position: static;
  }

  .app-switcher-button {
    min-width: 0;
    min-height: 44px;
    padding: 0 6px;
    font-size: 16px;
  }

  .topbar-tools {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: 0;
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    min-width: 132px;
    width: auto;
  }

  .topbar-tools .icon-button,
  .topbar-tools .icon-button.language-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-color: transparent;
    background: transparent;
    padding: 0;
  }

  .topbar-tools .icon-button:hover,
  .topbar-tools .icon-button[aria-expanded="true"] {
    border-color: transparent;
    background: var(--primary);
    color: var(--background);
  }

  .core-search-toggle {
    display: inline-grid;
  }

  .core-search-toggle svg {
    width: 19px;
    height: 19px;
  }

  .desktop-search,
  .header-logo {
    display: none;
  }

  .nav {
    align-items: stretch;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 0;
    min-height: var(--core-mobile-rail-h);
    padding: 0 8px;
    border-top: var(--line);
    background: var(--surface);
    scroll-snap-type: x proximity;
  }

  .nav[data-overflow-state="start"] {
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), rgba(0, 0, 0, 0.2));
  }

  .nav[data-overflow-state="end"] {
    mask-image: linear-gradient(to left, #000 calc(100% - 26px), rgba(0, 0, 0, 0.2));
  }

  .nav[data-overflow-state="middle"] {
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), #000 26px, #000 calc(100% - 26px), rgba(0, 0, 0, 0.2));
  }

  .nav[data-overflow-state="none"] {
    mask-image: none;
  }

  .nav a {
    align-items: center;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    display: inline-flex;
    flex: 0 0 auto;
    min-height: var(--core-mobile-rail-h);
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    scroll-snap-align: start;
  }

  .nav a:hover,
  .nav a[aria-current="page"] {
    background: transparent;
  }

  .nav a[aria-current="page"] {
    border-bottom-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
  }

  .nav[data-core-navigation-state="loading"] {
    align-items: center;
    overflow: hidden;
  }

  .nav[data-core-navigation-state="loading"] .nav-link-skeleton {
    inset-inline: 8px;
  }

  .core-search-row:not([hidden]) {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr) auto;
    border-top: var(--line);
    padding: 8px 12px;
  }

  .global-header > .core-view-as-banner {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .global-header:has(> .core-view-as-banner:not([hidden])) .core-search-row:not([hidden]) {
    grid-row: 4;
  }

  .core-search-field {
    max-width: none;
    min-height: 44px;
    width: 100%;
    padding: 0 12px;
  }

  .core-search-field svg {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--muted);
  }

  .core-search-field input {
    min-height: 42px;
    font-size: 16px;
  }

  .core-search-cancel,
  .core-search-empty button {
    min-height: 44px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--primary);
    padding: 0 6px;
    font-size: 15px;
    font-weight: 500;
  }

  .core-search-empty:not([hidden]) {
    align-items: center;
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 12px;
    border-top: var(--line);
    color: var(--muted);
    padding-top: 8px;
    font-size: 13px;
    line-height: 1.4;
  }

  .core-search-empty button {
    flex: none;
    font-size: 13px;
    font-weight: 700;
  }

  .core-search-results:not([hidden]) {
    display: grid;
    grid-column: 1 / -1;
    max-height: min(336px, 50dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: var(--line);
  }

  .core-search-result {
    display: grid;
    min-width: 0;
    height: 56px;
    gap: 2px;
    overflow: hidden;
    border: 0;
    border-bottom: var(--line);
    border-radius: 0;
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    padding: 9px 16px;
    text-align: left;
  }

  .core-search-result strong,
  .core-search-result > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .core-search-result strong {
    font-size: 15px;
    font-weight: 700;
  }

  .core-search-result > span {
    color: var(--muted);
    font-size: 13px;
  }

  .core-search-result mark {
    background: color-mix(in srgb, var(--accent) 42%, transparent);
    color: inherit;
  }

  .core-search-result[aria-selected="true"] {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  }

  .core-search-result:focus-visible {
    outline-offset: -3px;
  }

  .core-view-as-banner {
    position: static;
    padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  }
}

@media (max-width: 359px) {
  .product-name {
    display: none;
  }
}

/* MK-65 Core app switcher and account menu ------------------------ */

.app-menu {
  width: min(340px, calc(100vw - 24px));
  max-width: min(340px, calc(100vw - 24px));
  border-radius: 12px;
  padding: 8px 0;
  overflow: hidden;
}

.app-menu.align-end {
  right: 0;
  left: auto;
}

.sheet-handle {
  display: none;
}

.app-menu-title {
  padding: 2px 12px 8px;
}

.app-menu-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.app-option {
  /* An `auto` third track let the foot's intrinsic width win, squeezing the app
     name and purpose down to 89px at 1280. Clamp the aside and give the label
     track an explicit floor so it wins at every supported width. */
  grid-template-columns: 40px minmax(120px, 1fr) minmax(88px, 128px);
  gap: 12px;
  min-block-size: 64px;
  min-height: 64px;
  border-radius: 0;
  padding: 8px 12px;
}

.app-option + .app-option {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 76%, transparent);
}

.app-option[aria-current="true"] {
  background: color-mix(in srgb, var(--primary) 13%, var(--background));
}

.app-option:disabled {
  cursor: default;
}

.app-option[data-reachability="down"] {
  opacity: 0.72;
}

.app-option .glyph {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 15px;
}

.app-option-label {
  display: grid;
  gap: 2px;
}

.app-option-label strong {
  font-size: 15px;
  font-weight: 700;
}

.app-option-label span {
  margin-top: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 400;
}

.app-option-aside {
  display: grid;
  gap: 5px;
  justify-items: end;
  min-width: 0;
  text-align: right;
}

.app-option-aside > .pill {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 500;
}

.app-option-open {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
}

.app-option-open[hidden] {
  display: none;
}

.app-option-foot {
  align-items: center;
  display: inline-flex;
}

.app-option-foot {
  gap: 6px;
  justify-content: flex-end;
  overflow: hidden;
  max-width: 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.app-reachability-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 999px;
  background: var(--status-green);
}

.app-option[data-reachability="slow"] .app-reachability-dot {
  background: var(--status-amber);
}

.app-option[data-reachability="down"] .app-reachability-dot {
  background: var(--status-red);
}

.app-option[data-reachability="unknown"] .app-reachability-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}

:root[data-theme="dark"] .app-option[aria-current="true"] {
  background: color-mix(in srgb, var(--dark-data) 10%, var(--dark-elevated));
}

:root[data-theme="dark"] .app-option[data-reachability="live"] .app-reachability-dot {
  background: var(--dark-data);
}

.app-menu-later {
  border-top: var(--line);
  color: var(--muted);
}

.app-menu-later summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  list-style: none;
}

.app-menu-later summary::-webkit-details-marker {
  display: none;
}

.app-menu-later summary u {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.app-menu-later ul {
  margin: 0;
  padding: 0 16px 10px 30px;
  font-size: 12px;
  line-height: 1.45;
}

.app-menu-later li + li {
  margin-top: 5px;
}

.user-menu-panel {
  width: min(324px, calc(100vw - 24px));
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}

.user-menu-identity {
  align-items: start;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 14px 14px 13px;
  cursor: default;
}

/* Author display beats UA `[hidden]`, same as `.pill` above: the identity block
   is only populated once a session resolves, so it must not paint before then. */
.user-menu-identity[hidden] {
  display: none;
}

.user-menu-avatar {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--background);
  font-size: 16px;
  font-weight: 900;
}

.user-menu-identity-copy {
  min-width: 0;
}

.user-menu-identity strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.user-menu-identity > .user-menu-identity-copy > [data-user-menu-email] {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
}

.user-menu-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 8px;
}

.user-menu-session {
  align-items: center;
  display: inline-flex;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--background));
  color: var(--primary);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.user-menu-role {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.user-menu-actions {
  border-top: var(--line);
  padding: 4px 0;
}

.user-menu-item {
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 0;
  padding: 0 14px;
  font-size: 13.5px;
}

.user-menu-action-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.user-menu-item.logout {
  margin: 0;
  border-top: var(--line);
  padding-top: 0;
}

:root[data-theme="dark"] .user-menu-session {
  border-color: color-mix(in srgb, var(--dark-data) 38%, transparent);
  background: color-mix(in srgb, var(--dark-data) 12%, var(--dark-elevated));
  color: var(--dark-data);
}

@media (max-width: 619.98px) {
  .app-menu,
  .user-menu-panel {
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    box-shadow: var(--elev-3);
  }

  .sheet-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 10px;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .app-menu-title {
    padding: 0 16px 10px;
  }

  .app-option {
    padding-inline: 16px;
  }

  .app-menu-later summary {
    padding-inline: 16px;
  }
}

@media (min-width: 620px) and (max-width: 767.98px) {
  .app-switcher,
  .global-header > .user-menu {
    position: relative;
  }

  .product-lockup {
    overflow: visible;
  }

  .app-menu,
  .user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    bottom: auto;
    max-height: min(70vh, 560px);
    max-height: min(70dvh, 560px);
  }

  .app-menu {
    right: auto;
    left: 0;
  }

  .app-menu.align-end {
    right: 0;
    left: auto;
  }

  .global-header > .user-menu .user-menu-panel {
    right: auto;
    left: 0;
  }

  .app-switcher:has(> [data-app-toggle][aria-expanded="true"])::before,
  .user-menu:has(> [data-user-menu-toggle][aria-expanded="true"])::before {
    content: none;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
  .settings-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: calc(100vh - var(--personal-settings-header-h) - 12px);
    max-height: calc(100dvh - var(--personal-settings-header-h) - 12px);
    border-radius: 18px 18px 0 0;
    padding-bottom: 0;
  }

  .settings-panel .segmented-control {
    grid-template-columns: repeat(2, minmax(118px, 1fr));
  }

  .settings-panel-footer {
    flex-wrap: wrap;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .settings-panel-footer .command-button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .settings-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
  }

  .settings-panel-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    flex-wrap: nowrap;
  }

  .settings-panel-footer .command-button {
    width: 100%;
  }
}