/*
 * Design tokens (spec §4.1–§4.4). Final values, frozen in WP-0.
 *
 * Light values sit on :root. Dark values are declared twice — for the system preference, unless
 * this tab chose light, and for a tab that chose dark — so the per-tab toggle wins either way.
 * `tests/tokens.test.ts` (WP-5) parses this file and checks the contrast of every §4.1.1 pair.
 */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-var.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Colour */
  --canvas: #f4f6fb;
  --bg: #fbfcfe;
  --panel: #ffffff;
  --panel-2: #f8fafd;
  --fg: #16181d;
  --muted: #5b6270;
  --line: #e3e7ee;
  --line-strong: #cfd6e2;
  --input-border: #7d8696;
  --accent: #1f3a8a;
  --accent-hover: #182e6e;
  --accent-ink: #ffffff;
  --accent-2: #7c9cf5;
  --tint: #eef2fb;
  --focus: #1f3a8a;
  --focus-halo: rgba(31, 58, 138, 0.25);
  --ok: #2f9e5f;
  --ok-soft: #e7f5ed;
  --ok-ink: #1f7a47;
  --warn: #b7791f;
  --warn-soft: #fbf1e1;
  --warn-ink: #8a5a12;
  --bad: #c9553d;
  --bad-soft: #fbebe7;
  --bad-ink: #a3402b;
  --info: #2f6fdb;
  --info-soft: #e8f0fd;
  --info-ink: #1f55b3;
  --neutral-soft: #eef0f4;
  --neutral-ink: #4b5261;
  --scrim: rgba(15, 18, 24, 0.45);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px -12px rgba(31, 58, 138, 0.18);
  --shadow-lg: 0 18px 50px -20px rgba(31, 58, 138, 0.45);
  --shadow-up: 0 -8px 24px -18px rgba(16, 24, 40, 0.35);
  --nav-bg: #10214f;
  --nav-fg: #dfe6ff;
  --nav-muted: #9fb0e0;
  --nav-active: rgba(255, 255, 255, 0.12);
  --nav-bar: #9db4ff;
  --brand-gradient: linear-gradient(135deg, var(--accent), var(--accent-2));

  /* Charts (§4.1.3): never status colours, never text */
  --series-1: #2f5fd0;
  --series-2: #e0612a;
  --series-3: #159f6e;
  --series-4: #b23f95;
  --ordinal-1: #7e97e3;
  --ordinal-2: #5676d3;
  --ordinal-3: #3656bd;
  --ordinal-4: #1f3a8a;
  --chart-muted: #b8c2d6;
  --chart-grid: #eceff5;
  --chart-axis: #c5cdda;
  --chart-guide: #7d8696;

  /* Type (§4.2) */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing (§4.3) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;

  /* Radii */
  --r-sm: 6px;
  --r-input: 9px;
  --r-button: 10px;
  --r-card: 14px;
  --r-dialog: 18px;
  --r-pill: 999px;

  /* Layout, per breakpoint in 20-layout.css */
  --gap: 24px;
  --page-pad: 32px;
  --card-pad-block: var(--s5);
  --card-pad-inline: var(--s6);
  --sidebar-width: 248px;
  --rail-width: 72px;
  --topbar-height: 60px;
  --tabbar-height: 64px;
  --control-height: 36px;
  --content-max: 1200px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-menu: 180ms;
  --t-drawer: 240ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0b0e14;
    --bg: #0f1218;
    --panel: #151a23;
    --panel-2: #1b2130;
    --fg: #e9ecf2;
    --muted: #a5adbb;
    --line: #2b3240;
    --line-strong: #3a4353;
    --input-border: #6b778c;
    --accent: #9db4ff;
    --accent-hover: #b8c9ff;
    --accent-ink: #0f1218;
    --accent-2: #5b7be0;
    --tint: #1a2133;
    --focus: #9db4ff;
    --focus-halo: rgba(157, 180, 255, 0.28);
    --ok: #5fc48a;
    --ok-soft: #15291f;
    --ok-ink: #7fd6a4;
    --warn: #e0a84a;
    --warn-soft: #2a2113;
    --warn-ink: #f0c27a;
    --bad: #f08a73;
    --bad-soft: #2d1a17;
    --bad-ink: #f5a896;
    --info: #8fb3ff;
    --info-soft: #16223a;
    --info-ink: #a9c4ff;
    --neutral-soft: #1d2330;
    --neutral-ink: #c3c9d4;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --shadow-up: 0 -8px 24px -16px rgba(0, 0, 0, 0.7);
    --nav-bg: #0a1330;
    --nav-fg: #dfe6ff;
    --nav-muted: #8b9bd0;
    --nav-active: rgba(157, 180, 255, 0.16);
    --series-1: #6f8ff0;
    --series-2: #e06a36;
    --series-3: #23a877;
    --series-4: #d16aae;
    --ordinal-1: #4560b0;
    --ordinal-2: #5f7dd4;
    --ordinal-3: #86a0ee;
    --ordinal-4: #bccdff;
    --chart-muted: #46506a;
    --chart-grid: #232a36;
    --chart-axis: #3d4658;
    --chart-guide: #6b778c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0b0e14;
  --bg: #0f1218;
  --panel: #151a23;
  --panel-2: #1b2130;
  --fg: #e9ecf2;
  --muted: #a5adbb;
  --line: #2b3240;
  --line-strong: #3a4353;
  --input-border: #6b778c;
  --accent: #9db4ff;
  --accent-hover: #b8c9ff;
  --accent-ink: #0f1218;
  --accent-2: #5b7be0;
  --tint: #1a2133;
  --focus: #9db4ff;
  --focus-halo: rgba(157, 180, 255, 0.28);
  --ok: #5fc48a;
  --ok-soft: #15291f;
  --ok-ink: #7fd6a4;
  --warn: #e0a84a;
  --warn-soft: #2a2113;
  --warn-ink: #f0c27a;
  --bad: #f08a73;
  --bad-soft: #2d1a17;
  --bad-ink: #f5a896;
  --info: #8fb3ff;
  --info-soft: #16223a;
  --info-ink: #a9c4ff;
  --neutral-soft: #1d2330;
  --neutral-ink: #c3c9d4;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-up: 0 -8px 24px -16px rgba(0, 0, 0, 0.7);
  --nav-bg: #0a1330;
  --nav-fg: #dfe6ff;
  --nav-muted: #8b9bd0;
  --nav-active: rgba(157, 180, 255, 0.16);
  --series-1: #6f8ff0;
  --series-2: #e06a36;
  --series-3: #23a877;
  --series-4: #d16aae;
  --ordinal-1: #4560b0;
  --ordinal-2: #5f7dd4;
  --ordinal-3: #86a0ee;
  --ordinal-4: #bccdff;
  --chart-muted: #46506a;
  --chart-grid: #232a36;
  --chart-axis: #3d4658;
  --chart-guide: #6b778c;
}

:root[data-theme="light"] {
  color-scheme: light;
}
/* Base elements, focus, form controls and motion (spec §4.2, §4.3). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--fg);
  font: 400 14px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
}

p {
  margin: 0 0 var(--s2);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

code,
pre,
kbd {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

img,
svg {
  max-width: 100%;
}

.icon {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}

:focus:not(:focus-visible) {
  outline: none;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: var(--s2);
  inset-inline-start: var(--s2);
  z-index: 100;
  padding: var(--s2) 14px;
  border-radius: var(--r-button);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}

.skip:focus {
  transform: none;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 13px;
}

noscript {
  display: block;
  padding: var(--s4);
  text-align: center;
  background: var(--warn-soft);
  color: var(--warn-ink);
  font-weight: 600;
}

/* Form controls */
.field-control {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: 7px 11px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-input);
  background: var(--panel);
  color: var(--fg);
  font: 400 14px/1.4 var(--font-body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}

.field-control:hover {
  border-color: color-mix(in srgb, var(--input-border) 70%, var(--fg));
}

.field-control::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.field-control[readonly] {
  background: var(--panel-2);
  color: var(--muted);
}

.field-control[aria-invalid="true"] {
  border-color: var(--bad);
}

textarea.field-control {
  min-height: 0;
  resize: vertical;
  line-height: 1.5;
}

select.field-control {
  cursor: pointer;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Motion (§4.3): nothing moves for someone who asked for less motion. */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/*
 * Breakpoints and the 12-column grid (spec §4.4). sm < 720, md 720–1023, lg 1024–1279,
 * xl 1280–1439, xxl ≥ 1440 (spans as xl). A cell carries `s-xl-n s-lg-n s-md-n s-sm-n`.
 */

@media (max-width: 1279px) {
  :root {
    --sidebar-width: 232px;
  }
}

@media (max-width: 1023px) {
  :root {
    --gap: 16px;
    --page-pad: 24px;
  }
}

@media (max-width: 719px) {
  :root {
    --page-pad: 16px;
    --control-height: 44px;
    --card-pad-block: var(--s4);
    --card-pad-inline: var(--s4);
  }
}

.page-root {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  min-width: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

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

.grid > * {
  min-width: 0;
}

.cell {
  grid-column: span 12;
  min-width: 0;
}

/* Inline items that wrap: pills, buttons, chips. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  min-width: 0;
}

.cards-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--gap);
}

@media (min-width: 1280px) {
  .s-xl-1 { grid-column: span 1; }
  .s-xl-2 { grid-column: span 2; }
  .s-xl-3 { grid-column: span 3; }
  .s-xl-4 { grid-column: span 4; }
  .s-xl-5 { grid-column: span 5; }
  .s-xl-6 { grid-column: span 6; }
  .s-xl-7 { grid-column: span 7; }
  .s-xl-8 { grid-column: span 8; }
  .s-xl-9 { grid-column: span 9; }
  .s-xl-10 { grid-column: span 10; }
  .s-xl-11 { grid-column: span 11; }
  .s-xl-12 { grid-column: span 12; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .s-lg-1 { grid-column: span 1; }
  .s-lg-2 { grid-column: span 2; }
  .s-lg-3 { grid-column: span 3; }
  .s-lg-4 { grid-column: span 4; }
  .s-lg-5 { grid-column: span 5; }
  .s-lg-6 { grid-column: span 6; }
  .s-lg-7 { grid-column: span 7; }
  .s-lg-8 { grid-column: span 8; }
  .s-lg-9 { grid-column: span 9; }
  .s-lg-10 { grid-column: span 10; }
  .s-lg-11 { grid-column: span 11; }
  .s-lg-12 { grid-column: span 12; }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .s-md-1 { grid-column: span 1; }
  .s-md-2 { grid-column: span 2; }
  .s-md-3 { grid-column: span 3; }
  .s-md-4 { grid-column: span 4; }
  .s-md-5 { grid-column: span 5; }
  .s-md-6 { grid-column: span 6; }
  .s-md-7 { grid-column: span 7; }
  .s-md-8 { grid-column: span 8; }
  .s-md-9 { grid-column: span 9; }
  .s-md-10 { grid-column: span 10; }
  .s-md-11 { grid-column: span 11; }
  .s-md-12 { grid-column: span 12; }
}

@media (max-width: 719px) {
  .s-sm-1 { grid-column: span 1; }
  .s-sm-2 { grid-column: span 2; }
  .s-sm-3 { grid-column: span 3; }
  .s-sm-4 { grid-column: span 4; }
  .s-sm-5 { grid-column: span 5; }
  .s-sm-6 { grid-column: span 6; }
  .s-sm-7 { grid-column: span 7; }
  .s-sm-8 { grid-column: span 8; }
  .s-sm-9 { grid-column: span 9; }
  .s-sm-10 { grid-column: span 10; }
  .s-sm-11 { grid-column: span 11; }
  .s-sm-12 { grid-column: span 12; }
}

@media (max-width: 399px) {
  .kpi-cell {
    grid-column: 1 / -1;
  }
}
/*
 * The app shell (spec §2.1, §3.1, §4.5.1, §4.6): sidebar, top bar, banners, drawer, phone tab bar,
 * account menu and toasts. The merchant look is the default; `platform/00-shell.css` turns the
 * sidebar navy.
 */

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

/* --- sidebar -------------------------------------------------------------------------------- */

.sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) var(--s3);
  overflow-y: auto;
  background: var(--panel);
  border-inline-end: 1px solid var(--line);
  scrollbar-width: thin;
}

.sidebar-header {
  padding: var(--s1) var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.store-monogram {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--accent);
  font: 700 13px/1 var(--font-display);
  letter-spacing: 0.02em;
}

.store-identity,
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.store-name {
  font: 700 15px/1.3 var(--font-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-host,
.sidebar-subtitle {
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-pill {
  align-self: flex-start;
  margin-top: 4px;
}

.wordmark {
  font: 800 18px/1.1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
}

.brand-stop-start {
  stop-color: #1f3a8a;
}

.brand-stop-end {
  stop-color: #7c9cf5;
}

.brand-check {
  stroke: #ffffff;
}

.nav-main {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-heading {
  margin: 0;
  padding: var(--s2) var(--s3) var(--s1);
  font: 650 12px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-heading-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--control-height);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
  text-align: start;
}

.nav-heading-toggle:hover {
  color: var(--fg);
}

.nav-heading-toggle .icon {
  transition: transform var(--t-fast) var(--ease);
}

.nav-heading-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-button);
  background: none;
  color: var(--fg);
  font: 500 14px/1.2 var(--font-body);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.nav-item .icon {
  color: var(--muted);
  transition: color var(--t-fast);
}

.nav-item:hover {
  background: var(--panel-2);
}

.nav-item:hover .icon {
  color: var(--fg);
}

.nav-item[aria-current="page"] {
  background: var(--tint);
  color: var(--accent);
  font-weight: 650;
}

.nav-item[aria-current="page"] .icon {
  color: var(--accent);
}

.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 0;
  width: 3px;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: var(--accent);
}

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

.nav-tooltip,
.rail-more {
  display: none;
}

.badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--neutral-ink);
  font: 650 11.5px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.badge-ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge-bad { background: var(--bad-soft); color: var(--bad-ink); }
.badge-info { background: var(--info-soft); color: var(--info-ink); }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--control-height);
  padding: 0 var(--s3);
  border-radius: var(--r-button);
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.sidebar-link:hover {
  background: var(--panel-2);
  color: var(--fg);
}

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

.topbar {
  grid-column: 2;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--topbar-height);
  padding-inline: var(--page-pad);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}

/* `.topbar` raises specificity above `.icon-button`, which is declared later. */
.topbar .menu-button {
  display: none;
}

.topbar-title {
  flex: 1;
  min-width: 0;
}

.topbar-page-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font: 600 14px/1.3 var(--font-body);
}

.topbar-search {
  display: flex;
  align-items: center;
  flex: none;
}

.topbar-search .combobox-inline {
  width: 280px;
}

.topbar-end {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
}

.updated {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-button);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.icon-button:hover {
  background: var(--panel-2);
  color: var(--fg);
}

.refresh-button.is-refreshing .icon {
  animation: spin 0.9s linear infinite;
}

.account-menu {
  position: relative;
}

.account-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-height);
  padding: 0 8px 0 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.account-button:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #ffffff;
  font: 700 11.5px/1 var(--font-display);
  letter-spacing: 0.02em;
}

.menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 40;
  min-width: 250px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  animation: menu-in var(--t-menu) var(--ease);
}

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

.menu-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 6px;
}

.menu-name {
  font-weight: 650;
}

.menu-email {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.menu-level {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.menu-separator {
  height: 1px;
  margin: 6px 0;
  background: var(--line);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: 500 14px/1.2 var(--font-body);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.menu-item .icon {
  color: var(--muted);
}

.menu-item:hover,
.menu-item:focus-visible {
  background: var(--panel-2);
}

.menu-item:focus-visible {
  outline-offset: -2px;
  box-shadow: none;
}

.menu-refresh {
  display: none;
}

.menu-group {
  padding: 6px 10px;
}

.menu-section-label {
  display: block;
  margin-bottom: 6px;
  font: 650 12px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.menu-radios {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-input);
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.menu-radio {
  flex: 1;
  justify-content: center;
  min-height: 36px;
  padding: 0 8px;
  font-size: 13px;
}

.menu-radio[aria-checked="true"] {
  background: var(--panel);
  color: var(--accent);
  font-weight: 650;
  box-shadow: var(--shadow-sm);
}

/* Its own shadow would replace the §4.3 halo, so the focused state redraws both. */
.menu-radio[aria-checked="true"]:focus-visible {
  box-shadow: var(--shadow-sm), 0 0 0 5px var(--focus-halo);
}

/* --- banners, content ------------------------------------------------------------------------ */

.offline-banner,
.account-notice {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) var(--page-pad) 0;
  padding: 10px 14px;
  border-inline-start: 3px solid var(--info);
  border-start-end-radius: var(--r-button);
  border-end-end-radius: var(--r-button);
  background: var(--info-soft);
  color: var(--fg);
  font-size: 14px;
}

.offline-banner {
  border-inline-start-color: var(--warn);
  background: var(--warn-soft);
}

.offline-banner .icon,
.account-notice-warn .icon {
  color: var(--warn-ink);
}

.account-notice .icon {
  color: var(--info-ink);
}

.account-notice-warn {
  border-inline-start-color: var(--warn);
  background: var(--warn-soft);
}

.account-notice-text {
  flex: 1;
  min-width: 0;
}

.account-notice-link {
  font-weight: 600;
  white-space: nowrap;
}

.content {
  grid-column: 2;
  min-width: 0;
  padding: var(--page-pad);
  padding-bottom: calc(var(--page-pad) * 2);
  outline: none;
}

/* --- toasts ------------------------------------------------------------------------------------ */

.toasts {
  position: fixed;
  bottom: var(--s6);
  inset-inline-end: var(--s6);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.toast-region {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ok);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in var(--t-menu) var(--ease);
}

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

.toast-info { border-inline-start-color: var(--info); }
.toast-bad { border-inline-start-color: var(--bad); }

.toast-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok-ink);
  font-size: 12px;
  font-weight: 700;
}

.toast-info .toast-mark { background: var(--info-soft); color: var(--info-ink); }
.toast-bad .toast-mark { background: var(--bad-soft); color: var(--bad-ink); }

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-message {
  margin: 0;
}

.toast-reference {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.toast-close {
  width: 28px;
  height: 28px;
  margin: -4px 0 0;
}

/* --- drawer and phone tab bar ------------------------------------------------------------------ */

.drawer {
  margin: 0;
  padding: 0;
  width: min(280px, 86vw);
  max-width: 280px;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  background: var(--panel);
  color: var(--fg);
  box-shadow: var(--shadow-lg);
}

.drawer::backdrop {
  background: var(--scrim);
}

.drawer[open] {
  animation: drawer-in var(--t-drawer) var(--ease);
}

@keyframes drawer-in {
  from {
    transform: translateX(-100%);
  }
}

.drawer-surface {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  height: 100%;
  padding: var(--s4) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 0 var(--s1) var(--s3) var(--s2);
  border-bottom: 1px solid var(--line);
}

.tabbar {
  display: none;
}

/* Tablet: a 72px icon rail with tooltips; the Advanced group lives in the drawer. */
@media (min-width: 720px) and (max-width: 1023px) {
  .app {
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
  }

  .sidebar {
    align-items: center;
    padding: var(--s3) 10px;
    overflow: visible;
  }

  .sidebar-header {
    padding: var(--s1) 0 var(--s3);
  }

  .sidebar .store-identity,
  .sidebar .brand-text,
  .sidebar .nav-heading,
  .sidebar .sidebar-footer,
  .sidebar .nav-group[data-group="advanced"] {
    display: none;
  }

  .sidebar .nav-main {
    align-items: center;
    gap: var(--s1);
  }

  .sidebar .nav-group + .nav-group {
    margin-top: var(--s1);
    padding-top: var(--s2);
    border-top: 1px solid var(--line);
  }

  .sidebar .nav-item,
  .sidebar .rail-more {
    display: flex;
    justify-content: center;
    width: 48px;
    height: 44px;
    padding: 0;
  }

  .sidebar .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sidebar .nav-item[aria-current="page"]::before {
    inset-inline-start: -10px;
  }

  .sidebar .nav-tooltip {
    display: block;
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + 12px);
    z-index: 50;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--fg);
    color: var(--panel);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity var(--t-fast), transform var(--t-fast);
  }

  .sidebar .nav-item:hover .nav-tooltip,
  .sidebar .nav-item:focus-visible .nav-tooltip {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .sidebar .badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
  }
}

/* Phone: a 56px top bar, a drawer and a 64px bottom tab bar. */
@media (max-width: 719px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    display: none;
  }

  .topbar,
  .offline-banner,
  .account-notice,
  .content {
    grid-column: 1;
  }

  .topbar {
    min-height: 56px;
    gap: var(--s1);
    padding-inline: var(--s1) var(--s3);
  }

  .topbar .menu-button {
    display: inline-grid;
  }

  .topbar-page-title {
    color: var(--fg);
    font: 700 16px/1.3 var(--font-display);
  }

  /* `.topbar` outranks `.pill`, which is declared later in 40-components.css. */
  .topbar .updated,
  .topbar .refresh-button,
  .topbar .platform-pill {
    display: none;
  }

  .menu-refresh {
    display: flex;
  }

  .menu-item {
    min-height: 44px;
  }

  .content {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--s6));
  }

  .tabbar {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-up);
  }

  .tabbar-list {
    list-style: none;
    margin: 0;
    padding: 0 var(--s1);
    display: flex;
    height: var(--tabbar-height);
  }

  /* Each tab takes its label's width plus an equal share of the rest, so "Conversations" fits at 400px. */
  .tabbar-cell {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }

  .tabbar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--muted);
    font: 600 11px/1.1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
  }

  .tabbar-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabbar-item[aria-current="page"] {
    color: var(--accent);
  }

  .tabbar-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 28%;
    height: 3px;
    border-end-start-radius: 3px;
    border-end-end-radius: 3px;
    background: var(--accent);
  }

  .tabbar-item .badge {
    position: absolute;
    top: 7px;
    inset-inline-start: calc(50% + 6px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
  }

  .toasts {
    inset-inline: var(--s4);
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--s3));
    width: auto;
  }

  .offline-banner,
  .account-notice {
    margin-top: var(--s3);
    flex-wrap: wrap;
  }

  .icon-button {
    width: 44px;
    height: 44px;
  }
}
/*
 * Components (spec §4.5): buttons, pills, cards, page header, key–value, notices, fields, chips,
 * dialogs, empty state, KPI tile, table, filters, tabs, checklist, meter, code, status banner,
 * combobox, inline change, and the sign-in form both apps share.
 */

/* --- buttons ------------------------------------------------------------------------------------ */

.button {
  --button-bg: var(--panel);
  --button-fg: var(--fg);
  --button-border: var(--input-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--control-height);
  padding: 0 14px;
  border: 1px solid var(--button-border);
  border-radius: var(--r-button);
  background: var(--button-bg);
  color: var(--button-fg);
  font: 600 14px/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}

.button:hover {
  background: var(--panel-2);
  text-decoration: none;
}

.button-primary {
  --button-bg: var(--accent);
  --button-fg: var(--accent-ink);
  --button-border: var(--accent);
  box-shadow: var(--shadow-sm);
}

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

/* A component that carries its own shadow has to redraw the §4.3 halo, or its own rule wins. */
.button-primary:focus-visible {
  box-shadow: var(--shadow-sm), 0 0 0 5px var(--focus-halo);
}

.button-danger {
  --button-border: var(--bad);
  --button-fg: var(--bad-ink);
}

.button-danger:hover {
  background: var(--bad-soft);
}

.button-link {
  --button-bg: transparent;
  --button-border: transparent;
  --button-fg: var(--accent);
  padding-inline: var(--s1);
}

.button-link:hover {
  background: transparent;
  text-decoration: underline;
}

.button-small {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
}

.button-block {
  width: 100%;
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.button[aria-busy="true"] {
  cursor: progress;
}

.button-with-reason {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
}

.button-reason {
  color: var(--muted);
  font-size: 12.5px;
}

/* `--control-height` is the §4.3 touch floor: 36px, and 44px below 720px (common/20-layout.css). */
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 14px/1.3 var(--font-body);
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.spinner {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* --- pills ------------------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--neutral-ink);
  font: 600 12px/1 var(--font-body);
  white-space: nowrap;
  vertical-align: middle;
}

.pill-mark {
  font-size: 11px;
  font-weight: 700;
}

.pill-ok { background: var(--ok-soft); color: var(--ok-ink); }
.pill-warn { background: var(--warn-soft); color: var(--warn-ink); }
.pill-bad { background: var(--bad-soft); color: var(--bad-ink); }
.pill-info { background: var(--info-soft); color: var(--info-ink); }
.pill-muted { background: var(--neutral-soft); color: var(--neutral-ink); }

/* --- cards and page header --------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
  padding: var(--card-pad-block) var(--card-pad-inline);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}

.card-tint {
  background: var(--tint);
  border-color: transparent;
  box-shadow: none;
}

.card-danger {
  border-color: color-mix(in srgb, var(--bad) 40%, var(--line));
}

.card-danger .card-header {
  margin: calc(var(--card-pad-block) * -1) calc(var(--card-pad-inline) * -1) 0;
  padding: var(--s3) var(--card-pad-inline);
  background: var(--bad-soft);
  border-start-start-radius: var(--r-card);
  border-start-end-radius: var(--r-card);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
}

.card-heading {
  min-width: 0;
  flex: 1 1 240px;
}

.card-title {
  margin: 0;
  font: 650 16px/1.35 var(--font-display);
}

.card-description {
  margin: 4px 0 0;
  color: var(--muted);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

.card-body:empty {
  display: none;
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.back-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.back-link .icon {
  transform: scaleX(-1);
}

.back-link:hover {
  color: var(--accent);
}

.page-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s4);
}

.page-heading {
  flex: 1 1 320px;
  min-width: 0;
}

.page-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
}

.page-title {
  margin: 0;
  font: 700 24px/1.25 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
  outline: none;
}

.page-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.page-description {
  margin: 6px 0 0;
  max-width: 72ch;
  color: var(--muted);
}

.page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* --- key–value, notices, callouts ---------------------------------------------------------------- */

.kv {
  display: grid;
  margin: 0;
}

.kv-row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: var(--s3);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.kv-row:first-child {
  padding-top: 0;
}

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

.kv dt {
  color: var(--muted);
  font-weight: 500;
}

.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 12px 14px;
  border-inline-start: 3px solid var(--info);
  border-start-end-radius: var(--r-button);
  border-end-end-radius: var(--r-button);
  background: var(--info-soft);
  color: var(--fg);
}

.notice-icon {
  flex: none;
  margin-top: 1px;
  color: var(--info-ink);
}

.notice-body {
  min-width: 0;
}

.notice-body > p {
  margin: 0;
}

.notice-body > p + p {
  margin-top: var(--s1);
}

.notice-warn { border-inline-start-color: var(--warn); background: var(--warn-soft); }
.notice-warn .notice-icon { color: var(--warn-ink); }
.notice-bad { border-inline-start-color: var(--bad); background: var(--bad-soft); }
.notice-bad .notice-icon { color: var(--bad-ink); }
.notice-ok { border-inline-start-color: var(--ok); background: var(--ok-soft); }
.notice-ok .notice-icon { color: var(--ok-ink); }

.callout {
  padding: 12px 14px;
  border-radius: var(--r-button);
  background: var(--tint);
}

.callout p {
  margin: 0;
}

.callout-danger {
  background: var(--bad-soft);
}

.dialog-warning {
  margin: 0;
  color: var(--bad-ink);
  font-size: 13.5px;
  font-weight: 600;
}

/* --- fields and chips ------------------------------------------------------------------------------ */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-label {
  font-size: 14px;
  font-weight: 600;
}

.field-help {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.field-error {
  margin: 0;
  color: var(--bad-ink);
  font-size: 13px;
  font-weight: 600;
}

.secret-field {
  display: flex;
  gap: var(--s2);
}

.secret-field .field-control {
  flex: 1;
}

.form-error {
  padding: 10px 12px;
  border-radius: var(--r-button);
  background: var(--bad-soft);
  color: var(--bad-ink);
  font-weight: 600;
}

.form-error p {
  margin: 0;
}

.form-reference {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.change-form,
.reauth-form,
.forced-password-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.reauth-form > p {
  margin: 0;
  color: var(--muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  /* Never narrower than its own words: the row it sits in wraps, or scrolls, around it. */
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--fg);
  font: 500 13px/1.2 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.chip:hover {
  border-color: var(--input-border);
}

.chip[aria-pressed="true"] {
  background: var(--tint);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 650;
}

.chip-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.chip-count-warn { color: var(--warn-ink); }
.chip-count-bad { color: var(--bad-ink); }
.chip-count-info { color: var(--info-ink); }
.chip-count-ok { color: var(--ok-ink); }

.reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- dialogs ----------------------------------------------------------------------------------------- */

.dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(88dvh, 880px);
  padding: 0;
  border: 0;
  border-radius: var(--r-dialog);
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dialog-sm { width: min(420px, calc(100vw - 32px)); }
.dialog-lg { width: min(760px, calc(100vw - 32px)); }

.dialog::backdrop {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.dialog[open] {
  animation: dialog-in var(--t-menu) var(--ease);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.dialog-surface {
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, 880px);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 18px 16px 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.dialog-title {
  margin: 0;
  font: 700 18px/1.3 var(--font-display);
}

.dialog-body {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: 14px 24px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.dialog-footer .link-button {
  margin-inline-end: auto;
}

.handover {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.handover .muted {
  margin: 0;
}

/* --- empty state ---------------------------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--s10) var(--s6);
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: var(--s2);
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent);
}

/* Icons are drawn on a 20px grid; at 48px a lighter stroke keeps the weight of the 20px icons. */
.empty-icon .icon {
  stroke-width: 1.25;
}

.empty-title {
  margin: 0;
  font: 650 16px/1.35 var(--font-display);
}

.empty-body {
  margin: 0;
  max-width: 48ch;
  color: var(--muted);
}

.empty-body:empty {
  display: none;
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s3);
}

.page-root > .empty-state {
  padding-block: var(--s12);
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
}

/* --- KPI tile ----------------------------------------------------------------------------------------- */

.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 128px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}

.kpi:has(.kpi-link:hover) {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.kpi:has(.kpi-link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}

.kpi-status-ok { border-inline-start: 3px solid var(--ok); }
.kpi-status-warn { border-inline-start: 3px solid var(--warn); }
.kpi-status-bad { border-inline-start: 3px solid var(--bad); }
.kpi-status-info { border-inline-start: 3px solid var(--info); }
.kpi-status-muted { border-inline-start: 3px solid var(--line-strong); }

.kpi-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-inline-end: 28px;
  color: var(--muted);
  font: 600 13px/1.35 var(--font-body);
}

.kpi-mark {
  font-weight: 700;
}

.kpi-status-ok .kpi-mark { color: var(--ok-ink); }
.kpi-status-warn .kpi-mark { color: var(--warn-ink); }
.kpi-status-bad .kpi-mark { color: var(--bad-ink); }
.kpi-status-info .kpi-mark { color: var(--info-ink); }

.kpi-link {
  color: inherit;
  text-decoration: none;
}

.kpi-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.kpi-link:focus-visible {
  outline: none;
  box-shadow: none;
}

.kpi-info {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  font: 700 12px/1 var(--font-body);
  cursor: pointer;
}

.kpi-info:hover {
  color: var(--fg);
  border-color: var(--input-border);
}

/* The circle stays 22px in the tile corner; the §4.3 touch target is centred on it. */
.kpi-info::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: var(--control-height);
  height: var(--control-height);
  transform: translate(-50%, -50%);
}

.kpi-tooltip {
  position: absolute;
  top: 40px;
  inset-inline-end: 8px;
  z-index: 5;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--fg);
  color: var(--panel);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: var(--shadow);
}

.kpi-value {
  margin: 2px 0 0;
  font: 700 28px/1.1 var(--font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.delta {
  display: inline-flex;
  align-self: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
  font: 600 12.5px/1.3 var(--font-body);
}

.delta-good { color: var(--ok-ink); }
.delta-bad { color: var(--bad-ink); }
.delta-flat { color: var(--muted); }

.delta-text {
  margin-inline-start: var(--s1);
  color: var(--muted);
  font-weight: 400;
}

.kpi-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.kpi-meter,
.kpi-spark {
  margin-top: auto;
}

.kpi-meter .meter-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.kpi-skeleton {
  gap: var(--s3);
}

/* --- data table ------------------------------------------------------------------------------------- */

.data-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.table-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.table-wrap.scrolls {
  background:
    linear-gradient(to right, var(--panel) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, 0.12), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, 0.12), transparent) right center / 12px 100% no-repeat scroll,
    var(--panel);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.table caption {
  text-align: start;
}

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font: 650 12px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-align: start;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
  vertical-align: middle;
}

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

.table tbody tr:not(.row-details):hover td {
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
}

.table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* The primary column is the one that wraps; values, dates and pills stay on one line. */
.table .col-primary {
  min-width: 12ch;
}

.table td:not(.col-primary) {
  white-space: nowrap;
}

.table-wrap.scrolls td {
  white-space: nowrap;
}

.table-wrap.scrolls .table th,
.table-wrap.scrolls .table td {
  background-color: transparent;
}

.row-link {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

.row-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.cell-actions {
  width: 1%;
  text-align: end;
  white-space: nowrap;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.row-toggle {
  width: 28px;
  height: 28px;
  margin-inline-end: 6px;
  vertical-align: middle;
}

.row-toggle .icon {
  transition: transform var(--t-fast);
}

.row-toggle[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}

.row-details td {
  background: var(--panel-2);
}

.row-menu {
  position: relative;
  display: inline-flex;
}

.row-menu-button .icon {
  margin-inline-end: -4px;
  transition: transform var(--t-fast) var(--ease);
}

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

/* Fixed, and placed from script through --menu-top and --menu-left, so a scrolling table never clips it. */
.menu.row-menu-list {
  position: fixed;
  top: var(--menu-top, 0);
  left: var(--menu-left, 0);
  inset-inline-end: auto;
  z-index: 70;
  min-width: 200px;
}

.menu-item-danger {
  color: var(--bad-ink);
}

.menu-item-danger:hover,
.menu-item-danger:focus-visible {
  background: var(--bad-soft);
}

.table-scroll-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.table-empty .empty-state {
  padding-block: var(--s8);
}

@media (max-width: 1279px) {
  .col-min-xl { display: none; }
}

@media (max-width: 1023px) {
  .col-min-lg { display: none; }
}

/* --- filters and tabs ----------------------------------------------------------------------------------- */

.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-button);
}

.segment {
  /* Never narrower than its own words: "Last 30 days" would otherwise wrap onto a 13px line box. */
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: 600 13px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}

.segment[aria-checked="true"] {
  background: var(--panel);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

.segment[aria-checked="true"]:focus-visible {
  box-shadow: var(--shadow-sm), 0 0 0 5px var(--focus-halo);
}

.filter-search {
  position: relative;
  flex: 1 1 220px;
  max-width: 320px;
}

.search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 10px;
  display: flex;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-input {
  padding-inline: 34px;
}

.search-clear {
  position: absolute;
  top: 50%;
  inset-inline-end: 3px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
}

.filter-select {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.filter-select-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.filter-select .field-control {
  width: auto;
}

.filter-clear {
  font-size: 13px;
}

.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
}

.tab-list {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 600 14px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}

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

.tab[aria-selected="true"] {
  color: var(--accent);
}

.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 8px;
  bottom: -1px;
  height: 2px;
  border-start-start-radius: 2px;
  border-start-end-radius: 2px;
  background: var(--accent);
}

.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--neutral-ink);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.tab-panel {
  min-width: 0;
}

/* --- checklist, meter, code ------------------------------------------------------------------------------- */

.checklist {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s4);
  padding-bottom: var(--s6);
}

.step:last-child {
  padding-bottom: 0;
}

.step::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 4px;
  inset-inline-start: 13px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}

.step:last-child::before {
  display: none;
}

.step-done:has(+ .step-done)::before {
  background: var(--ok);
}

.step-marker {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  font: 700 13px/1 var(--font-display);
}

.step-current .step-marker {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus-halo);
}

.step-done .step-marker {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--panel);
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
  padding-top: 3px;
}

.step-title {
  margin: 0;
  font: 650 15px/1.35 var(--font-display);
}

.step-todo .step-title {
  color: var(--muted);
}

.step-done-body {
  color: var(--muted);
}

.step-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

.meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.meter-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
}

.meter-lg .meter-track {
  height: 14px;
}

.meter-fill {
  width: var(--pct, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ok);
}

.meter-warn .meter-fill { background: var(--warn); }
.meter-bad .meter-fill { background: var(--bad); }

.meter-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: var(--tick, 80%);
  width: 1px;
  background: color-mix(in srgb, var(--fg) 35%, transparent);
}

.meter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
}

.meter-text {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.code {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 6px 8px 6px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.code-label {
  color: var(--muted);
  font: 600 12.5px/1.3 var(--font-body);
}

.code-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.code-toggle {
  font-size: 12.5px;
}

.code-toggle[aria-pressed="true"] {
  color: var(--fg);
}

.code pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font: 400 12.5px/1.55 var(--font-mono);
  white-space: pre;
  tab-size: 2;
}

.code-wrap pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The copy feedback takes its own line rather than squeezing the value into a mid-token break. */
.copy-value {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  max-width: 100%;
  padding: 2px 2px 2px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  vertical-align: middle;
}

/* §4.5.13: an identifier is never broken mid-token. Where one still will not fit, it scrolls in
   its own box (§4.6) and the Copy button hands it over whole. */
.copy-value-text {
  min-width: 0;
  overflow-x: auto;
  font: 12.5px/1.4 var(--font-mono);
  overflow-wrap: normal;
  word-break: normal;
}

/* The pill stays compact; the §4.3 touch target is a hit area centred on the 28px icon. */
.copy-value-button {
  position: relative;
  width: 28px;
  height: 28px;
}

.copy-value-button::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: var(--control-height);
  height: var(--control-height);
  transform: translate(-50%, -50%);
}

/* --- status banner, combobox, inline change --------------------------------------------------------- */

.status-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 72px;
  padding: 14px 18px 14px 22px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}

.status-banner::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--ok);
}

.status-info::before { background: var(--info); }
.status-warn::before { background: var(--warn); }
.status-bad::before { background: var(--bad); }

.status-banner-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.status-info .status-banner-icon { background: var(--info-soft); color: var(--info-ink); }
.status-warn .status-banner-icon { background: var(--warn-soft); color: var(--warn-ink); }
.status-bad .status-banner-icon { background: var(--bad-soft); color: var(--bad-ink); }

.status-banner-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.status-banner-headline {
  margin: 0;
  font: 700 17px/1.3 var(--font-display);
}

.status-banner-body {
  color: var(--muted);
}

.status-banner-meter {
  max-width: 320px;
  margin-top: var(--s2);
}

.status-banner-action {
  flex: none;
}

.combobox {
  position: relative;
}

.combobox-input {
  background: var(--panel-2);
  border-color: var(--line);
}

.combobox-list {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: 45;
  min-width: 320px;
  max-height: 360px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.combobox-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.combobox-option[aria-selected="true"] {
  background: var(--tint);
}

.combobox-option-title {
  font-weight: 650;
}

.combobox-option-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.inline-change {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  max-width: 560px;
}

.inline-fields {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--s3);
}

.inline-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1);
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.inline-note .link-button {
  font-size: 12.5px;
}

.inline-note-input {
  flex: 1;
  width: auto;
  min-width: 240px;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 13px;
}

/* --- the sign-in form both apps share (§5.1, §5.2) ----------------------------------------------------- */

.signin {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.signin h1 {
  margin: 0;
  font: 800 28px/1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.signin > .muted:first-of-type {
  margin: 0 0 var(--s3);
}

.signin label {
  margin-top: var(--s2);
  font-size: 14px;
  font-weight: 600;
}

.signin input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-input);
  background: var(--panel);
  color: var(--fg);
  font: 400 15px/1.3 var(--font-body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

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

.password-field {
  position: relative;
  display: flex;
}

.password-field input {
  padding-inline-end: 72px;
}

.password-field button {
  position: absolute;
  top: 50%;
  inset-inline-end: 5px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--accent);
  font: 600 13px/1 var(--font-body);
  transform: translateY(-50%);
  cursor: pointer;
}

.password-field button:hover {
  background: var(--panel-2);
}

.form-hint {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 1.4em;
  margin: var(--s1) 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.form-hint.is-error {
  color: var(--bad-ink);
}

.form-hint.is-error .form-hint-line:first-child {
  font-weight: 650;
}

.signin .button-block {
  min-height: 44px;
  margin-top: var(--s1);
  font-size: 15px;
}

.signin p.small {
  margin: var(--s2) 0 0;
}

.store-signin {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.store-signin > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--accent);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.store-signin > summary::-webkit-details-marker {
  display: none;
}

.store-signin > summary::before {
  content: "›";
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--t-fast);
}

.store-signin[open] > summary::before {
  transform: rotate(90deg);
}

.store-signin-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.signin-alternate {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.signin-alternate h1 {
  margin: 0;
  font: 800 24px/1.2 var(--font-display);
  letter-spacing: -0.01em;
  outline: none;
}

.signin-alternate > p {
  margin: 0;
}

/* --- row cards: the phone layout of a data table (§4.5.5) -------------------------------------------- */

.row-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.row-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.row-card-title {
  margin: 0;
  font: 650 15px/1.35 var(--font-display);
  overflow-wrap: anywhere;
}

.row-card-title .row-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.row-card-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
  margin: 0;
}

.row-card-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.row-card-field dt {
  color: var(--muted);
  font: 650 11.5px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.row-card-field dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.row-card-field.num dd {
  font-variant-numeric: tabular-nums;
}

/* A card column is half a phone wide, so a long status pill wraps rather than cross the card edge
   (§4.6). One-line pills keep the 22px height of §4.5.4. */
.row-card-field dd .pill {
  max-width: 100%;
  height: auto;
  min-height: 22px;
  padding-block: 3px;
  white-space: normal;
}

.row-card-more {
  margin-top: calc(var(--s1) * -1);
  border-top: 1px solid var(--line);
}

.row-card-more > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.row-card-more > summary::-webkit-details-marker {
  display: none;
}

.row-card-more > summary::before {
  content: "›";
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--t-fast);
}

.row-card-more[open] > summary::before {
  transform: rotate(90deg);
}

.row-card-more > .row-card-fields,
.row-card-details {
  margin-bottom: var(--s2);
}

.row-card-actions .row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s2);
}

.row-card-actions .row-actions > .button,
.row-card-actions .row-menu,
.row-card-actions .row-menu-button {
  flex: 1 1 auto;
}

.cell-with-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: -6px;
}

.table-wrap.scrolls:focus-visible {
  outline-offset: 2px;
}

/* --- copy feedback, search dialog, the empty sign-in hint ----------------------------------------------- */

.copy-value-glyph {
  display: inline-grid;
  place-items: center;
}

.copy-value[data-state="copied"] .copy-value-button {
  color: var(--ok-ink);
}

.copy-value-feedback {
  padding-inline: 2px 6px;
  color: var(--ok-ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.copy-value[data-state="manual"] .copy-value-feedback {
  color: var(--muted);
}

.code-copy[data-state="copied"] {
  border-color: var(--ok);
  color: var(--ok-ink);
}

.code-copy-icon {
  display: inline-grid;
}

.dialog-footer:empty {
  display: none;
}

.combobox-host {
  display: flex;
  align-items: center;
}

.combobox-trigger {
  display: none;
}

.combobox-input:focus {
  background: var(--panel);
}

.combobox-empty {
  margin: 0;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.combobox-inline .combobox-empty {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: 45;
  min-width: 320px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.combobox-option-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dialog-search .dialog-body {
  padding-bottom: var(--s5);
}

.dialog-search .combobox-input {
  min-height: 44px;
  background: var(--panel);
}

.dialog-search .combobox-list {
  position: static;
  min-width: 0;
  max-height: min(360px, 50dvh);
  margin-top: var(--s3);
  padding: 0;
  border: 0;
  box-shadow: none;
}

.dialog-search .combobox-empty {
  margin-top: var(--s3);
  padding-inline: 0;
}

@media (max-width: 1023px) {
  .combobox-host > .combobox-inline {
    display: none;
  }

  .combobox-host > .combobox-trigger {
    display: inline-grid;
  }
}

/* An empty hint takes no room: it cancels its own gap, and grows when a message arrives. */
.form-hint:empty {
  min-height: 0;
  margin-top: calc(var(--s2) * -1);
}

/* --- touch targets on phones (§4.3) -------------------------------------------------------------------- */

@media (max-width: 719px) {
  .page-title {
    font-size: 20px;
  }

  .kpi {
    min-height: 104px;
    padding: 14px;
  }

  .kpi-value {
    font-size: 22px;
  }

  .kpi-spark {
    display: none;
  }

  .button,
  .button-small,
  .chip,
  .segment,
  .tab,
  .link-button,
  .store-signin > summary {
    min-height: 44px;
  }

  /* A one-word chip such as "All" is 44px wide too. */
  .chip {
    justify-content: center;
    min-width: 44px;
  }

  /* The Show toggle is a 44px touch target inside the 44px field, on every form that has one. */
  .password-field button {
    min-width: 56px;
    min-height: 44px;
  }

  /*
   * The row scrolls sideways rather than wrapping, the shape the tab row already has: every chip
   * keeps its own width, and the scrollbar stays out of the layout. A fade over the last 15% of
   * the box would dim the final chip's count whether or not anything overflowed, so there is none.
   */
  .chip-group {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .filter-search {
    flex-basis: 100%;
    max-width: none;
  }

  .status-banner {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .status-banner-action {
    flex-basis: 100%;
    padding-inline-start: 56px;
  }

  .dialog,
  .dialog-sm,
  .dialog-lg {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .dialog,
  .dialog-surface {
    max-height: 92dvh;
  }

  .dialog-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .dialog-footer .button {
    flex: 1;
  }

  .inline-note-input {
    min-width: 0;
    flex-basis: 100%;
  }
}

@media (max-width: 479px) {
  .kv-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}
/*
 * Charts (spec §4.1.3, §4.5.3). Series colours come from the validated palette and are never used
 * for text or status; every chart also has a legend or labels and a data table.
 */

.chart {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
  margin: 0;
}

.chart-body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

.chart-body-side {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
}

.chart-canvas {
  width: 100%;
  min-width: 0;
}

.chart-body-side .chart-canvas {
  flex: 0 0 180px;
  width: 180px;
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-svg:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  box-shadow: none;
}

.chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.chart-axis {
  stroke: var(--chart-axis);
  stroke-width: 1;
}

.chart-tick {
  fill: var(--muted);
  font: 400 12px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.chart-row-label {
  fill: var(--fg);
  font: 400 13px/1 var(--font-body);
}

.chart-value {
  fill: var(--muted);
  font: 600 12px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* Slot colours first, so the mark rules below can switch fill or stroke off. */
.slot-1 { fill: var(--series-1); stroke: var(--series-1); }
.slot-2 { fill: var(--series-2); stroke: var(--series-2); }
.slot-3 { fill: var(--series-3); stroke: var(--series-3); }
.slot-4 { fill: var(--series-4); stroke: var(--series-4); }
.slot-muted { fill: var(--chart-muted); stroke: var(--chart-muted); }
.ordinal-1 { fill: var(--ordinal-1); stroke: var(--ordinal-1); }
.ordinal-2 { fill: var(--ordinal-2); stroke: var(--ordinal-2); }
.ordinal-3 { fill: var(--ordinal-3); stroke: var(--ordinal-3); }
.ordinal-4 { fill: var(--ordinal-4); stroke: var(--ordinal-4); }

.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-line-estimated {
  stroke-dasharray: 4 4;
}

/* Mark rules name the element: the figure also carries chart-area / chart-bar as its kind class. */
path.chart-area {
  stroke: none;
  fill-opacity: 0.14;
}

path.chart-bar,
.stacked-segment,
.donut-slice {
  stroke: none;
}

.chart-reference line {
  stroke: var(--chart-guide);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* A halo in the card colour keeps the label readable where it crosses a bar or a line. */
.chart-reference-label {
  fill: var(--muted);
  font: 600 11.5px/1 var(--font-body);
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.donut-value {
  fill: var(--fg);
  font: 700 22px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.donut-label {
  fill: var(--muted);
  font: 400 12px/1 var(--font-body);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-stacked .legend {
  flex-direction: column;
  gap: var(--s2);
}

.chart-body-side .legend {
  flex: 1 1 240px;
  flex-direction: column;
  gap: var(--s2);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  font-size: 13px;
}

/* Rows that highlight a slice or segment take focus; the ring hugs the row with a little air. */
.legend-item[tabindex] {
  margin: -2px -4px;
  padding: 2px 4px;
  border-radius: var(--r-sm);
}

.legend-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--chart-muted);
}

.legend-swatch.slot-1 { background: var(--series-1); }
.legend-swatch.slot-2 { background: var(--series-2); }
.legend-swatch.slot-3 { background: var(--series-3); }
.legend-swatch.slot-4 { background: var(--series-4); }
.legend-swatch.slot-muted { background: var(--chart-muted); }
.legend-swatch.ordinal-1 { background: var(--ordinal-1); }
.legend-swatch.ordinal-2 { background: var(--ordinal-2); }
.legend-swatch.ordinal-3 { background: var(--ordinal-3); }
.legend-swatch.ordinal-4 { background: var(--ordinal-4); }

.legend-label {
  color: var(--fg);
}

.legend-value {
  margin-inline-start: auto;
  padding-inline-start: var(--s3);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.chart-foot {
  display: flex;
  justify-content: flex-end;
}

.chart-table-toggle {
  font-size: 12.5px;
}

.chart {
  position: relative;
}

/* The tooltip is placed from script through --tip-x and --tip-y (CSP-safe custom properties). */
.chart-tooltip {
  position: absolute;
  top: var(--tip-y, 0);
  left: var(--tip-x, 0);
  z-index: 6;
  min-width: 150px;
  max-width: 260px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  line-height: 1.35;
  pointer-events: none;
}

.chart-tooltip-heading {
  margin: 0 0 6px;
  color: var(--fg);
  font-weight: 650;
}

.chart-tooltip-rows {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.chart-tooltip-label {
  flex: 1;
  min-width: 0;
  color: var(--muted);
}

.chart-tooltip-value {
  padding-inline-start: var(--s3);
  color: var(--fg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-tooltip-extra {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

/* Hover and keyboard marks */
.chart-overlay {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.chart-hover {
  pointer-events: none;
}

.chart-guide {
  stroke: var(--chart-guide);
  stroke-width: 1;
}

.chart .chart-dot {
  stroke: var(--panel);
  stroke-width: 2;
}

.chart-bar-group,
.stacked-segment,
.donut-slice,
.legend-item {
  transition: opacity var(--t-fast);
}

.chart-bar-group.is-dim,
.stacked-segment.is-dim,
.donut-slice.is-dim,
.legend-item.is-dim {
  opacity: 0.55;
}

.chart-bar-group:focus {
  outline: none;
}

/*
 * A bar that leads somewhere is an `<a>` rather than a `<g>` (`barChart`'s `pointHref`); one figure
 * can hold both, so only the linked ones say so under the pointer.
 */
a.chart-bar-group {
  cursor: pointer;
}

.chart .chart-bar-group:focus-visible path.chart-bar,
.chart .chart-bar-group.is-active path.chart-bar {
  stroke: var(--fg);
  stroke-width: 1.5;
  paint-order: stroke;
}

.chart .chart-bar-group:not(:focus-visible).is-active path.chart-bar {
  stroke: none;
}

.chart-row-track {
  fill: transparent;
  stroke: none;
}

.chart-bar-group.is-active .chart-row-track {
  fill: var(--panel-2);
}

.chart-bar-estimated {
  fill-opacity: 0.6;
}

.chart .chart-hatch {
  stroke: none;
  fill-opacity: 0.3;
}

.chart-area-estimated {
  stroke: none;
}

.legend-item.is-active .legend-label {
  font-weight: 650;
}

.chart-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.chart-table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* The donut's legend sits beside the ring from 480px of card width, below it otherwise. */
.chart-donut {
  container-type: inline-size;
}

@container (max-width: 479px) {
  .chart-body-side {
    flex-direction: column;
    align-items: stretch;
  }

  .chart-body-side .chart-canvas {
    align-self: center;
  }

  .chart-body-side .legend {
    flex-basis: auto;
  }
}

.chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.chart-table th,
.chart-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: start;
}

.chart-table thead th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chart-table tbody th {
  font-weight: 500;
}

.chart-table td {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.sparkline {
  display: block;
  width: 100%;
  height: 32px;
  overflow: visible;
}

.sparkline-line {
  fill: none;
  stroke: var(--chart-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-dot {
  fill: none;
  stroke: var(--series-1);
  stroke-width: 6;
  stroke-linecap: round;
}
/* The states every page shares (spec §2.2): skeletons, slow loading, and the error cards. */

.skeleton {
  display: block;
  width: var(--skeleton-width, 100%);
  height: var(--skeleton-height, 14px);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--panel-2) 0%, var(--line-strong) 50%, var(--panel-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

.skeleton-block {
  height: var(--skeleton-height, 96px);
  border-radius: var(--r-button);
}

.skeleton-circle {
  width: var(--skeleton-width, 32px);
  height: var(--skeleton-height, 32px);
  border-radius: 50%;
}

.skeleton-tile {
  height: var(--skeleton-height, 128px);
  border-radius: var(--r-card);
}

.skeleton-chart {
  height: var(--skeleton-height, 220px);
  border-radius: var(--r-card);
}

.skeleton-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: var(--skeleton-width, 100%);
}

.skeleton-rows .skeleton-line:last-child {
  width: 60%;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    background: var(--panel-2);
  }
}

.page-root[aria-busy="true"] {
  cursor: progress;
}

.loading-slow {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.state-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--bad);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}

.state-refused {
  border-inline-start-color: var(--line-strong);
}

.state-network {
  border-inline-start-color: var(--warn);
}

.state-ended {
  border-inline-start-color: var(--info);
}

.state-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.state-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.state-refused .state-icon {
  background: var(--neutral-soft);
  color: var(--neutral-ink);
}

.state-network .state-icon {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.state-ended .state-icon {
  background: var(--info-soft);
  color: var(--info-ink);
}

.state-title {
  margin: 0;
  font: 650 16px/1.35 var(--font-display);
}

.state-body {
  margin: 0;
  color: var(--muted);
}

.state-reference {
  display: flex;
  margin-top: var(--s1) !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.state-actions {
  margin-top: var(--s2);
}
/*
 * Your account (spec §2.4.11, §3.2.8), and the session screens both apps share: the forced
 * first-password screen inside the sign-in card, the re-authentication dialog and "Still there?"
 * (§5.5). Page rules are scoped under the page root; the screens outside a page carry their own
 * classes.
 */

/* --- the page -------------------------------------------------------------------------------------- */

/* The page root is the shared content column, so the page lines up with every other page; the
   single column of cards is what stops at 720px. */
[data-page="account"] {
  gap: var(--s6);
}

[data-page="account"] .account-cards,
[data-page="account"] > .notice {
  width: 100%;
  max-width: 720px;
}

[data-page="account"] .account-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

[data-page="account"] .account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
}

[data-page="account"] .account-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

[data-page="account"] .account-line {
  margin: 0;
}

[data-page="account"] .account-line-strong {
  font-weight: 600;
}

[data-page="account"] .kv dd .muted {
  font-style: normal;
}

@media (max-width: 479px) {
  [data-page="account"] .account-row .button {
    width: 100%;
  }
}

/* --- password fields with a Show toggle, outside the sign-in form ------------------------------------ */

.password-field .field-control {
  width: 100%;
}

.password-toggle-word {
  pointer-events: none;
}

@media (max-width: 719px) {
  /* The 44px phone target of §4.3, inside the 44px field. */
  .password-field .password-toggle {
    min-width: 56px;
    min-height: 44px;
  }
}

/* --- the change-password dialog --------------------------------------------------------------------- */

.account-password-form .notice[hidden] {
  display: none;
}

/* --- the forced first-password screen ---------------------------------------------------------------- */

.forced-password {
  gap: var(--s4);
}

.forced-password-lead {
  line-height: 1.5;
}

.forced-password .notice {
  font-size: 13.5px;
  line-height: 1.45;
}

.forced-password-form {
  margin-top: var(--s1);
}

.forced-password-actions {
  flex-direction: column;
  margin-top: var(--s2);
}

.forced-password-actions .button {
  width: 100%;
  min-height: 44px;
}

/* --- re-authentication and "Still there?" ------------------------------------------------------------ */

.reauth-form .reauth-lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.reauth-error p + p {
  margin-top: 2px;
  font-weight: 400;
}

.reauth-dialog .dialog-footer .link-button {
  font-weight: 600;
}

.still-there {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.still-there-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.still-there-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/*
 * Activity (spec §2.4.13, §3.2.8), shared by both dashboards. Scoped to the page root; tokens only.
 */

[data-page="activity"] .activity-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

/* The notice every merchant Advanced page opens with. */
[data-page="activity"] .advanced-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-button);
  background: var(--neutral-soft);
  color: var(--neutral-ink);
  font-size: 13px;
}

[data-page="activity"] .advanced-notice .icon {
  flex: none;
  margin-top: 1px;
}

/* --- the timeline ---------------------------------------------------------------------------------- */

[data-page="activity"] .activity-days,
[data-page="activity"] .activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="activity"] .activity-days {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

[data-page="activity"] .activity-day-label {
  margin: 0 0 var(--s3);
  color: var(--muted);
  font: 650 12px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-page="activity"] .activity-item {
  display: grid;
  grid-template-columns: 3rem 14px minmax(0, 1fr);
  column-gap: var(--s3);
  padding-bottom: var(--s4);
}

[data-page="activity"] .activity-item:last-child {
  padding-bottom: 0;
}

[data-page="activity"] .activity-time {
  padding-top: 1px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

/* A dot per change, joined by a line to the next change of the same day. */
[data-page="activity"] .activity-marker {
  position: relative;
}

[data-page="activity"] .activity-marker::before {
  content: "";
  position: absolute;
  inset-block-start: 5px;
  inset-inline: 0;
  width: 12px;
  height: 12px;
  margin-inline: auto;
  box-sizing: border-box;
  border: 2px solid var(--input-border);
  border-radius: 50%;
  background: var(--panel);
}

[data-page="activity"] .activity-marker::after {
  content: "";
  position: absolute;
  inset-block: 21px calc(var(--s4) * -1 + 4px);
  inset-inline: 0;
  width: 2px;
  margin-inline: auto;
  border-radius: 1px;
  background: var(--line);
}

[data-page="activity"] .activity-item:last-child .activity-marker::after {
  display: none;
}

[data-page="activity"] .activity-you .activity-marker::before {
  border-color: var(--accent);
  background: var(--tint);
}

[data-page="activity"] .activity-platform .activity-marker::before {
  border-color: var(--info);
  background: var(--info-soft);
}

[data-page="activity"] .activity-text {
  min-width: 0;
}

[data-page="activity"] .activity-line {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

[data-page="activity"] .activity-actor {
  color: var(--fg);
  font-weight: 600;
}

[data-page="activity"] .activity-separator {
  color: var(--muted);
}

[data-page="activity"] .activity-reason {
  margin: 2px 0 0;
  max-width: 72ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 719px) {
  [data-page="activity"] .activity-item {
    grid-template-columns: 2.75rem 12px minmax(0, 1fr);
    column-gap: var(--s2);
  }

  [data-page="activity"] .activity-marker::before {
    width: 10px;
    height: 10px;
    inset-block-start: 6px;
  }

  [data-page="activity"] .activity-marker::after {
    inset-block-start: 20px;
  }
}

/* --- the technical record ------------------------------------------------------------------------ */

[data-page="activity"] .activity-technical {
  padding: 0;
  gap: 0;
}

[data-page="activity"] .technical-record > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--card-pad-block) var(--card-pad-inline);
  border-radius: var(--r-card);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--t-fast);
}

[data-page="activity"] .technical-record > summary::-webkit-details-marker {
  display: none;
}

[data-page="activity"] .technical-record > summary::before {
  content: "›";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transition: transform var(--t-fast);
}

[data-page="activity"] .technical-record[open] > summary::before {
  transform: rotate(90deg);
}

[data-page="activity"] .technical-record > summary:hover {
  background: var(--panel-2);
}

[data-page="activity"] .technical-record[open] > summary {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

[data-page="activity"] .technical-body {
  padding: 0 var(--card-pad-inline) var(--card-pad-block);
}

/* The grouped panels are cards of their own; inside this card they sit flat. */
[data-page="activity"] .technical-body .card {
  box-shadow: none;
}

[data-page="activity"] .activity-skeleton {
  gap: var(--s3);
}
/*
 * Sign-ins (spec §2.4.13, §3.2.8), shared by both dashboards. Scoped to the page root; tokens only.
 */

[data-page="signins"] .signins-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

/* The notice every merchant Advanced page opens with. */
[data-page="signins"] .advanced-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-button);
  background: var(--neutral-soft);
  color: var(--neutral-ink);
  font-size: 13px;
}

[data-page="signins"] .advanced-notice .icon {
  flex: none;
  margin-top: 1px;
}

/* The table sits flush in its card, header row edge to edge. */
[data-page="signins"] .signins-card {
  padding: 0;
  gap: 0;
}

[data-page="signins"] .signins-card .table-wrap {
  border-radius: var(--r-card);
}

[data-page="signins"] .signins-card .table th:first-child,
[data-page="signins"] .signins-card .table td:first-child {
  padding-inline-start: var(--card-pad-inline);
}

[data-page="signins"] .signins-card .table th:last-child,
[data-page="signins"] .signins-card .table td:last-child {
  padding-inline-end: var(--card-pad-inline);
}

[data-page="signins"] .signins-card .table td {
  padding-block: 13px;
}

[data-page="signins"] .signins-card .table td:not(.col-primary) {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

[data-page="signins"] .signins-card .cell-actions {
  text-align: end;
}

[data-page="signins"] .signins-card > .table-skeleton,
[data-page="signins"] .signins-card .table-empty {
  padding: var(--card-pad-block) var(--card-pad-inline);
}

[data-page="signins"] .signin-person {
  color: var(--fg);
  font-weight: 600;
}

[data-page="signins"] .signin-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--s2);
}

[data-page="signins"] .signin-this,
[data-page="signins"] .signin-detail {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

[data-page="signins"] .signin-this {
  font-weight: 600;
}

/* Phones: each session is already a card, so the wrapping card steps back. */
@media (max-width: 719px) {
  [data-page="signins"] .signins-card {
    background: none;
    border: 0;
    box-shadow: none;
  }

  [data-page="signins"] .signins-card > .table-skeleton,
  [data-page="signins"] .signins-card .table-empty {
    padding: 0;
  }

  [data-page="signins"] .signin-person {
    font-family: var(--font-display);
  }
}
/*
 * Team (spec §2.4.10, §3.2.9), shared by both dashboards. Scoped to the page root; tokens only.
 */

[data-page="team"] .team-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

/* The add button's slot stays out of the header until there is a button to show. */
[data-page="team"] .team-add:empty {
  display: none;
}

[data-page="team"] .team-add .button-with-reason {
  align-items: flex-end;
  text-align: end;
}

[data-page="team"] .team-add .button-reason {
  max-width: 34ch;
}

/* --- seats and headcount ---------------------------------------------------------------------- */

[data-page="team"] .team-seats {
  width: 100%;
  max-width: 420px;
}

[data-page="team"] .team-seats-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

[data-page="team"] .team-headcount {
  margin: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- members ------------------------------------------------------------------------------------ */

/* The table sits flush in its card, header row edge to edge. */
[data-page="team"] .team-members {
  padding: 0;
  gap: 0;
}

[data-page="team"] .team-members .table-wrap {
  border-radius: var(--r-card);
}

[data-page="team"] .team-members .table th:first-child,
[data-page="team"] .team-members .table td:first-child {
  padding-inline-start: var(--card-pad-inline);
}

[data-page="team"] .team-members .table th:last-child,
[data-page="team"] .team-members .table td:last-child {
  padding-inline-end: var(--card-pad-inline);
}

[data-page="team"] .team-members .table td {
  padding-block: 14px;
}

[data-page="team"] .team-members .cell-actions {
  text-align: end;
}

[data-page="team"] .team-members > .table-skeleton,
[data-page="team"] .team-members .table-empty {
  padding: var(--card-pad-block) var(--card-pad-inline);
}

[data-page="team"] .team-person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

[data-page="team"] .team-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
}

[data-page="team"] .team-name {
  color: var(--fg);
  font-weight: 600;
}

[data-page="team"] .team-email {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

[data-page="team"] .team-account-link {
  align-self: flex-start;
  margin-top: 2px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
}

[data-page="team"] .team-account-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

[data-page="team"] .team-access {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-page="team"] .team-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Phones: each member is already a card, so the wrapping card steps back. */
@media (max-width: 719px) {
  [data-page="team"] .team-members {
    background: none;
    border: 0;
    box-shadow: none;
  }

  [data-page="team"] .team-members > .table-skeleton,
  [data-page="team"] .team-members .table-empty {
    padding: 0;
  }

  [data-page="team"] .team-seats {
    max-width: none;
  }

  [data-page="team"] .team-add,
  [data-page="team"] .team-add .button-with-reason,
  [data-page="team"] .team-add .button {
    width: 100%;
  }

  [data-page="team"] .team-add .button-with-reason {
    align-items: stretch;
    text-align: start;
  }

  [data-page="team"] .page-actions {
    width: 100%;
  }

  [data-page="team"] .team-name {
    font-family: var(--font-display);
  }

  [data-page="team"] .team-account-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0;
  }
}

/* --- access levels --------------------------------------------------------------------------------- */

[data-page="team"] .team-levels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--s3);
  margin: 0;
}

[data-page="team"] .team-level {
  min-width: 0;
  padding: var(--s3) var(--s4);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-button);
}

[data-page="team"] .team-level dt {
  color: var(--fg);
  font: 650 14px/1.35 var(--font-display);
}

[data-page="team"] .team-level dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

[data-page="team"] .team-levels-skeleton {
  gap: var(--s3);
}
/*
 * Merchant dashboard: the sign-in page (spec §5.1) and the merchant shell's accents (§4.5.1).
 * The shell itself is the default look in common/30-shell.css.
 */

body[data-app="merchant"] {
  background: var(--bg);
}

.signin-page {
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--bg);
}

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s6);
  padding: var(--s12) clamp(32px, 5vw, 72px);
  overflow: hidden;
  background: var(--brand-gradient);
  color: var(--accent-ink);
  isolation: isolate;
}

.brand-panel::before,
.brand-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.brand-panel::before {
  top: -140px;
  inset-inline-start: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), transparent);
}

.brand-panel::after {
  bottom: -160px;
  inset-inline-end: -140px;
  width: 460px;
  height: 460px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
}

.brand-panel .wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: inherit;
  font-size: 22px;
}

.brand-img {
  flex: none;
  display: block;
}

/*
 * On the gradient panel the mark keeps its speech-bubble shape: a hairline glow in the panel's ink
 * and a soft shadow lift it off a background of the same colours, with no box drawn around it.
 */
.brand-panel .brand-img {
  filter: drop-shadow(0 0 0.75px var(--accent-ink)) drop-shadow(0 6px 14px var(--scrim));
}

.brand-headline {
  max-width: 16ch;
  margin: 0;
  font: 800 clamp(26px, 3.2vw, 34px)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.brand-points {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  font-size: 15.5px;
  list-style: none;
}

.brand-points li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-points li::before {
  content: "✓";
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 700;
}

.signin-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
  padding: var(--s10) var(--s6);
}

.signin-wordmark {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
}

.signin-card {
  width: 100%;
  max-width: 400px;
  padding: var(--s8);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-dialog);
  box-shadow: var(--shadow);
}

.move-card .button {
  margin-top: var(--s2);
}

@media (max-width: 1023px) {
  .signin-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-panel {
    display: none;
  }

  .signin-main {
    justify-content: flex-start;
    padding: var(--s12) var(--s4);
  }

  .signin-wordmark {
    display: flex;
  }
}

@media (max-width: 479px) {
  .signin-main {
    padding-top: var(--s8);
  }

  .signin-card {
    padding: var(--s6) var(--s5);
    border-radius: var(--r-card);
  }
}
/*
 * Merchant sign-in (spec §5.1): the brand panel, the form card, the status line above the form,
 * and the move card. It loads after merchant/00-shell.css, which still carries WP-0's first
 * version of the sign-in layout, so every rule here refines or overrides that one. The forced
 * password screen shown inside the card is styled with Your account (common/pages/account.css).
 */

/* --- brand panel --------------------------------------------------------------------------------- */

.brand-panel .wordmark {
  gap: 12px;
  font-size: 24px;
}

/* The mark on the gradient: a solid bubble in the panel's ink with the check in the accent, so
   it reads as the Trucle mark rather than a checkbox in either theme. */
.brand-panel .signin-mark {
  flex: none;
  display: block;
  width: 36px;
  height: 36px;
}

.signin-mark-bubble {
  fill: currentColor;
}

.signin-mark-check {
  stroke: var(--accent);
}

.brand-headline {
  max-width: 15ch;
}

/* The ticks are decoration; the sentences carry the meaning. */
.brand-points li::before {
  content: "✓" / "";
}

/* --- the card ------------------------------------------------------------------------------------ */

.signin-card {
  box-shadow: var(--shadow), 0 1px 0 var(--line);
}

.signin-card .signin h1 {
  font-size: 28px;
}

/* An empty hint takes no room: the button sits one step under the password (smoke defect 3). */
.signin .form-hint:empty {
  min-height: 0;
  margin: 0;
}

.signin .form-hint.is-error {
  margin-top: var(--s1);
  line-height: 1.45;
}

/* "You've signed out." — collapsed while empty (its flex gap cancelled), a notice once filled. It
   stays in the accessibility tree either way, so screen readers hear it when it fills. */
.signin-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.45;
}

.signin-status:empty {
  margin-top: calc(-1 * var(--s2));
}

.signin-status:not(:empty) {
  margin-bottom: var(--s2);
  padding: 10px 12px;
  border-inline-start: 3px solid var(--info);
  border-start-end-radius: var(--r-button);
  border-end-end-radius: var(--r-button);
  background: var(--info-soft);
}

.signin-status.is-warn:not(:empty) {
  border-inline-start-color: var(--warn);
  background: var(--warn-soft);
}

.signin-status-line:first-child {
  font-weight: 650;
}

.signin .button-block[aria-busy="true"] {
  cursor: progress;
}

.signin .button-block:disabled {
  opacity: 0.85;
}

.store-signin > summary {
  width: fit-content;
  border-radius: var(--r-sm);
}

.signin-help {
  line-height: 1.5;
}

.signin-help + .signin-help {
  margin-top: 0;
}

/* --- the move card --------------------------------------------------------------------------------- */

.move-card {
  gap: var(--s3);
}

.move-card .button {
  min-height: 44px;
  margin-top: var(--s3);
}

/* --- phones ---------------------------------------------------------------------------------------- */

@media (max-width: 479px) {
  .signin-main {
    gap: var(--s5);
  }

  .signin-card .signin h1 {
    font-size: 24px;
  }
}
/*
 * The Advanced pages (spec §2.4.13): Privacy, Quality checks, Capabilities & roles, Product fields.
 * Scoped to their page roots; tokens only. The panels themselves use the shared card and table.
 */

:is([data-page="privacy"], [data-page="quality"], [data-page="capabilities"], [data-page="fields"]) .advanced-lead {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

:is([data-page="privacy"], [data-page="quality"], [data-page="capabilities"], [data-page="fields"]) .advanced-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-button);
  background: var(--neutral-soft);
  color: var(--neutral-ink);
  font-size: 13px;
}

:is([data-page="privacy"], [data-page="quality"], [data-page="capabilities"], [data-page="fields"]) .advanced-notice .icon {
  flex: none;
  margin-top: 1px;
}

[data-page="quality"] .advanced-intro {
  margin: 0;
  max-width: 72ch;
}

:is([data-page="privacy"], [data-page="quality"], [data-page="capabilities"], [data-page="fields"]) .panels .card-description {
  max-width: 72ch;
}
/*
 * Assistant (spec §2.4.8). Scoped to the page root; tokens only.
 */

[data-page="assistant"] .page-status:empty {
  display: none;
}

[data-page="assistant"] .assistant-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

[data-page="assistant"] .assistant-skeleton {
  gap: var(--s3);
}

/* --- "Put it on your website" (as Setup step 6) ------------------------------------------------------ */

[data-page="assistant"] .install {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

[data-page="assistant"] .install .tab-panel {
  padding-top: var(--s3);
}

[data-page="assistant"] .install-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-inline-start: 20px;
}

[data-page="assistant"] .install-any {
  margin: 0;
}

[data-page="assistant"] .install-steps code,
[data-page="assistant"] .install-any code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
}

[data-page="assistant"] .install-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--s2);
  margin: 0;
  font-weight: 500;
}

[data-page="assistant"] .install-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font: 700 12px/1 var(--font-body);
}

[data-page="assistant"] .install-status-ok .install-mark {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

[data-page="assistant"] .install-status-warn .install-mark {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

[data-page="assistant"] .install-status a {
  font-weight: 600;
}

/* --- "What it can do" ---------------------------------------------------------------------------- */

[data-page="assistant"] .capabilities {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="assistant"] .capability {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s2) var(--s5);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

[data-page="assistant"] .capability:first-child {
  padding-top: 0;
}

[data-page="assistant"] .capability:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

[data-page="assistant"] .capability-text {
  min-width: 0;
}

[data-page="assistant"] .capability-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--s2);
}

[data-page="assistant"] .capability-title {
  margin: 0;
  font: 650 15px/1.35 var(--font-display);
}

[data-page="assistant"] .capability-description {
  margin: 2px 0 0;
  color: var(--muted);
}

[data-page="assistant"] .capability-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--info-ink);
  font-size: 13px;
  font-weight: 500;
}

[data-page="assistant"] .capability-reason {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

[data-page="assistant"] .capability-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s1);
  padding-top: 2px;
}

[data-page="assistant"] .capability-control .inline-change {
  align-items: flex-end;
}

[data-page="assistant"] .capability-control .inline-note {
  max-width: 30ch;
  text-align: end;
}

[data-page="assistant"] .capability-compare {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 719px) {
  [data-page="assistant"] .capability {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-page="assistant"] .capability-control,
  [data-page="assistant"] .capability-control .inline-change {
    align-items: flex-start;
  }

  [data-page="assistant"] .capability-control .inline-note {
    max-width: none;
    text-align: start;
  }

  [data-page="assistant"] .capability-compare {
    min-height: 44px;
  }
}

/* --- "Try it" and the sample answer -------------------------------------------------------------- */

[data-page="assistant"] .assistant-try-text {
  margin: 0;
  color: var(--muted);
}

[data-page="assistant"] .assistant-try-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

[data-page="assistant"] .assistant-sample {
  margin: var(--s1) 0 0;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
}

[data-page="assistant"] .sample-thread {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

[data-page="assistant"] .sample-bubble {
  max-width: 85%;
  margin: 0;
  padding: 8px 12px;
  border-radius: 14px;
  line-height: 1.45;
}

[data-page="assistant"] .sample-customer {
  align-self: flex-end;
  border-end-end-radius: 4px;
  background: var(--tint);
  color: var(--fg);
}

[data-page="assistant"] .sample-assistant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  align-self: flex-start;
  border: 1px solid var(--line);
  border-end-start-radius: 4px;
  background: var(--panel);
}

[data-page="assistant"] .sample-assistant p {
  margin: 0;
}

[data-page="assistant"] .sample-chip {
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel-2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

/* --- store key ---------------------------------------------------------------------------------- */

[data-page="assistant"] .assistant-key .copy-value {
  width: 100%;
  justify-content: space-between;
}

[data-page="assistant"] .assistant-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
/* Catalogue — #/catalogue (spec §2.4.5). Scoped to the page root. */

[data-page="catalogue"] .catalogue-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

/* "Sync now" sits at the header's inline end, its activity-log note under it. */
[data-page="catalogue"] .catalogue-action .inline-change {
  align-items: flex-end;
}

[data-page="catalogue"] .catalogue-action .inline-note {
  justify-content: flex-end;
}

[data-page="catalogue"] .kpi-value-pill {
  display: flex;
  align-items: center;
  min-height: 31px;
}

[data-page="catalogue"] .kpi-value-pill .pill {
  height: 26px;
  padding: 0 10px;
  font-size: 13px;
}

[data-page="catalogue"] .tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

[data-page="catalogue"] .tab-intro {
  margin: 0;
  max-width: 72ch;
  color: var(--muted);
}

[data-page="catalogue"] .section-title {
  margin: 0 0 var(--s3);
  font: 650 16px/1.35 var(--font-display);
}

/* --- connection ------------------------------------------------------------------------------------- */

[data-page="catalogue"] .probe {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 10px;
}

[data-page="catalogue"] .probe-result {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

[data-page="catalogue"] .probe-mark {
  font-weight: 700;
}

[data-page="catalogue"] .probe-ok {
  color: var(--ok-ink);
}

[data-page="catalogue"] .probe-bad {
  color: var(--bad-ink);
}

[data-page="catalogue"] .connection-change {
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

[data-page="catalogue"] .technical {
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/*
 * The summary is the control that opens the record, so it carries the §4.3 touch floor
 * (`--control-height`: 36px, 44px below 720px) and the console's own chevron, as the identical
 * disclosure on Activity does — a native triangle cannot be centred in the taller box (D11).
 */
[data-page="catalogue"] .technical > summary {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--control-height);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

[data-page="catalogue"] .technical > summary::-webkit-details-marker {
  display: none;
}

[data-page="catalogue"] .technical > summary::before {
  content: "›";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--t-fast);
}

[data-page="catalogue"] .technical[open] > summary::before {
  transform: rotate(90deg);
}

[data-page="catalogue"] .technical[open] > summary {
  margin-bottom: var(--s3);
}

[data-page="catalogue"] .technical code,
[data-page="catalogue"] .item-id {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

[data-page="catalogue"] .section-reference {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1);
  color: var(--muted);
  font-size: 13px;
}

/* --- product fields ---------------------------------------------------------------------------------- */

/* Each card is as tall as its own content; a serving mapping is never stretched to match a waiting one. */
[data-page="catalogue"] .cards-auto {
  align-items: start;
}

[data-page="catalogue"] .field-card-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

[data-page="catalogue"] .field-card-version {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

[data-page="catalogue"] .field-card-blocking {
  margin: 0;
  color: var(--warn-ink);
  font-weight: 600;
}

[data-page="catalogue"] .field-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

[data-page="catalogue"] .field-card-footer {
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* --- tables ------------------------------------------------------------------------------------------- */

[data-page="catalogue"] .table-empty {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

[data-page="catalogue"] .row-details .kv {
  max-width: 560px;
}

[data-page="catalogue"] td time {
  white-space: nowrap;
}

[data-page="catalogue"] .catalogue-tabs-skeleton {
  padding-block: var(--s2);
}

@media (max-width: 719px) {
  [data-page="catalogue"] .page-actions,
  [data-page="catalogue"] .catalogue-action {
    width: 100%;
  }

  [data-page="catalogue"] .catalogue-action .inline-change {
    align-items: flex-start;
  }

  [data-page="catalogue"] .catalogue-action .inline-note {
    justify-content: flex-start;
  }
}
/* Conversation — #/conversations/:thread (spec §2.4.4). Scoped to the page root. */

[data-page="conversation"] .conversation-body {
  min-width: 0;
}

/* --- transcript ----------------------------------------------------------------------------------- */

[data-page="conversation"] .transcript-privacy {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

[data-page="conversation"] .transcript {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  margin: 0;
  padding: var(--s2) 0 0;
  list-style: none;
}

[data-page="conversation"] .message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  max-width: min(80%, 640px);
}

[data-page="conversation"] .message-customer {
  align-self: flex-end;
  align-items: flex-end;
}

[data-page="conversation"] .message-assistant {
  align-self: flex-start;
}

/* Plain text with its line breaks; long unbroken strings wrap instead of widening the page. */
[data-page="conversation"] .bubble {
  padding: 10px 14px;
  border-radius: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[data-page="conversation"] .message-customer .bubble {
  background: var(--tint);
  color: var(--fg);
  border-end-end-radius: 6px;
}

[data-page="conversation"] .message-assistant .bubble {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  border-end-start-radius: 6px;
  box-shadow: var(--shadow-sm);
}

[data-page="conversation"] .message .notice {
  align-self: stretch;
}

[data-page="conversation"] .handoff-summary {
  color: var(--fg);
  font-style: italic;
  overflow-wrap: anywhere;
}

[data-page="conversation"] .message-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="conversation"] .cite-chip,
[data-page="conversation"] .product-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

[data-page="conversation"] .cite-chip {
  background: var(--info-soft);
  color: var(--info-ink);
  text-decoration: none;
  transition: border-color var(--t-fast);
}

[data-page="conversation"] .cite-chip:hover {
  border-color: currentColor;
}

[data-page="conversation"] .product-chip {
  background: var(--neutral-soft);
  color: var(--neutral-ink);
}

[data-page="conversation"] .message-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

[data-page="conversation"] .message-meta .pill {
  height: 20px;
  margin-inline-start: 2px;
}

[data-page="conversation"] .transcript-time {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

[data-page="conversation"] .transcript-time::before,
[data-page="conversation"] .transcript-time::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

[data-page="conversation"] .transcript-cancelled {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* --- follow-up and side cards ---------------------------------------------------------------------- */

[data-page="conversation"] .follow-up-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

[data-page="conversation"] .follow-up-byline {
  color: var(--muted);
  font-size: 13px;
}

[data-page="conversation"] .follow-up-note {
  margin: 0;
}

[data-page="conversation"] .follow-up-note figcaption {
  margin-bottom: var(--s1);
  color: var(--muted);
  font: 650 12px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-page="conversation"] .follow-up-note blockquote {
  margin: 0;
  padding: 8px 12px;
  border-inline-start: 3px solid var(--line-strong);
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  background: var(--panel-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[data-page="conversation"] .inline-change {
  max-width: none;
}

[data-page="conversation"] .inline-change textarea {
  min-height: 84px;
  resize: vertical;
}

[data-page="conversation"] .note-counter {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

[data-page="conversation"] .follow-up-helper {
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

[data-page="conversation"] .count-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="conversation"] .count-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}

[data-page="conversation"] .count-list li > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-page="conversation"] .count {
  flex: none;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--neutral-ink);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* As on Catalogue and Activity: the summary is the control, so it carries the §4.3 floor (D11). */
[data-page="conversation"] details.technical > summary {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--control-height);
  list-style: none;
  cursor: pointer;
  font: 650 14px/1.35 var(--font-display);
}

[data-page="conversation"] details.technical > summary::-webkit-details-marker {
  display: none;
}

[data-page="conversation"] details.technical > summary::before {
  content: "›";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--t-fast);
}

[data-page="conversation"] details.technical[open] > summary::before {
  transform: rotate(90deg);
}

[data-page="conversation"] details.technical:not([open]) {
  gap: 0;
}

/* --- loading and missing ----------------------------------------------------------------------------- */

[data-page="conversation"] .transcript-skeleton {
  gap: var(--s4);
}

[data-page="conversation"] .skeleton-bubble {
  width: var(--bubble-width, 60%);
}

[data-page="conversation"] .skeleton-bubble-end {
  align-self: flex-end;
}

[data-page="conversation"] .conversation-missing .empty-state {
  padding-block: var(--s8);
}

@media (max-width: 719px) {
  [data-page="conversation"] .message {
    max-width: 92%;
  }
}
/* Conversations — #/conversations (spec §2.4.3). Scoped to the page root. */

[data-page="conversations"] .conversations-filters .filter-bar {
  justify-content: space-between;
}

[data-page="conversations"] .conversations-results {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
}

[data-page="conversations"] .conversation-started {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * One line with an ellipsis; the link text keeps the whole question for screen readers. From 720px
 * the question column takes whatever width the other columns leave (`width: 100%` with
 * `max-width: 0` lets the cell shrink below its text), and the other cells stay on one line, so the
 * table fits the content width at lg, xl and xxl without scrolling.
 */
[data-page="conversations"] .conversation-question {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-page="conversations"] .conversation-outcome {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

@media (min-width: 720px) {
  [data-page="conversations"] .conversations-results .table td.col-primary {
    width: 100%;
    max-width: 0;
  }

  [data-page="conversations"] .conversations-results .table td.col-primary .row-link {
    display: block;
    min-width: 12ch;
  }

  [data-page="conversations"] .conversations-results .table td:not(.col-primary) {
    white-space: nowrap;
  }
}

/* At 1440px and wider there is room for an outcome and its follow-up pill, and the customer, on one line. */
@media (min-width: 1440px) {
  [data-page="conversations"] .conversation-outcome {
    flex-wrap: nowrap;
  }

  [data-page="conversations"] .conversation-customer {
    white-space: nowrap;
  }
}

[data-page="conversations"] .conversations-more {
  display: flex;
  justify-content: center;
}

[data-page="conversations"] .conversations-note {
  margin: 0;
  max-width: 72ch;
  color: var(--muted);
  font-size: 13px;
}

[data-page="conversations"] .conversations-empty .empty-state {
  padding-block: var(--s8);
}

@media (max-width: 719px) {
  [data-page="conversations"] .conversation-question {
    display: -webkit-box;
    max-width: none;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  [data-page="conversations"] .conversations-more .button {
    width: 100%;
  }
}
/*
 * Overview (spec §2.4.1). Scoped to the page root; tokens only.
 */

[data-page="overview"] .page-status:empty {
  display: none;
}

[data-page="overview"] .overview-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
  transition: opacity var(--t-fast) var(--ease);
}

/* The other range is loading: the figures on screen still belong to the previous one. */
[data-page="overview"] .overview-content[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* --- header: range and "Updated" ------------------------------------------------------------------ */

[data-page="overview"] .page-actions {
  gap: var(--s3);
}

[data-page="overview"] .overview-range .filter-bar {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

[data-page="overview"] .overview-updated {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-page="overview"] .overview-partial {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* --- status banner ------------------------------------------------------------------------------- */

/* The supporting line already says "{done} of 6 steps done"; the meter's own text stays for screen readers. */
[data-page="overview"] .status-banner-meter .meter-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[data-page="overview"] .status-banner-body {
  overflow-wrap: anywhere;
}

@media (max-width: 719px) {
  [data-page="overview"] .status-banner {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  [data-page="overview"] .status-banner-text {
    flex: 1 1 calc(100% - 56px);
  }

  [data-page="overview"] .status-banner-action {
    flex: 1 1 100%;
    padding-inline-start: 56px;
  }
}

/* --- tiles and rows of cards share a height -------------------------------------------------------- */

[data-page="overview"] .overview-kpis .cell {
  display: flex;
  flex-direction: column;
}

[data-page="overview"] .overview-kpis .kpi {
  flex: 1 1 auto;
}

[data-page="overview"] .overview-row > .cell {
  display: flex;
  flex-direction: column;
}

[data-page="overview"] .overview-row > .cell > .card {
  flex: 1 1 auto;
}

[data-page="overview"] .overview-row .chart .empty-state {
  padding: var(--s6) var(--s4);
}

[data-page="overview"] .overview-skeleton {
  gap: var(--s3);
}

/* --- needs attention ---------------------------------------------------------------------------- */

[data-page="overview"] .attention-host {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

[data-page="overview"] .attention-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="overview"] .attention-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: var(--s3);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

[data-page="overview"] .attention-item:first-child {
  padding-top: 2px;
}

[data-page="overview"] .attention-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

[data-page="overview"] .attention-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font: 700 12px/1 var(--font-body);
}

[data-page="overview"] .attention-bad .attention-mark {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

[data-page="overview"] .attention-warn .attention-mark {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

[data-page="overview"] .attention-info .attention-mark {
  background: var(--info-soft);
  color: var(--info-ink);
}

[data-page="overview"] .attention-words {
  min-width: 0;
  padding-top: 1px;
  color: var(--fg);
  line-height: 1.4;
}

/* A whole row is the target, not the words: 36px on `md` and up, 44px on a phone (§4.3, §4.6). */
[data-page="overview"] .attention-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--control-height);
  padding-block: 7px;
  border-radius: var(--r-sm);
  text-decoration: none;
}

[data-page="overview"] .attention-link .icon {
  flex: none;
  margin-top: 3px;
  color: var(--muted);
  transition: transform var(--t-fast), color var(--t-fast);
}

[data-page="overview"] .attention-link:hover .attention-words {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-page="overview"] .attention-link:hover .icon {
  color: var(--accent);
  transform: translateX(2px);
}

[data-page="overview"] .attention-more {
  align-self: flex-start;
  min-height: 36px;
}

@media (max-width: 719px) {
  [data-page="overview"] .attention-more {
    min-height: 44px;
  }

  /* 22px of words plus 22px of padding: the row is exactly the 44px phone target. */
  [data-page="overview"] .attention-link {
    padding-block: 11px;
  }
}

[data-page="overview"] .attention-clear {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--s6) var(--s4);
  text-align: center;
}

[data-page="overview"] .attention-clear-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s1);
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
}

[data-page="overview"] .attention-clear-title {
  margin: 0;
  font: 650 16px/1.35 var(--font-display);
}

[data-page="overview"] .attention-clear-body {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
}

/* --- assistant health ---------------------------------------------------------------------------- */

[data-page="overview"] .health .kv-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

[data-page="overview"] .health .kv dd {
  text-align: end;
}

[data-page="overview"] .health-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[data-page="overview"] .health-sync {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--s2);
  font-weight: 500;
}

/* --- most shown products, most cited policies ----------------------------------------------------- */

[data-page="overview"] .ranked-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="overview"] .ranked-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(64px, 1fr) minmax(3ch, auto);
  align-items: center;
  gap: var(--s3);
}

[data-page="overview"] .ranked-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-page="overview"] a.ranked-title {
  text-decoration: none;
}

[data-page="overview"] a.ranked-title:hover {
  text-decoration: underline;
}

[data-page="overview"] .ranked-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
}

[data-page="overview"] .ranked-fill {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--series-1);
}

[data-page="overview"] .ranked-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

[data-page="overview"] .ranked-empty {
  margin: 0;
  padding: var(--s4) 0;
  color: var(--muted);
}

@media (max-width: 399px) {
  [data-page="overview"] .ranked-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  [data-page="overview"] .ranked-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* --- questions the assistant couldn't answer --------------------------------------------------------- */

[data-page="overview"] .unanswered-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="overview"] .unanswered-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s6);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

[data-page="overview"] .unanswered-row:first-child {
  padding-top: 0;
}

[data-page="overview"] .unanswered-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

[data-page="overview"] .unanswered-question {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  quotes: "“" "”";
}

[data-page="overview"] .unanswered-question::before {
  content: open-quote;
  color: var(--muted);
}

[data-page="overview"] .unanswered-question::after {
  content: close-quote;
  color: var(--muted);
}

[data-page="overview"] .unanswered-meta {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

[data-page="overview"] .unanswered-meta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  font-weight: 600;
}

[data-page="overview"] .unanswered-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

[data-page="overview"] .unanswered-footer p {
  margin: 0;
  color: var(--muted);
}

[data-page="overview"] .unanswered-empty {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--muted);
}

[data-page="overview"] .unanswered-empty .icon {
  color: var(--ok);
}

[data-page="overview"] #overview-unanswered {
  scroll-margin-top: calc(var(--topbar-height, 56px) + var(--s4));
}

[data-page="overview"] #overview-unanswered .card-title:focus {
  outline: none;
}

[data-page="overview"] #overview-unanswered .card-title:focus-visible {
  border-radius: var(--r-sm);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Policies — #/policies (spec §2.4.6). Scoped to the page root. */

[data-page="policies"] .policies-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

[data-page="policies"] .tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

[data-page="policies"] .tab-intro {
  margin: 0;
  max-width: 72ch;
  color: var(--muted);
}

[data-page="policies"] .policy-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 18ch;
  max-width: 60ch;
}

/* The excerpt: muted, at most two lines. */
[data-page="policies"] .policy-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

[data-page="policies"] .policy-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-page="policies"] .hidden-question {
  color: var(--muted);
  font-style: italic;
}

[data-page="policies"] .conflict-question {
  overflow-wrap: anywhere;
}

[data-page="policies"] .policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="policies"] .table-empty {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

[data-page="policies"] .policies-empty .empty-state {
  padding-block: var(--s8);
}

[data-page="policies"] .policies-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
/* Policy — #/policies/view (spec §2.4.7). Scoped to the page root. */

[data-page="policy"] .policy-body {
  min-width: 0;
}

[data-page="policy"] .policy-version {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- the text --------------------------------------------------------------------------------------- */

[data-page="policy"] .policy-text {
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

[data-page="policy"] .policy-text > * {
  margin: 0;
}

[data-page="policy"] .policy-text > * + * {
  margin-top: var(--s3);
}

[data-page="policy"] .policy-text > h3 {
  font: 650 15px/1.35 var(--font-display);
}

[data-page="policy"] .policy-text > * + h3 {
  margin-top: var(--s6);
}

[data-page="policy"] .policy-text ul,
[data-page="policy"] .policy-text ol {
  padding-inline-start: 1.4em;
}

[data-page="policy"] .policy-text li + li {
  margin-top: var(--s1);
}

[data-page="policy"] .issues-heading {
  font-weight: 600;
}

[data-page="policy"] .issue-list {
  margin: var(--s1) 0 0;
  padding-inline-start: 1.2em;
}

/* --- versions ---------------------------------------------------------------------------------------- */

[data-page="policy"] .versions {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="policy"] .version {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-inline-start: 3px solid transparent;
  border-radius: 10px;
}

[data-page="policy"] .version.is-current {
  border-inline-start-color: var(--accent);
  background: var(--tint);
}

[data-page="policy"] .version-head,
[data-page="policy"] .version-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
}

[data-page="policy"] .version-link {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

[data-page="policy"] .version-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

[data-page="policy"] .version-link[aria-current="true"] {
  color: var(--accent);
}

[data-page="policy"] .version-date {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

[data-page="policy"] .version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-page="policy"] .edit-help {
  margin: 0;
  color: var(--muted);
}

/* --- loading and missing ------------------------------------------------------------------------------- */

[data-page="policy"] .policy-skeleton {
  gap: var(--s4);
}

[data-page="policy"] .policy-missing .empty-state {
  padding-block: var(--s8);
}
/*
 * Store settings (spec §2.4.12): one column, at most 840px wide. Scoped to the page root; tokens only.
 */

[data-page="settings"] .settings-column {
  width: 100%;
  max-width: 840px;
}

[data-page="settings"] .settings-help,
[data-page="settings"] .settings-text {
  margin: 0;
  max-width: 64ch;
}

[data-page="settings"] .settings-help {
  color: var(--muted);
}

[data-page="settings"] .settings-value {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-page="settings"] .settings-note {
  color: var(--muted);
  font-size: 12.5px;
}

[data-page="settings"] .settings-unset {
  color: var(--muted);
}

[data-page="settings"] .website-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  min-width: 0;
}

[data-page="settings"] .website-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

[data-page="settings"] .website-link .icon {
  flex: none;
}

[data-page="settings"] .store-key {
  min-width: 0;
}

[data-page="settings"] .store-key .copy-value {
  padding-block: var(--s1);
}

[data-page="settings"] .settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

[data-page="settings"] .settings-actions .button-link {
  padding-inline: 0;
}

/* --- the inline "Edit details" form ------------------------------------------------------------ */

[data-page="settings"] .inline-change {
  max-width: none;
}

[data-page="settings"] .inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

[data-page="settings"] .inline-fields > .field:first-child {
  grid-column: 1 / -1;
}

[data-page="settings"] .inline-submit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}

@media (max-width: 719px) {
  [data-page="settings"] .inline-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-page="settings"] .inline-submit .button {
    flex: 1 1 auto;
  }
}
/*
 * Setup (spec §2.4.2). Scoped to the page root; tokens only.
 */

[data-page="setup"] .page-status:empty {
  display: none;
}

[data-page="setup"] .setup-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

[data-page="setup"] .setup-skeleton {
  gap: var(--s3);
}

/* --- progress and checklist ---------------------------------------------------------------------- */

[data-page="setup"] .setup-progress {
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

[data-page="setup"] .setup-progress .meter-text {
  color: var(--fg);
  font: 600 13px/1.3 var(--font-body);
}

[data-page="setup"] .checklist {
  padding-top: var(--s2);
}

[data-page="setup"] .step-content {
  gap: var(--s3);
}

[data-page="setup"] .step-current .step-title {
  font-size: 16px;
}

[data-page="setup"] .setup-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

[data-page="setup"] .setup-step-text {
  max-width: 64ch;
  margin: 0;
  color: var(--muted);
}

[data-page="setup"] .setup-step-body .inline-change {
  max-width: 560px;
}

[data-page="setup"] .setup-step-body .notice {
  max-width: 560px;
}

[data-page="setup"] .setup-done {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}

[data-page="setup"] .setup-done p {
  margin: 0;
}

[data-page="setup"] .setup-aside {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

[data-page="setup"] .setup-aside a,
[data-page="setup"] .setup-done a {
  font-weight: 600;
}

[data-page="setup"] .setup-viewer {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

[data-page="setup"] .setup-status {
  margin: 0;
  color: var(--muted);
}

[data-page="setup"] .setup-syncing {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--info-ink);
  font-weight: 500;
}

[data-page="setup"] .setup-accepts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
}

[data-page="setup"] .setup-accepts .inline-change {
  flex: 0 1 auto;
}

[data-page="setup"] .setup-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

[data-page="setup"] .setup-counter {
  margin-top: 0;
}

/* --- disclosures: the token field, the token upgrade, the install code once done ------------------- */

[data-page="setup"] .setup-disclosure {
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: var(--r-button);
  background: var(--panel);
  color: var(--fg);
}

[data-page="setup"] .setup-done .setup-disclosure {
  max-width: none;
}

[data-page="setup"] .setup-disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--r-button);
  color: var(--accent);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

[data-page="setup"] .setup-disclosure > summary::-webkit-details-marker {
  display: none;
}

[data-page="setup"] .setup-disclosure > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-inline: 2px 4px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-fast);
}

[data-page="setup"] .setup-disclosure[open] > summary::before {
  transform: rotate(45deg);
}

[data-page="setup"] .setup-disclosure > summary:hover {
  background: var(--panel-2);
}

[data-page="setup"] .setup-disclosure-body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s2) 12px 12px;
}

/* --- "Put it on your website" -------------------------------------------------------------------- */

[data-page="setup"] .install {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

[data-page="setup"] .install .tab-panel {
  padding-top: var(--s3);
}

[data-page="setup"] .install-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-inline-start: 20px;
}

[data-page="setup"] .install-any {
  margin: 0;
}

[data-page="setup"] .install-steps code,
[data-page="setup"] .install-any code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
}

[data-page="setup"] .install-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--s2);
  margin: 0;
  color: var(--fg);
  font-weight: 500;
}

[data-page="setup"] .install-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font: 700 12px/1 var(--font-body);
}

[data-page="setup"] .install-status-ok .install-mark {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

[data-page="setup"] .install-status-warn .install-mark {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

[data-page="setup"] .install-status a {
  font-weight: 600;
}

/* --- the side column ---------------------------------------------------------------------------- */

[data-page="setup"] .setup-key .copy-value {
  width: 100%;
  justify-content: space-between;
}

[data-page="setup"] .setup-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

[data-page="setup"] .setup-links {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="setup"] .setup-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  font-weight: 600;
  text-decoration: none;
}

[data-page="setup"] .setup-links a:hover {
  text-decoration: underline;
}

@media (max-width: 719px) {
  [data-page="setup"] .setup-disclosure > summary,
  [data-page="setup"] .setup-links a {
    min-height: 44px;
  }

  [data-page="setup"] .step {
    gap: var(--s3);
  }
}
/*
 * Plan & usage (spec §2.4.9). Scoped to the page root; tokens only.
 */

/* Cards in a row share its height, so the plan and this month line up. */
[data-page="usage"] .usage-row > .cell {
  display: flex;
  flex-direction: column;
}

[data-page="usage"] .usage-row > .cell > .card {
  flex: 1 1 auto;
}

[data-page="usage"] .usage-row > .cell > .card > .card-body {
  flex: 1 1 auto;
}

/* --- Your plan --------------------------------------------------------------------------------- */

[data-page="usage"] .plan-heading {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

[data-page="usage"] .plan-name {
  margin: 0;
  color: var(--accent);
  font: 700 13px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-page="usage"] .plan-price {
  margin: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

[data-page="usage"] .plan-amount {
  color: var(--fg);
  font: 700 28px/1.1 var(--font-display);
  letter-spacing: -0.01em;
}

[data-page="usage"] .plan-period {
  font-size: 14px;
}

[data-page="usage"] .plan-features {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="usage"] .plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-variant-numeric: tabular-nums;
}

[data-page="usage"] .plan-features .icon {
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

[data-page="usage"] .plan-change {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s2);
}

[data-page="usage"] .plan-fallback {
  margin: 0;
  font-weight: 600;
}

[data-page="usage"] .plan-note {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* --- This month ---------------------------------------------------------------------------------- */

[data-page="usage"] .usage-percent {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: 0;
}

[data-page="usage"] .usage-percent-value {
  font: 700 28px/1.1 var(--font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

[data-page="usage"] .usage-percent-label {
  color: var(--muted);
}

[data-page="usage"] .meter-lg .meter-text {
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
}

/* No plan: no percentage above the meter, so the count itself is the card's key figure. */
[data-page="usage"] .usage-meter .meter-unbounded .meter-text {
  color: var(--fg);
  font: 650 20px/1.3 var(--font-display);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

[data-page="usage"] .usage-status {
  margin: 0;
}

[data-page="usage"] .usage-facts {
  display: grid;
  gap: var(--s1);
  margin: 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  list-style: none;
  font-variant-numeric: tabular-nums;
}

/* --- Monthly conversations ------------------------------------------------------------------------ */

/*
 * Twelve month labels need about 30px each. In a narrow chart (a phone, or the half-width card
 * between 1024 and 1279px) every other label is hidden, keeping the current month; the tooltip and
 * "Show data as a table" still name every month.
 */
[data-page="usage"] .usage-months {
  container: usage-months / inline-size;
  min-width: 0;
}

@container usage-months (max-width: 420px) {
  [data-page="usage"] .usage-months .chart-x .chart-tick:nth-child(odd) {
    display: none;
  }
}

/* --- Seats and stores ------------------------------------------------------------------------------ */

[data-page="usage"] .allowance {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

[data-page="usage"] .allowance + .allowance {
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

[data-page="usage"] .allowance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
}

[data-page="usage"] .allowance-title {
  margin: 0;
  font: 600 14px/1.4 var(--font-body);
}

[data-page="usage"] .allowance-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 13px;
  font-weight: 600;
}

/* --- Invoices ----------------------------------------------------------------------------------------- */

[data-page="usage"] .invoice-number {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-page="usage"] .usage-note {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* --- Other plans --------------------------------------------------------------------------------------- */

[data-page="usage"] .plan-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="usage"] .plan-option {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
  padding: var(--s4) var(--s5);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

[data-page="usage"] .plan-option.is-current {
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

[data-page="usage"] .plan-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
}

[data-page="usage"] .plan-option-name {
  margin: 0;
  font: 650 16px/1.35 var(--font-display);
}

[data-page="usage"] .plan-option-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--accent);
  font: 600 12px/1 var(--font-body);
}

[data-page="usage"] .plan-option-amount {
  color: var(--fg);
  font: 700 22px/1.15 var(--font-display);
}

/* --- phones -------------------------------------------------------------------------------------------- */

@media (max-width: 719px) {
  [data-page="usage"] .plan-amount,
  [data-page="usage"] .usage-percent-value {
    font-size: 22px;
  }

  [data-page="usage"] .usage-meter .meter-unbounded .meter-text {
    font-size: 18px;
  }

  [data-page="usage"] .allowance-link {
    min-height: 44px;
  }

  [data-page="usage"] .plan-change .button {
    align-self: stretch;
  }
}