/* ============================================================
   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

   Element rules stay on Handshake surfaces. The embed widget injects this
   file onto customer pages; a bare `a` / `body` / `*` selector restyles the
   host. First-party pages put .surface-user or .surface-admin on <body>.
   The chat dock also carries .surface-user.

   Use :where() for the surface scope — :is() would score 0-1-1 and beat every
   single-class admin/workspace control (nav items, ghost buttons, lockups).
   ============================================================ */
:where(.surface-user, .surface-admin),
:where(.surface-user, .surface-admin) *,
:where(.surface-user, .surface-admin) *::before,
:where(.surface-user, .surface-admin) *::after {
  box-sizing: border-box;
}

html:has(.surface-user),
html:has(.surface-admin) {
  -webkit-text-size-adjust: 100%;
}

:where(.surface-user, .surface-admin) {
  font-family: var(--hs-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--hs-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

body.surface-user,
body.surface-admin {
  margin: 0;
  background: var(--hs-bg);
}

:where(.surface-user, .surface-admin)::selection,
:where(.surface-user, .surface-admin) ::selection {
  background: var(--hs-aqua);
  color: var(--hs-ink);
}

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

:where(.surface-user, .surface-admin) p { margin: 0 0 var(--hs-space-4); color: var(--hs-text); }
:where(.surface-user, .surface-admin) 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);
}

:where(.surface-user, .surface-admin) a {
  color: var(--hs-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hs-aqua);
  transition: opacity var(--hs-dur) var(--hs-ease);
}
:where(.surface-user, .surface-admin).dark a,
:where(.surface-user, .surface-admin)[data-theme="dark"] a,
[data-theme="dark"] :where(.surface-user, .surface-admin) a,
.dark :where(.surface-user, .surface-admin) a {
  color: var(--hs-text);
}
/* Behind a hover capability query on purpose. A tap leaves :hover on the element
   until something else is tapped, so on a phone this dimmed whatever you last
   touched and left it dimmed — a link parked at 70% reads as a grey third state
   nobody chose, and on the dock it was the icon the founder saw go grey and stay
   grey. :active gives touch the same feedback and clears on release. */
@media (hover: hover) and (pointer: fine) {
  :where(.surface-user, .surface-admin) a:hover { opacity: 0.7; }
}
:where(.surface-user, .surface-admin) a:active { opacity: 0.7; }

/* Nav chrome owns its own states — the dock swaps a stroke icon for a filled one,
   the sidebar paints a pill — and a blanket dim fights both. Two classes deep, so
   it wins over the rule above wherever it lands in the cascade. */
:where(.surface-user, .surface-admin)
  :is(.hs-portal-seg, .hs-portal-footer-nav, .hs-adm-footer-nav) a:hover,
:where(.surface-user, .surface-admin)
  :is(.hs-portal-seg, .hs-portal-footer-nav, .hs-adm-footer-nav) a:active {
  opacity: 1;
}
/* Nav chrome is a hit target, not a body hyperlink. */
:where(.surface-user, .surface-admin) a:is(
  .hs-lockup,
  .hs-portal-brand,
  .ws-mobile-topbar__brand,
  .hs-adm-navitem,
  .hs-adm-btn,
  .hs-adm-client-bar__back,
  .hs-admin-mode-banner__back
) {
  border-bottom: none;
}
:where(.surface-user, .surface-admin) a:is(
  .hs-lockup,
  .hs-portal-brand,
  .ws-mobile-topbar__brand,
  .hs-adm-navitem,
  .hs-adm-client-bar__back,
  .hs-admin-mode-banner__back
) {
  color: inherit;
}
:where(.surface-user, .surface-admin) a:is(
  .hs-lockup,
  .hs-portal-brand,
  .ws-mobile-topbar__brand,
  .hs-adm-navitem,
  .hs-adm-btn,
  .hs-adm-client-bar__back,
  .hs-admin-mode-banner__back
):hover {
  opacity: 1;
}

:where(.surface-user, .surface-admin) :where(code, kbd, samp) { font-family: var(--hs-font-mono); font-size: 0.9em; }
:where(.surface-user, .surface-admin) 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 and .sgc--sm used to live here and set `height` on the button.
   Both were dead: --lg was never used by any markup, and --sm was used by nine
   sites but lost every time — the bridge's `min-height` at (0,3,0) clamps a
   `height` set at (0,1,1), so every "small" strip rendered at the full 38px
   cell. The size ladder is in design-system/css/hs-bridge-components.css now,
   driven by --hs-seg-cell / --hs-seg-pad / --hs-seg-size, where a variant
   cannot quietly lose to the rule it is trying to vary. */

/**
 * 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(--hs-border-field-focus, #606963);
  box-shadow: none;
}
.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-fg-placeholder, 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 */
.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;
}

/* 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;
  }
}