/* Velo console design system: components.
 *
 * Every shared control and surface in the console. Page stylesheets
 * (*-satoshi.css) lay pages out; they do not restyle anything in this file.
 * Values come from ds/tokens.css; see that file for where they were measured.
 *
 *   Base ............ body.sat-app, focus ring, reduced motion
 *   Header .......... .sat-header, .sat-logo, .sat-header-actions
 *   Nav ............. .sat-nav (pill nav; icon on the active item only)
 *   Header tools .... .hdr-search, .hdr-bell, .sat-badge (count pill)
 *   Avatar menu ..... .avatar-btn, .account-menu, .sat-menu
 *   Page ............ .sat-main, .sat-heading, .sat-actions, .sat-footer
 *   Button .......... .sat-btn [--primary|--accent|--ghost|--danger] [--sm] [--icon] [--block]
 *   Select .......... .sat-select, site switcher (.site-dd)
 *   Input ........... .sat-input, .sat-textarea, .sat-field, .sat-switch, .sat-check
 *   Tabs ............ .sat-tabs [--in-card|--sm] (page tabs), .sat-seg (segmented control)
 *   Chip ............ .sat-chip (toggle chip)
 *   Badge/tag ....... .sat-badge, .sat-tag, .sat-status
 *   Card ............ .sat-card, .sat-card-head, .sat-grid (equal-height rows), .sat-stack
 *   Stat ............ .sat-stat
 *   Table ........... .sat-table, .sat-table-scroll, .sat-toolbar
 *   Notice .......... .sat-notice
 *   Empty state ..... .sat-empty
 *   Toast ........... .sat-toast
 *   Dialog .......... .sat-dialog
 *   Search palette .. .hdr-palette
 */

/* ======================================================================== */
/* Base                                                                     */
/* ======================================================================== */

body.sat-app {
  margin: 0;
  min-height: 100vh;
  background: var(--sat-page-bg);
  background-attachment: fixed;
  color: var(--sat-ink);
  font: var(--sat-weight-body) var(--sat-type-body)/1.55 var(--sat-font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
body.sat-app button, body.sat-app input, body.sat-app select, body.sat-app textarea { font-family: inherit; }
body.sat-app button, body.sat-app a { transition: background-color .15s, color .15s, border-color .15s; }
/* Zero specificity so any component or page rule can set heading margins. */
:where(body.sat-app) :where(h1, h2, h3) { font-weight: var(--sat-weight-medium); margin: 0; }
body.sat-app :focus-visible { outline: 2px solid var(--sat-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  body.sat-app * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Components set display; the hidden attribute must still win. */
.sat-btn[hidden], .sat-select[hidden], .sat-input[hidden], .sat-seg[hidden], .sat-tabs[hidden],
.sat-tag[hidden], .sat-status[hidden], .sat-notice[hidden], .sat-empty[hidden], .sat-card[hidden], .sat-chip[hidden] { display: none; }
.sat-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Icons: 24x24 outline glyphs (ds/icons.js), stroked in currentColor via their
 * own attributes. */
.sat-icon { width: var(--sat-icon); height: var(--sat-icon); flex: none; }
.sat-btn svg, .sat-nav a svg, .hdr-search svg, .hdr-bell svg { flex: none; }

/* ======================================================================== */
/* Header                                                                   */
/* ======================================================================== */

/* Prototype .web-header: 88px tall, 24px side margins, 30px gaps, hairline under. */
.sat-header {
  box-sizing: border-box;
  height: var(--sat-header-h);
  margin: 0 24px;
  display: flex;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid var(--sat-line-strong);
}
/* 72px wide, 15px in from the header edge, 25px + the 30px gap before the nav,
 * raised 3px so the wordmark lines up with the nav text (refinements.css). */
.sat-logo { display: block; flex: none; width: var(--sat-logo-w); margin: 0 25px 0 15px; transform: translateY(-3px); }
.sat-logo img { display: block; width: 100%; height: auto; }
.sat-header-actions { display: flex; align-items: center; gap: 17px; flex: none; margin-left: auto; margin-right: 12px; }

/* ======================================================================== */
/* Nav                                                                      */
/* ======================================================================== */

.sat-nav {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sat-nav::-webkit-scrollbar { display: none; }
.sat-nav a {
  display: flex; align-items: center; gap: 8px; flex: none;
  box-sizing: border-box; height: 38px; padding: 0 14px;
  border-radius: var(--sat-radius-control);
  color: var(--sat-nav-idle);
  font-size: var(--sat-type-control); font-weight: var(--sat-weight-medium); line-height: 1.4;
  white-space: nowrap; text-decoration: none;
}
/* The prototype shows the icon only on the selected item. */
.sat-nav a svg { display: none; width: var(--sat-icon-nav); height: var(--sat-icon-nav); }
.sat-nav a.active svg, .sat-nav a[aria-current="page"] svg { display: block; }
.sat-nav a:hover:not(.active) { background: var(--sat-surface-hover); color: var(--sat-ink); }
.sat-nav a.active, .sat-nav a[aria-current="page"] { background: var(--sat-ink); color: #fff; }

/* Onboarding gating (console-boot.js / console-gate.js set data-gate on <html>). */
html[data-gate="complete"] .sat-nav a[href*="getstarted"] { display: none; }
html[data-gate="pending"] .sat-nav,
html[data-gate="incomplete"] .sat-nav { display: none !important; }
html[data-gate="pending"][data-gate-hold] .sat-main { visibility: hidden; }

@media (max-width: 1250px) {
  .sat-header { gap: 14px; }
  .sat-logo { margin-right: 10px; }
  .sat-nav a { padding: 0 11px; }
}
@media (max-width: 1190px) {
  .sat-header { margin: 0 16px; }
  .sat-logo { margin-left: 10px; }
  .sat-header-actions { gap: 13px; }
}
/* Tablet and phone: logo and tools on the first row, the nav scrolls on its own
 * full-width row below (prototype @media(max-width:900px)). Never a hamburger. */
@media (max-width: 900px) {
  .sat-header { height: auto; flex-wrap: wrap; padding: 17px 8px 13px; gap: 13px; }
  .sat-logo { margin: 0; }
  .sat-header .sat-nav { order: 3; flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .sat-header { margin: 0 14px; gap: 14px; }
  .sat-header-actions { gap: 15px; margin-right: 0; }
  .sat-nav a { height: 34px; padding: 0 12px; }
}

/* ======================================================================== */
/* Header tools: search trigger, bell, count pill                           */
/* ======================================================================== */

.hdr-search {
  box-sizing: border-box; display: flex; align-items: center; gap: 9px;
  width: 157px; height: 36px; padding: 0 13px;
  background: rgba(255, 255, 255, .8); border: 0; border-radius: var(--sat-radius-control);
  font-size: var(--sat-type-control); font-weight: var(--sat-weight-medium);
  color: var(--sat-muted); cursor: pointer; text-align: left;
}
.hdr-search:hover { background: #fff; color: var(--sat-ink); }
.hdr-search svg { width: 14px; height: 14px; }
.hdr-search kbd { margin-left: auto; font: inherit; font-size: var(--sat-type-micro); color: var(--sat-meta); }

.hdr-bell {
  position: relative; display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%; color: var(--sat-muted); text-decoration: none;
}
.hdr-bell:hover, .hdr-bell[aria-current="page"] { background: var(--sat-surface-hover); color: var(--sat-ink); }
.hdr-bell svg { width: 18px; height: 18px; }

/* Count pill. Fits 1, 9, 9+ and 99+: grows sideways from an 18px circle. */
.sat-badge, .hdr-badge {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--sat-ink); color: #fff;
  font: var(--sat-weight-bold) 10.8px/1 var(--sat-font); letter-spacing: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sat-badge[hidden], .hdr-badge[hidden] { display: none; }
.sat-badge--soft { background: var(--sat-accent-light); color: var(--sat-ink); }
.sat-badge--accent { background: var(--sat-accent-deep); color: var(--sat-ink); }
/* On the bell: anchored to the icon's top-right, ringed in the page colour. */
.hdr-badge { position: absolute; top: -3px; left: 17px; box-shadow: 0 0 0 2px #f5f3f7; }

@media (max-width: 1250px) {
  .hdr-search { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; }
  .hdr-search span, .hdr-search kbd { display: none; }
}

/* ======================================================================== */
/* Avatar menu and dropdown menus                                           */
/* ======================================================================== */

.sat-avatar-wrap { position: relative; }
.avatar-btn, .sat-avatar {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: var(--sat-accent-light); color: #554064; border: 0;
  font-size: var(--sat-type-meta); font-weight: var(--sat-weight-medium); cursor: pointer;
}
.avatar-btn:hover { background: #dac8f2; }
@media (max-width: 600px) { .avatar-btn { width: 28px; height: 28px; } }

.account-menu, .sat-menu {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--sat-line); border-radius: var(--sat-radius-inner);
  padding: 6px; box-shadow: var(--sat-shadow-elevated); z-index: 40;
}
.account-menu:not([hidden]), .sat-menu.open, .sat-menu:not([hidden]) { display: flex; }
.account-email {
  font-size: var(--sat-type-meta); color: var(--sat-muted);
  padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--sat-line);
  overflow-wrap: anywhere;
}
.logout-btn, .cookie-prefs-btn, .account-menu .menu-link, .sat-menu-item {
  box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px;
  text-align: left; border-radius: var(--sat-radius-small); padding: 0 10px;
  font-size: var(--sat-type-control); font-weight: var(--sat-weight-body);
  background: none; border: 0; color: var(--sat-ink); cursor: pointer; text-decoration: none;
}
.logout-btn:hover, .cookie-prefs-btn:hover, .account-menu .menu-link:hover, .sat-menu-item:hover { background: var(--sat-surface-soft); }
.account-menu .menu-link[aria-current="page"], .sat-menu-item[aria-current="page"] { background: var(--sat-surface-soft); font-weight: var(--sat-weight-medium); }
/* On a page that lives in the avatar menu (Settings, Configuration, Plan & usage,
 * Notifications) the avatar carries the "you are here" ring the nav can't. */
.sat-avatar-wrap:has(.menu-link[aria-current="page"]) .avatar-btn { box-shadow: 0 0 0 2px #f5f3f7, 0 0 0 4px var(--sat-ink); }

/* account-bar.js injects the acting/upgrade bars above the header. */
body.sat-app .acting-bar, body.sat-app .upgrade-banner {
  font-family: var(--sat-font);
  background: var(--sat-surface-soft);
  border-color: rgba(195, 173, 244, .45);
  color: var(--sat-ink);
}

/* ======================================================================== */
/* Page frame                                                               */
/* ======================================================================== */

.sat-main {
  box-sizing: border-box; max-width: var(--sat-page-max); margin: 0 auto;
  padding: 36px var(--sat-page-pad-x) 30px;
  min-height: calc(100vh - var(--sat-header-h) - 60px);
}
.sat-heading { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin: 0 0 26px; }
body.sat-app .sat-heading h1 {
  font-size: var(--sat-type-page); font-weight: var(--sat-weight-body);
  line-height: 1.1; letter-spacing: -1.6px; color: var(--sat-ink); margin: 0;
}
.sat-heading h1 em { font-style: normal; font-weight: var(--sat-weight-strong); color: inherit; }
.sat-heading p { font-size: var(--sat-type-body); line-height: 1.55; color: var(--sat-muted); margin: 10px 0 0; }
.sat-heading p b { font-weight: var(--sat-weight-medium); color: inherit; }
.sat-actions { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.sat-footer {
  max-width: var(--sat-page-max); box-sizing: border-box; margin: 0 auto;
  padding: 10px var(--sat-page-pad-x) 24px; font-size: var(--sat-type-micro); color: var(--sat-meta); text-align: center;
}
@media (max-width: 1250px) { .sat-heading { align-items: flex-start; } .sat-actions { max-width: 460px; } }
@media (max-width: 900px) {
  .sat-heading { display: block; }
  .sat-actions { max-width: none; justify-content: flex-start; margin-top: 20px; }
}
@media (max-width: 600px) {
  .sat-main { padding: 25px var(--sat-page-pad-x) 20px; }
  .sat-heading { margin-bottom: 24px; }
  .sat-heading h1 { letter-spacing: -1px; }
  .sat-actions { gap: 8px; }
}

/* ======================================================================== */
/* Button                                                                   */
/* ======================================================================== */

/* Default is secondary: white pill with a hairline, so it reads on the page
 * wash and inside white cards alike. */
.sat-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--sat-control-h); padding: 0 var(--sat-control-pad); margin: 0;
  background: #fff; border: 1px solid var(--sat-line); border-radius: var(--sat-radius-control);
  font: var(--sat-weight-medium) var(--sat-type-control)/1.4 var(--sat-font);
  color: var(--sat-ink); text-decoration: none; white-space: nowrap; cursor: pointer; vertical-align: middle;
}
.sat-btn svg { width: var(--sat-icon); height: var(--sat-icon); }
.sat-btn:hover { background: var(--sat-surface-soft); border-color: var(--sat-line-input); }
.sat-btn:disabled, .sat-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Primary: the dark ink pill (prototype .web-button.dark). `.dark` and `.primary`
 * are the older spellings and stay equivalent. */
.sat-btn--primary, .sat-btn.dark, .sat-btn.primary { background: var(--sat-ink); border-color: var(--sat-ink); color: #fff; }
.sat-btn--primary:hover, .sat-btn.dark:hover, .sat-btn.primary:hover { background: var(--sat-ink-hover); border-color: var(--sat-ink-hover); }

/* Accent: lavender (prototype .web-button.lilac). Only on dark surfaces, where
 * the ink primary would disappear (e.g. the banner editor's save bar). */
.sat-btn--accent { background: #cbb5ed; border-color: #cbb5ed; color: #392d49; }
.sat-btn--accent:hover { background: #bda0e6; border-color: #bda0e6; }

/* Ghost: text-only, for tertiary actions in rows and card heads. */
.sat-btn--ghost { background: transparent; border-color: transparent; color: var(--sat-link); }
.sat-btn--ghost:hover { background: var(--sat-surface-soft); border-color: transparent; color: var(--sat-ink); }

/* Danger: destructive confirmation. `.danger` is the older spelling. */
.sat-btn--danger, .sat-btn.danger { background: var(--sat-danger); border-color: var(--sat-danger); color: #fff; }
.sat-btn--danger:hover, .sat-btn.danger:hover { background: var(--sat-danger-hover); border-color: var(--sat-danger-hover); }

/* Small: in-row actions, copy buttons, chips. `.sm` is the older spelling. */
.sat-btn--sm, .sat-btn.sm { height: var(--sat-control-h-sm); padding: 0 var(--sat-control-pad-sm); gap: 6px; font-size: var(--sat-type-meta); }
.sat-btn--sm svg, .sat-btn.sm svg { width: 14px; height: 14px; }
/* Icon-only: a circle the height of its size. Always give it an aria-label. */
.sat-btn--icon { width: var(--sat-control-h); padding: 0; }
.sat-btn--icon.sat-btn--sm { width: var(--sat-control-h-sm); }
.sat-btn--block { display: flex; width: 100%; }

@media (max-width: 600px) { .sat-btn:not(.sat-btn--sm):not(.sm):not(.sat-btn--icon) { padding: 0 14px; } }

/* ======================================================================== */
/* Select and site switcher                                                 */
/* ======================================================================== */

/* Native <select>: white pill, chevron 16px from the right, 44px text inset
 * (typography.css). Same height as .sat-btn. */
.sat-select {
  box-sizing: border-box; height: var(--sat-control-h); max-width: 100%;
  padding: 0 44px 0 18px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23231d2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px 16px;
  border: 1px solid var(--sat-line); border-radius: var(--sat-radius-control);
  font: var(--sat-weight-medium) var(--sat-type-control)/1.4 var(--sat-font); color: var(--sat-ink);
  cursor: pointer; text-overflow: ellipsis;
}
.sat-select:hover { border-color: var(--sat-line-input); }
.sat-select:disabled { opacity: .55; cursor: not-allowed; }
.sat-select--sm { height: var(--sat-control-h-sm); padding: 0 36px 0 12px; background-position: right 12px center; font-size: var(--sat-type-meta); }
/* Filter inside a card toolbar (prototype .web-filter): lavender field, no edge. */
.sat-select--field { background-color: var(--sat-surface-field); border-color: transparent; }
.sat-heading .sat-select { max-width: 210px; }
@media (max-width: 600px) { .sat-heading .sat-select { max-width: 190px; } }

/* Site switcher (site-dropdown.js): a button that looks exactly like .sat-select. */
.site-dd { position: relative; display: inline-flex; }
.site-dd-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px;
  height: var(--sat-control-h); max-width: 240px; padding: 0 16px 0 18px; margin: 0;
  background: #fff; border: 1px solid var(--sat-line); border-radius: var(--sat-radius-control);
  font: var(--sat-weight-medium) var(--sat-type-control)/1.4 var(--sat-font); color: var(--sat-ink); cursor: pointer;
}
.site-dd-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-dd-btn:hover { border-color: var(--sat-line-input); }
.site-dd-btn svg { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--sat-ink); transition: transform .15s; }
.site-dd.open .site-dd-btn svg { transform: rotate(180deg); }
.site-dd-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 8px); min-width: 220px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--sat-line); border-radius: var(--sat-radius-inner);
  padding: 6px; box-shadow: var(--sat-shadow-elevated); z-index: 40;
}
.site-dd.open .site-dd-menu { display: block; }
.site-dd-opt {
  box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; text-align: left;
  background: none; border: 0; border-radius: var(--sat-radius-small);
  padding: 0 10px; font-size: var(--sat-type-control); color: var(--sat-ink); cursor: pointer;
}
.site-dd-opt:hover, .site-dd-opt:focus-visible { background: var(--sat-surface-soft); }
.site-dd-opt .check { width: 14px; height: 14px; flex: none; color: var(--sat-accent-deep); opacity: 0; }
.site-dd-opt[aria-selected="true"] .check { opacity: 1; }

/* ======================================================================== */
/* Input, textarea, field                                                   */
/* ======================================================================== */

.sat-input, .sat-textarea {
  box-sizing: border-box; width: 100%; margin: 0;
  background: #fff; border: 1px solid var(--sat-line-input); border-radius: var(--sat-radius-small);
  font: var(--sat-weight-body) var(--sat-type-body)/1.5 var(--sat-font); color: var(--sat-ink);
  outline: 0;
}
.sat-input { height: var(--sat-control-h); padding: 0 12px; }
.sat-textarea { min-height: 88px; padding: 10px 12px; resize: vertical; }
.sat-input::placeholder, .sat-textarea::placeholder { color: var(--sat-meta); }
.sat-input:hover, .sat-textarea:hover { border-color: #d9cfe6; }
.sat-input:focus, .sat-textarea:focus { border-color: var(--sat-ink); box-shadow: 0 0 0 3px rgba(195, 173, 244, .35); }
.sat-input:disabled, .sat-textarea:disabled { background: var(--sat-surface-soft); color: var(--sat-muted); cursor: not-allowed; }
.sat-input[aria-invalid="true"] { border-color: var(--sat-danger); }
/* Search field inside a card toolbar (prototype .web-search). */
.sat-input--search { background: var(--sat-surface-field); border-color: transparent; border-radius: var(--sat-radius-control); padding: 0 16px; font-size: var(--sat-type-control); }
.sat-input--sm { height: var(--sat-control-h-sm); font-size: var(--sat-type-control); }

.sat-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; font-size: var(--sat-type-control); font-weight: var(--sat-weight-medium); color: var(--sat-ink); }
.sat-field-label { font-size: var(--sat-type-control); font-weight: var(--sat-weight-medium); color: var(--sat-ink); }
.sat-field-hint { font-size: var(--sat-type-meta); font-weight: var(--sat-weight-body); line-height: 1.5; color: var(--sat-muted); margin: 0; }
.sat-field-error { font-size: var(--sat-type-meta); color: var(--sat-danger); margin: 0; }
.sat-input-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sat-input-row > .sat-input, .sat-input-row > .sat-select { flex: 1 1 200px; width: auto; }

/* Switch: <input type="checkbox" class="sat-switch" aria-label="…"> */
.sat-switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 38px; height: 22px; margin: 0;
  border-radius: 11px; background: #d9d3e0; cursor: pointer; transition: background .15s;
}
.sat-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(35, 29, 46, .2); transition: transform .15s;
}
.sat-switch:checked { background: var(--sat-ink); }
.sat-switch:checked::after { transform: translateX(16px); }
.sat-switch:disabled { opacity: .5; cursor: not-allowed; }

.sat-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sat-type-body); color: var(--sat-ink); cursor: pointer; }
.sat-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--sat-ink); }

/* ======================================================================== */
/* Tabs and segmented control                                               */
/* ======================================================================== */

/* Page-level tabs (prototype .web-tabs): separate white pills, active is ink. */
.sat-tabs { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 24px; }
.sat-tabs::-webkit-scrollbar { display: none; }
.sat-tabs > button, .sat-tabs > a {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: var(--sat-control-h); padding: 0 18px; margin: 0;
  background: #fff; border: 0; border-radius: var(--sat-radius-control);
  font: var(--sat-weight-medium) var(--sat-type-control)/1.4 var(--sat-font); color: var(--sat-muted);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sat-tabs > :hover { color: var(--sat-ink); background: var(--sat-surface-hover); }
.sat-tabs > .active, .sat-tabs > [aria-selected="true"], .sat-tabs > [aria-pressed="true"], .sat-tabs > [aria-current="page"] { background: var(--sat-ink); color: #fff; }
/* Inside a white card the idle pills take the field tint so they stay visible. */
.sat-tabs--in-card > button:not(.active):not([aria-selected="true"]), .sat-tabs--in-card > a:not(.active):not([aria-current="page"]) { background: var(--sat-surface-field); }
/* Small: section tabs inside a narrow card (prototype .be-tabs .web-tab, 12px). */
.sat-tabs--sm { gap: 6px; }
.sat-tabs--sm > button, .sat-tabs--sm > a { height: 34px; padding: 0 12px; font-size: var(--sat-type-meta); }
.sat-tabs > * .sat-badge { background: var(--sat-surface-soft); color: var(--sat-ink); }
.sat-tabs > .active .sat-badge, .sat-tabs > [aria-selected="true"] .sat-badge { background: rgba(255, 255, 255, .2); color: #fff; }

/* Segmented control: one 40px track holding 32px options, for switches that
 * change a view in place (Desktop/Mobile, All/Unread). */
.sat-seg {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 2px;
  height: var(--sat-control-h); padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--sat-surface-soft); border-radius: var(--sat-radius-control);
}
.sat-seg::-webkit-scrollbar { display: none; }
.sat-seg > button, .sat-seg > a {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  height: 32px; padding: 0 14px; margin: 0;
  background: transparent; border: 0; border-radius: var(--sat-radius-control);
  font: var(--sat-weight-medium) var(--sat-type-control)/1.4 var(--sat-font); color: var(--sat-muted);
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.sat-seg > :hover { color: var(--sat-ink); }
.sat-seg > .active, .sat-seg > [aria-selected="true"], .sat-seg > [aria-pressed="true"], .sat-seg > [aria-checked="true"] {
  background: #fff; color: var(--sat-ink); box-shadow: var(--sat-shadow-sm);
}
.sat-seg > :disabled { opacity: .5; cursor: not-allowed; }
/* Radio form: <fieldset class="sat-seg"><label><input type=radio><span>…</span></label>
 * keeps native keyboard and screen-reader behaviour. */
fieldset.sat-seg { border: 0; margin: 0; min-width: 0; }
.sat-seg > label { position: relative; display: inline-flex; flex: none; }
.sat-seg > label > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sat-seg > label > span {
  box-sizing: border-box; display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: var(--sat-radius-control); font-size: var(--sat-type-control); font-weight: var(--sat-weight-medium);
  color: var(--sat-muted); white-space: nowrap;
}
.sat-seg > label > input:checked + span { background: #fff; color: var(--sat-ink); box-shadow: var(--sat-shadow-sm); }
.sat-seg > label > input:focus-visible + span { outline: 2px solid var(--sat-ink); outline-offset: 2px; }
.sat-seg > label > input:disabled { cursor: not-allowed; }
.sat-seg > label > input:disabled + span { opacity: .55; }
/* Wraps onto more rows in a narrow column instead of scrolling. */
.sat-seg--wrap { height: auto; min-height: var(--sat-control-h); flex-wrap: wrap; border-radius: 20px; }
.sat-seg--on-white { background: var(--sat-surface-field); }

/* ======================================================================== */
/* Chip (toggle)                                                            */
/* ======================================================================== */

.sat-chip {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
  height: var(--sat-control-h-sm); padding: 0 14px; margin: 0;
  background: #fff; border: 1px solid var(--sat-line-input); border-radius: var(--sat-radius-control);
  font: var(--sat-weight-medium) var(--sat-type-meta)/1 var(--sat-font); color: var(--sat-muted); cursor: pointer;
}
.sat-chip:hover { color: var(--sat-ink); border-color: #d9cfe6; }
.sat-chip.on, .sat-chip[aria-pressed="true"] { background: var(--sat-ink); border-color: var(--sat-ink); color: #fff; }
.sat-chip:disabled { opacity: .5; cursor: not-allowed; }

/* ======================================================================== */
/* Tag, status, pill                                                        */
/* ======================================================================== */

.sat-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px;
  background: var(--sat-tag-bg); border-radius: var(--sat-radius-tag);
  font-size: var(--sat-type-meta); font-weight: var(--sat-weight-body); line-height: 1.25; color: var(--sat-meta); white-space: nowrap;
}
.sat-tag--success { background: var(--sat-success-bg); color: var(--sat-success); }
.sat-tag--warning { background: var(--sat-warning-bg); color: var(--sat-warning); }
.sat-tag--danger { background: var(--sat-danger-bg); color: var(--sat-danger); }
.sat-tag--ink { background: var(--sat-ink); color: #fff; }
.sat-tag--accent { background: #efe6fc; color: #6b4f93; }
.sat-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sat-type-meta); color: var(--sat-meta); white-space: nowrap; }
.sat-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sat-accent-deep); flex: none; }
.sat-status--success::before { background: var(--sat-success); }
.sat-status--warning::before { background: #d9a520; }
.sat-status--danger::before { background: var(--sat-danger); }
.sat-status--idle::before { background: #cfc8d8; }

/* ======================================================================== */
/* Card                                                                     */
/* ======================================================================== */

.sat-card {
  box-sizing: border-box; min-width: 0;
  background: var(--sat-card); border-radius: var(--sat-radius-card);
  padding: var(--sat-card-pad); box-shadow: var(--sat-shadow-card);
}
.sat-card--soft { background: linear-gradient(145deg, #eee5f9, #faf8fd 73%); }
.sat-card--flush { padding: 0; overflow: hidden; }
.sat-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 16px; }
.sat-card-head h2, .sat-card-title {
  font-size: var(--sat-type-section); font-weight: var(--sat-weight-medium); line-height: 1.35; letter-spacing: -.3px; color: var(--sat-ink); margin: 0;
}
.sat-card-head > a, .sat-card-head > button:not(.sat-btn) {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-size: var(--sat-type-control); font-weight: var(--sat-weight-medium); color: var(--sat-link);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.sat-card-head > a:hover, .sat-card-head > button:not(.sat-btn):hover { color: var(--sat-ink); }
.sat-card-head svg { width: var(--sat-icon); height: var(--sat-icon); }
.sat-card-sub { font-size: var(--sat-type-body); color: var(--sat-muted); line-height: 1.6; margin: 0; }
.sat-tiny-label { font-size: var(--sat-type-meta); color: var(--sat-meta); }
/* A card whose last element is an action: pin the action to the bottom so cards
 * in one grid row line their buttons up. */
.sat-card--stack { display: flex; flex-direction: column; }
.sat-card--stack > :last-child { margin-top: auto; }

/* Card grid. Rows stretch, so every card in a row is the same height. */
.sat-grid { display: grid; gap: var(--sat-grid-gap); align-items: stretch; grid-template-columns: repeat(var(--sat-cols, 3), minmax(0, 1fr)); }
.sat-grid > * { min-width: 0; }
.sat-grid--2 { --sat-cols: 2; }
.sat-grid--3 { --sat-cols: 3; }
.sat-grid--4 { --sat-cols: 4; }
/* Vertical stack of cards/grids with the grid gap between them. */
.sat-stack { display: flex; flex-direction: column; gap: var(--sat-grid-gap); }
@media (max-width: 1190px) { .sat-grid--3, .sat-grid--4 { --sat-cols: 2; } }
@media (max-width: 600px) {
  .sat-grid { --sat-cols: 1; gap: 15px; }
  .sat-grid--4 { --sat-cols: 2; }
  .sat-card { border-radius: 14px; }
}

/* ======================================================================== */
/* Stat                                                                     */
/* ======================================================================== */

/* Prototype .stat-tile: label, 40px number, meta line. */
.sat-stat {
  box-sizing: border-box; min-width: 0; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--sat-radius-card); padding: 24px;
}
.sat-stat-label { font-size: var(--sat-type-body); color: var(--sat-muted); margin: 0; }
.sat-stat-value {
  font-size: var(--sat-type-stat); font-weight: var(--sat-weight-medium); letter-spacing: -1.5px; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin: 16px 0 0; color: var(--sat-ink);
}
.sat-stat-value small { font-size: .5em; letter-spacing: 0; color: var(--sat-muted); font-weight: var(--sat-weight-body); }
.sat-stat-meta { font-size: var(--sat-type-meta); color: var(--sat-meta); margin: 7px 0 0; }
.sat-stat-meta b { font-weight: var(--sat-weight-medium); color: var(--sat-muted); }
@media (max-width: 1190px) { .sat-stat { padding: 20px; } .sat-stat-value { font-size: 36.72px; } }
@media (max-width: 600px) { .sat-stat { padding: 19px; } .sat-stat-value { font-size: 33.48px; } }

/* ======================================================================== */
/* Table                                                                    */
/* ======================================================================== */

.sat-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sat-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--sat-type-control); line-height: 1.4; }
.sat-table th {
  font-size: var(--sat-type-meta); font-weight: var(--sat-weight-medium); color: var(--sat-muted);
  padding: 14px 10px; border-bottom: 1px solid var(--sat-line-table); white-space: nowrap; vertical-align: bottom;
}
.sat-table td { padding: 18px 10px; border-bottom: 1px solid var(--sat-line-table); vertical-align: middle; color: var(--sat-ink); }
.sat-table tr:last-child td { border-bottom: 0; }
.sat-table th:first-child, .sat-table td:first-child { padding-left: 0; }
.sat-table th:last-child, .sat-table td:last-child { padding-right: 0; }
.sat-table td.num, .sat-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sat-table tbody tr[data-href], .sat-table tbody tr.clickable { cursor: pointer; }
.sat-table tbody tr[data-href]:hover td, .sat-table tbody tr.clickable:hover td { background: rgba(243, 239, 250, .5); }
.sat-table--compact td { padding-top: 12px; padding-bottom: 12px; }
.sat-cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sat-cell-main strong { display: block; font-size: var(--sat-type-control); font-weight: var(--sat-weight-medium); color: var(--sat-ink); }
.sat-cell-main small { display: block; font-size: var(--sat-type-meta); color: var(--sat-meta); margin-top: 2px; }
.sat-symbol { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 6px; background: var(--sat-surface-soft); color: #a18cb5; }
.sat-symbol svg, .sat-symbol img { width: 17px; height: 17px; }

.sat-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; margin: 0 0 12px; }
.sat-toolbar .sat-input--search { width: 260px; max-width: 100%; }
@media (max-width: 600px) { .sat-toolbar .sat-input--search { width: 100%; } }

/* ======================================================================== */
/* Notice (inline message)                                                  */
/* ======================================================================== */

.sat-notice {
  box-sizing: border-box; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--sat-radius-inner);
  background: var(--sat-surface-soft); color: var(--sat-ink); font-size: var(--sat-type-body); line-height: 1.5;
}
.sat-notice--success { background: var(--sat-success-bg); color: var(--sat-success); }
.sat-notice--warning { background: var(--sat-warning-bg); color: var(--sat-warning); }
.sat-notice--danger { background: var(--sat-danger-bg); color: var(--sat-danger); }

/* ======================================================================== */
/* Empty state                                                              */
/* ======================================================================== */

.sat-empty { padding: 40px 20px; text-align: center; color: var(--sat-muted); font-size: var(--sat-type-body); }
.sat-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; background: var(--sat-surface-soft); color: #9277b0; }
.sat-empty-icon svg { width: 20px; height: 20px; }
.sat-empty h3 { font-size: var(--sat-type-body); font-weight: var(--sat-weight-medium); color: var(--sat-ink); margin: 0 0 6px; }
.sat-empty p { margin: 0 auto; max-width: 380px; line-height: 1.6; }
.sat-empty .sat-btn { margin-top: 18px; }

/* ======================================================================== */
/* Toast                                                                    */
/* ======================================================================== */

.sat-toast {
  position: fixed; right: 27px; bottom: 27px; z-index: 60; box-sizing: border-box; max-width: 420px;
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--sat-ink); color: #fff; border-radius: var(--sat-radius-inner); box-shadow: var(--sat-shadow-dialog);
  font-size: var(--sat-type-control); font-weight: var(--sat-weight-medium);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.sat-toast.show, .sat-toast[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
.sat-toast--static { position: static; opacity: 1; transform: none; }
@media (max-width: 600px) { .sat-toast { left: 18px; right: 18px; bottom: 20px; max-width: none; } }

/* ======================================================================== */
/* Dialog                                                                   */
/* ======================================================================== */

.sat-dialog {
  box-sizing: border-box; width: calc(100% - 40px); max-width: 490px; padding: 32px;
  border: 1px solid #eee7f3; border-radius: var(--sat-radius-card);
  background: #fff; color: var(--sat-ink); box-shadow: var(--sat-shadow-dialog);
  font: var(--sat-weight-body) var(--sat-type-body)/1.6 var(--sat-font);
}
.sat-dialog::backdrop { background: rgba(35, 29, 46, .28); }
.sat-dialog h2 { font-size: var(--sat-type-feature); font-weight: var(--sat-weight-medium); line-height: 1.3; letter-spacing: -.5px; margin: 0 0 10px; }
.sat-dialog p { color: var(--sat-muted); margin: 0 0 12px; }
.sat-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.sat-dialog-close { position: absolute; top: 16px; right: 16px; }
.sat-dialog--static { position: relative; display: block; inset: auto; margin: 0; }

/* ======================================================================== */
/* Search palette (header-tools.js): a native <dialog>                      */
/* ======================================================================== */

.hdr-palette {
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 96px));
  margin: 72px auto auto; padding: 0; border: 0; border-radius: var(--sat-radius-card);
  background: #fff; color: var(--sat-ink); box-shadow: var(--sat-shadow-dialog);
  font-family: var(--sat-font); overflow: hidden;
}
.hdr-palette[open] { display: flex; flex-direction: column; }
.hdr-palette::backdrop { background: rgba(35, 29, 46, .28); }
.hdr-input-row { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--sat-line); }
.hdr-input-row svg { width: 18px; height: 18px; color: var(--sat-muted); flex: none; }
.hdr-input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17.28px; color: var(--sat-ink); background: none; }
.hdr-input::-webkit-search-cancel-button { display: none; }
.hdr-input-row kbd { font: inherit; font-size: var(--sat-type-micro); color: var(--sat-muted); border: 1px solid var(--sat-line); border-radius: 6px; padding: 2px 6px; }
.hdr-status { margin: 0; padding: 0 18px; font-size: var(--sat-type-meta); color: var(--sat-muted); }
.hdr-status:not(:empty) { padding-top: 10px; }
.hdr-results { overflow-y: auto; padding: 6px 10px 10px; }
.hdr-group-label { font-size: var(--sat-type-meta); color: var(--sat-muted); padding: 12px 8px 6px; }
.hdr-result {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--sat-radius-small);
  color: var(--sat-ink); text-decoration: none; font-size: var(--sat-type-body);
}
.hdr-result[aria-selected="true"], .hdr-result:hover { background: var(--sat-surface-soft); }
.hdr-result-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sat-accent-light); flex: none; }
.hdr-result-icon svg { width: 15px; height: 15px; }
.hdr-result-text { display: flex; flex-direction: column; min-width: 0; }
.hdr-result-text strong { font-weight: var(--sat-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-result-text small { font-size: var(--sat-type-meta); color: var(--sat-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-empty { padding: 18px 8px; margin: 0; color: var(--sat-muted); font-size: var(--sat-type-body); }
.hdr-foot { margin: 0; padding: 10px 18px; border-top: 1px solid var(--sat-line); font-size: var(--sat-type-meta); color: var(--sat-muted); }