/* ═══════════════════════════════════════════════════════════════════════════
   tonegrid-sleek.css — the "Sleek" refinement layer for the ToneGrid app
   (app.tonegrid.pro + every tenant / custom-domain host). 2026-10-03.

   PURPOSE
   An Apple-style pass over the whole product: a calmer near-black / soft-grey
   palette, hairline borders instead of 2px rules, frosted chrome, one button
   geometry, one field geometry, consistent radii, tabular numerals, and
   brand-aware tints that follow each tenant's colour instead of ToneGrid red.

   HOW IT IS WIRED
   Linked LAST on every page (after tonegrid-saas / scrollbar / skeleton /
   motion) from the four chrome contexts and the bespoke-head pages — the
   same piggyback pattern as tonegrid-skeleton.css. Because it is last, a
   plain rule here beats any equal-specificity rule that came before it.

   HOW IT WINS
   - Tokens: the --tg-* custom properties are simply re-declared here, so
     every page that already uses tokens picks up the new palette for free.
   - Chrome + components: selectors are prefixed with `html body` (or carry
     the theme attribute) so they outrank the page-level class rules they
     replace WITHOUT !important.
   - Button tokens: tonegrid-saas.css locks button geometry with !important
     on class-only selectors. The matching blocks below repeat the exact same
     selector lists with `html body` in front: same !important, two more
     elements of specificity, later in the cascade — so they win cleanly.
   - Brand colour (background / text on brand buttons) is deliberately NOT
     touched. That stays with includes/theme-style.css.php per tenant.

   RULES OF THE HOUSE (do not undo)
   - Never add -webkit-font-smoothing:antialiased (reference_tonegrid_typography_baseline).
   - Light mode keeps pure-black text (Eric's directive) — the saas catch-all
     is left alone; only surfaces / lines / shadows are refined here.
   - Aeonik only has 300 / 400 / 700 faces; 500–600 render as Bold.
   - Backdrop-filter is NOT applied to .account-sheet (iOS ghosting, see saas).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. TOKENS ───────────────────────────── */
:root {
  /* Surfaces — iOS/macOS dark neutrals on a true-black canvas */
  --tg-bg:           #000000;
  --tg-surface:      #111113;
  --tg-surface-2:    #1c1c1e;
  --tg-surface-3:    #2c2c2e;
  --tg-surface-hi:   #3a3a3c;
  /* Hairlines */
  --tg-line:         rgba(255,255,255,0.09);
  --tg-line-2:       rgba(255,255,255,0.14);
  --tg-line-strong:  rgba(255,255,255,0.22);
  /* Ink */
  --tg-text:         #f5f5f7;
  --tg-text-muted:   rgba(235,235,245,0.68);
  --tg-text-subtle:  rgba(235,235,245,0.42);
  --tg-text-invert:  #0b0b0d;
  /* Brand-derived tints — follow the tenant brand instead of hard-coded red */
  --tg-brand-hover:  color-mix(in srgb, var(--tg-brand) 86%, #000);
  --tg-brand-soft:   color-mix(in srgb, var(--tg-brand) 14%, transparent);
  --tg-brand-ring:   color-mix(in srgb, var(--tg-brand) 30%, transparent);
  /* Elevation */
  --tg-shadow-sm:    0 1px 2px rgba(0,0,0,.5);
  --tg-shadow-md:    0 8px 24px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --tg-shadow-lg:    0 18px 50px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --tg-shadow-xl:    0 32px 90px rgba(0,0,0,.72), 0 4px 14px rgba(0,0,0,.45);
  --tg-scrim:        rgba(0,0,0,.55);
  /* Legacy per-page vars (includes/style.css) remapped onto the tokens so
     older admin pages become theme-aware without touching them */
  --card-bg:         var(--tg-surface);
  --panel-bg:        var(--tg-surface-2);
  --text-light:      var(--tg-text);
  --text-muted:      var(--tg-text-muted);
  --border:          var(--tg-line-2);
  --hover-bg:        rgba(255,255,255,0.06);
  /* Sleek scale */
  --tg-ease:         cubic-bezier(.25,.1,.25,1);
  --tg-dur:          .2s;
  --tg-r-sm:         8px;
  --tg-r:            10px;
  --tg-r-md:         12px;
  --tg-r-lg:         16px;
  --tg-r-xl:         20px;
  accent-color:      var(--tg-brand);
}

html[data-theme="light"] {
  --tg-bg:           #f5f5f7;
  --tg-surface:      #ffffff;
  --tg-surface-2:    #f2f2f4;
  --tg-surface-3:    #e8e8ed;
  --tg-surface-hi:   #d9d9de;
  --tg-line:         rgba(0,0,0,0.08);
  --tg-line-2:       rgba(0,0,0,0.12);
  --tg-line-strong:  rgba(0,0,0,0.22);
  --tg-text:         #000000;
  --tg-text-muted:   #000000;
  --tg-text-subtle:  #1a1a1e;
  --tg-text-invert:  #ffffff;
  --tg-brand-soft:   color-mix(in srgb, var(--tg-brand) 10%, transparent);
  --tg-brand-ring:   color-mix(in srgb, var(--tg-brand) 24%, transparent);
  --tg-shadow-sm:    0 1px 2px rgba(0,0,0,.05);
  --tg-shadow-md:    0 6px 20px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --tg-shadow-lg:    0 16px 44px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
  --tg-shadow-xl:    0 30px 80px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.06);
  --tg-scrim:        rgba(0,0,0,.4);
  --card-bg:         #ffffff;
  --panel-bg:        #f2f2f4;
  --text-light:      #000000;
  --text-muted:      #000000;
  --border:          rgba(0,0,0,0.12);
  --hover-bg:        rgba(0,0,0,0.04);
}

/* ─────────────────────────── 2. BASE / TYPE ─────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
html body {
  background: var(--tg-bg);
  color: var(--tg-text);
  font-feature-settings: 'kern', 'liga';
}
::selection,
::-moz-selection {
  background: color-mix(in srgb, var(--tg-brand) 32%, transparent);
  color: inherit;
}
html body h1 { font-weight: 700; letter-spacing: -0.024em; }
html body h2 { font-weight: 700; letter-spacing: -0.02em; }
html body h3 { font-weight: 700; letter-spacing: -0.015em; }

/* Figures read as a column: tabular numerals + tight tracking on every KPI */
html body :is(.kpi-value, .stat-value, .stat-val, .stat-v, .metric-value,
              .amount-value, .tdm-value, .td-num, .kpi, .num, .amount) {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Keyboard focus is visible and brand-coloured, pointer focus is quiet */
html body :is(a, button, [role="button"], summary):focus-visible {
  outline: 2px solid var(--tg-brand);
  outline-offset: 2px;
  border-radius: var(--tg-r-sm);
}

html body hr { border: 0; border-top: 1px solid var(--tg-line); margin: 16px 0; }
html body :is(code, kbd) {
  border-radius: 6px;
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-line);
  padding: .1em .4em;
}
html body pre { border-radius: var(--tg-r-md); border: 1px solid var(--tg-line); }

/* ───────────────────────────── 3. SIDEBAR ───────────────────────────── */
html aside.sidebar,
html nav.sidebar,
html[data-theme="light"] aside.sidebar,
html[data-theme="light"] nav.sidebar,
html[data-theme="dark"] aside.sidebar,
html[data-theme="dark"] nav.sidebar {
  background: var(--tg-surface);
  border-right: 1px solid var(--tg-line);
  box-shadow: none;
}
html aside.sidebar .logo-collapsed { border-radius: 8px; }
html aside.sidebar .logo-expanded  { border-radius: 10px; }

html aside.sidebar nav a,
html .sidebar nav a {
  padding: 11px 0 !important;
  border-radius: 11px !important;
  color: var(--tg-text-muted);
  transition: background-color var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease);
}
html aside.sidebar.expanded nav a,
html .sidebar.expanded nav a { padding: 11px 12px !important; }

html aside.sidebar nav a img,
html .sidebar nav a img {
  opacity: .62;
  transition: opacity var(--tg-dur) var(--tg-ease);
}
html aside.sidebar nav a:hover,
html .sidebar nav a:hover {
  background: color-mix(in srgb, var(--tg-text) 6%, transparent);
  color: var(--tg-text);
}
html aside.sidebar nav a.active,
html .sidebar nav a.active {
  background: color-mix(in srgb, var(--tg-text) 10%, transparent);
  color: var(--tg-text);
}
html aside.sidebar nav a:hover img,
html aside.sidebar nav a.active img,
html .sidebar nav a:hover img,
html .sidebar nav a.active img { opacity: 1; }

html aside.sidebar.expanded nav a span,
html .sidebar.expanded nav a span {
  font-size: 13.5px;
  font-weight: 400;
  padding-left: 8px;
  color: inherit;
}
html aside.sidebar.expanded nav a.active span,
html .sidebar.expanded nav a.active span { font-weight: 700; }

/* Collapsed-rail tooltips: frosted pill, no arrow */
html aside.sidebar nav a[data-tip]::after,
html .sidebar nav a[data-tip]::after {
  left: calc(var(--tg-sidebar-w, 60px) + 10px);
  padding: 7px 11px;
  font: 400 13px/1 "Aeonik", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
  color: var(--tg-text);
  background: color-mix(in srgb, var(--tg-surface-3) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--tg-line-2);
  border-radius: 9px;
  box-shadow: var(--tg-shadow-md);
}
html aside.sidebar nav a[data-tip]::before,
html .sidebar nav a[data-tip]::before { display: none; }

html aside.sidebar .minimize,
html .sidebar .minimize {
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-line);
  border-radius: 10px;
}
html aside.sidebar .minimize:hover,
html .sidebar .minimize:hover { background: var(--tg-surface-3); }

/* Pinned bottom rail (admin) */
html body .sb-bottom a { border-radius: 11px !important; }
html body .sb-bottom a img { opacity: .62; transition: opacity var(--tg-dur) var(--tg-ease); }
html body .sb-bottom a:hover img,
html body .sb-bottom a.active img,
html body .sb-bottom a.sb-accent img { opacity: 1; }
html body .sb-bottom a:not(.sb-accent):hover {
  background: color-mix(in srgb, var(--tg-text) 6%, transparent) !important;
}
html body #resBtnSidebar:hover {
  background: color-mix(in srgb, var(--tg-text) 6%, transparent) !important;
}
html body .sb-divider { width: 24px; background: var(--tg-line-2); }

/* ───────────────────────────── 4. HEADER ────────────────────────────── */
html header.header,
html .header,
html[data-theme="light"] header.header,
html[data-theme="light"] .header,
html[data-theme="dark"] header.header,
html[data-theme="dark"] .header {
  background: color-mix(in srgb, var(--tg-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--tg-line);
  box-shadow: none;
  padding: 10px 24px;
  min-height: 60px;
}
html header.header .mobile-menu-btn,
html .header .mobile-menu-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  font-size: 18px;
  transition: background-color var(--tg-dur) var(--tg-ease);
}
html header.header .mobile-menu-btn:hover,
html .header .mobile-menu-btn:hover {
  background: color-mix(in srgb, var(--tg-text) 7%, transparent) !important;
}

/* Avatar: a quieter ring, soft brand halo on hover */
html header.header .user-info .avatar,
html .header .user-info .avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
  border-width: 1.5px !important;
  box-shadow: 0 0 0 0 var(--tg-brand-ring);
  transition: box-shadow var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease);
}
html header.header .user-info:hover .avatar,
html .header .user-info:hover .avatar { box-shadow: 0 0 0 4px var(--tg-brand-ring); }
html header.header .user-info .details .name,
html .header .user-info .details .name {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--tg-text-muted);
}

/* Header controls (language, notifications, search, theme) */
html body .lang-btn,
html body .snotif-btn,
html body #header .tgs-box,
html body .tg-theme-toggle {
  background: color-mix(in srgb, var(--tg-text) 6%, transparent);
  border: 1px solid var(--tg-line);
  border-radius: 10px;
  transition: background-color var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease);
}
html body .lang-btn:hover,
html body .snotif-btn:hover,
html body #header .tgs-box:hover,
html body .tg-theme-toggle:hover {
  background: color-mix(in srgb, var(--tg-text) 10%, transparent);
  border-color: var(--tg-line-2);
}
html body #header .tgs.is-focused .tgs-box {
  border-color: var(--tg-brand);
  box-shadow: 0 0 0 3.5px var(--tg-brand-ring);
}
html body .lang-btn { padding: 7px 11px; font-size: 13.5px; }

/* Notification counters follow the brand, not ToneGrid red */
html body .notif-badge { background: var(--tg-brand); color: #fff; }
html body .notif-item.unseen { background: var(--tg-brand-soft); }
html body .notif-item:hover { background: var(--tg-surface-3); }
html body .notif-item { border-radius: 8px; }
html body .snotif-item.unseen { background: var(--tg-brand-soft); }

/* ──────────────────── 5. POPOVERS, MENUS, SHEETS ───────────────────── */
html body #notifDropdown,
html body #resourcesPopover,
html body .lang-dropdown,
html body .avatar-dropdown,
html body .snotif-dd,
html body .tn-select-panel,
html body #header .tgs-dd,
html body .as-picker {
  background: color-mix(in srgb, var(--tg-surface-2) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--tg-line-2);
  border-radius: 14px;
  box-shadow: var(--tg-shadow-lg);
}
html body #notifDropdown { top: 44px; padding: 6px; min-width: 280px; }
html body .lang-dropdown .lang-option { border-radius: 8px; margin: 0 4px; width: calc(100% - 8px); }
html body .lang-dropdown .lang-option:hover,
html body .lang-dropdown .lang-option.active { background: color-mix(in srgb, var(--tg-text) 8%, transparent); }
html body .avatar-dropdown a { border-radius: 8px; margin: 2px 4px; }
html body .avatar-dropdown a:hover { background: color-mix(in srgb, var(--tg-text) 8%, transparent); }
html body .res-pop-item:hover { background: color-mix(in srgb, var(--tg-text) 6%, transparent); }
html body .snotif-item:hover,
html body #header .tgs-item.is-active,
html body #header .tgs-item:hover { background: color-mix(in srgb, var(--tg-text) 7%, transparent); }
html body #header .tgs-item { border-radius: 9px; }

/* Account sheet: solid surface (no blur, by design), softer corners */
html body .account-sheet {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line-2);
}
html body.account-sheet-open .account-sheet { box-shadow: var(--tg-shadow-xl); }

/* Custom select trigger */
html body .tn-select-trigger {
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-line-2);
  border-radius: var(--tg-r);
  font-weight: 400;
}
html body .tn-select.is-open .tn-select-trigger {
  border-color: var(--tg-brand);
  box-shadow: 0 0 0 3.5px var(--tg-brand-ring);
}
html body .tn-select-item { border-radius: 8px; }

/* ──────────────────────── 6. MODALS + OVERLAYS ──────────────────────── */
html body :is(.modal-overlay, .modal-backdrop) {
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
html body :is(.modal, .modal-content, .modal-box, .modal-card, dialog),
html[data-theme="light"] body :is(.modal, .modal-content, .modal-box, .modal-card, dialog) {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line-2);
  border-radius: var(--tg-r-xl);
  box-shadow: var(--tg-shadow-xl);
}
html body :is(.modal-header, .modal-head) { border-bottom-color: var(--tg-line); }
html body :is(.modal-footer, .modal-foot) { border-top-color: var(--tg-line); }
html body .modal-close {
  border-radius: 50%;
  transition: background-color var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease);
}
html body .modal-close:hover { background: color-mix(in srgb, var(--tg-text) 8%, transparent); }

/* Toasts */
html body .toast {
  background: color-mix(in srgb, var(--tg-surface-2) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--tg-line-2);
  border-radius: 16px;
  box-shadow: var(--tg-shadow-lg);
}

/* ──────────────────────────── 7. CARDS ──────────────────────────────── */
html body :is(.card, .panel, .stat-card, .kpi-card, .info-card, .subcard, .ap-card,
              .tn-card, .widget, .welcome-card, .metric, .release-card, .invite-card,
              .wizard, .create-box),
html[data-theme="light"] body :is(.card, .panel, .stat-card, .kpi-card, .info-card,
              .subcard, .ap-card, .tn-card, .widget, .welcome-card, .metric,
              .release-card, .invite-card, .wizard, .create-box) {
  border-radius: var(--tg-r-lg);
  border-color: var(--tg-line);
}
html body :is(.subcard, .info-card) { border-radius: var(--tg-r-md); }
html[data-theme="light"] body :is(.card, .panel, .stat-card, .kpi-card, .info-card,
              .subcard, .ap-card, .tn-card, .widget, .welcome-card, .metric,
              .release-card, .invite-card, .wizard) {
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
html[data-theme="light"] body :is(.release-card, .tile, .stat-card, .kpi-card):hover {
  border-color: var(--tg-line-2);
  box-shadow: var(--tg-shadow-md);
}
html body :is(.card-header, .card-hd) { border-bottom-color: var(--tg-line); }

/* The settings pages carried a hard-coded red glow behind the canvas */
html body main.settings-page.tn-scope,
html body .tn-scope.settings-page,
html[data-theme="light"] body main.settings-page.tn-scope,
html[data-theme="light"] body .tn-scope.settings-page { background: var(--tg-bg); }
html body .tn-scope {
  --tn-brand-hover: var(--tg-brand-hover);
  --tn-brand-soft:  var(--tg-brand-soft);
  --tn-brand-ring:  var(--tg-brand-ring);
  --tn-shadow:      none;
  --tn-radius:      16px;
  --tn-radius-sm:   10px;
  --tn-radius-xs:   8px;
}
html body .tn-scope .btn-primary {
  box-shadow: none;
}
html body .tn-scope .btn-primary:hover {
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--tg-brand) 45%, transparent);
}

/* ───────────────────────────── 8. TABLES ────────────────────────────── */
html body table th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--tg-text-subtle);
}
html body table td,
html body table th { border-bottom-color: var(--tg-line); }
html body table tbody tr { transition: background-color .15s var(--tg-ease); }
html body table tbody tr:hover { background: color-mix(in srgb, var(--tg-text) 3.5%, transparent); }
html[data-theme="light"] table thead th {
  background: var(--tg-surface-2);
  border-bottom: 1px solid var(--tg-line);
}
html[data-theme="light"] table tbody tr:hover { background: rgba(0,0,0,.025); }
html body :is(.table-wrap, .tbl-wrap, .table-scroll, .tracks-table) { border-radius: 14px; }

/* ──────────────────────────── 9. FIELDS ─────────────────────────────── */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(.tn-select-search):not(.dsp-search):not(.tn-skip-style):not(.tgs-input):not(.search-bar input):not(.ctl input):not(.input-wrap input):not(.color-field input):not(.search input):not(.pin input):not(.otp input):not(.code input),
html body select:not(.tn-select-native):not(.tn-skip-style):not(.ctl select),
html body textarea:not(.tn-skip-style):not(.ctl textarea) {
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-line-2);
  border-radius: var(--tg-r);
  color: var(--tg-text);
  transition: border-color var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease), background-color var(--tg-dur) var(--tg-ease);
}
html[data-theme="light"] body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(.tn-select-search):not(.dsp-search):not(.tn-skip-style):not(.tgs-input):not(.search-bar input):not(.ctl input):not(.input-wrap input):not(.color-field input):not(.search input):not(.pin input):not(.otp input):not(.code input),
html[data-theme="light"] body select:not(.tn-select-native):not(.tn-skip-style):not(.ctl select),
html[data-theme="light"] body textarea:not(.tn-skip-style):not(.ctl textarea) {
  background: #ffffff;
  border: 1px solid var(--tg-line-2);
}
html body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(.tn-select-search):not(.dsp-search):not(.tn-skip-style):not(.tgs-input):not(.search-bar input):not(.ctl input):not(.input-wrap input):not(.color-field input):not(.search input):not(.pin input):not(.otp input):not(.code input):hover,
html body select:not(.tn-select-native):not(.tn-skip-style):not(.ctl select):hover,
html body textarea:not(.tn-skip-style):not(.ctl textarea):hover { border-color: var(--tg-line-strong); }
html body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(.tn-select-search):not(.dsp-search):not(.tn-skip-style):not(.tgs-input):not(.search-bar input):not(.ctl input):not(.input-wrap input):not(.color-field input):not(.search input):not(.pin input):not(.otp input):not(.code input):focus,
html body select:not(.tn-select-native):not(.tn-skip-style):not(.ctl select):focus,
html body textarea:not(.tn-skip-style):not(.ctl textarea):focus,
html[data-theme="light"] body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(.tn-select-search):not(.dsp-search):not(.tn-skip-style):not(.tgs-input):not(.search-bar input):not(.ctl input):not(.input-wrap input):not(.color-field input):not(.search input):not(.pin input):not(.otp input):not(.code input):focus,
html[data-theme="light"] body select:not(.tn-select-native):not(.tn-skip-style):not(.ctl select):focus,
html[data-theme="light"] body textarea:not(.tn-skip-style):not(.ctl textarea):focus {
  border-color: var(--tg-brand);
  box-shadow: 0 0 0 3.5px var(--tg-brand-ring);
}
html body input::placeholder,
html body textarea::placeholder { color: var(--tg-text-subtle); opacity: 1; }
html body :is(.ctl, .color-field, .agree-card) { border-radius: var(--tg-r); }
html body .ctl:focus-within { box-shadow: 0 0 0 3.5px var(--tg-brand-ring); }
html body .search-bar {
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-line-2);
  border-radius: var(--tg-r);
}
html body .search-bar:focus-within {
  border-color: var(--tg-brand);
  box-shadow: 0 0 0 3.5px var(--tg-brand-ring);
}
html body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--tg-brand); }

/* ─────────────────────────── 10. BUTTONS ────────────────────────────── */
/* Soft baseline for every .btn — pages still own size, colour owns itself */
html body .btn {
  border-radius: var(--tg-r);
  font-weight: 700;
  transition: background-color var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease), transform .15s var(--tg-ease), opacity var(--tg-dur) var(--tg-ease);
}
html body :is(.btn-sm, .btn-small, .btn.small) { border-radius: 8px; }

/* Primary CTA token — same list as tonegrid-saas.css, two elements deeper */
html body .btn-pill,
html body .btn-new,
html body .btn-primary,
html body .btn-save,
html body .btn-submit,
html body .btn.btn-primary,
html body .btn.btn-success,
html body .btn.pri,
html body .btn.submit,
html body .btn-success,
html body .btn-sm.primary,
html body .btn-small.btn-primary,
html body .btn-primary.btn-small,
html body .wiz-btn-primary,
html body .nc-btn.nc-btn-continue,
html body .ap-btn.primary,
html body .submit-btn:not(.secondary) {
  padding: 10px 16px !important;
  border-radius: var(--tg-r) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: background-color var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease), transform .15s var(--tg-ease), opacity var(--tg-dur) var(--tg-ease) !important;
}
html body .btn-pill:hover,
html body .btn-new:hover,
html body .btn-primary:hover,
html body .btn-save:hover,
html body .btn-submit:hover,
html body .btn.btn-primary:hover,
html body .btn.btn-success:hover,
html body .btn.pri:hover,
html body .btn.submit:hover,
html body .btn-success:hover,
html body .btn-sm.primary:hover,
html body .btn-small.btn-primary:hover,
html body .btn-primary.btn-small:hover,
html body .wiz-btn-primary:hover,
html body .nc-btn.nc-btn-continue:hover,
html body .ap-btn.primary:hover,
html body .submit-btn:not(.secondary):hover {
  transform: none !important;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--tg-brand) 45%, transparent) !important;
}
html body .btn-pill:active,
html body .btn-new:active,
html body .btn-primary:active,
html body .btn-save:active,
html body .btn-submit:active,
html body .btn.btn-primary:active,
html body .btn.btn-success:active,
html body .btn.pri:active,
html body .btn.submit:active,
html body .btn-success:active,
html body .btn-sm.primary:active,
html body .btn-small.btn-primary:active,
html body .btn-primary.btn-small:active,
html body .wiz-btn-primary:active,
html body .nc-btn.nc-btn-continue:active,
html body .ap-btn.primary:active,
html body .submit-btn:not(.secondary):active {
  transform: scale(.98) !important;
  box-shadow: none !important;
}
html body .btn-pill:focus-visible,
html body .btn-new:focus-visible,
html body .btn-primary:focus-visible,
html body .btn-save:focus-visible,
html body .btn-submit:focus-visible,
html body .btn.btn-primary:focus-visible,
html body .btn.btn-success:focus-visible,
html body .btn.pri:focus-visible,
html body .btn.submit:focus-visible,
html body .btn-success:focus-visible,
html body .wiz-btn-primary:focus-visible,
html body .nc-btn.nc-btn-continue:focus-visible,
html body .ap-btn.primary:focus-visible,
html body .submit-btn:not(.secondary):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--tg-bg), 0 0 0 4.5px var(--tg-brand-ring) !important;
}

/* Plain brand-filled .btn (theme-style paints it) — kill the lift, keep the glow */
html body .btn:not(.btn-ghost):not(.btn-outline):not(.btn-cancel):not(.cancel):not(.btn-danger):not(.act-btn):hover {
  transform: none;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--tg-brand) 45%, transparent);
}
html body .btn:not(.btn-ghost):not(.btn-outline):not(.btn-cancel):not(.cancel):not(.btn-danger):not(.act-btn):active {
  transform: scale(.98);
  box-shadow: none;
}

/* Secondary token — same list as tonegrid-saas.css, two elements deeper */
html body .btn-ghost:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
html body .btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
html body .btn-secondary:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
html body .btn-cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
html body .cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
html body .btn-muted:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
html body .act-btn:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon) {
  padding: 10px 16px !important;
  border-radius: var(--tg-r) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--tg-text) 7%, transparent) !important;
  color: var(--tg-text) !important;
  border: 1px solid var(--tg-line) !important;
  transition: background-color var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease), transform .15s var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease) !important;
}
html body .btn-ghost:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
html body .btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
html body .btn-secondary:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
html body .btn-cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
html body .cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
html body .btn-muted:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
html body .act-btn:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled) {
  transform: none !important;
  background: color-mix(in srgb, var(--tg-text) 11%, transparent) !important;
  border-color: var(--tg-line-2) !important;
}
html body .btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon) {
  background: transparent !important;
  border-color: var(--tg-line-strong) !important;
}
html body .btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled) {
  background: color-mix(in srgb, var(--tg-text) 6%, transparent) !important;
}
html body .btn-danger:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon) {
  padding: 10px 16px !important;
  border-radius: var(--tg-r) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: background-color var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease), transform .15s var(--tg-ease) !important;
}
html body .btn-danger:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled) {
  transform: none !important;
}
html body .btn-ghost:active:not(:disabled),
html body .btn-outline:active:not(:disabled),
html body .btn-secondary:active:not(:disabled),
html body .btn-cancel:active:not(:disabled),
html body .cancel:active:not(:disabled),
html body .btn-muted:active:not(:disabled),
html body .act-btn:active:not(:disabled),
html body .btn-danger:active:not(:disabled) { transform: scale(.98) !important; }
html body .btn-ghost:focus-visible,
html body .btn-outline:focus-visible,
html body .btn-secondary:focus-visible,
html body .btn-cancel:focus-visible,
html body .cancel:focus-visible,
html body .btn-muted:focus-visible,
html body .act-btn:focus-visible,
html body .btn-danger:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--tg-bg), 0 0 0 4.5px var(--tg-brand-ring) !important;
}

/* Icon-only buttons stay square and quiet */
html body :is(.icon-btn, .btn-icon) {
  border-radius: 9px;
  transition: background-color var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease);
}
html body :is(.icon-btn, .btn-icon):hover { background: color-mix(in srgb, var(--tg-text) 8%, transparent); }

/* ──────────────────────── 11. CHIPS + BADGES ────────────────────────── */
html body :is(.chip, .pill, .badge, .tg-badge, .kpi-chip, .status-badge, .status-pill) {
  border-radius: 999px;
  font-weight: 700;
}
html body .mn-nav-badge { background: var(--tg-brand); }

/* ───────────────────────── 12. MOBILE SHEET ─────────────────────────── */
html body nav.mobile-nav {
  background: var(--tg-surface);
  border-right: 1px solid var(--tg-line);
}
html body nav.mobile-nav .mn-tile { border-radius: 14px; }
html body nav.mobile-nav .mn-pill-btn { border-radius: 12px; }
html body .mobile-nav-backdrop {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ─────────────────────────── 13. MISC CHROME ────────────────────────── */
html body .tg-back-btn { border-radius: 9px; }
html body :is(.empty-state) { border-radius: var(--tg-r-lg); border-color: var(--tg-line); }
html body :is(.stepper, .steps) .step-circle { transition: background-color var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease); }
html body .tg-sandbox-pill { border-radius: 999px; }

/* Keep the frosted chrome honest where the browser can't blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html header.header, html .header,
  html[data-theme="light"] header.header, html[data-theme="light"] .header,
  html[data-theme="dark"] header.header, html[data-theme="dark"] .header { background: var(--tg-bg); }
  html body #notifDropdown, html body #resourcesPopover, html body .lang-dropdown,
  html body .avatar-dropdown, html body .snotif-dd, html body .tn-select-panel,
  html body #header .tgs-dd, html body .as-picker, html body .toast { background: var(--tg-surface-2); }
  html aside.sidebar nav a[data-tip]::after, html .sidebar nav a[data-tip]::after { background: var(--tg-surface-3); }
}

@media (prefers-reduced-motion: reduce) {
  html body .btn, html body .btn-primary, html body .btn-ghost, html body .btn-outline,
  html body .btn-danger, html aside.sidebar nav a, html header.header .user-info .avatar { transition: none !important; }
}