:root {
  color-scheme: dark;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sidebar-width: 248px;
  --sidebar-header-height: 64px;
  --topbar-height: 64px;
  /* How far down the viewport the app shell actually starts. shared.js raises
     this to the strip height when it injects .bt-strip above the shell. Any
     position:fixed overlay that wants to sit under the topbar has to add it —
     the shell is pushed down, the viewport is not. */
  --shell-offset-top: 0px;
  --radius-sm: 4px;
  --radius-md: 7px;
  --density-brand-x: 18px;
  --density-nav-padding: 12px 16px 20px;
  --density-nav-group-gap: 16px;
  --density-nav-group-pad: 0px;
  --density-nav-item-height: 42px;
  --density-nav-item-gap: 12px;
  --density-nav-item-padding: 9px 14px;
  --density-footer-padding: 10px;
  --density-topbar-x: 22px;
  --density-control-height: 34px;
  --density-page-padding: 20px 22px 32px;
  --density-toolbar-gap: 18px;
  --density-toolbar-bottom: 16px;
  --density-filter-padding: 10px 12px;
  --density-panel-header-height: 46px;
  --density-panel-header-padding: 9px 13px;
  --density-panel-body-padding: 13px;
  --density-card-padding: 12px 13px;
  --density-grid-gap: 12px;
  --density-stack-gap: 12px;
  --density-table-head-padding: 8px 10px;
  --density-table-row-height: 42px;
  --density-table-cell-padding: 7px 10px;
  --density-page-padding-mobile: 14px 12px 24px;
  --bg: #050506;
  --surface-0: #09090b;
  --surface-1: #101014;
  --surface-2: #17171d;
  --surface-3: #202028;
  --surface-hover: #24232e;
  --border: #292831;
  --border-strong: #3b3946;
  --text: #f7f5fb;
  --text-soft: #c9c5d2;
  --text-muted: #8c8798;
  --accent: #a970ff;
  --accent-fg: #ffffff;
  --accent-strong: #c49aff;
  --accent-soft: rgba(169, 112, 255, 0.13);
  --accent-border: rgba(169, 112, 255, 0.38);
  --focus-ring: rgba(169, 112, 255, 0.32);
  --success: #57d29a;
  --success-soft: rgba(87, 210, 154, 0.12);
  --warning: #f3c969;
  --warning-soft: rgba(243, 201, 105, 0.12);
  --danger: #ff6b78;
  --danger-soft: rgba(255, 107, 120, 0.12);
  --info: #6fb6ff;
  --info-soft: rgba(111, 182, 255, 0.12);
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.34);
  --chart-1: #a970ff;
  --chart-2: #57d29a;
  --chart-3: #f3c969;
  --chart-4: #6fb6ff;
  --chart-5: #ff7d88;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f6;
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #e9e9eb;
  --surface-hover: #f0eeee;
  --border: #dedde0;
  --border-strong: #c8c6ca;
  --text: #181719;
  --text-soft: #4a474c;
  --text-muted: #777278;
  --accent: #c92535;
  --accent-fg: #ffffff;
  --accent-strong: #a81221;
  --accent-soft: rgba(201, 37, 53, 0.09);
  --accent-border: rgba(201, 37, 53, 0.32);
  --focus-ring: rgba(201, 37, 53, 0.2);
  --success: #16845a;
  --success-soft: rgba(22, 132, 90, 0.09);
  --warning: #9a6a00;
  --warning-soft: rgba(154, 106, 0, 0.09);
  --danger: #c92535;
  --danger-soft: rgba(201, 37, 53, 0.09);
  --info: #1769aa;
  --info-soft: rgba(23, 105, 170, 0.09);
  --shadow: 0 16px 48px rgba(31, 25, 27, 0.14);
  --chart-1: #c92535;
  --chart-2: #16845a;
  --chart-3: #b17600;
  --chart-4: #1769aa;
  --chart-5: #7f4d9d;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 0;
}

body.ds-app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button,
a,
select,
input[type="checkbox"] {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  color: inherit;
}

svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

.sidebar {
  position: relative;
  z-index: 20;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--surface-0);
}

.brand {
  display: flex;
  height: var(--sidebar-header-height);
  min-height: var(--sidebar-header-height);
  align-items: center;
  gap: 12px;
  padding: 0 var(--density-brand-x);
  border-bottom: 1px solid var(--border);
}

/* Matrix logo mark: bare accent-colored boxes matching the britematrix.com
   cloud lockup — no chip border/background around it. */
.brand-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--accent);
}

.brand-mark svg {
  width: 24px;
  height: 24px;
}

.brand-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.brand-meta {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.environment {
  margin-left: auto;
  padding: 2px 5px;
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
}

.primary-nav {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--density-nav-padding);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.nav-group + .nav-group {
  margin-top: var(--density-nav-group-gap);
  padding-top: var(--density-nav-group-pad);
}

.nav-group-items {
  display: grid;
  gap: 2px;
  min-height: 0;
  overflow: hidden;
}

.nav-label {
  margin: 0 0 7px;
}

.nav-group-toggle {
  display: flex;
  width: 100%;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}

.nav-group-toggle:hover {
  background: var(--surface-hover);
  color: var(--text-soft);
}

.nav-group-chevron {
  width: 14px;
  height: 14px;
  transition: transform 150ms ease;
}

.nav-group.is-expanded .nav-group-chevron {
  transform: rotate(90deg);
}

.nav-group-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 150ms ease;
}

.nav-group.is-expanded .nav-group-panel {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .nav-group-chevron,
  .nav-group-panel {
    transition: none;
  }
}

.nav-item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: var(--density-nav-item-height);
  align-items: center;
  gap: var(--density-nav-item-gap);
  padding: var(--density-nav-item-padding);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
}

.nav-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 680;
}

.nav-item.active svg {
  color: var(--accent);
}

.nav-item.active::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  content: "";
}

.nav-item svg {
  width: 17px;
  height: 17px;
}

.nav-item .nav-count {
  min-width: 22px;
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.nav-item.active .nav-count {
  background: var(--accent);
  color: var(--accent-fg);
}

.nav-subtree {
  position: relative;
  display: grid;
  gap: 1px;
  margin: 2px 0 5px 16px;
  padding: 4px 0 3px 9px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}

.nav-subtree-label {
  display: block;
  overflow: hidden;
  margin: 7px 8px 3px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-subtree-label:first-child {
  margin-top: 1px;
}

.sidebar-footer {
  padding: var(--density-footer-padding);
  border-top: 1px solid var(--border);
}

.profile-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
}

.profile-button:hover {
  background: var(--surface-hover);
}

.avatar {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 10px;
  font-weight: 800;
}

.profile-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.profile-copy strong,
.profile-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-copy strong {
  font-size: 12px;
}

.profile-copy span {
  color: var(--text-muted);
  font-size: 10px;
}

.profile-button > svg {
  width: 14px;
  color: var(--text-muted);
}

.workbench {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--density-topbar-x);
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
}

.topbar-left,
.topbar-actions,
.page-identity {
  display: flex;
  align-items: center;
}

.topbar-left {
  min-width: 0;
  gap: 10px;
}

.page-identity {
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
}

.breadcrumb {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* max-width is BOTH a viewport cap and a box cap. 32vw alone let the title
   grow wider than .page-identity once a crowded .topbar-actions had squeezed
   it -- and since neither box clipped, the title painted over the page's own
   buttons (Responses at 600px put "Responses" on top of "SEO Coach"). 100%
   keeps it inside the box it is given, so it ellipsises instead. */
.page-identity h1 {
  max-width: min(32vw, 100%);
  overflow: hidden;
  margin: 1px 0 0;
  color: var(--accent-strong);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  min-width: 0;
  gap: 7px;
}

.density-control {
  display: inline-flex;
  height: var(--density-control-height);
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 0 5px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-muted);
}

.density-control:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.density-control svg {
  width: 14px;
  height: 14px;
}

.density-select {
  width: 76px;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: 10px;
  font-weight: 680;
}

.density-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Accent picker (Settings > Appearance). The dark theme's accent is a user
   choice from a curated preset list; the light theme stays the design system red. The
   swatch row is built by btRenderAccentPicker() in shared.js, which owns the
   preset hex values and sets each dot's background inline — no accent literal
   belongs here. */
.ds-accent-row {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 7px;
}

.ds-accent-swatch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.ds-accent-swatch:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.ds-accent-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ds-accent-swatch.is-active {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.ds-accent-dot {
  width: 13px;
  height: 13px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}

.mobile-menu {
  display: none !important;
}

.command-trigger {
  display: flex;
  width: min(300px, 28vw);
  height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-muted);
  text-align: left;
}

.command-trigger:hover {
  border-color: var(--border-strong);
  color: var(--text-soft);
}

.command-trigger span {
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

kbd {
  padding: 2px 5px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 10px;
  font-family: var(--font);
  line-height: 1.3;
}

.icon-button,
.button {
  display: inline-flex;
  height: var(--density-control-height);
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

.icon-button {
  width: var(--density-control-height);
  padding: 0;
}

.button {
  padding: 0 12px;
}

.icon-button:hover,
.button:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.button-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

.button-primary:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--accent-fg);
}

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

.button-quiet {
  border-color: transparent;
  background: transparent;
}

/* Disabled: dimmed and inert, and the hover lift is cancelled so the control
   does not still feel pressable. Last so it wins over the variants above. */
.button:disabled,
.icon-button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.button:disabled:hover,
.icon-button:disabled:hover,
.button[aria-disabled="true"]:hover {
  border-color: var(--border);
  background: var(--surface-1);
  color: var(--text-soft);
}

.button-primary:disabled:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

.button-danger:disabled:hover {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.button-quiet:disabled:hover {
  border-color: transparent;
  background: transparent;
}

.notification-button {
  position: relative;
}

.notification-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--surface-0);
  border-radius: 50%;
  background: var(--danger);
}

.page-content {
  min-width: 0;
  overflow: auto;
  background: var(--bg);
}

.page {
  min-height: 100%;
  padding: var(--density-page-padding);
}

.page.page-flush {
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Settings area shell ───────────────────────────────────────────────────
   Shared by /settings and integration pages that belong inside Settings.
   Keep the secondary rail independent from the primary sidebar so every
   Settings destination retains the same two-rail information architecture. */
.sp-main {
  min-width: 0;
}

.sp-settings-nav {
  position: sticky;
  top: 0;
  display: grid;
  max-height: calc(100dvh - var(--topbar-height) - 40px);
  gap: 2px;
  padding: 4px 6px 14px 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sp-settings-nav-label {
  margin: 16px 10px 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.sp-settings-nav-label:first-child {
  margin-top: 2px;
}

.sp-settings-nav .sp-sub-link {
  display: flex;
  min-height: 38px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 7px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.sp-settings-nav .sp-sub-link:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.sp-settings-nav .sp-sub-link.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 750;
}

.sp-settings-content {
  min-width: 0;
}

.sp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.sp-page-title {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.3px;
}

.sp-page-desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .sp-settings-nav {
    position: static;
    display: flex;
    max-height: none;
    gap: 4px;
    padding: 0 0 8px;
    overflow-x: auto;
  }

  .sp-settings-nav-label {
    display: none;
  }

  .sp-settings-nav .sp-sub-link {
    flex: 0 0 auto;
  }

  .sp-page-header {
    align-items: stretch;
    flex-direction: column;
  }
}

.page-toolbar {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--density-toolbar-gap);
  margin-bottom: var(--density-toolbar-bottom);
}

.page-toolbar-copy {
  min-width: 0;
}

.page-toolbar h2 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 750;
}

.page-toolbar p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.toolbar-actions,
.filter-row,
.segment-control,
.inline-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.toolbar-actions {
  justify-content: flex-end;
}

.filter-row {
  min-width: 0;
  flex-wrap: wrap;
  padding: var(--density-filter-padding);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
}

.filter-spacer {
  flex: 1;
}

.input,
.select,
.textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text);
}

.input,
.select {
  height: var(--density-control-height);
  padding: 0 10px;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
}

.input-search-wrap {
  position: relative;
  min-width: 180px;
}

.input-search-wrap svg {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 15px;
  color: var(--text-muted);
}

.input-search-wrap .input {
  width: 100%;
  padding-left: 31px;
}

.textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 10px;
  line-height: 1.45;
}

.segment-control {
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.segment-control button {
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
}

.segment-control button.active {
  background: var(--surface-3);
  color: var(--text);
}

.panel,
.metric,
.list-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.panel {
  min-width: 0;
}

.panel-header {
  display: flex;
  min-height: var(--density-panel-header-height);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--density-panel-header-padding);
  border-bottom: 1px solid var(--border);
}

.panel-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 740;
}

.panel-title svg {
  width: 15px;
  color: var(--accent);
}

.panel-subtitle {
  color: var(--text-muted);
  font-size: 10px;
}

.panel-body {
  padding: var(--density-panel-body-padding);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.metric {
  min-width: 0;
  padding: var(--density-card-padding);
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 680;
}

.metric-top svg {
  width: 15px;
  color: var(--accent);
}

.metric-value {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 23px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.metric-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 10px;
}

.trend-up {
  color: var(--success);
}

.trend-down {
  color: var(--danger);
}

.grid-2,
.grid-main-rail,
.grid-3 {
  display: grid;
  min-width: 0;
  gap: var(--density-grid-gap);
}

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

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

.grid-main-rail {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 32%);
}

.stack {
  display: grid;
  gap: var(--density-stack-gap);
}

.data-table-wrap {
  min-width: 0;
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.data-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: var(--density-table-head-padding);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 760;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td {
  height: var(--density-table-row-height);
  padding: var(--density-table-cell-padding);
  border-bottom: 1px solid var(--border);
  color: var(--text-soft);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr {
  transition: background 120ms ease;
}

.data-table tbody tr:hover,
.data-table tbody tr.selected {
  background: var(--surface-hover);
}

.data-table tbody tr {
  cursor: pointer;
}

/* A section header row inside a table — the shape CW's own Security Roles
   screen uses to break a long grid into its modules. Not a data row: it does
   not hover, and it is not clickable. */
.data-table tbody tr.row-group,
.data-table tbody tr.row-group:hover {
  background: var(--surface-2);
  cursor: default;
}

.data-table tbody tr.row-group td {
  height: auto;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A whole cell that recedes — an unset permission level, an absent value. Note
   this is a CELL modifier: `.table-secondary` is `display: block` because it is
   a sub-line INSIDE a cell, and putting it on a <td> drops that cell out of the
   row. */
.data-table td.cell-muted {
  color: var(--text-muted);
}

.table-primary {
  color: var(--text);
  font-weight: 680;
}

.table-secondary {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 720;
  white-space: nowrap;
}

.badge::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.badge-success {
  border-color: rgba(87, 210, 154, 0.3);
  background: var(--success-soft);
  color: var(--success);
}

.badge-warning {
  border-color: rgba(243, 201, 105, 0.3);
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-danger {
  border-color: rgba(255, 107, 120, 0.3);
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-info {
  border-color: rgba(111, 182, 255, 0.3);
  background: var(--info-soft);
  color: var(--info);
}

.badge-accent {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
}

.priority::before {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--priority-color, var(--text-muted));
  content: "";
}

.priority-critical {
  --priority-color: var(--danger);
  color: var(--danger);
}

.priority-high {
  --priority-color: var(--warning);
  color: var(--warning);
}

.priority-normal {
  --priority-color: var(--info);
  color: var(--text-soft);
}

.priority-low {
  --priority-color: var(--text-muted);
  color: var(--text-muted);
}

.progress {
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-3);
}

.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.progress.success > span {
  background: var(--success);
}

.progress.warning > span {
  background: var(--warning);
}

.empty-state {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: 28px;
  color: var(--text-muted);
  text-align: center;
}

.empty-state svg {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: var(--accent);
}

.empty-state strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
}

.mini-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-list li {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

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

.list-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
}

.list-icon svg {
  width: 14px;
}

.list-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.list-copy strong,
.list-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-copy strong {
  color: var(--text);
  font-size: 11px;
}

.list-copy span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.list-value {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabs {
  display: flex;
  min-width: 0;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.tab {
  position: relative;
  height: 38px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 680;
  white-space: nowrap;
}

.tab:hover {
  color: var(--text);
}

.tab.active {
  color: var(--accent-strong);
}

.tab.active::after {
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  background: var(--accent);
  content: "";
}

.field {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.field > label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.field > .input,
.field > .select,
.field > .textarea {
  width: 100%;
  min-width: 0;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

/* The explanatory line under a control - a character limit, a unit, or what
   leaving the box empty will mean. Lives here rather than in a page file
   because every form in the app has wanted one. */
.field-hint {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.field-hint.is-error {
  color: var(--danger);
}

/* Label-over-value read view - the counterpart to .field for a record that is
   being shown rather than edited. A <dl> so the pairing is real markup and a
   screen reader announces the label with its value. */
.detail-list {
  display: grid;
  margin: 0;
  gap: 10px;
}

.detail-row {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.detail-row > dt {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.detail-row > dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
}

.problem-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text-soft);
  font-size: 12px;
}

.problem-list li + li {
  margin-top: 3px;
}

.form-section + .form-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.form-section h3 {
  margin: 0 0 3px;
  font-size: 12px;
}

.form-section > p {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 10px;
}

.toggle-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.toggle-row:last-child {
  border-bottom: 0;
}

.toggle-copy {
  display: flex;
  flex-direction: column;
}

.toggle-copy strong {
  font-size: 11px;
}

.toggle-copy span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.switch {
  position: relative;
  width: 34px;
  height: 20px;
  flex: 0 0 auto;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--surface-3);
  transition: 150ms ease;
}

.switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  content: "";
  transition: 150ms ease;
}

.switch input:checked + span {
  background: var(--accent);
}

.switch input:checked + span::after {
  transform: translateX(14px);
  background: #fff;
}

.chart {
  display: flex;
  min-height: 180px;
  align-items: flex-end;
  gap: 8px;
  padding: 18px 12px 8px;
  border-bottom: 1px solid var(--border);
  background-image: linear-gradient(var(--border) 1px, transparent 1px);
  background-size: 100% 25%;
}

.chart-bar {
  position: relative;
  min-width: 8px;
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--chart-1);
  opacity: 0.84;
}

.chart-bar:nth-child(5n + 2) {
  background: var(--chart-2);
}

.chart-bar:nth-child(5n + 3) {
  background: var(--chart-3);
}

.chart-bar:nth-child(5n + 4) {
  background: var(--chart-4);
}

.chart-bar:nth-child(5n) {
  background: var(--chart-5);
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px 10px;
  color: var(--text-muted);
  font-size: 9px;
}

.donut {
  display: grid;
  width: 136px;
  height: 136px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--chart-1) 0 48%, var(--chart-2) 48% 71%, var(--chart-3) 71% 85%, var(--chart-4) 85% 100%);
}

.donut::after {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--text);
  font-size: 19px;
  font-weight: 750;
  content: attr(data-value);
}

.legend {
  display: grid;
  gap: 8px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 10px;
}

.legend-row::before {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--legend, var(--chart-1));
  content: "";
}

.legend-row strong {
  margin-left: auto;
  color: var(--text-soft);
}

.timeline {
  position: relative;
  min-height: 420px;
  padding: 14px 14px 14px 54px;
}

.timeline::before {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 41px;
  width: 1px;
  background: var(--border);
  content: "";
}

.time-block {
  position: relative;
  min-height: 58px;
  margin-bottom: 7px;
  padding: 9px 11px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-2);
}

.time-block::before {
  position: absolute;
  top: 12px;
  left: -51px;
  width: 38px;
  color: var(--text-muted);
  content: attr(data-time);
  font-size: 9px;
  text-align: right;
}

.time-block strong {
  display: block;
  font-size: 11px;
}

.time-block span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 10px;
}

.time-block.meeting {
  border-color: var(--info);
}

.time-block.admin {
  border-color: var(--warning);
}

.timer-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}

.time-operations {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
  padding: 8px 10px 8px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.time-connection,
.time-interval,
.time-operation-actions {
  display: flex;
  align-items: center;
}

.time-connection {
  min-width: 174px;
  gap: 9px;
}

.status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.status-dot-online {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent);
}

.time-operation-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.time-operation-copy strong,
.time-operation-copy output {
  color: var(--text);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
  white-space: nowrap;
}

.time-operation-copy span {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
}

.time-operation-divider {
  width: 1px;
  height: 26px;
  flex: 0 0 auto;
  background: var(--border);
}

.time-interval {
  min-width: 216px;
  gap: 9px;
  cursor: pointer;
}

.time-interval > svg {
  width: 15px;
  flex: 0 0 auto;
  color: var(--accent);
}

.time-interval input[type="range"] {
  width: 98px;
  min-width: 72px;
  margin-left: auto;
  accent-color: var(--accent);
  cursor: pointer;
}

.time-operation-actions {
  min-width: 0;
  margin-left: auto;
  gap: 7px;
}

.time-operation-actions .button {
  height: 30px;
  padding: 0 9px;
}

.time-operation-actions .button svg {
  width: 13px;
}

.timer-banner .timer-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.timer-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.timer-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-copy span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.timer-value {
  font-size: 20px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.ticket-workspace {
  display: grid;
  height: 100%;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.ticket-split {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(480px, 44%) minmax(520px, 1fr);
}

.ticket-queue,
.ticket-detail {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-0);
}

.ticket-queue {
  border-right: 1px solid var(--border);
}

.queue-toolbar {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}

.queue-count {
  color: var(--text-muted);
  font-size: 10px;
}

.ticket-queue .data-table-wrap {
  height: calc(100% - 44px);
}

.ticket-queue .data-table th:nth-child(n + 5),
.ticket-queue .data-table td:nth-child(n + 5) {
  display: none;
}

.ticket-detail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.ticket-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.ticket-id-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ticket-id {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 750;
}

.ticket-subject {
  overflow: hidden;
  margin: 7px 0 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 740;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 10px;
}

.ticket-body {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 292px;
}

.ticket-main {
  min-width: 0;
  overflow: auto;
  padding: 14px 16px 24px;
}

.ticket-inspector {
  min-width: 0;
  overflow: auto;
  border-left: 1px solid var(--border);
  background: var(--surface-1);
}

.inspector-section {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.inspector-section h3 {
  margin: 0 0 9px;
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
}

.description-box {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.55;
}

.note-composer {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.composer-tools {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border-bottom: 1px solid var(--border);
}

.composer-tools .icon-button {
  width: 28px;
  height: 27px;
  border-color: transparent;
  background: transparent;
}

.note-stream {
  margin-top: 12px;
}

.note-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

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

.note-avatar {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 750;
}

.note-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 10px;
}

.note-head time {
  margin-left: auto;
  color: var(--text-muted);
}

.note-item p {
  margin: 5px 0 0;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.5;
}

.calendar-shell {
  display: grid;
  height: calc(100vh - var(--topbar-height) - 40px);
  height: calc(100dvh - var(--topbar-height) - 40px);
  min-height: 560px;
  grid-template-columns: minmax(0, 1fr) 276px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-0);
}

.calendar-main {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.calendar-title {
  flex: 1;
  font-size: 13px;
  font-weight: 740;
}

.week-grid {
  display: grid;
  min-width: 700px;
  grid-template-columns: 52px repeat(5, minmax(112px, 1fr));
  grid-template-rows: 36px repeat(9, 58px);
  overflow: auto;
  background-image:
    linear-gradient(to right, transparent 51px, var(--border) 52px, transparent 53px),
    repeating-linear-gradient(to right, transparent 0, transparent calc((100% - 52px) / 5 - 1px), var(--border) calc((100% - 52px) / 5)),
    repeating-linear-gradient(to bottom, transparent 0, transparent 57px, var(--border) 58px);
}

.week-day {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 720;
}

.week-day.today {
  color: var(--accent-strong);
}

.week-time {
  padding: 7px 7px 0 0;
  color: var(--text-muted);
  font-size: 9px;
  text-align: right;
}

.cal-event {
  z-index: 1;
  align-self: stretch;
  min-width: 0;
  margin: 3px;
  padding: 6px;
  overflow: hidden;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 9px;
}

.cal-event.meeting {
  border-color: var(--info);
  background: var(--info-soft);
}

.cal-event.focus {
  border-color: var(--success);
  background: var(--success-soft);
}

.cal-event strong,
.cal-event span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-event span {
  margin-top: 2px;
  color: var(--text-muted);
}

.calendar-rail {
  overflow: auto;
  border-left: 1px solid var(--border);
  background: var(--surface-1);
}

.chat-shell {
  display: grid;
  height: calc(100vh - var(--topbar-height) - 40px);
  height: calc(100dvh - var(--topbar-height) - 40px);
  min-height: 560px;
  grid-template-columns: 230px minmax(340px, 1fr) 270px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-0);
}

.chat-list,
.chat-thread,
.chat-rail {
  min-width: 0;
  overflow: auto;
}

.chat-list,
.chat-rail {
  background: var(--surface-1);
}

.chat-list {
  border-right: 1px solid var(--border);
}

.chat-rail {
  border-left: 1px solid var(--border);
}

.chat-head {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--border);
}

.chat-head strong {
  flex: 1;
  font-size: 11px;
}

.conversation-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
}

.conversation-row.active {
  background: var(--accent-soft);
}

.presence {
  position: relative;
}

.presence::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--surface-1);
  border-radius: 50%;
  background: var(--success);
  content: "";
}

.message-feed {
  padding: 13px 14px 80px;
}

.message {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 0;
}

.message-content {
  min-width: 0;
}

.message-content p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.5;
}

.chat-composer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 7px;
  margin: 0 13px 13px;
  padding: 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow);
}

.chat-composer .input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
}

.dialpad {
  display: grid;
  max-width: 260px;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 12px auto;
}

.dialpad button {
  display: grid;
  aspect-ratio: 1.35;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.dialpad button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.active-call {
  padding: 18px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  text-align: center;
}

.active-call strong {
  display: block;
  font-size: 16px;
}

.active-call .mono {
  display: block;
  margin: 8px 0 13px;
  color: var(--accent-strong);
  font-size: 25px;
  font-weight: 760;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.pipeline-column {
  min-width: 160px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}

.pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.opportunity-card {
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-1);
}

.opportunity-card strong,
.opportunity-card span {
  display: block;
}

.opportunity-card strong {
  font-size: 10px;
}

.opportunity-card span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 9px;
}

.opportunity-value {
  margin-top: 8px !important;
  color: var(--accent-strong) !important;
  font-weight: 750;
}

.score {
  display: inline-grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 760;
}

.search-hero {
  padding: 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
}

.search-box {
  display: flex;
  max-width: 840px;
  align-items: center;
  gap: 9px;
  margin: 0 auto;
  padding: 7px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-box > svg {
  margin-left: 4px;
  color: var(--accent);
}

.search-box .input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
}

.ai-answer {
  padding: 13px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.55;
}

.ai-answer strong {
  color: var(--accent-strong);
}

.settings-shell {
  display: grid;
  min-height: calc(100vh - var(--topbar-height) - 40px);
  min-height: calc(100dvh - var(--topbar-height) - 40px);
  grid-template-columns: 208px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-0);
}

.settings-nav {
  overflow: auto;
  padding: 10px;
  border-right: 1px solid var(--border);
  background: var(--surface-1);
}

.settings-nav button {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  text-align: left;
}

.settings-nav button svg {
  width: 14px;
}

.settings-nav button:hover,
.settings-nav button.active {
  background: var(--surface-hover);
  color: var(--text);
}

.settings-nav button.active {
  color: var(--accent-strong);
  font-weight: 700;
}

.settings-nav-label {
  margin: 15px 8px 5px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.settings-main {
  min-width: 0;
  overflow: auto;
  padding: 20px;
}

.settings-intro {
  max-width: 760px;
  margin-bottom: 17px;
}

.settings-intro h2 {
  margin: 0;
  font-size: 17px;
}

.settings-intro p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.settings-content {
  max-width: 780px;
}

.integration-row {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.integration-row:last-child {
  border-bottom: 0;
}

.integration-logo {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--accent);
}

.integration-logo svg {
  width: 15px;
}

.integration-status {
  margin-left: auto;
}

.setup-steps {
  display: grid;
  max-width: 860px;
  gap: 10px;
}

.setup-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.step-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 750;
}

.setup-step h3 {
  margin: 0;
  font-size: 12px;
}

.setup-step p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.changelog {
  max-width: 880px;
}

.release {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.release-date {
  color: var(--text-muted);
  font-size: 10px;
}

.release h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.release ul {
  margin: 0;
  padding-left: 17px;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.7;
}

.report-sheet {
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}

.report-cover {
  padding: 30px;
  border-bottom: 1px solid var(--border);
}

.report-cover h2 {
  max-width: 620px;
  margin: 8px 0;
  color: var(--accent-strong);
  font-size: 28px;
}

.report-cover p {
  color: var(--text-muted);
}

.report-section {
  padding: 22px 30px;
  border-bottom: 1px solid var(--border);
}

.login-page {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 20px;
  background: var(--bg);
}

.login-panel {
  width: min(390px, 100%);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.login-panel h2 {
  margin: 0;
  font-size: 18px;
}

.login-panel > p {
  margin: 5px 0 18px;
  color: var(--text-muted);
  font-size: 11px;
}

.login-panel .field + .field {
  margin-top: 10px;
}

.login-panel .button-primary {
  width: 100%;
  margin-top: 14px;
}

.command-dialog,
.quick-dialog {
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  color: var(--text);
  box-shadow: var(--shadow);
}

.command-dialog {
  width: min(620px, calc(100vw - 28px));
  margin: 12vh auto auto;
}

.quick-dialog {
  width: min(560px, calc(100vw - 28px));
  /* The global `* { margin: 0 }` reset strips the UA's `margin: auto` that
     centers a native <dialog>; restore it explicitly. */
  margin: auto;
  max-height: calc(100dvh - 28px);
  overflow: auto;
}

@media (max-width: 640px) {
  .quick-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
}

.command-search {
  display: flex;
  height: 52px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border-bottom: 1px solid var(--border);
}

.command-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.command-results {
  max-height: 390px;
  overflow: auto;
  padding: 8px;
}

.command-section {
  padding: 7px 8px 4px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.command-result {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
}

.command-result:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.command-result svg {
  width: 15px;
  color: var(--accent);
}

.command-result span {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 9px;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid var(--border);
}

.dialog-header h2 {
  margin: 2px 0 0;
  font-size: 16px;
}

.eyebrow {
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
}

.quick-grid button {
  display: grid;
  min-height: 100px;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  text-align: left;
}

.quick-grid button:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.quick-grid button svg {
  margin-bottom: 5px;
  color: var(--accent);
}

.quick-grid button span {
  color: var(--text-muted);
  font-size: 10px;
}

.toast-region {
  position: fixed;
  z-index: 60;
  right: 16px;
  bottom: 16px;
  display: grid;
  width: min(340px, calc(100vw - 32px));
  gap: 7px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  color: var(--text-soft);
  box-shadow: var(--shadow);
  font-size: 11px;
  animation: toast-in 180ms ease;
}

.toast svg {
  width: 15px;
  color: var(--accent);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.sidebar-scrim {
  display: none;
}

.hide {
  display: none !important;
}

/* ── Global layout density ───────────────────────────────────────────────────
   Gmail-style density changes spacing, never information or legibility. The
   shared shell and design-system components consume the variables above; the
   compatibility selectors below cover the heavily used CW grids, Keeper flow
   builder, and AI Operator surfaces while those pages finish migrating their
   private components into the system. Touch minimums later in this file still
   win on coarse pointers. */
html[data-density="compact"] {
  --sidebar-width: 232px;
  --topbar-height: 56px;
  --density-brand-x: 14px;
  --density-nav-padding: 9px 12px 14px;
  --density-nav-group-gap: 12px;
  --density-nav-group-pad: 0px;
  --density-nav-item-height: 38px;
  --density-nav-item-gap: 10px;
  --density-nav-item-padding: 7px 10px;
  --density-footer-padding: 7px;
  --density-topbar-x: 17px;
  --density-control-height: 32px;
  --density-page-padding: 15px 17px 24px;
  --density-page-padding-mobile: 11px 10px 20px;
  --density-toolbar-gap: 14px;
  --density-toolbar-bottom: 12px;
  --density-filter-padding: 8px 10px;
  --density-panel-header-height: 42px;
  --density-panel-header-padding: 7px 10px;
  --density-panel-body-padding: 10px;
  --density-card-padding: 9px 10px;
  --density-grid-gap: 9px;
  --density-stack-gap: 9px;
  --density-table-head-padding: 6px 8px;
  --density-table-row-height: 36px;
  --density-table-cell-padding: 5px 8px;
}

html[data-density="minimal"] {
  --sidebar-width: 216px;
  --topbar-height: 48px;
  --density-brand-x: 11px;
  --density-nav-padding: 7px 9px 10px;
  --density-nav-group-gap: 9px;
  --density-nav-group-pad: 0px;
  --density-nav-item-height: 32px;
  --density-nav-item-gap: 8px;
  --density-nav-item-padding: 5px 8px;
  --density-footer-padding: 5px;
  --density-topbar-x: 12px;
  --density-control-height: 28px;
  --density-page-padding: 9px 11px 16px;
  --density-page-padding-mobile: 8px 8px 16px;
  --density-toolbar-gap: 9px;
  --density-toolbar-bottom: 8px;
  --density-filter-padding: 6px 8px;
  --density-panel-header-height: 36px;
  --density-panel-header-padding: 5px 8px;
  --density-panel-body-padding: 7px;
  --density-card-padding: 7px 8px;
  --density-grid-gap: 6px;
  --density-stack-gap: 6px;
  --density-table-head-padding: 4px 6px;
  --density-table-row-height: 30px;
  --density-table-cell-padding: 3px 6px;
}

html[data-density="compact"] .nav-item.nav-sub { min-height: 27px; padding: 3px 7px; }
html[data-density="minimal"] .nav-item.nav-sub { min-height: 25px; padding: 2px 6px; }

html[data-density="compact"] :is(.cw-tabs, .op-tabs) { margin-bottom: 10px; }
html[data-density="compact"] :is(.cw-tab, .op-tab) { padding: 7px 11px; }
html[data-density="compact"] .cw-bar { gap: 6px; margin-bottom: 8px; }
html[data-density="compact"] :is(.cw-sel-bar, .cw-card-b, .cw-drawer-b) { padding: 9px 11px; }
html[data-density="compact"] :is(.cw-tbl th, .cw-tbl td, .cw-sub th, .cw-sub td) { padding: 5px 8px; }
html[data-density="compact"] :is(.cw-stats, .cw-cards, .op-tiles) { gap: 8px; margin-bottom: 10px; }
html[data-density="compact"] :is(.cw-stat, .op-tile) { padding: 9px 11px; }
html[data-density="compact"] :is(.cw-card-h, .cw-drawer-h) { padding: 7px 11px; }
html[data-density="compact"] .op-wrap { padding: 16px; }
html[data-density="compact"] :is(.op-card, .op-group-head, .op-finding, .op-brief-item) { padding: 9px 11px; }
html[data-density="compact"] .op-group-body { padding: 8px 11px 10px; }
html[data-density="compact"] .op-chat { padding: 7px 10px; margin-bottom: 5px; }
html[data-density="compact"] .op-chat-msg { padding: 5px 8px; margin-bottom: 5px; }
html[data-density="compact"] .op-pick { padding: 4px 7px; }
html[data-density="compact"] :is(.op-table th, .op-table td) { padding: 6px; }
html[data-density="compact"] .kf-wrap { gap: 12px; }
html[data-density="compact"] .kf-status { gap: 9px; padding: 9px 12px; }
html[data-density="compact"] .kf-flow-list { gap: 7px; }
html[data-density="compact"] .kf-flow-card { padding: 10px 12px; }
html[data-density="compact"] .kf-node-head { gap: 9px; padding: 10px 12px; }
html[data-density="compact"] .kf-node-body { padding: 0 12px 12px 46px; }
html[data-density="compact"] .kf-map-row { gap: 8px; padding: 8px 9px; }
html[data-density="compact"] .kf-side { padding: 5px 8px; }

html[data-density="minimal"] :is(.cw-tabs, .op-tabs) { margin-bottom: 7px; }
html[data-density="minimal"] :is(.cw-tab, .op-tab) { padding: 5px 8px; }
html[data-density="minimal"] .cw-bar { gap: 5px; margin-bottom: 6px; }
html[data-density="minimal"] :is(.cw-sel-bar, .cw-card-b, .cw-drawer-b) { padding: 6px 8px; }
html[data-density="minimal"] :is(.cw-tbl th, .cw-tbl td, .cw-sub th, .cw-sub td) { padding: 3px 6px; }
html[data-density="minimal"] :is(.cw-stats, .cw-cards, .op-tiles) { gap: 6px; margin-bottom: 7px; }
html[data-density="minimal"] :is(.cw-stat, .op-tile) { padding: 7px 8px; }
html[data-density="minimal"] :is(.cw-card-h, .cw-drawer-h) { padding: 5px 8px; }
html[data-density="minimal"] .op-wrap { padding: 10px; }
html[data-density="minimal"] :is(.op-card, .op-group-head, .op-finding, .op-brief-item) { padding: 7px 8px; }
html[data-density="minimal"] .op-group-body { padding: 6px 8px 8px; }
html[data-density="minimal"] .op-chat { padding: 6px 8px; margin-bottom: 4px; }
html[data-density="minimal"] .op-chat-msg { padding: 4px 7px; margin-bottom: 4px; }
html[data-density="minimal"] .op-pick { padding: 3px 6px; }
html[data-density="minimal"] :is(.op-table th, .op-table td) { padding: 4px 5px; }
html[data-density="minimal"] .kf-wrap { gap: 8px; }
html[data-density="minimal"] .kf-status { gap: 7px; padding: 7px 9px; }
html[data-density="minimal"] .kf-flow-list { gap: 5px; }
html[data-density="minimal"] .kf-flow-card { padding: 8px 9px; }
html[data-density="minimal"] .kf-node-head { gap: 7px; padding: 8px 9px; }
html[data-density="minimal"] .kf-node-body { padding: 0 9px 9px 40px; }
html[data-density="minimal"] .kf-map-row { gap: 6px; padding: 6px 7px; }
html[data-density="minimal"] .kf-side { padding: 4px 6px; }

@media (max-width: 1180px) {
  :root {
    --sidebar-width: 236px;
  }

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

  .time-operations {
    flex-wrap: wrap;
  }

  .time-operation-divider-actions {
    display: none;
  }

  .time-operation-actions {
    width: 100%;
    margin-left: 0;
    padding-top: 7px;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A sidebar parked off-screen with translateX(-100%) is still in the tab
     order and still in the accessibility tree, so keyboard and screen-reader
     users fall into the nav links before reaching the page. That is fixed with
     the `inert` attribute from shared.js rather than visibility:hidden here:
     visibility would have to be transitioned with a delay so the slide-out
     stays visible, which makes the guarantee depend on a transition actually
     completing. inert applies the instant the class changes and never has an
     in-between state. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 230px;
    transform: translateX(-100%);
    box-shadow: var(--shadow);
    transition: transform 180ms ease;
  }

  body.nav-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-scrim {
    position: fixed;
    z-index: 19;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(0, 0, 0, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  body.nav-open .sidebar-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu {
    display: inline-flex !important;
  }

  .topbar {
    padding: 0 12px;
  }
}

@media (max-width: 680px) {
  .page {
    padding: var(--density-page-padding-mobile);
  }

  .page-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .time-operations {
    align-items: stretch;
  }

  .time-connection,
  .time-interval {
    width: 100%;
    min-width: 0;
  }

  .time-operation-divider {
    display: none;
  }

  .time-interval {
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .time-interval input[type="range"] {
    width: min(42vw, 150px);
  }

  .time-operation-actions {
    overflow-x: auto;
  }

  .metrics-grid,
  .grid-2,
  .grid-3,
  .grid-main-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar-actions > [data-action="refresh"],
  .topbar-actions .density-control {
    display: none;
  }

  /* "How this works" collapses to its icon: the label is a bare text node
     after the svg, so zeroing the font is the only way to drop it. */
  .topbar-actions .bt-tour-open-btn {
    font-size: 0;
    gap: 0;
    width: 38px;
    padding: 0;
    justify-content: center;
  }

  .topbar-actions .bt-tour-open-btn svg {
    width: 18px;
    height: 18px;
  }

  .page-identity h1 {
    max-width: min(34vw, 100%);
  }

  /* Below 680px the actions row is a scroller, so it can afford to be narrow;
     the page title cannot. Keep enough room for a readable title + ellipsis. */
  .topbar-left {
    min-width: 110px;
  }

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

  .setup-step {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .setup-step > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .release {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* ======================================================================
   BriteMatrix integration layer (not part of the reference file)
   - Accent tokens derive from --accent / --accent-rgb which shared.js
     sets per theme (dark: purple, light: red).
   - Legacy variable bridge: older templates keep working and inherit the
     new palette until they are structurally migrated.
   ====================================================================== */

:root {
  --accent-strong: var(--accent-hover, #c49aff);
  --accent-soft: rgba(var(--accent-rgb, 169, 112, 255), 0.13);
  --accent-border: rgba(var(--accent-rgb, 169, 112, 255), 0.38);
  --focus-ring: rgba(var(--accent-rgb, 169, 112, 255), 0.32);
}

html[data-theme="light"] {
  --accent-strong: var(--accent-hover, #a81221);
  --accent-soft: rgba(var(--accent-rgb, 201, 37, 53), 0.09);
  --accent-border: rgba(var(--accent-rgb, 201, 37, 53), 0.32);
  --focus-ring: rgba(var(--accent-rgb, 201, 37, 53), 0.2);
}

/* Legacy variable bridge (style.css names -> design-system tokens). */
:root,
html[data-theme="dark"] {
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface-1);
  --bg-card: var(--surface-1);
  --bg-card-hover: var(--surface-hover);
  --border-color: var(--border);
  --text-primary: var(--text);
  --text-secondary: var(--text-soft);
  --input-bg: var(--surface-1);
  --timeline-line: var(--border);
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.34);
}

html[data-theme="light"] {
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface-1);
  --bg-card: var(--surface-1);
  --bg-card-hover: var(--surface-hover);
  --border-color: var(--border);
  --text-primary: var(--text);
  --text-secondary: var(--text-soft);
  --input-bg: var(--surface-2);
  --timeline-line: var(--border);
  --shadow: 0 16px 48px rgba(31, 25, 27, 0.14);
}

/* Sidebar must size itself inside legacy flex wrappers too. */
.sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  height: 100%;
}

/* Legacy pages wrap content in .container; neutralize the old max-width cap
   only inside the new shell. */
.workbench .container {
  max-width: none;
}

/* ── Shell transition styles (sidebar internals + legacy injections) ───── */
.nav-item {
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}

.nav-item svg {
  width: 20px;
  height: 20px;
}

/* Content density still compacts tables, forms, and cards, but it must not
   collapse the application's main wayfinding. Keep the primary rail spacious
   on every desktop density; at the intermediate breakpoint it narrows only
   slightly before becoming the mobile drawer. */
@media (min-width: 901px) {
  html[data-density="compact"],
  html[data-density="minimal"] {
    --sidebar-width: 248px;
    --density-brand-x: 18px;
    --density-nav-padding: 12px 16px 20px;
    --density-nav-group-gap: 16px;
    --density-nav-group-pad: 0px;
    --density-nav-item-height: 42px;
    --density-nav-item-gap: 12px;
    --density-nav-item-padding: 9px 14px;
  }

  html[data-density="compact"] .nav-item,
  html[data-density="minimal"] .nav-item {
    font-size: 14px;
    font-weight: 650;
  }

  html[data-density="compact"] .nav-item svg,
  html[data-density="minimal"] .nav-item svg {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  :root,
  html[data-density="compact"],
  html[data-density="minimal"] {
    --sidebar-width: 236px;
  }
}

.nav-item .nav-text {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item.nav-sub {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.nav-item.nav-sub:hover {
  color: var(--text);
}

.nav-item.nav-sub.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* The subtree rail already marks the branch; the per-item accent bar would
   double it up inside a subtree. */
.nav-subtree .nav-item.active::before {
  content: none;
}

#settingsSubnav .sp-sub-link .nav-text {
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .sidebar {
    width: min(292px, 86vw);
    flex-basis: min(292px, 86vw);
  }

  .nav-item {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .nav-item svg {
    width: 20px;
    height: 20px;
  }

  .nav-item.nav-sub {
    min-height: 38px;
  }
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sidebar-footer-note {
  display: none;
  color: var(--text-muted);
  font-size: 10px;
}

/* Notification bell (injected by shared.js under the brand row) */
.sidebar .notif-bell-row {
  padding: 8px 10px 0;
}

.sidebar .notif-bell-wrap {
  position: relative;
  width: 100%;
}

.sidebar .notif-bell-btn {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  text-align: left;
}

.sidebar .notif-bell-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.sidebar .notif-bell-btn svg {
  width: 17px;
  height: 17px;
}

.sidebar .notif-badge {
  order: 2;
  margin-left: auto;
}

/* ── Touch gesture containment ───────────────────────────────────────────────
   Stops the browser's pull-to-refresh from firing when a downward swipe reaches
   the top of the scroll container. Applies on every viewport — an accidental
   reload is never wanted — and does not affect ordinary scrolling.

   Both axes, not just y: this app is full of tables far wider than a phone
   (the directory grid is 980px, timesheets 1120px), and panning one sideways
   reaches its scroll limit constantly. Without x containment that overscroll
   chains out to the viewport, where a horizontal swipe is the browser's
   back/forward gesture — so reading to the end of a wide row could navigate
   away from the page. */
html,
body {
  overscroll-behavior: contain;
}

.page-content,
.notif-dropdown {
  overscroll-behavior: contain;
}

/* The wraps below are horizontal panners: `overflow: auto` makes each one a
   scroll container on BOTH axes even though only x ever overflows, so a
   two-axis `contain` swallowed every wheel event over a table and the page
   underneath refused to move (Owner Console People/Endpoints, which are
   nothing but stacked tables, were unscrollable across their whole middle).
   Contain the axis that actually reaches a limit; let y chain to the page. */
.data-table-wrap,
.cfg-table-wrap,
.cw-tblwrap,
.cw-gantt,
.pj-scroll,
.pj-week,
.pmx-scroll,
.dir-tblwrap,
.an-table-wrap,
.act-tbl-scroll,
.su-perm-scroll,
.pd-trend-wrap {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

/* ── Mobile notification bell ────────────────────────────────────────────────
   The sidebar bell is unreachable once the sidebar becomes an off-canvas drawer
   (<=900px), so shared.js mirrors a bell into .topbar-actions. It is hidden on
   desktop, where the sidebar bell is already visible, so there is never a
   duplicate trigger on screen. */
.topbar-actions .notification-button {
  display: none;
}

.topbar-actions .notification-button .notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  left: auto;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

@media (max-width: 900px) {
  /* shared.js inserts this button as the first child of .topbar-actions, ahead of
     any page-supplied topbar_extra markup, so order it last to sit at the right
     edge. sticky/right:0 keeps it pinned there because .topbar-actions is a
     horizontal scroller at these widths — as the last child it would otherwise
     scroll out of sight on a page with several toolbar buttons. It remains a
     positioned ancestor, so .notif-badge still anchors to it. */
  .topbar-actions .notification-button {
    order: 99;
    position: sticky;
    right: 0;
    z-index: 1;
    display: inline-flex;
  }

  .sidebar .notif-bell-row {
    display: none;
  }

  /* style.css pins the dropdown at left:208px (the desktop sidebar width) with
     a fixed 340px width, which put it almost entirely off-screen on a phone.
     Override it into a full-width sheet hanging below the topbar. */
  .notif-dropdown {
    top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px)) !important;
    right: 8px;
    left: 8px;
    width: auto !important;
    max-width: none;
    max-height: calc(100vh - var(--topbar-height) - 24px);
    max-height: calc(100dvh - var(--topbar-height) - 24px);
  }
}

/* ── Overflow containment ────────────────────────────────────────────────────
   Button rows are flex with the default nowrap. Dense page-action sets (most
   notably Chat & Meet) can exceed the topbar even at laptop widths and push
   the theme toggle off-screen.
   Nothing clamps this globally: the only overflow-x:hidden in this file is on
   .primary-nav, so the overrun became real document-level sideways scroll.

   Toolbars wrap; the topbar's own action row scrolls instead, because letting it
   wrap would change the topbar's height and --topbar-height is what positions
   the notification sheet.

   Applies at every width, not just narrow ones: the buttons are nowrap flex
   items, so whenever the row was allowed to shrink them the labels spilled
   over the neighbouring buttons (the Search trigger painting on top of the
   page actions) instead of clipping. */
.topbar-actions {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar-actions::-webkit-scrollbar {
  display: none;
}

.topbar-actions > * {
  flex: 0 0 auto;
}

@media (max-width: 680px) {
  .filter-row,
  .inline-actions {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 7px;
  }
}

/* ── Touch targets & readability ─────────────────────────────────────────────
   Desktop table density (11px text, 42px rows) is too tight to read or tap
   accurately on a phone; 13px text and 48px rows clear the ~44px touch-target
   floor. */
@media (max-width: 680px) {
  .data-table {
    font-size: 13px;
  }

  .data-table td {
    height: 48px;
    padding: 9px 10px;
  }

  .data-table th {
    padding: 9px 10px;
    font-size: 10px;
  }

  .table-secondary {
    font-size: 11px;
  }

  .icon-button,
  .button {
    height: 38px;
  }

  .icon-button {
    width: 38px;
  }

}

/* ── iOS safe areas ──────────────────────────────────────────────────────────
   _head_meta.html sets viewport-fit=cover so the app fills the screen in
   standalone mode. That puts the notch over the topbar and the home indicator
   over the sidebar footer unless the insets are paid back here. */
@media (max-width: 900px) {
  .topbar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }

  .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .page {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .notif-toast-host {
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
  }
}

/* ── Touch input ───────────────────────────────────────────────────────────────────
   Keyed off pointer:coarse rather than a width breakpoint, because both things
   fixed here are properties of the input DEVICE, not the screen: an iPad in
   landscape is 1024px wide and still zooms on a 14px field, and a touchscreen
   laptop still needs a finger-sized target. */
@media (pointer: coarse) {
  /* iOS Safari zooms the page whenever a focused form control is under 16px,
     and every control here inherits the 14px body font. So each tap into a
     filter or search box zoomed the layout — and since the shell is
     fixed-height with overflow:hidden, there was no comfortable way back out.
     16px is the threshold Safari tests, not a design preference. */
  input,
  select,
  textarea,
  .input {
    font-size: 16px;
  }

  /* 44px is the documented minimum touch target (WCAG 2.5.5, Apple HIG); the
     <=680px rules stop at 38px. Height only — widths are left alone so dense
     toolbars keep their proportions. */
  .button,
  .icon-button,
  .tab,
  .ds-accent-swatch {
    min-height: 44px;
  }

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

  .density-control {
    min-height: 44px;
  }

  .density-select {
    height: 100%;
  }

  /* These are 14-28px on purpose and sit in tight rows, so growing the painted
     control would break the row. They get an invisible hit area instead.
     It extends VERTICALLY ONLY: a centred 44px square on a 14px chip-remove
     would cover most of its own chip and steal the tap that selects it, and
     neighbouring toolbar buttons would overlap each other. Vertical space above
     and below a toolbar row is free, so this doubles the target with nothing to
     collide with. */
  .segment-control button,
  .bt-nav-btn,
  .bt-chip-remove,
  .tk-util-btn,
  .tk-date-nav-btn {
    position: relative;
  }

  .segment-control button::after,
  .bt-nav-btn::after,
  .bt-chip-remove::after,
  .tk-util-btn::after,
  .tk-date-nav-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 44px;
    transform: translateY(-50%);
  }
}

@media print {
  .sidebar,
  .sidebar-scrim,
  .topbar {
    display: none !important;
  }
}

/* == Cloud organization/account switcher (cloud shell only) ============== */
.org-switcher {
  position: relative;
  z-index: 35;
  min-width: 0;
  margin: 14px 18px 12px;
}

.org-switcher-trigger {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text);
  text-align: left;
}

.org-switcher-trigger:hover,
.org-switcher-trigger[aria-expanded="true"] {
  border-color: var(--accent-border);
  background: var(--surface-hover);
}

.org-switcher.masq .org-switcher-trigger {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.org-switcher-email {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-switcher-chevron {
  width: 14px;
  height: 14px;
  transition: transform 120ms ease;
}

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

.org-switcher-menu {
  position: fixed;
  z-index: 1150;
  top: calc(var(--sidebar-header-height) + 70px);
  left: 18px;
  width: min(360px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-1);
  box-shadow: var(--shadow);
}

.org-switcher-menu[hidden] {
  display: none;
}

.org-switcher-label {
  padding: 4px 8px 8px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.org-switcher-current,
.org-switcher-action {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
}

.org-switcher-current {
  background: var(--accent-soft);
  color: var(--text);
}

.org-switcher-action:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.org-switcher-org-mark,
.org-switcher-action > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.org-switcher-org-mark svg {
  width: 20px;
  height: 20px;
}

.org-switcher-org-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.org-switcher-org-copy strong,
.org-switcher-org-copy small,
.org-switcher-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-switcher-org-copy strong {
  font-size: 13px;
  font-weight: 750;
}

.org-switcher-org-copy small,
.org-switcher-action small {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
}

.org-switcher-check {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.org-switcher-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--border);
}

@media (max-width: 900px) {
  .org-switcher {
    margin: 12px 16px;
  }

  .org-switcher-menu {
    left: 16px;
    width: min(360px, calc(100vw - 32px));
  }
}

.masq-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  background: var(--bg);
}

.masq-overlay.open {
  display: flex;
}

.masq-card {
  display: flex;
  width: min(580px, 100%);
  max-height: 80vh;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  box-shadow: var(--shadow);
}

.masq-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.masq-head h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.masq-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
}

.masq-search {
  width: auto;
  margin: 10px 10px 4px;
}

.masq-list {
  min-height: 150px;
  flex: 1;
  overflow: auto;
  padding: 6px;
}

.masq-tenant-label {
  padding: 9px 8px 4px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.masq-user {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--surface-0);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  text-align: left;
}

.masq-user:hover {
  border-color: var(--border);
  background: var(--surface-hover);
}

.masq-user[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.masq-user-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.masq-user-name,
.masq-mail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.masq-user-name {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.masq-mail {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
}

.masq-blocked {
  flex: 0 0 auto;
  margin-left: auto;
}

/* "Former" on a switcher row: a suspended account that was once active. Takes
   the same right-hand slot as .masq-blocked; when a row carries both, this one
   claims the auto margin and the blocked badge sits beside it. */
.masq-former {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
}

.masq-former ~ .masq-blocked {
  margin-left: 6px;
}

.masq-foot {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}

.masq-foot .field {
  flex: 1;
}

/* == Cloud console layout ==================================================
   Shared by the Owner Console and Setup & Guide. The surface itself is built
   from panels, data tables, badges, fields, and standard action controls. */
.ca-wrap {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

/* Settings composition: a persistent section rail beside a roomy content
   column. Hidden sections stay out of grid flow; Endpoints may
   intentionally render its inventory and enrollment cards one after another. */
.ca-wrap-guide {
  max-width: 900px;
}

.ca-panel-copy,
.ca-meta {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.55;
}

.ca-panel-copy strong,
.ca-prose strong {
  color: var(--text);
  font-weight: 700;
}

.ca-form-row,
.ca-filter,
.ca-actions {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.ca-form-row,
.ca-filter {
  margin-top: 10px;
}

.ca-form-row .field,
.ca-filter .field {
  min-width: 180px;
}

.ca-field-wide {
  width: min(280px, 100%);
}

/* The install-command block. Deliberately NOT .input: that class pins
   height to one control row and squashed the multi-line command into an
   unreadable sliver. */
.ca-code {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  resize: none;
}

textarea.ca-code {
  min-height: 138px;
}

.ca-code:focus {
  border-color: var(--accent);
  outline: none;
}

.ca-enroll-actions {
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.ca-enroll-actions .button {
  gap: 7px;
}

.ca-enroll-actions .button svg {
  width: 14px;
  height: 14px;
}

.ca-enroll-danger {
  color: var(--danger);
}

.ca-enroll-legacy-note {
  margin-top: 12px;
}

.ca-key-line {
  word-break: break-all;
}

.ca-table {
  min-width: 700px;
}

.ca-table-wide {
  min-width: 920px;
}

.ca-panel-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.ca-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
}

.ca-inline-toggle input {
  accent-color: var(--accent);
}

.endpoint-name {
  color: var(--accent-strong);
  text-decoration: none;
}

.endpoint-name:hover {
  text-decoration: underline;
}

.ca-manual-token {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ca-manual-token > summary {
  width: fit-content;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.ca-manual-token[open] > summary {
  margin-bottom: 10px;
  color: var(--text);
}

.endpoint-back {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

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

.endpoint-metric-value {
  font-size: clamp(16px, 2.2vw, 24px);
  overflow-wrap: anywhere;
}

.endpoint-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.endpoint-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.endpoint-facts > div {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.endpoint-facts > div:last-child {
  border-bottom: 0;
}

.endpoint-facts dt {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
}

.endpoint-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  .endpoint-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ca-panel-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  .endpoint-metrics {
    grid-template-columns: 1fr;
  }

  .endpoint-facts > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* People panel — mass selection */
.ca-check-cell {
  width: 30px;
  text-align: center;
}

.ca-check-cell input {
  accent-color: var(--accent);
}

.select-compact {
  min-height: 26px;
  padding: 2px 24px 2px 7px;
  font-size: 11px;
}

/* `hidden` is display:none from the UA sheet, which a class's display:flex
   outranks — so both bulk bars sat visible reading "0 selected" forever. The
   attribute needs a class-level rule to actually win. */
.ca-bulkbar[hidden] {
  display: none;
}

/* Per-row remove: an icon, not a word. Danger colour only on hover so a table
   of endpoints does not read as a row of warnings. */
.ca-row-x {
  min-width: 26px;
  padding: 2px 7px;
  font-size: 15px;
  line-height: 1.1;
  color: var(--text-muted);
}

.ca-row-x:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

/* One row per computer: older credentials for the same name fold under it
   instead of standing beside it as a second computer. */
.ca-ep-older {
  margin-top: 4px;
  font-size: 12px;
}

.ca-ep-older > summary {
  cursor: pointer;
  color: var(--text-muted);
}

.ca-ep-older-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0 0 10px;
  color: var(--text-muted);
}

.ca-ep-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ca-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 12px 4px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}

.ca-bulkbar-count {
  min-width: 72px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
}

.ca-bulkbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}

.data-table-static tbody tr {
  cursor: default;
}

.ca-reveal,
.ca-note {
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--text-soft);
}

.ca-reveal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.ca-reveal[hidden] {
  display: none;
}

.ca-reveal-danger {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.ca-note {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 9px 11px;
  font-size: 10px;
  font-weight: 650;
}

.ca-note > span:first-child {
  color: var(--text);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.ca-note code {
  overflow-wrap: anywhere;
}

.ca-empty-compact {
  min-height: 130px;
  padding: 18px;
}

.ca-prose,
.ca-prose p,
.ca-prose li {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.55;
}

.ca-prose > :first-child {
  margin-top: 0;
}

.ca-prose > :last-child {
  margin-bottom: 0;
}

.ca-prose ul,
.ca-prose ol {
  margin: 0;
  padding-left: 20px;
}

.ca-prose li + li {
  margin-top: 7px;
}

.ca-note ul {
  margin: 0;
}

.ca-step-actions {
  margin-top: 9px;
}

.ca-migration-note {
  margin: 12px 0 0;
}

.code-block {
  display: block;
  max-width: 100%;
  margin: 12px 0;
  padding: 11px 12px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* == Page banner (reusable) ================================================
   A page-level notice under a header or inside a section. Default is
   informational; .page-banner-danger marks warning and read-only states. */
.page-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 11px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

/* The banner is a flex row so an icon can sit beside the text. That makes every
   inline child its own flex item, so a <strong> mid-sentence became a third
   column and tore the sentence into pieces. Inline children stay inline; only
   the icon and a wrapping element are items. */
.page-banner > strong,
.page-banner > em,
.page-banner > b,
.page-banner > span:not([class]),
.page-banner > code {
  display: inline;
}

.page-banner svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  flex: 0 0 auto;
  color: var(--accent-strong);
}

.page-banner-danger {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.page-banner-danger svg {
  color: var(--danger);
}

@media (max-width: 900px) {
  .identity-actions .icon-button {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 680px) {
  .masq-overlay {
    padding: 8px;
  }

  .masq-card {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .masq-head {
    padding: 12px;
  }

  .masq-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .masq-foot .button,
  .ca-reveal .button {
    width: 100%;
  }

  .ca-form-row,
  .ca-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .ca-form-row .field,
  .ca-filter .field,
  .ca-form-row .button,
  .ca-filter .button {
    width: 100%;
  }

  .ca-reveal {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Productivity screens — one card per person, latest capture on top. */
.ca-screens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ca-screen-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.ca-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ca-screen-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.ca-screen-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ca-screen-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
}

.ca-screen-sealed {
  border: 1px dashed var(--border);
}
/* The PIN challenge on a sealed card. Deliberately understated: it is an
   invitation the locked person extended, not a control the console owns. */
.ca-screen-pin {
  align-items: flex-end;
  gap: 8px;
}
.ca-screen-pin .field {
  flex: 1 1 auto;
  min-width: 0;
}
.ca-screen-pin .input-compact {
  padding: 5px 8px;
  font-size: 12px;
}
/* An unlock is a borrowed view of somebody else's protected data, so the card
   says so for as long as it lasts rather than looking like an ordinary one. */
.ca-meta-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--warning, var(--text-muted));
}
/* Capture history — the rolling window, opened under one person's card. */
.ca-screen-history {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.ca-screen-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
}
.ca-screen-strip-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
}
.ca-screen-strip-item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ca-screen-strip-item:hover img {
  border-color: var(--accent);
}

/* Endpoint load sparkline. */
#ep-load-chart { width: 100%; display: block; }
.ep-load-legend { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.ep-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.ep-swatch-cpu { background: var(--accent); }
.ep-swatch-mem { background: var(--warning); }


/* == Settings shell v2: the section rail rides flush against the primary
   sidebar =================================================================
   The secondary rail used to be the first column of a centred, padded page,
   which left a band of page background between it and the sidebar and made
   the two read as unrelated. It is now a real second rail: same top edge,
   no gutter, its own surface and a single hairline between them, so
   navigation deepens left-to-right and only the content column is padded. */
:root {
  --settings-rail-width: 226px;
}

.sp-shell {
  display: grid;
  min-height: 100%;
  align-items: stretch;
  grid-template-columns: var(--settings-rail-width) minmax(0, 1fr);
}

.sp-rail {
  min-width: 0;
  border-right: 1px solid var(--border);
  background: var(--surface-1);
}

.sp-rail > .sp-rail-inner,
.sp-rail > .sp-settings-nav {
  position: sticky;
  top: 0;
  display: grid;
  max-height: calc(100dvh - var(--topbar-height));
  align-content: start;
  gap: 2px;
  padding: 16px 12px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* shared.js injects the 30px .bt-strip above the shell and shortens
   .app-shell to match; the sticky rail has to lose the same 30px or its
   bottom entries sit below the viewport with no way to reach them. */
body.bt-strip-on .sp-rail > .sp-rail-inner,
body.bt-strip-on .sp-rail > .sp-settings-nav {
  max-height: calc(100dvh - var(--topbar-height) - 30px);
}

.sp-shell-body {
  min-width: 0;
  padding: var(--density-page-padding);
}

.sp-shell-body > .sp-settings-content,
.sp-shell-body > .stack {
  max-width: 980px;
}

.sp-rail .sp-settings-nav-label,
.sp-rail .sp-rail-label {
  margin: 16px 8px 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.sp-rail .sp-settings-nav-label:first-child,
.sp-rail .sp-rail-label:first-child {
  margin-top: 0;
}

.sp-rail .sp-sub-link {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.sp-rail .sp-sub-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.8;
}

.sp-rail .sp-sub-link:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.sp-rail .sp-sub-link.active,
.sp-rail .sp-sub-link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 750;
}

.sp-rail .sp-sub-link .sp-sub-badge {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 800;
}

/* Every available integration hangs off the single Integrations entry as a
   third-level child, so the rail mirrors the dashboard's catalog one-to-one
   (feature-profile gates still hide sections a build does not ship). */
.sp-rail .sp-sub-children {
  display: grid;
  gap: 1px;
  margin: 2px 0 4px 19px;
  padding-left: 9px;
  border-left: 1px solid var(--border);
}

.sp-rail .sp-sub-children .sp-sub-link {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 980px) {
  .sp-shell {
    grid-template-columns: 1fr;
  }

  .sp-rail {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .sp-rail > .sp-rail-inner,
  .sp-rail > .sp-settings-nav {
    position: static;
    display: flex;
    max-height: none;
    gap: 5px;
    padding: 10px 12px;
    overflow-x: auto;
  }

  .sp-rail .sp-settings-nav-label,
  .sp-rail .sp-rail-label,
  .sp-rail .sp-sub-children {
    display: none;
  }

  .sp-rail .sp-sub-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* == Integration catalog ================================================= */
.int-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}

.int-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-0);
}

.int-card-body {
  flex: 1;
  padding: 18px 18px 16px;
}

.int-card-mark {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 10px;
  place-items: center;
  background: var(--surface-2);
  color: var(--accent);
}

.int-card-mark svg {
  width: 24px;
  height: 24px;
}

.int-card-name {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
}

.int-card-desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.int-card-foot {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}

.int-card.is-connected .int-card-mark {
  background: var(--accent-soft);
}

.int-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* == Preference rows (SSO and Directory policy switches) ================= */
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.pref-row.is-locked {
  opacity: 0.55;
}

.pref-copy strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.pref-copy span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.pref-divider {
  margin: 22px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* A titled card nested inside a panel body. Same header grammar as a
   top-level panel -- accent icon, one hairline under the title -- so a
   configuration block reads as its own object instead of a bare <h3>
   floating between the preference rows above it. */
.ca-subpanel {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.ca-subpanel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}

.ca-subpanel-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 740;
}

.ca-subpanel-title svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--accent);
}

.ca-subpanel-body {
  padding: 14px;
}

.ca-subpanel-body > .ca-panel-copy:first-child {
  margin-top: 0;
}


/* --- Narrow-viewport pass for the Owner Console panels ---------------------
   On a phone these panels failed three ways at once: the action rows packed
   full-size buttons edge to edge, the label/value tables inherited the
   700px min-width meant for the multi-column grids and pushed every VALUE
   off-screen, and the toolbar/panel copy clipped instead of wrapping. */
@media (max-width: 640px) {
  .ca-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin-top: 14px;
  }

  .ca-actions > .button,
  .ca-actions > a.button {
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }

  /* Two-column label/value tables become stacked key-value rows, so the
     value sits beside its own label instead of behind a scroll edge. */
  .ca-kv {
    min-width: 0;
  }

  .ca-kv,
  .ca-kv tbody,
  .ca-kv tr {
    display: block;
    width: 100%;
  }

  .ca-kv tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }

  .ca-kv tr:last-child {
    border-bottom: 0;
  }

  .ca-kv th,
  .ca-kv td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  /* The desktop head is sticky; stacked it would pin a label mid-scroll. */
  .ca-kv th {
    position: static;
  }

  .ca-kv th {
    flex: 0 0 auto;
    white-space: normal;
  }

  .ca-kv td {
    flex: 1 1 auto;
    text-align: right;
  }

  /* A long panel title and its status badge must not overlap: wrap the
     badge under the title instead of overprinting it. */
  .panel-header,
  .ca-subpanel-header {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .page-toolbar-copy p,
  .ca-panel-copy,
  .ca-meta {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE SHELL
   ══════════════════════════════════════════════════════════════════════════

   BriteMatrix is installed as a PWA on phones, so mobile is a presentation of
   its own rather than the desktop workbench squeezed narrow. This block owns
   the parts of that presentation every page shares: the header, the sheet and
   menu primitives the page-level mobile layouts are built from, and the
   safe-area payback for anything pinned to the bottom of the screen.

   THE BREAKPOINT is width OR short-landscape. A phone turned sideways is
   844x390: wide enough to pass a width-only test and far too short to carry a
   two-column workbench, so it gets the mobile layout on the axis it is
   actually short of. Keep this condition identical to BMX_MOBILE_QUERY in
   static/js/mobile-shell.js, today.css and the tickets page style block.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile shell (BMX_MOBILE_QUERY) ────────────────────────────────────── */

:root {
  /* One name for "how much of the bottom of the screen belongs to Android's
     gesture bar / the iOS home indicator". Every fixed bottom bar pays it. */
  --bmx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bmx-safe-left: env(safe-area-inset-left, 0px);
  --bmx-safe-right: env(safe-area-inset-right, 0px);
}

/* The overflow menu button only exists on mobile; on desktop every control it
   would hold is already on the header. */
.bmx-topbar-more {
  display: none;
}

/* ── shared sheet + menu primitives ─────────────────────────────────────── */

.bmx-sheet-scrim {
  position: fixed;
  z-index: 58;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.bmx-sheet-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.bmx-sheet {
  position: fixed;
  z-index: 59;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  max-height: 88vh;
  max-height: 88dvh;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-width: 1px 0 0;
  border-radius: 16px 16px 0 0;
  background: var(--surface-0);
  box-shadow: var(--shadow);
  transform: translateY(101%);
  visibility: hidden;
  transition: transform 200ms ease, visibility 0s linear 200ms;
}

.bmx-sheet.open {
  transform: none;
  visibility: visible;
  transition: transform 200ms ease;
}

.bmx-sheet-grab {
  width: 38px;
  height: 4px;
  flex: none;
  margin: 8px auto 2px;
  border-radius: 2px;
  background: var(--border-strong);
}

.bmx-sheet-head {
  display: flex;
  min-height: 46px;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 8px;
}

.bmx-sheet-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bmx-sheet-close {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.bmx-sheet-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.bmx-sheet-close svg {
  width: 20px;
  height: 20px;
}

.bmx-sheet-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 14px 14px;
}

.bmx-sheet-foot {
  display: flex;
  flex: none;
  gap: 10px;
  padding: 10px 14px calc(10px + var(--bmx-safe-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}

.bmx-sheet-foot .button {
  flex: 1;
  justify-content: center;
}

/* Stacked labelled control, the shape every mobile filter takes. */
.bmx-field {
  display: block;
  margin-bottom: 12px;
}

.bmx-field > span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bmx-field select,
.bmx-field input {
  width: 100%;
  /* Page-level width caps (a typeahead sized for a toolbar, say) must not
     leave a half-width control in a full-width sheet. */
  max-width: none;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text);
  font-size: 16px;
}

.bmx-field select:focus,
.bmx-field input:focus {
  border-color: var(--accent);
  outline: none;
}

/* Removable "this filter is on" chips under the search field. */
.bmx-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.bmx-chip-row:empty {
  display: none;
}

.bmx-chip {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 650;
}

.bmx-chip button {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 700 14px/1 inherit;
  cursor: pointer;
}

.bmx-chip button:hover {
  background: var(--surface-hover);
}

/* The compact action row that replaces a wrapped desktop toolbar. */
.bmx-mob-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bmx-mob-btn {
  display: inline-flex;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.bmx-mob-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bmx-mob-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.bmx-mob-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.bmx-mob-btn.on {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.bmx-mob-btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

/* [hidden] must beat the badge's own display, or "0 filters" still shows. */
.bmx-mob-badge[hidden] {
  display: none;
}

.bmx-mob-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 10px;
  font-weight: 750;
}

/* Popover list — every page-level "⋮", view picker and card menu.
   No top/left/right here on purpose: BMX.anchorMenu (static/js/mobile-shell.js)
   sets them from the trigger's own rect at open time, and the fixed anchor this
   rule used to carry was the topbar overflow's position, which put every
   page-level menu in the far corner of the screen instead of under its button.
   The topbar's own menu keeps that anchor in .bmx-topbar-menu below, where it
   is true. */
.bmx-menu {
  position: fixed;
  z-index: 61;
  display: flex;
  min-width: 208px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: 70vh;
  max-height: 70dvh;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow);
}

.bmx-menu button {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.bmx-menu button:hover,
.bmx-menu button:focus-visible {
  background: var(--surface-hover);
}

.bmx-menu button.danger {
  color: var(--danger);
}

.bmx-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

.bmx-menu-field {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}

.bmx-menu-field select {
  min-height: 34px;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
}

.bmx-topbar-menu {
  position: fixed;
  z-index: 61;
  top: calc(var(--shell-offset-top) + var(--topbar-height) + 4px);
  right: max(8px, var(--bmx-safe-right));
  display: flex;
  min-width: 216px;
  max-width: min(320px, calc(100vw - 16px));
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow);
}

.bmx-topbar-menu button {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.bmx-topbar-menu button:hover,
.bmx-topbar-menu button:focus-visible {
  background: var(--surface-hover);
}

.bmx-topbar-menu-field {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}

.bmx-topbar-menu-field select {
  min-height: 34px;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
}

/* Text that must never widen its row. Applied to any grid/flex child holding
   arbitrary content — a company name, a status, a URL in a note. */
.bmx-clamp-1,
.bmx-clamp-2 {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.bmx-clamp-1 {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bmx-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 460px) {
  /* A 64px header is a tenth of a phone screen spent on chrome. 56px still
     clears the 44px touch floor for the buttons inside it. Written against
     the density selectors too, which are more specific than :root. */
  :root,
  html[data-density="compact"],
  html[data-density="minimal"] {
    --topbar-height: 56px;
  }

  /* Everything low-frequency leaves the header for the "⋮" menu, which finds
     them there and clicks the originals. Density is already hidden at 680px;
     hidden rather than removed so the menu can still drive it. */
  .topbar-actions .density-control,
  .topbar-actions .ds-theme-toggle,
  .topbar-actions .bt-tour-open-btn,
  .topbar-actions .bt-jobq-top,
  .topbar-actions .fb-open-btn {
    display: none;
  }

  .bmx-topbar-more {
    display: inline-flex;
    order: 98;      /* before the notification bell, which is order 99 */
  }

  /* Search keeps its glyph and loses its label and shortcut hint — Ctrl+K is
     not a thing anyone presses on a phone. */
  .topbar-actions .cmdk-trigger {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .topbar-actions .cmdk-trigger span,
  .topbar-actions .cmdk-trigger kbd {
    display: none;
  }

  .topbar-actions {
    gap: 4px;
  }

  /* With four icons gone the title can have the room it was denied -- but only
     the room that is actually there. `none` dropped the box cap too, so on a
     page carrying its own action buttons (Responses at 600px) the title grew
     past .page-identity again and had to be clipped mid-word. 100% keeps the
     viewport cap off and the box cap on, so it ellipsises instead. */
  .page-identity h1 {
    max-width: 100%;
    font-size: 16px;
  }

  .breadcrumb {
    font-size: 9.5px;
  }

  .topbar {
    gap: 10px;
  }

  .icon-button,
  .button {
    min-height: 44px;
  }

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

/* Landscape phones are ~390px tall: a 56px header plus a 30px strip is a
   quarter of the screen before any content. */
@media (max-height: 460px) and (max-width: 950px) {
  :root,
  html[data-density="compact"],
  html[data-density="minimal"] {
    --topbar-height: 48px;
  }

  .breadcrumb {
    display: none;
  }

  .bmx-sheet {
    max-height: 94vh;
    max-height: 94dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bmx-sheet,
  .bmx-sheet-scrim {
    transition: none;
  }
}