/* ============================================================================
   Relay — shell chrome
   ----------------------------------------------------------------------------
   The global chrome of the app: the app bar (brand lockup, workspace tabs,
   account controls), the gateway status strip, the toast stack, the shared
   dialog language and the small global polish (focus rings, selection,
   scrollbars, reduced motion).

   shell.css is the LAST stylesheet the page loads, so every rule here wins
   over styles.css, gateway.css, playground.css and admin.css. Selectors are
   therefore scoped to chrome elements — the site head, the overlays, the
   toast stack and the gateway status strip — so the Gateway, Chat and Admin
   interiors keep the styling their own sheets give them.

   Tokens come from styles.css (surfaces, hairlines, one accent, motion).
   ========================================================================== */

/* ------------------------------------------------------------------ app bar */
/* The icon sprite is an inline <svg> with zero dimensions; as an inline box
   it still opens a line box and would push the app bar ~23px down the page. */
.ico-sprite {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* One full-width bar with a single hairline bottom edge: brand and workspace
   switch on the left, account controls on the right. Nothing floats. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0;
  background: var(--bg);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  /* the one sanctioned blur in the app: the sticky bar itself */
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease-out), left var(--dur-slow) var(--ease-out);
}
.site-head .head-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
  min-height: 52px;
  height: 52px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- brand lockup ------------------------------------------------------- */
.site-head .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  letter-spacing: -0.025em;
  color: var(--fg-strong);
  white-space: nowrap;
  margin-right: 2px;
}
.site-head .brand-mark {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  flex: none;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent);
  transition: transform var(--dur-fast) var(--ease-out);
}
.site-head .brand:hover .brand-mark { transform: scale(1.05); }
body .site-head .brand .brand-name { color: var(--fg-strong); font-weight: var(--fw-semibold); }
.site-head .brand span { color: var(--muted); font-weight: var(--fw-regular); }

/* --- workspace tabs: a recessed groove with one raised, crisp pill ------ */
body .site-head #tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  position: relative;
  background: var(--seg-bg);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
}
body .site-head #tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: var(--muted);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
body .site-head #tabs a:hover {
  color: var(--fg-strong);
  background: color-mix(in oklab, var(--fg) 7%, transparent);
}
body .site-head #tabs a[aria-selected="true"] {
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  background: var(--seg-active);
  border-color: var(--hairline);
  box-shadow: var(--seg-shadow);
}
body .site-head #tabs a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
#tabs::after,
#tabs a::after,
#tabs.has-indicator::after {
  display: none !important;
  content: none !important;
}

/* --- right-hand actions -------------------------------------------------- */
body .site-head .head-side {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: none;
}
/* one hairline between the workspace switch and the account controls */
body .site-head .head-side::before {
  content: "";
  width: 1px;
  height: 20px;
  margin-right: 2px;
  background: var(--line);
  flex: none;
}
body .site-head .site-head-sep { display: none; }

/* Icon buttons stay quiet until touched, then land on a surface. */
body .site-head .icobtn {
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--fg-soft);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
body .site-head .icobtn:hover {
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  border-color: var(--hairline);
  color: var(--fg-strong);
  transform: none;
}
body .site-head .icobtn:active {
  background: color-mix(in oklab, var(--fg) 13%, transparent);
  transform: none;
}
body .site-head .icobtn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
body .site-head .icobtn[aria-pressed="true"] { color: var(--fg); }
body .site-head .icobtn[aria-pressed="false"] { color: var(--muted); }

/* A live pip on the refresh button: auto-refresh is running. */
body .site-head #auto-refresh[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--up);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--bg) 88%, transparent);
}

/* Account / sign-in control. */
body .site-head .auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
body .site-head .auth-chip:hover {
  background: var(--surface-1);
  border-color: var(--line-strong);
  color: var(--fg-strong);
  box-shadow: var(--elev-1);
}
body .site-head .auth-chip.on {
  background: var(--surface-1);
  border-color: var(--line);
  color: var(--fg-strong);
}
body .site-head .auth-chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
body .site-head .auth-chip-badge {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
}

/* The status line lives in the ribbon; the header only surfaces it when the
   gateway is degraded, so a failing API is visible from any tab. */
body .site-head #refresh-note { display: none; }
body .site-head #refresh-note[data-state="error"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  max-width: 340px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--warn) 42%, transparent);
  background: color-mix(in oklab, var(--warn) 12%, transparent);
  color: var(--warn);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body .site-head #refresh-note[data-state="error"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

/* ------------------------------------------------------- gateway status strip */
/* The ribbon is drawn by the gateway module (it owns the data); the shell owns
   only how it reads: a status dot, one channel-distribution bar and a quiet
   row of metrics with tabular figures. */
#panel-gateway .gw-status-ribbon {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: var(--sp-4) 0 var(--sp-5);
  padding: 14px 16px;
}
/* header: dot + one label + the live badge */
#panel-gateway .gw-status-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#panel-gateway .gw-status-ribbon .gw-status-dot,
#panel-gateway .gw-status-ribbon .dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--muted) 16%, transparent);
}
#panel-gateway .gw-status-ribbon .dot.up,
#panel-gateway .gw-status-ribbon .gw-status-dot.is-up {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--up) 22%, transparent);
}
#panel-gateway .gw-status-ribbon .dot.unstable,
#panel-gateway .gw-status-ribbon .gw-status-dot.is-unstable {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--unstable) 24%, transparent);
}
#panel-gateway .gw-status-ribbon .dot.down,
#panel-gateway .gw-status-ribbon .gw-status-dot.is-down {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--down) 24%, transparent);
}
#panel-gateway .gw-status-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.012em;
  color: var(--fg-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel-gateway .gw-status-ribbon:has(.dot.down) .gw-status-label { color: var(--down); }
#panel-gateway .gw-status-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#panel-gateway .gw-status-live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--up);
  flex: none;
}
/* channel distribution: one thin proportional bar */
#panel-gateway .gw-status-bar {
  display: flex;
  gap: 2px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
#panel-gateway .gw-status-seg {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 45%, transparent);
}
#panel-gateway .gw-status-seg.is-up { background: var(--up); }
#panel-gateway .gw-status-seg.is-unstable { background: var(--unstable); }
#panel-gateway .gw-status-seg.is-down { background: var(--down); }
#panel-gateway .gw-status-seg.is-unknown { background: color-mix(in oklab, var(--muted) 38%, transparent); }
/* metrics: label above value, tabular figures, no noise.
   The ribbon can sit in a narrow hero column or span the page, so the grid
   reflows on its own width rather than on the viewport. */
#panel-gateway .gw-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px 20px;
  margin: 0;
}
#panel-gateway .gw-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#panel-gateway .gw-stat-k {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}
#panel-gateway .gw-stat-v {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------- button system */
/* One base look plus four intents. The chrome uses these; the shared base
   rule in styles.css keeps the same metrics for every button in the app. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The chrome's own buttons: a hairline edge, no chrome shadow. */
.site-head .btn,
.overlay .btn,
.toasts .btn {
  border-radius: var(--r-sm);
  box-shadow: none;
}
.overlay .btn-primary,
.toasts .btn-primary { box-shadow: var(--elev-1); }

/* ------------------------------------------------------------------ toasts */
/* Inline SVG glyphs (no external assets): one per toast variant, drawn as a
   mask so the icon always inherits the variant's colour. */
:root {
  --shell-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 11.2v5'/%3E%3Cpath d='M12 7.9h.01'/%3E%3C/svg%3E");
  --shell-ico-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.6v5.2'/%3E%3Cpath d='M12 16.3h.01'/%3E%3C/svg%3E");
  --shell-ico-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.6 9.3 17.3 4 12'/%3E%3C/svg%3E");
}

/* Stacked cards, one accent per variant, never a colour-only signal: every
   toast carries an icon next to its text. */
.toasts {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(400px, calc(100vw - 36px));
  pointer-events: none;
}
.toast {
  --toast-accent: var(--fg-soft);
  --toast-ico: var(--shell-ico-info);
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--fg);
  box-shadow: var(--elev-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  letter-spacing: -0.005em;
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background-color: var(--toast-accent);
  -webkit-mask-image: var(--toast-ico);
  mask-image: var(--toast-ico);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.toast-error {
  --toast-accent: var(--danger);
  --toast-ico: var(--shell-ico-error);
  background: color-mix(in oklab, var(--danger) 9%, var(--surface-3));
  border-color: color-mix(in oklab, var(--danger) 34%, var(--line));
  color: var(--fg);
}
.toast-success {
  --toast-accent: var(--up);
  --toast-ico: var(--shell-ico-success);
  background: color-mix(in oklab, var(--up) 9%, var(--surface-3));
  border-color: color-mix(in oklab, var(--up) 30%, var(--line));
}
.toast-info {
  --toast-accent: var(--accent);
  --toast-ico: var(--shell-ico-info);
}
.toast-out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast-action {
  flex: none;
  margin-left: auto;
  align-self: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 3px 10px;
  min-height: 26px;
  font-size: var(--fs-xs);
  border-radius: var(--r-xs);
}
.toast-action:hover {
  background: var(--surface-1);
  border-color: var(--line-strong);
  color: var(--fg-strong);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
/* Hovering a toast pauses its auto-dismiss timer. */
.toast:hover { animation-play-state: paused; }

/* ----------------------------------------------------------------- dialogs */
/* One panel language for every dialog: hairline edge, quiet radius, a header
   band, a body and a footer band that sits on its own surface. */
#modal .modal-card,
#confirm .modal-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
}
#modal .modal-title,
#confirm .modal-title {
  margin: 0;
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  padding-right: 56px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
}
#modal-body {
  padding: var(--sp-5) var(--sp-6);
  color: var(--fg-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
/* A body that ends with an action row gets the same footer rule the confirm
   dialog uses, so every dialog closes the same way. */
#modal-body > .row2:last-child {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
#confirm-body {
  padding: var(--sp-5) var(--sp-6) 0;
  color: var(--fg-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.confirm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
}
#modal .modal-x,
#confirm .modal-x {
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: var(--r-sm);
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
#modal .modal-x:hover,
#confirm .modal-x:hover {
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  border-color: var(--hairline);
  color: var(--fg-strong);
}
#confirm-cancel {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-soft);
}
#confirm-cancel:hover {
  background: var(--surface-1);
  border-color: var(--line-strong);
  color: var(--fg-strong);
}
#confirm-ok {
  background: var(--fg-strong);
  border-color: var(--fg-strong);
  color: var(--bg);
  box-shadow: var(--elev-1);
}
#confirm-ok:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  box-shadow: var(--elev-2);
}
#confirm-ok.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}
#confirm-ok.danger:hover {
  background: color-mix(in oklab, var(--danger) 84%, #000000);
  border-color: transparent;
  color: #ffffff;
  box-shadow: none;
}

/* ------------------------------------------------------------ command palette */
.cmdk-overlay {
  align-items: flex-start;
  justify-content: center;
  padding-top: max(12vh, 64px);
}
.cmdk-card {
  width: min(620px, calc(100vw - 24px));
  max-height: min(62vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
  animation: cmdk-pop var(--dur-base) var(--ease-out);
}
@keyframes cmdk-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.cmdk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
}
.cmdk-search-ico {
  display: inline-flex;
  color: var(--muted);
  flex: none;
}
.cmdk-search-ico .pg-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--ico-stroke, 1.9); stroke-linecap: round; }
.cmdk-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--fs-md);
  color: var(--fg);
  padding: 2px 0;
}
.cmdk-input:focus { outline: none; }
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  flex: 1;
}
.cmdk-section {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--muted);
  padding: 10px 10px 4px;
}
.cmdk-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  min-height: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cmdk-item:hover { background: var(--surface-2); }
.cmdk-item.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.cmdk-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmdk-item-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-hint { font-size: var(--fs-2xs); color: var(--muted); font-family: "Geist Mono", ui-monospace, monospace; }
.cmdk-item-sec { font-size: var(--fs-2xs); color: var(--muted); flex: none; }
.cmdk-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.cmdk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-2xs);
}
.cmdk-foot kbd {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-1);
  color: var(--fg-soft);
}
.cmdk-count { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- shortcut help */
.scut-body { display: flex; flex-direction: column; gap: 6px; }
.scut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
}
.scut-row:nth-child(odd) { background: var(--surface-2); }
.scut-keys { display: inline-flex; gap: 4px; flex: none; }
.scut-keys kbd {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  min-width: 22px;
  text-align: center;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--fg);
}
.scut-label { font-size: var(--fs-sm); color: var(--fg-soft); text-align: right; }

/* -------------------------------------------------------- scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.reveal.is-revealed { opacity: 1; transform: none; }

/* -------------------------------------------------------------- offline */
body.is-offline .site-head::after {
  content: "offline";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: -1px;
  padding: 3px 12px 4px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--down);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  z-index: 60;
}

/* ------------------------------------------------------- onboarding tour */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
}
.tour-ring {
  position: fixed;
  border: 1.5px solid color-mix(in oklab, var(--accent) 75%, transparent);
  border-radius: 9999px;
  box-shadow: 0 0 0 9999px color-mix(in oklab, var(--bg) 50%, transparent);
  pointer-events: none;
  z-index: 201;
}
.tour-card {
  position: fixed;
  z-index: 202;
  max-width: 320px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface-3);
  box-shadow: var(--elev-3);
}
.tour-text { margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg); }
.tour-actions { display: flex; align-items: center; gap: 10px; }
.tour-dots { display: inline-flex; gap: 4px; margin-right: auto; }
.tour-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--line-strong); }
.tour-dot.on { background: var(--accent); }
.tour-next { padding: 5px 14px; min-height: 30px; font-size: var(--fs-xs); }
.tour-skip { font-size: var(--fs-2xs); }

/* --------------------------------------------------------- empty states */
.gw-board .empty, .adm-usage .empty, .adm-audit .empty { padding: 18px 12px; text-align: center; }

/* ------------------------------------------------------------ global polish */
::selection {
  background: color-mix(in oklab, var(--accent) 26%, transparent);
  color: var(--fg-strong);
}

/* Slim, quiet scrollbars — the page should not grow a thick grey rail. */
html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--fg) 16%, transparent);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--fg) 28%, transparent);
  background-clip: content-box;
}

/* Anchor targets clear the sticky app bar instead of landing under it. */
#main,
#main :is(h1, h2, h3, section[id]) { scroll-margin-top: 68px; }

/* The skip link drops below the app bar instead of hiding behind it. */
.skip-link:focus { top: 64px; z-index: 120; }

/* A copy button that just succeeded says so in colour, briefly. */
.is-copied {
  color: var(--up);
  border-color: color-mix(in oklab, var(--up) 40%, var(--line));
}

/* One focus ring for the whole chrome. Form fields keep the input ring from
   styles.css (they draw their own), everything else gets the outline. */
body .site-head :focus-visible,
.overlay :focus-visible:not(input):not(textarea):not(select),
.toasts :focus-visible,
.tour-card :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Inline SVG icons in the chrome keep one stroke weight. */
.site-head .icobtn .pg-ico,
.site-head .pg-theme-glyph svg {
  stroke-width: var(--ico-stroke);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------- narrow screens */
/* The chrome stays one tidy row down to 380px: the wordmark folds away
   first, then the tab padding tightens. */
@media (max-width: 700px) {
  .site-head .head-inner { padding: 0 16px; gap: 8px; }
  body .site-head #tabs a { padding: 0 11px; }
  /* No room for the text in a phone header: keep the amber dot, drop the
     words (the gateway banner still spells the failure out). */
  body .site-head #refresh-note[data-state="error"] {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
}
@media (max-width: 420px) {
  .site-head .head-inner { padding: 0 12px; gap: 6px; min-height: 48px; height: 48px; }
  .site-head .brand-name { display: none; }
  body .site-head #tabs { padding: 2px; }
  body .site-head #tabs a { padding: 0 9px; font-size: var(--fs-xs); min-height: 26px; }
  body .site-head .head-side { gap: 4px; }
  body .site-head .head-side::before { display: none; }
  body .site-head .icobtn { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
  body .site-head .auth-chip { padding: 0 10px; }
}
@media (max-width: 560px) {
  .cmdk-overlay { padding-top: 8vh; }
  .cmdk-card { max-height: 70vh; }
  .scut-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .scut-label { text-align: left; }
  #modal .modal-title,
  #confirm .modal-title { padding: var(--sp-4) var(--sp-4) var(--sp-3); padding-right: 48px; }
  #modal-body { padding: var(--sp-4); }
  #confirm-body { padding: var(--sp-4) var(--sp-4) 0; }
  .confirm-actions { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
}

/* Touch devices: every chrome control keeps a 44px target. */
@media (pointer: coarse) {
  body .site-head .icobtn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  body .site-head .auth-chip { height: 40px; min-height: 40px; padding: 0 14px; }
  body .site-head #tabs a { min-height: 34px; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-head, .site-head *, .toast, .modal-card, .cmdk-card, .tour-card, .overlay, .tour-ring {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tour-ring { box-shadow: none; }
}

/* ---------------------------------------------------------- forced colors */
@media (forced-colors: active) {
  .cmdk-card, .cmdk-item.is-active, .scut-row, .toast { border: 1px solid CanvasText; }
  .cmdk-item.is-active { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .pg-toggle-track, .switch { border: 1px solid CanvasText; }
  .pg-toggle-knob, .switch::after { background: CanvasText; }
  .reveal { opacity: 1; transform: none; }
  .site-head { border-bottom: 1px solid CanvasText; }
  body .site-head #tabs a[aria-selected="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}

/* -------------------------------------------------------- prefers-contrast */
@media (prefers-contrast: more) {
  :root {
    --accent: #1d4ed8;
    --focus: #1d4ed8;
    --muted: #454b55;
  }
  :root[data-theme="dark"] {
    --accent: #93c5fd;
    --focus: #93c5fd;
    --muted: #a5abb5;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --accent: #93c5fd;
      --focus: #93c5fd;
      --muted: #a5abb5;
    }
  }
  .cmdk-item.is-active { border-color: var(--accent); }
  .site-head { border-bottom-color: var(--line-strong); }
}