/* GENERATED from design/shared/hs-ui.css by design/sync.mjs — do not edit here. */
/* Hidden Systems UI kit — the HIG pieces every tool shares (design/README.md).
   Source of truth: design/shared/hs-ui.css. Tools get a copy via
   `node design/sync.mjs`; edit here, never in a tool's copy.

   iOS 26 look (decided 2026-10-28): controls float as translucent glass over
   the content — round glass buttons in the nav bar, a glass capsule tab bar
   above the home indicator — with the iOS 17/18 numbers (44 pt targets, the
   type ladder, 17 pt bar text) where 26 didn't change them. */

:root {
  --hs-tint: #e29a4d; /* the one tint, on tappable things only */
  --hs-on-tint: #1e1d1b; /* text on a tint fill: 7.2:1 */
  --hs-danger: #ff453a; /* systemRed: 4.9:1 on paper */
  --hs-label: #e8e5df;
  --hs-secondary: #9a948a;
  --hs-separator: rgba(232, 229, 223, 0.14);
  --hs-surface: #26241f; /* sheets, menus: elevated surfaces step lighter */
  --hs-surface-2: #302d27;
  --hs-glass: rgba(52, 49, 43, 0.72); /* ~72% like UIKit bars; 0.55 let text read through */
  --hs-glass-strong: rgba(58, 55, 48, 0.78);
  --hs-glass-edge: rgba(255, 255, 255, 0.1);
  --hs-glass-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.7);
  --hs-glass-blur: blur(20px) saturate(1.8);
  --hs-bar-h: 52px;
  /* Room above the bar and below the tab bar. The safe areas cover phones;
     the minimums are for screens without them (desktop, Safari's own
     chrome), where the bar sat 4px from the top edge (Andrew, 2026-10-28). */
  --hs-top: max(env(safe-area-inset-top), 12px);
  --hs-bottom: max(20px, calc(env(safe-area-inset-bottom) - 8px));
  --hs-ease: cubic-bezier(0.32, 0.72, 0, 1); /* iOS sheet curve */
  /* Content column the large title lines up with; tools with a narrower
     reading column override it (Recite: 38rem + its padding). */
  --hs-content-max: 72rem;
  /* The one side margin: 16 pt on phones, 20 on iPad (README §2). Bars,
     large titles and every page's content use it, so edges line up. */
  --hs-gutter: 16px;
  --hs-ui: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  /* Fills and presses, tokenised so a light theme can swap them. */
  --hs-fill: rgba(118, 118, 128, 0.24); /* tertiarySystemFill, dark */
  --hs-press: rgba(255, 255, 255, 0.08);
  --hs-press-soft: rgba(255, 255, 255, 0.06);
  --hs-thumb: rgba(255, 255, 255, 0.2); /* segmented thumb, switch knob */
  --hs-placeholder: #a8a298;
  --hs-grabber: rgba(232, 229, 223, 0.3);
  --hs-menu-gap: rgba(0, 0, 0, 0.22);
  --hs-bar-backing: rgba(30, 29, 27, 0.95);
  --hs-bar-clear: rgba(30, 29, 27, 0);
  --hs-glass-hi: rgba(255, 255, 255, 0.08);
  --hs-danger-fill: rgba(255, 69, 58, 0.12);
  --hs-danger-text: #ff6961; /* 5.2:1 on its tint */
  --hs-skel: var(--hs-press-soft);
  --hs-backdrop: rgba(0, 0, 0, 0.45);
}

/* Light theme: every tool is dark only except Charts, which has a daylight
   theme (data-theme="light" on <html>). iOS light values on the warm paper. */
:root[data-theme="light"] {
  --hs-tint: #8a5a12; /* Charts' light accent: 5.6:1 on paper, white on it 5.9:1 */
  --hs-on-tint: #ffffff;
  --hs-danger: #d70015; /* systemRed, light, accessible */
  --hs-label: #1c1b1a;
  --hs-secondary: #6f6a61;
  --hs-separator: rgba(60, 60, 67, 0.2);
  --hs-surface: #ffffff;
  --hs-surface-2: #f2efe9;
  --hs-glass: rgba(255, 253, 249, 0.72);
  --hs-glass-strong: rgba(255, 253, 249, 0.82);
  --hs-glass-edge: rgba(0, 0, 0, 0.08);
  --hs-glass-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.25);
  --hs-fill: rgba(118, 118, 128, 0.12);
  --hs-press: rgba(0, 0, 0, 0.06);
  --hs-press-soft: rgba(0, 0, 0, 0.04);
  --hs-thumb: #ffffff;
  --hs-placeholder: #66615a; /* 5:1 on the light field fill */
  --hs-grabber: rgba(28, 27, 26, 0.25);
  --hs-menu-gap: rgba(0, 0, 0, 0.06);
  --hs-bar-backing: rgba(250, 248, 244, 0.95);
  --hs-bar-clear: rgba(250, 248, 244, 0);
  --hs-glass-hi: rgba(255, 255, 255, 0.7);
  --hs-danger-fill: rgba(215, 0, 21, 0.08);
  --hs-danger-text: #d70015;
  --hs-skel: rgba(0, 0, 0, 0.07);
  --hs-backdrop: rgba(0, 0, 0, 0.25);
}

/* ---- Glass ------------------------------------------------------------- */
.hs-glass {
  background: var(--hs-glass);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  backdrop-filter: var(--hs-glass-blur);
  border: 0.5px solid var(--hs-glass-edge);
  box-shadow: inset 0 1px 0 var(--hs-glass-hi), var(--hs-glass-shadow);
}
@media (prefers-reduced-transparency: reduce) {
  .hs-glass,
  .hs-navbar,
  .hs-tabbar,
  .hs-menu,
  .hs-sheet,
  .hs-action-group {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: var(--hs-surface) !important;
  }
}

/* ---- Navigation bar ------------------------------------------------------
   Fixed to the top. The bar itself is only a soft fade so content scrolls
   away under it; the buttons are the glass. */
.hs-navbar {
  position: fixed;
  inset: 0 0 auto 0;
  /* Above the tab bar (40): a menu's scrim lives inside the bar's stacking
     context, and at 40 the tab bar stayed tappable under an open menu. */
  z-index: 50;
  padding-top: var(--hs-top);
  font-family: var(--hs-ui);
  pointer-events: none;
}
.hs-navbar::before {
  content: "";
  position: absolute;
  inset: 0 0 -18px 0;
  /* Solid to the bar's edge, then a short fade: text scrolling under the
     bar must not read through behind the title. */
  background: linear-gradient(to bottom, var(--hs-bar-backing) 0, var(--hs-bar-backing) calc(100% - 18px), var(--hs-bar-clear) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
  pointer-events: none;
}
.hs-navbar-row {
  position: relative;
  display: grid;
  /* Equal side columns keep the title centred on the screen; each side is
     at least as wide as its buttons and the title gives way first, so a wide
     trailing control never gets squeezed by the (invisible) large-mode title. */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center;
  gap: 8px;
  height: var(--hs-bar-h);
  /* The same column as the large title and the page, so on a wide screen
     Home and the trailing buttons sit over the content, not at the window's
     edges (Andrew, 2026-10-28). */
  max-width: var(--hs-content-max);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 max(var(--hs-gutter), env(safe-area-inset-right)) 0 max(var(--hs-gutter), env(safe-area-inset-left));
}
.hs-navbar-lead,
.hs-navbar-trail {
  /* At least a button's width each side, so a long title stays centred
     even when one side is empty. */
  min-width: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.hs-navbar-trail {
  justify-content: flex-end;
}
.hs-navbar-title {
  min-width: 0;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  color: var(--hs-label);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.hs-navbar-title.is-on {
  opacity: 1;
  transform: none;
}
.hs-navbar-spacer {
  height: calc(var(--hs-top) + var(--hs-bar-h));
}

/* Large title: 34 bold, under the bar, collapses into the inline title as it
   scrolls away (NavBar watches it). Content typography (Literata) — an
   approved deviation. */
.hs-largetitle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  /* Full width even as a flex item, where auto margins would shrink-wrap it. */
  width: 100%;
  box-sizing: border-box;
  max-width: var(--hs-content-max);
  margin: 0 auto;
  /* Room between the bar's buttons and the title (Andrew: "cramped"). */
  padding: 14px max(var(--hs-gutter), env(safe-area-inset-right)) 10px max(var(--hs-gutter), env(safe-area-inset-left));
}
.hs-largetitle h1 {
  margin: 0;
  font-family: "Literata", Charter, "Iowan Old Style", Georgia, serif;
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hs-label);
  /* A long title wraps once at most, then ellipsizes. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 600px) {
  :root {
    --hs-gutter: 20px;
  }
}

/* Bar buttons: 44 pt round glass for an icon, a capsule for a word. */
.hs-barbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--hs-ui);
  font-size: 17px;
  line-height: 1;
  color: var(--hs-label);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--hs-ease), background-color 160ms ease;
}
.hs-barbtn.is-icon {
  width: 44px;
  padding: 0;
}
/* Icons inside full-size buttons sit at the 17 pt text size. */
.hs-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.hs-barbtn svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.hs-barbtn:active {
  transform: scale(0.94);
}
.hs-barbtn.is-prominent {
  background: var(--hs-tint);
  border-color: transparent;
  color: var(--hs-on-tint);
  font-weight: 600;
}
.hs-barbtn.is-on {
  color: var(--hs-tint);
}
/* A toggle that is on reads by its fill, not its text colour alone. */
.hs-barbtn.is-on:not(.is-prominent) {
  background: color-mix(in srgb, var(--hs-tint) 14%, var(--hs-glass)); /* 14%: Lyrics text keeps 4.5:1 on it */
  border-color: color-mix(in srgb, var(--hs-tint) 45%, transparent);
}
.hs-barbtn.is-prominent:disabled {
  /* Disabled Add/Save: iOS gray, not a muddy half-tint. */
  background: var(--hs-fill);
  color: var(--hs-secondary);
  opacity: 1;
}
.hs-barbtn:disabled {
  opacity: 0.45;
  cursor: default;
}
/* Several trailing buttons share one capsule, as in iOS 26. */
.hs-bargroup {
  display: inline-flex;
  align-items: center;
  height: 44px;
  border-radius: 999px;
}
/* A … menu inside the group drops from the capsule's right edge. */
.hs-bargroup {
  position: relative;
}
.hs-bargroup .hs-menu-wrap {
  position: static;
}
/* Not `>`: the … button sits inside its .hs-menu-wrap. */
.hs-bargroup .hs-barbtn {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hs-barbtn .hs-home-glyph {
  width: 20px;
  height: 20px;
}

/* ---- The home-screen app's first frame ---------------------------------
   iOS opens a home-screen web app a status bar's height short (793 of 852pt
   on Andrew's iPhone) and grows it to the full screen only once the page is
   taller than that. Memorize's home and the launcher never were, so their
   bottom 59pt stayed undrawn and the tab bar sat that much too high; Stats
   came right a second in, when its data made it tall (viewport test,
   2026-10-28). A full-screen floor makes every page tall enough at once;
   .hs-standalone is set before the first paint (StandaloneFlag; the
   launcher's standalone.js). */
:root.hs-standalone body {
  min-height: 100lvh;
}

/* ---- Docked to the bottom -------------------------------------------------
   Anything fixed to the foot of the screen (tab bar, toolbars, toasts) takes
   .hs-dock and sets --hs-dock to its gap from the bottom edge. */
.hs-dock {
  bottom: var(--hs-dock, var(--hs-bottom));
}

/* ---- Tab bar -------------------------------------------------------------
   A glass capsule floating above the home indicator: the app's sections,
   icon over label, the current one tinted on a lifted pill. */
.hs-tabbar {
  position: fixed;
  left: 50%;
  z-index: 40;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  width: min(calc(100vw - 32px), 360px);
  padding: 4px;
  border-radius: 999px;
  font-family: var(--hs-ui);
}
.hs-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  border-radius: 999px;
  color: var(--hs-label);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--hs-ease);
}
.hs-tab svg {
  width: 25px;
  height: 25px;
}
.hs-tab:active {
  transform: scale(0.95);
}
.hs-tab.is-on {
  color: var(--hs-tint);
  background: var(--hs-press);
}
/* Pages with a tab bar pad their foot clear of it. */
.hs-has-tabbar {
  padding-bottom: calc(var(--hs-bottom) + 62px + 24px);
}

/* ---- Pull-down menu (the `…` button) ------------------------------------ */
.hs-menu-wrap {
  position: relative;
}
.hs-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: max-content; /* long items stay on one line where they fit */
  min-width: 250px;
  max-width: calc(100vw - 32px);
  padding: 6px 0;
  border-radius: 18px;
  background: var(--hs-glass-strong);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  backdrop-filter: var(--hs-glass-blur);
  border: 0.5px solid var(--hs-glass-edge);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8);
  font-family: var(--hs-ui);
  transform-origin: top right;
  animation: hs-menu-in 220ms var(--hs-ease) both;
}
.hs-menu.is-left {
  right: auto;
  left: 0;
  transform-origin: top left;
}
@keyframes hs-menu-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
}
.hs-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 17px;
  line-height: 22px;
  color: var(--hs-label);
  cursor: pointer;
}
.hs-menu-item:active,
.hs-menu-item:hover {
  background: var(--hs-press-soft);
}
.hs-menu-item .hs-menu-check {
  width: 18px;
  flex: none;
  color: var(--hs-label);
}
.hs-menu-item .hs-menu-label {
  flex: 1;
}
.hs-menu-item svg.hs-menu-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--hs-label);
}
.hs-menu-item.is-destructive,
.hs-menu-item.is-destructive svg.hs-menu-icon {
  color: var(--hs-danger);
}
/* Groups in a menu are split by a thick separator, as in iOS. */
.hs-menu-sep {
  height: 8px;
  margin: 6px 0;
  background: var(--hs-menu-gap);
}
.hs-menu.is-closing {
  animation: hs-menu-out 180ms var(--hs-ease) forwards;
  pointer-events: none;
}
@keyframes hs-menu-out {
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}
.hs-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  /* A drag outside an open menu dismisses it; it never scrolls the page. */
  touch-action: none;
}

/* ---- Sheet ---------------------------------------------------------------
   Rises from the bottom on a phone (grabber, swipe down to dismiss); a
   centred card on wide screens. */
.hs-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--hs-ui);
}
.hs-sheet-backdrop {
  /* Fixed, not absolute: the root shrinks to the space above the keyboard,
     and the dimming must still cover the whole screen. */
  position: fixed;
  inset: 0;
  background: var(--hs-backdrop);
  opacity: 0;
  transition: opacity 320ms ease;
}
.hs-sheet-root.is-open .hs-sheet-backdrop {
  opacity: 1;
}
.hs-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  /* --hs-vvh: the visible height (above the keyboard), set by Sheet.tsx. */
  max-height: calc(var(--hs-vvh, 100dvh) - var(--hs-top) - 12px);
  border-radius: 28px 28px 0 0;
  background: var(--hs-surface);
  border-top: 0.5px solid var(--hs-glass-edge);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.7);
  transform: translateY(100%);
  transition: transform 420ms var(--hs-ease);
}
.hs-sheet-root.is-open .hs-sheet {
  transform: translateY(0);
}
.hs-sheet.is-large {
  height: calc(var(--hs-vvh, 100dvh) - var(--hs-top) - 12px);
}
@media (min-width: 641px) {
  /* The centred card on wide screens: tall, not full-bleed. */
  .hs-sheet.is-large {
    height: min(760px, calc(var(--hs-vvh, 100dvh) - 80px));
  }
}
.hs-sheet.is-dragging {
  transition: none;
}
.hs-sheet-grab {
  flex: none;
  padding: 6px 0 2px;
  touch-action: none;
  cursor: grab;
}
.hs-sheet-grabber {
  width: 36px;
  height: 5px;
  margin: 0 auto;
  border-radius: 3px;
  background: var(--hs-grabber);
}
.hs-sheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 2px 16px 6px;
  touch-action: none;
}
.hs-sheet-head .hs-sheet-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  color: var(--hs-label);
  text-align: center;
}
.hs-sheet-head .hs-sheet-trail {
  display: flex;
  justify-content: flex-end;
}
.hs-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px max(20px, calc(env(safe-area-inset-bottom) + 8px));
}
/* Keyboard up: no home-indicator padding to clear right above the keys. */
.hs-sheet-root.has-kb .hs-sheet-body {
  padding-bottom: 20px;
}
@media (min-width: 641px) {
  .hs-sheet-root {
    align-items: center;
    /* The centred card glides with the keyboard rather than jumping. */
    transition: top 250ms var(--hs-ease), height 250ms var(--hs-ease);
  }
  .hs-sheet {
    border-radius: 24px;
    border: 0.5px solid var(--hs-glass-edge);
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform 320ms var(--hs-ease), opacity 220ms ease;
  }
  .hs-sheet-root.is-open .hs-sheet {
    transform: none;
    opacity: 1;
  }
  .hs-sheet-grab {
    display: none;
  }
  .hs-sheet-head {
    padding-top: 12px;
  }
}

/* ---- Action sheet ------------------------------------------------------- */
.hs-action-root {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--hs-ui);
}
.hs-action-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 0 8px max(8px, env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 380ms var(--hs-ease);
}
.hs-action-root.is-open .hs-action-panel {
  transform: none;
}
.hs-action-group {
  overflow: hidden;
  border-radius: 14px;
  background: var(--hs-glass-strong);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  backdrop-filter: var(--hs-glass-blur);
}
.hs-action-group + .hs-action-group {
  margin-top: 8px;
}
.hs-action-head {
  padding: 14px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  color: var(--hs-secondary);
  border-bottom: 0.5px solid var(--hs-separator);
}
.hs-action-head strong {
  display: block;
  font-weight: 600;
}
.hs-action-btn {
  display: block;
  width: 100%;
  min-height: 57px;
  border: 0;
  background: none;
  font-size: 20px;
  color: var(--hs-tint);
  cursor: pointer;
}
.hs-action-btn + .hs-action-btn {
  border-top: 0.5px solid var(--hs-separator);
}
.hs-action-btn:active {
  background: var(--hs-press);
}
.hs-action-btn.is-destructive {
  color: var(--hs-danger);
}
.hs-action-btn.is-cancel {
  font-weight: 600;
}

/* ---- Search field ------------------------------------------------------- */
.hs-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  border-radius: 10px;
  background: var(--hs-fill); /* tertiarySystemFill, dark */
  font-family: var(--hs-ui);
}
.hs-search svg {
  position: absolute;
  left: 8px;
  width: 17px;
  height: 17px;
  color: var(--hs-secondary);
  pointer-events: none;
}
.hs-search input {
  width: 100%;
  height: 100%;
  padding: 0 30px 0 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 17px;
  color: var(--hs-label);
  outline: none;
}
/* Lighter than --hs-secondary: on the gray fill that was 4.2:1. */
.hs-search input::placeholder {
  color: var(--hs-placeholder);
}
.hs-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.hs-search-clear {
  position: absolute;
  right: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--hs-secondary);
  cursor: pointer;
}
/* 28 pt to look at, 44 to the finger. */
.hs-search-clear::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.hs-search-clear svg {
  position: static;
  width: 16px;
  height: 16px;
}

/* ---- Buttons -------------------------------------------------------------
   Large (50 pt, 12 radius): filled = the one primary; gray = secondary. */
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  font-family: var(--hs-ui);
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap; /* a button label never wraps to two lines */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--hs-ease), opacity 160ms ease, background-color 160ms ease;
}
.hs-btn:active {
  transform: scale(0.97);
}
.hs-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.hs-btn-filled {
  background: var(--hs-tint);
  color: var(--hs-on-tint);
}
.hs-btn-filled:disabled {
  /* iOS gray, not a muddy half-tint (same as a disabled prominent bar button). */
  background: var(--hs-fill);
  color: var(--hs-secondary);
  opacity: 1;
}
.hs-btn-gray {
  background: var(--hs-fill);
  color: var(--hs-label);
}
.hs-btn-plain {
  min-height: 44px;
  padding: 0 12px;
  background: none;
  color: var(--hs-tint);
  font-weight: 400;
}
/* Red on a red tint: #ff6961 keeps 5.2:1 (systemRed was 4.1 here). */
.hs-btn-destructive {
  background: var(--hs-danger-fill);
  color: var(--hs-danger-text);
}

/* ---- Filter chips (scrolling row) --------------------------------------- */
.hs-chips {
  display: flex;
  gap: 8px;
  /* Sideways only: the chips' 44 pt touch areas reach 1 px past a 4 px
     padding, and with overflow-y left to auto the row scrolled (wobbled)
     vertically under the finger. Hidden on y, 5 px of padding so the
     touch areas still fit inside. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* margin-inline, not the shorthand: the shorthand zeroed the margin-top a
     page sets, and the chips touched the search field above. */
  margin-inline: calc(-1 * var(--hs-gutter));
  padding: 5px var(--hs-gutter);
  font-family: var(--hs-ui);
}
.hs-chips::-webkit-scrollbar {
  display: none;
}
.hs-chip {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: var(--hs-fill);
  font-size: 15px;
  color: var(--hs-label);
  cursor: pointer;
  /* 34 pt visible, 44 pt to the finger. */
  position: relative;
}
.hs-chip::after {
  content: "";
  position: absolute;
  inset: -5px -2px;
}
.hs-chip.is-on {
  background: var(--hs-label);
  color: var(--hs-on-tint);
  font-weight: 600;
}

/* Reduce Motion: no slides or springs, but no hard cuts either — sheets and
   action sheets cross-fade in place (README §8). */
@media (prefers-reduced-motion: reduce) {
  .hs-navbar-title,
  .hs-barbtn,
  .hs-tab,
  .hs-btn {
    transition: none !important;
  }
  .hs-sheet,
  .hs-action-panel {
    transform: none !important;
    opacity: 0;
    transition: opacity 200ms linear !important;
  }
  .hs-sheet-root.is-open .hs-sheet,
  .hs-action-root.is-open .hs-action-panel {
    opacity: 1;
  }
}

/* No sticky hover after a tap on touch screens. */
@media (hover: hover) {
  .hs-barbtn:hover {
    background-color: var(--hs-press);
  }
  .hs-tab:not(.is-on):hover {
    background: var(--hs-press-soft);
  }
}

.hs-menu-check svg {
  width: 18px;
  height: 18px;
}

.hs-menu-chev {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.7;
}

/* ---- Segmented control ---------------------------------------------------
   iOS: a 32 pt gray track, 9 pt corners, the chosen segment raised on a
   lighter fill; 13 pt labels, semibold when chosen. The touch area reaches
   44 pt above and below. */
.hs-segmented {
  display: flex;
  height: 32px;
  padding: 2px;
  gap: 2px;
  border-radius: 9px;
  background: var(--hs-fill);
  font-family: var(--hs-ui);
}
.hs-segment {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  font-size: 13px;
  line-height: 18px;
  color: var(--hs-label);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease;
}
.hs-segment::after {
  content: "";
  position: absolute;
  inset: -8px 0;
}
.hs-segment.is-on {
  background: var(--hs-thumb);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .hs-segment {
    transition: none;
  }
}

.hs-menu-text {
  font-size: 17px;
}

/* ---- Touch: instant feedback, no zoom, no selection --------------------- */
.hs-btn,
.hs-barbtn,
.hs-tab,
.hs-segment,
.hs-menu-item,
.hs-chip,
.hs-action-btn {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.hs-segment:not(.is-on):active {
  background: var(--hs-press);
}
.hs-chip:active {
  opacity: 0.7;
}
.hs-btn-plain:active {
  opacity: 0.5;
}

/* Segmented: the chosen segment is one thumb that slides (iOS), not a
   background that jumps. Segmented.tsx sets --i and --n. */
.hs-segmented {
  position: relative;
  isolation: isolate;
}
.hs-segment.is-on {
  background: none;
  box-shadow: none;
}
.hs-segmented-thumb {
  position: absolute;
  z-index: -1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px - (var(--n) - 1) * 2px) / var(--n));
  border-radius: 7px;
  background: var(--hs-thumb);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateX(calc(var(--i) * (100% + 2px)));
  transition: transform 260ms var(--hs-ease);
}
@media (min-width: 641px) {
  .hs-segmented {
    max-width: 400px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-segmented-thumb {
    transition: none;
  }
  .hs-menu.is-closing {
    animation: hs-menu-fade 120ms linear forwards;
  }
  .hs-menu {
    animation: hs-menu-fade-in 120ms linear both;
  }
}
@keyframes hs-menu-fade {
  to {
    opacity: 0;
  }
}
@keyframes hs-menu-fade-in {
  from {
    opacity: 0;
  }
}

/* ---- Collapse: height in/out (Collapse.tsx) ----------------------------- */
.hs-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 340ms var(--hs-ease), opacity 220ms ease;
}
.hs-collapse.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.hs-collapse > div {
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .hs-collapse {
    transition: opacity 200ms linear;
  }
}

/* Content that swaps in place (a tab's view, a mode change) fades in. */
.hs-fade-in {
  animation: hs-fade-in 180ms ease both;
}
@keyframes hs-fade-in {
  from {
    opacity: 0;
  }
}
/* The way out: a toast or note fades before it unmounts. */
.hs-fade-out {
  animation: hs-fade-out 200ms ease forwards;
}
@keyframes hs-fade-out {
  to {
    opacity: 0;
  }
}

/* ---- Empty / error states (EmptyState.tsx) ------------------------------ */
.hs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px 24px;
  text-align: center;
  font-family: var(--hs-ui);
}
.hs-empty-icon {
  width: 44px;
  height: 44px;
  color: var(--hs-secondary);
}
.hs-empty-title {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  color: var(--hs-label);
}
.hs-empty-line {
  margin: 4px 0 0;
  max-width: 18rem;
  font-size: 15px;
  line-height: 20px;
  color: var(--hs-secondary);
}
.hs-empty-action {
  margin-top: 24px;
  min-width: 10rem;
}

/* ---- Skeleton blocks ----------------------------------------------------- */
/* The default corner has no specificity, so a rounded-* utility on the
   block always wins whatever order the stylesheets load in. */
:where(.hs-skel) {
  border-radius: 6px;
}
.hs-skel {
  background: var(--hs-skel);
  animation: hs-skel 1.4s ease-in-out infinite;
}
@keyframes hs-skel {
  50% {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-skel {
    animation: none;
  }
}

/* ---- Haptic tap target (components/HapticTap.tsx) --------------------------
   An invisible native switch over its control: the finger lands on it, iOS
   plays the system haptic as it toggles. Opacity 0, not display:none or
   appearance:none, so it is still a real switch under the finger. */
.hs-btn,
.hs-barbtn,
.hs-action-btn {
  position: relative;
}
.hs-haptic {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.hs-haptic:disabled {
  pointer-events: none;
}