/* ============================================================
   Handshake Theme — v2 (Surfaces)
   Requires surfaces.css loaded first.
   Legacy --hs-* tokens bridge to .surface-user / .surface-admin.
   ============================================================ */

:root {
  /* Brand */
  --hs-aqua:        #43E5A4;
  --hs-aqua-hover:  #2FCF8E;
  --hs-aqua-press:  #1FB87A;
  --hs-ink:         #0A0A0A;

  /* Light (default) */
  --hs-bg:          #FFFFFF;
  --hs-bg-elev:     #F7F8F8;
  --hs-bg-sunken:   #F1F2F3;
  --hs-surface:     #FFFFFF;
  --hs-border:      #E6E7E8;
  --hs-border-strong: #D1D3D5;

  --hs-text:        #0A0A0A;
  --hs-text-muted:  #5A5F65;
  --hs-text-subtle: #6B7280;
  --hs-text-inverse:#FFFFFF;

  /* Readable success text on light backgrounds; aquamarine reserved for fills/accents */
  --hs-success:     #1E9E63;
  --hs-warning:     #F5A623;
  --hs-danger:      #E5484D;
  --hs-danger-600:  #D6453B;
  --hs-danger-200:  #F3C9C4;
  --hs-danger-050:  #FCF0EE;
  --hs-info:        #3B82F6;

  /* Everglade brand greens */
  --hs-everglade-900: #0E1B11;
  --hs-everglade-800: #122920;
  --hs-everglade-700: #1D4032;
  --hs-everglade-600: #056C42;
  --hs-everglade-500: #27AE60;
  --hs-everglade-400: #43E5A4;
  --hs-everglade-300: #B2FFE0;
  --hs-everglade-200: #CCFFEB;
  --hs-everglade-100: #F0FFF3;
  --hs-everglade-sidebar: #102A20;

  /* Warm surfaces */
  --hs-cream:       #F7F8F3;
  --hs-page-warm:   #F2F3F2;
  --hs-aqua-soft:   #EAFBF3;
  --hs-aqua-deep:   #0C7A52;
  --hs-card-border: #ECEDE6;

  /* Extended neutrals */
  --hs-neutral-800: #242424;
  --hs-neutral-700: #4E4B66;
  --hs-neutral-600: #525252;
  --hs-neutral-500: #757575;
  --hs-neutral-400: #757575;
  --hs-neutral-300: #DADADA;
  --hs-neutral-250: #D9D9D9;
  --hs-neutral-200: #EFF0F6;
  --hs-neutral-150: #F0F1F1;

  /* Tag / outcome accents */
  --hs-purple-100:  #F6ECFD;
  --hs-purple-600:  #7C16CA;
  --hs-tag-blue-bg: #E7F1FE;
  --hs-tag-blue-fg: #1B66C9;
  --hs-tag-warn-bg: #FDECEC;
  --hs-tag-warn-fg: #C0392B;

  /* Portal type scale */
  --hs-tx-lg:       18px;
  --hs-tx-xl:       19px;
  --hs-tx-2xl:      28px;

  /* Typography */
  --hs-font:        var(--font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --hs-font-ui:     var(--font, 'Inter', -apple-system, sans-serif);
  --hs-font-mono:   var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);

  /* Radius */
  --hs-radius-sm:   var(--r-xs, 6px);
  --hs-radius:      var(--r-md, 12px);
  --hs-radius-lg:   var(--r-lg, 16px);
  --hs-radius-xl:   var(--r-xl, 20px);
  --hs-radius-full: var(--r-pill, 999px);

  /* Shadow */
  --hs-shadow-sm:   0 1px 2px rgba(10,10,10,0.04), 0 1px 1px rgba(10,10,10,0.03);
  --hs-shadow:      0 4px 12px rgba(10,10,10,0.06), 0 1px 2px rgba(10,10,10,0.04);
  --hs-shadow-lg:   0 12px 32px rgba(10,10,10,0.10), 0 4px 8px rgba(10,10,10,0.05);
  --hs-shadow-aqua: 0 8px 24px rgba(67,229,164,0.25);
  --hs-shadow-card: 0 14px 42px rgba(8,15,52,0.06);

  /* Spacing scale */
  --hs-space-1: 4px;
  --hs-space-2: 8px;
  --hs-space-3: 12px;
  --hs-space-4: 16px;
  --hs-space-5: 24px;
  --hs-space-6: 32px;
  --hs-space-7: 48px;
  --hs-space-8: 64px;

  /* Motion */
  --hs-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --hs-ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --hs-dur-fast:   120ms;
  --hs-dur:        200ms;
  --hs-dur-slow:   400ms;
}

/* ---- Surface token bridges (legacy --hs-* → semantic surface tokens) ---- */
.surface-user {
  --hs-bg:            var(--panel);
  --hs-bg-elev:       var(--panel-2);
  --hs-bg-sunken:     var(--panel-3);
  --hs-surface:       var(--panel);
  --hs-border:        var(--hair);
  --hs-border-strong: var(--hair-2);
  --hs-text:          var(--ink);
  --hs-text-muted:    var(--ink-2);
  --hs-text-subtle:   var(--ink-3);
  --hs-text-inverse:  var(--panel);
  --hs-aqua:          var(--accent);
  --hs-aqua-hover:    var(--accent-2);
  --hs-aqua-soft:     var(--accent-tint);
  --hs-aqua-deep:     var(--accent-2);
  --hs-page-warm:     var(--canvas);
  --hs-cream:         var(--canvas);
  --hs-card-border:   var(--hair);
  --hs-success:       var(--pass);
  --hs-danger:        var(--fail);
  --hs-danger-600:    var(--fail);
  --hs-danger-200:    var(--fail-tint);
  --hs-danger-050:    var(--fail-tint);
  --hs-neutral-800:   var(--ink);
  --hs-neutral-700:   var(--ink-2);
  --hs-neutral-600:   var(--ink-2);
  --hs-neutral-500:   var(--ink-3);
  --hs-neutral-400:   var(--ink-3);
  --hs-neutral-300:   var(--hair-2);
  --hs-neutral-250:   var(--hair);
  --hs-neutral-200:   var(--hair);
  --hs-neutral-150:   var(--panel-2);
  --hs-shadow-sm:     var(--shadow-sm);
  --hs-shadow:        var(--shadow);
  --hs-shadow-lg:     var(--shadow);
  --hs-shadow-card:   var(--shadow);
}

.surface-admin {
  --hs-bg:              var(--panel);
  --hs-bg-elev:         var(--panel-2);
  --hs-bg-sunken:       var(--panel-3);
  --hs-surface:         var(--panel);
  --hs-border:          var(--hair);
  --hs-border-strong:   var(--hair-2);
  --hs-text:            var(--ink);
  --hs-text-muted:      var(--ink-2);
  --hs-text-subtle:     var(--ink-3);
  --hs-text-inverse:    #FFFFFF;
  --hs-aqua:            var(--accent);
  --hs-aqua-hover:      var(--hs-aqua-bright, #5CF0B5);
  --hs-aqua-soft:       var(--accent-tint);
  --hs-page-warm:       var(--canvas);
  --hs-cream:           #F9FAF2;
  --hs-everglade-sidebar: var(--panel);
  --hs-everglade-900:   #0E1B11;
  --hs-everglade-800:   #122920;
  --hs-everglade-700:   #1D4032;
  --hs-everglade-600:   #056C42;
  --hs-everglade-300:   #B2FFE0;
  --hs-everglade-200:   #CCFFEB;
  --hs-everglade-100:   #F0FFF3;
  --hs-success:         var(--pass);
  --hs-danger:          var(--fail);
  --hs-danger-600:      var(--fail);
  --hs-ink:             var(--ink);
  --hs-neutral-900:     var(--ink);
  --hs-neutral-800:     var(--ink);
  --hs-neutral-700:     var(--ink-2);
  --hs-neutral-600:     var(--ink-2);
  --hs-neutral-500:     var(--ink-3);
  --hs-neutral-400:     var(--ink-3);
  --hs-card-border:     var(--hair);
  --hs-neutral-300:     var(--hair-2);
  --hs-neutral-250:     var(--hair);
  --hs-neutral-200:     var(--hair);
  --hs-neutral-150:     var(--panel-2);
  --hs-shadow-sm:       var(--shadow-sm);
  --hs-shadow:          var(--shadow);
  --hs-shadow-lg:       var(--shadow);
}

/* Dark theme */
[data-theme="dark"], .dark {
  --hs-bg:          #0A0A0A;
  --hs-bg-elev:     #141516;
  --hs-bg-sunken:   #050505;
  --hs-surface:     #1A1B1D;
  --hs-border:      #26282B;
  --hs-border-strong: #3A3D40;

  --hs-text:        #F5F6F7;
  --hs-text-muted:  #A0A4A8;
  --hs-text-subtle: #6B7075;
  --hs-text-inverse:#0A0A0A;

  --hs-shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --hs-shadow:      0 4px 12px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --hs-shadow-lg:   0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4);
  --hs-shadow-aqua: 0 8px 24px rgba(67,229,164,0.30);
}

/* Auto dark via OS — opt-in by adding .auto-dark to <html> */
@media (prefers-color-scheme: dark) {
  html.auto-dark:not([data-theme="light"]) {
    --hs-bg:          #0A0A0A;
    --hs-bg-elev:     #141516;
    --hs-bg-sunken:   #050505;
    --hs-surface:     #1A1B1D;
    --hs-border:      #26282B;
    --hs-border-strong: #3A3D40;
    --hs-text:        #F5F6F7;
    --hs-text-muted:  #A0A4A8;
    --hs-text-subtle: #6B7075;
    --hs-text-inverse:#0A0A0A;
  }
}

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

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

body {
  margin: 0;
  font-family: var(--hs-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--hs-text);
  background: var(--hs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

::selection { background: var(--hs-aqua); color: var(--hs-ink); }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--hs-space-3);
  font-weight: 600;
  line-height: 1.15;
  color: var(--hs-text);
}
h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: 0.9375rem; text-transform: uppercase; color: var(--hs-text-muted); }

p { margin: 0 0 var(--hs-space-4); color: var(--hs-text); }
small, .hs-caption { font-size: 0.8125rem; color: var(--hs-text-muted); }

.hs-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hs-text-muted);
}

a {
  color: var(--hs-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hs-aqua);
  transition: opacity var(--hs-dur) var(--hs-ease);
}
[data-theme="dark"] a, .dark a { color: var(--hs-text); }
a:hover { opacity: 0.7; }

code, kbd, samp { font-family: var(--hs-font-mono); font-size: 0.9em; }
code {
  background: var(--hs-bg-sunken);
  padding: 2px 6px;
  border-radius: var(--hs-radius-sm);
  border: 1px solid var(--hs-border);
}

/* ============================================================
   Layout
   ============================================================ */
.hs-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--hs-space-5);
}
.hs-container-sm { max-width: 720px; }
.hs-container-lg { max-width: 1440px; }

.hs-section { padding: var(--hs-space-8) 0; }

/* ============================================================
   Buttons — dashboard hierarchy (.hs-btn / .hsb)
   Primary reserved for Save & one critical action per view.
   ============================================================ */
.hs-btn,
.hsb {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--hs-font);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
  min-height: 38px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: var(--hs-radius-full);
  background: transparent;
  color: var(--hs-neutral-800);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
  -webkit-font-smoothing: antialiased;
  overflow: visible;
}
a.hs-btn,
a.hsb {
  text-decoration: none;
  /* Undo global `a { border-bottom }` underline; keep full button box border. */
  border-bottom-style: solid;
  border-bottom-width: 1.5px;
}
.hs-btn:active:not(:disabled):not([aria-disabled="true"]),
.hsb:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}
.hs-btn:focus-visible,
.hsb:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hs-aqua) 60%, transparent);
  outline-offset: 2px;
}
.hs-btn svg,
.hsb svg {
  width: 16px;
  height: 16px;
  display: block;
}
.hs-btn:disabled,
.hs-btn[aria-disabled="true"],
.hsb:disabled,
.hsb[aria-disabled="true"] {
  opacity: 1;
  color: var(--ink-3, var(--hs-text-subtle));
  background: var(--panel-2, var(--hs-bg-sunken));
  border-color: var(--hair, var(--hs-border));
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================================================
   THE BUTTON LADDER — three styles, and one reserved

     primary    ink fill, white text     the thing to do. One per screen.
     secondary  white fill, ink text     the alternative. Always available.
     quiet      text only                inline and dismissive actions.
     danger     red                      RESERVED for destructive only.

   This block used to define SIX numbered styles plus a seventh (`2b · Ink`):
   primary, secondary, ink, soft, ghost, danger, danger-ghost. Business
   information rendered five of them in one viewport — "Apply selected" green,
   "Dismiss selected" grey-filled, "Cancel" a link, Save aqua, delete a bare
   glyph — and no reader could rank them, because there was no ranking to read.
   Six styles is not a hierarchy; it is a palette.

   Two substantive changes beyond the merge:

   1. Primary is INK, not aquamarine. The aqua fill was arriving as the loudest
      element on every page that had a form, regardless of whether the action
      deserved it. Ink reads unambiguously as "this one" at 17.2:1 against its
      own label and stops competing with content. Aquamarine keeps the job it
      is actually good at — marking STATE: active nav, selection borders, focus
      rings, switches, data marks. It is no longer a fill on any button.

   2. `ink`, `soft`, `ghost` and `add` are ALIASES, not styles. Every existing
      call site keeps working; they just stop being visually distinct. New
      markup should use primary / secondary / quiet only.
   ============================================================ */

/* 1 · Primary — ink fill. One per screen. */
.hs-btn-primary,
.hsb--primary,
.hs-adm-btn--primary,
.hs-btn-ink,
.hsb--ink {
  background: var(--ink, var(--hs-everglade-900, #0E1B11));
  color: #fff;
  border-color: var(--ink, var(--hs-everglade-900, #0E1B11));
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(14, 27, 17, 0.12), 0 4px 12px rgba(14, 27, 17, 0.1);
}
.hs-btn-primary:hover:not(:disabled):not([aria-disabled="true"]),
.hsb--primary:hover:not(:disabled):not([aria-disabled="true"]),
.hs-adm-btn--primary:hover:not(:disabled),
.hs-btn-ink:hover:not(:disabled):not([aria-disabled="true"]),
.hsb--ink:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--hs-everglade-800, #122920);
  border-color: var(--hs-everglade-800, #122920);
  color: #fff;
}

/* 2 · Secondary — the ONE neutral style. `soft`, `ghost` and `add` were three
   more names for it, separated by a few percent of fill each. */
.hs-btn-secondary,
.hsb--secondary,
.hs-btn-soft,
.hsb--soft,
.hs-btn-add,
.hs-btn-ghost,
.hsb--ghost,
.hs-adm-btn--ghost,
.hs-adm-btn--soft {
  background: var(--panel, var(--hs-bg));
  color: var(--ink, var(--hs-neutral-800));
  border-color: var(--hair-2, var(--hs-neutral-300));
}
.hs-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.hsb--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.hs-btn-soft:hover:not(:disabled):not([aria-disabled="true"]),
.hsb--soft:hover:not(:disabled):not([aria-disabled="true"]),
.hs-btn-add:hover:not(:disabled):not([aria-disabled="true"]),
.hs-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]),
.hsb--ghost:hover:not(:disabled):not([aria-disabled="true"]),
.hs-adm-btn--ghost:hover:not(:disabled),
.hs-adm-btn--soft:hover:not(:disabled) {
  border-color: var(--hair-2, var(--hs-neutral-800));
  background: var(--panel-2, var(--hs-neutral-150));
}

/* 3 · Quiet — no fill, no border. Cancel, Dismiss, Skip, Not now.
   This is the tier the six-style system was missing: something that is
   clearly a button, clearly in the same family, and clearly not the answer.
   Dismissals used to reach for `soft` (a filled box that competes) or for
   `.hs-link` (which brought an aqua underline under button chrome and read
   as a rendering error). */
.hs-btn-quiet,
.hsb--quiet,
.hs-adm-btn--quiet {
  background: transparent;
  color: var(--ink-2, var(--hs-neutral-700));
  border-color: transparent;
  box-shadow: none;
}
.hs-btn-quiet:hover:not(:disabled):not([aria-disabled="true"]),
.hsb--quiet:hover:not(:disabled):not([aria-disabled="true"]),
.hs-adm-btn--quiet:hover:not(:disabled) {
  background: var(--panel-2, var(--hs-neutral-150));
  color: var(--ink, var(--hs-neutral-800));
}

/* 4 · Danger — RESERVED for destructive. Two shapes only because a row-level
   delete cannot carry a filled box without dominating the row it deletes. */
.hs-btn-danger,
.hsb--danger,
.hs-adm-btn--danger {
  background: var(--hs-bg);
  color: var(--hs-danger-600);
  border-color: var(--hs-danger-200);
}
.hs-btn-danger:hover:not(:disabled):not([aria-disabled="true"]),
.hsb--danger:hover:not(:disabled):not([aria-disabled="true"]),
.hs-adm-btn--danger:hover:not(:disabled) {
  background: var(--hs-danger-600);
  color: var(--hs-text-inverse);
  border-color: var(--hs-danger-600);
}

.hs-btn-danger-ghost,
.hsb--danger-ghost {
  background: transparent;
  color: var(--hs-danger-600);
  border-color: transparent;
}
.hs-btn-danger-ghost:hover:not(:disabled):not([aria-disabled="true"]),
.hsb--danger-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--hs-danger-050);
}

/* Sizes */
.hs-btn-sm,
.hsb--sm {
  min-height: 32px;
  padding: 0 14px;
  font-size: 12.5px;
  border-radius: var(--hs-radius-full);
  gap: 6px;
}
.hs-btn-sm svg,
.hsb--sm svg {
  width: 16px;
  height: 16px;
}
.hs-btn-lg,
.hsb--lg {
  min-height: 44px;
  padding: 0 24px;
  font-size: 15px;
  border-radius: var(--hs-radius-full);
}
.hs-btn-lg svg,
.hsb--lg svg {
  width: 20px;
  height: 20px;
}

/* Modifiers */
.hs-btn-pill,
.hsb--pill {
  border-radius: var(--hs-radius-full);
}
.hs-btn-block,
.hsb--block {
  display: flex;
  width: 100%;
}
.hs-btn-icon,
.hsb--icon {
  padding: 0;
  width: 44px;
}
.hs-btn-icon.hs-btn-sm,
.hsb--icon.hsb--sm {
  width: 36px;
}
.hs-btn-icon.hs-btn-lg,
.hsb--icon.hsb--lg {
  width: 52px;
}

/* Arrow suffix (per brand spec) */
.hs-btn-arrow::after { content: ' →'; transition: transform var(--hs-dur) var(--hs-ease); }
.hs-btn-arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   Controls — segmented (.sgc) + underline tabs (.tabs-u)
   From Handshake Toggles & Tabs spec
   ============================================================ */
.sgc {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  border: 1px solid var(--hair);
  isolation: isolate;
}
.sgc__ind,
.vtoggle-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: var(--r-pill);
  transition: left .26s cubic-bezier(.5, .1, .2, 1), width .26s cubic-bezier(.5, .1, .2, 1);
  pointer-events: none;
  z-index: 0;
}
.sgc button,
.vtoggle button {
  position: relative;
  z-index: 1;
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font, var(--hs-font-ui));
  height: 36px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease;
}
.sgc button svg,
.vtoggle button svg { width: 16px; height: 16px; }
.sgc button .cnt,
.sgc button .pip,
.tabs-u button .pip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--panel-3, var(--panel-2));
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: background .2s, color .2s;
}
.sgc button:hover:not(.is-on),
.vtoggle button:hover:not(.is-on) { color: var(--ink); }
.sgc button:focus-visible,
.vtoggle button:focus-visible,
.tabs-u button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, var(--hs-aqua)) 65%, transparent);
  outline-offset: 2px;
}

/* Solid — primary view switch */
.sgc--solid .sgc__ind,
.vtoggle .vtoggle-thumb,
.vtoggle-thumb {
  background: var(--accent, var(--hs-aqua));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .18));
}
.surface-user .sgc--solid .sgc__ind,
.surface-user .vtoggle .vtoggle-thumb {
  background: var(--accent-2, var(--hs-aqua-deep));
}
.sgc--solid button.is-on,
.vtoggle button.is-on {
  color: var(--accent-ink, #0C2418);
  font-weight: 700;
}
.surface-user .sgc--solid button.is-on,
.surface-user .vtoggle--light button.is-on {
  color: #fff;
}
.surface-admin .sgc--solid .sgc__ind,
.surface-admin .vtoggle .vtoggle-thumb {
  background: var(--accent, var(--hs-aqua));
  box-shadow:
    0 0 0 1px rgba(67, 229, 164, 0.4),
    0 2px 10px rgba(67, 229, 164, 0.25);
}
.surface-admin .sgc--solid button.is-on,
.surface-admin .vtoggle button.is-on {
  color: var(--accent-ink, #0C2418);
  font-weight: 700;
}
.surface-admin .sgc button:not(.is-on) {
  color: var(--ink-3);
}
.surface-admin .sgc button:hover:not(.is-on) {
  color: var(--ink-2);
}
.surface-admin .sgc {
  background: var(--panel-3);
  border-color: var(--hair-2);
}
.sgc--solid button.is-on .cnt,
.sgc--solid button.is-on .pip {
  background: rgba(0, 0, 0, .16);
  color: inherit;
}

/* Raised — inline filter / compact tabs */
.sgc--raised .sgc__ind {
  background: var(--panel);
  box-shadow: var(--shadow);
}
.surface-admin .sgc--raised .sgc__ind {
  background: var(--panel-3);
  box-shadow: var(--shadow-sm);
}
.sgc--raised button.is-on { color: var(--ink); font-weight: 700; }
.surface-admin .sgc--raised button.is-on { color: var(--accent); }
.surface-user .sgc--raised button.is-on { color: var(--accent-2); }
.sgc--raised button.is-on .cnt,
.sgc--raised button.is-on .pip {
  background: var(--accent-tint);
  color: var(--accent-2);
}
.surface-admin .sgc--raised button.is-on .cnt,
.surface-admin .sgc--raised button.is-on .pip {
  color: var(--accent);
}

.sgc--block { display: flex; width: 100%; }
.sgc--block button,
.vtoggle--stretch button { flex: 1; text-align: center; }

.sgc--lg button { height: 44px; font-size: 15px; padding: 0 24px; }
.sgc--sm button { height: 30px; font-size: 13px; padding: 0 14px; }

/**
 * Standard hug-content tab selector.
 * Wrap a `.sgc` (prefer `.sgc--raised`) so the control is only as wide as its
 * buttons and centered in the available row. Do not use `.sgc--block` here.
 */
.hs-seg-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.hs-seg-tabs > .sgc {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}
.hs-seg-tabs > .sgc button {
  flex: 0 0 auto;
}

/* Legacy vtoggle aliases */
.vtoggle {
  --vtoggle-pad: 4px;
  --vtoggle-radius: 360px;
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 4px;
  gap: 0;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  border: 1px solid var(--hair);
  isolation: isolate;
}
.vtoggle--light {
  background: var(--panel-2);
  border-color: transparent;
}
.vtoggle--light button:not(.is-on) { color: var(--ink-3); }
.vtoggle--light button:hover:not(.is-on) { color: var(--ink-2); }

/* Underline tabs */
.tabs-u {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  border-bottom: 1px solid var(--hair);
}
.tabs-u button {
  position: relative;
  appearance: none;
  border: none;
  background: transparent;
  padding: 0 1px 14px;
  font-family: var(--font, var(--hs-font-ui));
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color .18s ease;
}
.tabs-u button:hover:not(.is-on) { color: var(--ink-2); }
.tabs-u button.is-on { color: var(--ink); }
.surface-admin .tabs-u button.is-on { color: var(--accent); }
.tabs-u button.is-on .pip {
  background: var(--accent-tint);
  color: var(--accent-2);
}
.surface-admin .tabs-u button.is-on .pip { color: var(--accent); }
.tabs-u__ind {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  border-radius: 2px 2px 0 0;
  background: var(--accent, var(--hs-aqua));
  transition: left .26s cubic-bezier(.5, .1, .2, 1), width .26s cubic-bezier(.5, .1, .2, 1);
  pointer-events: none;
}
.surface-user .tabs-u__ind { background: var(--accent-2, var(--hs-aqua-deep)); }

/* Enclosed tabs */
.tabs-e__wrap { border-bottom: 1px solid var(--hair); }
.tabs-e {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tabs-e button {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-family: var(--font, var(--hs-font-ui));
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tabs-e button:hover:not(.is-on) {
  background: var(--panel-2);
  color: var(--ink-2);
}
.tabs-e button.is-on {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--hair);
}
.surface-user .tabs-e button.is-on { color: var(--accent-2); }
.surface-admin .tabs-e button.is-on { color: var(--accent); }

/* ============================================================
   Forms
   ============================================================ */
.hs-input, .hs-textarea, .hs-select {
  width: 100%;
  font-family: var(--hs-font);
  font-size: 0.8125rem;
  padding: 7px 10px;
  background: var(--panel, var(--hs-surface));
  color: var(--ink, var(--hs-text));
  border: 1px solid var(--hair, var(--hs-border));
  border-radius: var(--r-sm, 8px);
  transition: border-color var(--hs-dur) var(--hs-ease), box-shadow var(--hs-dur) var(--hs-ease);
}
.hs-input:focus, .hs-textarea:focus, .hs-select:focus {
  outline: none;
  border-color: var(--accent, var(--hs-aqua));
  box-shadow: 0 0 0 2px var(--accent-tint, rgba(67,229,164,0.15));
}
.surface-admin .hs-input,
.surface-admin .hs-textarea,
.surface-admin .hs-select {
  background: var(--panel-2);
}
.hs-input::placeholder, .hs-textarea::placeholder { color: var(--hs-text-subtle); }
.hs-textarea { min-height: 64px; resize: vertical; }

/* Comfortable / marketing density */
.hs-input-lg, .hs-textarea-lg, .hs-select-lg {
  font-size: 0.9375rem;
  padding: 10px 14px;
  border-radius: var(--r-md, var(--hs-radius));
}
.hs-textarea-lg { min-height: 96px; }

.hs-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--ink-2, var(--hs-text));
  margin-bottom: 4px;
}
.hs-label-lg {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: var(--hs-space-2);
}
.hs-field {
  display: grid;
  gap: 4px;
}

/* ============================================================
   Cards
   ============================================================ */
.hs-card {
  background: var(--panel, var(--hs-surface));
  border: 1px solid var(--hair, var(--hs-border));
  border-radius: var(--r-lg, var(--hs-radius-lg));
  padding: var(--hs-space-5);
  box-shadow: var(--shadow-sm, var(--hs-shadow-sm));
  transition: border-color var(--hs-dur) var(--hs-ease), box-shadow var(--hs-dur) var(--hs-ease);
}
.hs-card-interactive:hover {
  border-color: var(--hs-border-strong);
  box-shadow: var(--hs-shadow);
}
.hs-card-elevated { box-shadow: var(--hs-shadow); border-color: transparent; }

/* ============================================================
   Badges / Pills
   ============================================================ */
.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--hs-radius-full);
  background: var(--panel-2, var(--hs-bg-elev));
  color: var(--ink-2, var(--hs-text-muted));
  border: 1px solid var(--hair, var(--hs-border));
}
.hs-badge-aqua { background: var(--accent-tint, var(--hs-aqua)); color: var(--accent-2, var(--hs-ink)); border-color: transparent; }
.hs-badge-danger { background: var(--fail-tint, rgba(229,72,77,0.1)); color: var(--fail, var(--hs-danger)); border-color: transparent; }

/* ============================================================
   Dividers & utilities
   ============================================================ */
.hs-divider { height: 1px; background: var(--hs-border); border: 0; margin: var(--hs-space-5) 0; }

.hs-muted    { color: var(--hs-text-muted); }
.hs-subtle   { color: var(--hs-text-subtle); }
.hs-accent   { color: var(--hs-aqua); }

.hs-mono     { font-family: var(--hs-font-mono); }

/* Screen-reader only / skip link */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4, 16px);
  z-index: 10000;
  padding: var(--sp-2, 8px) var(--sp-4, 16px);
  background: var(--accent, var(--hs-aqua));
  color: var(--accent-ink, var(--hs-everglade-900));
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--r-sm, 8px);
}

.skip-link:focus {
  top: var(--sp-4, 16px);
}

/* Button naming: prefer .hs-btn + .hs-btn-primary; .hsb--* are legacy aliases */
/* Status text — non-color cues via prefix glyphs */
.hs-status.ok { color: var(--pass, var(--hs-success)); }
.hs-status.err { color: var(--fail, var(--hs-danger)); }
.hs-status.warn { color: var(--hs-warning); }
.hs-status.ok::before { content: "✓ "; font-weight: 700; }
.hs-status.err::before { content: "✕ "; font-weight: 700; }
.hs-status.warn::before { content: "! "; font-weight: 700; }

/* Focus ring helper */
.hs-focus-ring:focus-visible {
  outline: 2px solid var(--hs-aqua);
  outline-offset: 2px;
  border-radius: var(--hs-radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}