/* =================================================================
   Horizline components
   -----------------------------------------------------------------
   One component layer for the public site, the sign-in pages and the
   app. Every value is a token from tokens.css. Every component
   defines default, hover, active, focus-visible and disabled; the
   ones that start work have a loading state (aria-busy), the ones
   that take input have an error state (aria-invalid).

   Reference with every state: docs/design/components.html.
   ================================================================= */

/* ---- Base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scrollbar-gutter: stable;
  scroll-padding-top: var(--hz-header-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--hz-canvas);
  color: var(--hz-text);
  font: 400 var(--hz-type-body) var(--hz-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--hz-accent-tint); color: var(--hz-text); }
[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--hz-font-display); font-weight: 600; color: var(--hz-text); text-wrap: balance; }
h1 { font: 600 var(--hz-type-h1) var(--hz-font-display); letter-spacing: var(--hz-tracking-display); }
h2 { font: 600 var(--hz-type-h2) var(--hz-font-display); letter-spacing: var(--hz-tracking-display); }
h3 { font: 600 var(--hz-type-h3) var(--hz-font-display); }
h4, h5, h6 { font: 600 var(--hz-type-h4) var(--hz-font-display); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
strong, b { font-weight: 600; }
code, kbd, samp, pre { font-family: var(--hz-font-mono); font-size: var(--hz-size-ui); }
small { font-size: var(--hz-size-caption); }
hr { height: 1px; margin: var(--hz-space-5) 0; border: 0; background: var(--hz-border); }

/* Archivo at 24px and above is tracked in; below it is set as drawn. */
@media (min-width: 768px) {
  h3, .hz-h3 { letter-spacing: var(--hz-tracking-display); }
}

/* The type ramp as classes, for where the element is not the heading
   level the size belongs to. */
.hz-display { font: 600 var(--hz-type-display) var(--hz-font-display); letter-spacing: var(--hz-tracking-display); }
.hz-h1 { font: 600 var(--hz-type-h1) var(--hz-font-display); letter-spacing: var(--hz-tracking-display); }
.hz-h2 { font: 600 var(--hz-type-h2) var(--hz-font-display); letter-spacing: var(--hz-tracking-display); }
.hz-h3 { font: 600 var(--hz-type-h3) var(--hz-font-display); }
.hz-h4 { font: 600 var(--hz-type-h4) var(--hz-font-display); letter-spacing: 0; }
.hz-lead { font: 400 var(--hz-type-lead) var(--hz-font-body); color: var(--hz-text-muted); }
.hz-body { font: 400 var(--hz-type-body) var(--hz-font-body); }
.hz-ui { font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-caption { font: 500 var(--hz-type-caption) var(--hz-font-body); color: var(--hz-text-muted); }
.hz-muted { color: var(--hz-text-muted); }
.hz-num, .hz-money { font-variant-numeric: tabular-nums; }
.hz-machine { font-family: var(--hz-font-mono); font-size: var(--hz-size-ui); overflow-wrap: anywhere; }

/* Text rhythm: 16px after an H1 or H2, 8px after an H3 or H4, 16px
   between blocks. */
.hz-flow > * + * { margin-top: var(--hz-space-4); }
.hz-flow > :is(h1, h2, .hz-h1, .hz-h2) + * { margin-top: var(--hz-space-4); }
.hz-flow > :is(h3, h4, .hz-h3, .hz-h4) + * { margin-top: var(--hz-space-2); }
.hz-flow > * + :is(h2, .hz-h2) { margin-top: var(--hz-space-7); }
.hz-flow > * + :is(h3, .hz-h3) { margin-top: var(--hz-space-6); }
.hz-measure { max-width: var(--hz-measure); }

/* ---- Focus ------------------------------------------------------- */
:focus { outline: none; }
/* A heading or region that script moves focus to (tabindex="-1") is
   announced, not operated: it shows no ring. */
[tabindex="-1"]:focus-visible { outline: none; }
:focus-visible, [data-hz-state="focus"] {
  outline: var(--hz-focus-width) solid var(--hz-accent);
  outline-offset: var(--hz-focus-offset);
}
.hz-on-night :focus-visible, .hz-on-night:focus-visible, .hz-on-night [data-hz-state="focus"], .hz-on-night[data-hz-state="focus"] { outline-color: var(--hz-mint); }

.hz-skip {
  position: absolute; z-index: var(--hz-z-toast); top: var(--hz-space-2); left: var(--hz-space-2);
  padding: var(--hz-space-2) var(--hz-space-4);
  border-radius: var(--hz-radius);
  background: var(--hz-night); color: var(--hz-on-night);
  font: 500 var(--hz-type-ui) var(--hz-font-body);
  text-decoration: none;
  clip-path: inset(50%);
}
.hz-skip:focus-visible, .hz-skip[data-hz-state="focus"] { clip-path: none; outline-color: var(--hz-mint); }

.hz-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Links ------------------------------------------------------- */
a { color: var(--hz-accent); text-decoration: none; }
a:hover, a[data-hz-state="hover"] { color: var(--hz-accent-strong); }
/* A link inside a sentence is underlined; a link that is a control is
   not, until it is hovered. */
/* :where() keeps this rule at the weight of a bare link, so every
   component that styles its own links (crumbs, footer, contents) wins. */
:where(p, li, dd, td, label, .hz-prose) a:where(:not(.hz-btn, .hz-link--plain, .hz-nav-link, .hz-guide-link)),
a.hz-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--hz-underline-offset);
}
.hz-nav-link { color: var(--hz-text); text-decoration: none; }
.hz-nav-link:hover, .hz-nav-link[aria-current], .hz-nav-link[data-hz-state="hover"] { color: var(--hz-text); text-decoration: underline; text-underline-offset: var(--hz-underline-offset); }
.hz-on-night a { color: var(--hz-on-night); }
.hz-on-night a:hover, .hz-on-night a[data-hz-state="hover"] { color: var(--hz-mint-hover); }

/* ---- Icons ------------------------------------------------------- */
.hz-icon {
  flex: none; display: inline-block; width: var(--hz-icon); height: var(--hz-icon);
  vertical-align: middle; color: currentColor; pointer-events: none;
}
.hz-icon--sm { width: var(--hz-icon-sm); height: var(--hz-icon-sm); }
.hz-icon--lg { width: var(--hz-icon-lg); height: var(--hz-icon-lg); }

/* ---- Spinner ----------------------------------------------------- */
.hz-spinner {
  flex: none; display: inline-block; width: var(--hz-icon-sm); height: var(--hz-icon-sm);
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--hz-radius-round);
  animation: hz-spin 700ms linear infinite;
}
@keyframes hz-spin { to { rotate: 1turn; } }

/* ---- Buttons ----------------------------------------------------- */
.hz-btn {
  appearance: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hz-space-2);
  height: var(--hz-control); padding: 0 var(--hz-space-4);
  border: 1px solid transparent; border-radius: var(--hz-radius);
  background: var(--hz-night); color: var(--hz-on-night);
  font: 500 var(--hz-type-ui) var(--hz-font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--hz-dur-fast) var(--hz-ease), border-color var(--hz-dur-fast) var(--hz-ease), color var(--hz-dur-fast) var(--hz-ease);
}
.hz-btn .hz-icon { width: var(--hz-icon-sm); height: var(--hz-icon-sm); }
.hz-btn:hover, .hz-btn[data-hz-state="hover"] { background: var(--hz-night-raised); color: var(--hz-on-night); }
.hz-btn:active, .hz-btn[data-hz-state="active"] { background: var(--hz-text); }

.hz-btn--secondary { background: var(--hz-surface); color: var(--hz-text); border-color: var(--hz-border-strong); }
.hz-btn--secondary:hover, .hz-btn--secondary[data-hz-state="hover"] { background: var(--hz-sunken); color: var(--hz-text); }
.hz-btn--secondary:active, .hz-btn--secondary[data-hz-state="active"] { background: var(--hz-border); }

.hz-btn--tertiary { background: transparent; color: var(--hz-accent); }
.hz-btn--tertiary:hover, .hz-btn--tertiary[data-hz-state="hover"] { background: transparent; color: var(--hz-accent-strong); text-decoration: underline; text-underline-offset: var(--hz-underline-offset); }
.hz-btn--tertiary:active, .hz-btn--tertiary[data-hz-state="active"] { background: transparent; color: var(--hz-accent-strong); }

.hz-btn--danger { background: var(--hz-danger); color: var(--hz-on-night); }
.hz-btn--danger:hover, .hz-btn--danger[data-hz-state="hover"] { background: var(--hz-danger-strong); color: var(--hz-on-night); }
.hz-btn--danger:active, .hz-btn--danger[data-hz-state="active"] { background: var(--hz-danger-strong); }

.hz-btn--sm { height: var(--hz-control-sm); padding: 0 var(--hz-space-3); }
.hz-btn--lg { height: var(--hz-control-lg); padding: 0 var(--hz-space-5); font: 500 var(--hz-type-body) var(--hz-font-body); }
.hz-btn--lg .hz-icon { width: var(--hz-icon-sm); height: var(--hz-icon-sm); }
.hz-btn--block { display: flex; width: 100%; }
/* A tertiary action that lines up with text at the column's edge. */
.hz-btn--flush { padding-right: 0; padding-left: 0; }
.hz-btn--icon { width: var(--hz-control); padding: 0; }
.hz-btn--icon.hz-btn--sm { width: var(--hz-control-sm); }

/* On night: the primary action is mint with night text. */
.hz-on-night .hz-btn:not(.hz-btn--secondary):not(.hz-btn--tertiary):not(.hz-btn--danger) { background: var(--hz-mint); color: var(--hz-night); }
.hz-on-night .hz-btn:not(.hz-btn--secondary):not(.hz-btn--tertiary):not(.hz-btn--danger):hover, .hz-on-night .hz-btn:not(.hz-btn--secondary):not(.hz-btn--tertiary):not(.hz-btn--danger)[data-hz-state="hover"] { background: var(--hz-mint-hover); color: var(--hz-night); }
.hz-on-night .hz-btn--secondary { background: transparent; color: var(--hz-on-night); border-color: var(--hz-on-night-muted); }
.hz-on-night .hz-btn--secondary:hover, .hz-on-night .hz-btn--secondary[data-hz-state="hover"] { background: var(--hz-night-raised); color: var(--hz-on-night); }
.hz-on-night .hz-btn--tertiary { color: var(--hz-mint); }

.hz-btn:disabled, .hz-btn[aria-disabled="true"] {
  background: var(--hz-sunken); color: var(--hz-text-muted); border-color: var(--hz-border);
  cursor: not-allowed;
}
.hz-btn--tertiary:disabled, .hz-btn--tertiary[aria-disabled="true"] { background: transparent; border-color: transparent; }
/* Loading: the button keeps its width (set by HZ.busy), a spinner takes
   the icon's place, and the button ignores further clicks. */
.hz-btn[aria-busy="true"] { cursor: progress; }
.hz-btn[aria-busy="true"]:disabled { background: var(--hz-night); color: var(--hz-on-night); border-color: transparent; }
.hz-btn--secondary[aria-busy="true"]:disabled { background: var(--hz-surface); color: var(--hz-text); border-color: var(--hz-border-strong); }
.hz-btn--danger[aria-busy="true"]:disabled { background: var(--hz-danger); color: var(--hz-on-night); }
.hz-btn--tertiary[aria-busy="true"]:disabled { background: transparent; color: var(--hz-accent); }
.hz-btn[aria-busy="true"] > .hz-icon { display: none; }

/* Sign in with Google: Google's light theme (white, its outline and
   label color, the four-color mark at 18px), in the product's own type
   because Roboto is not a Horizline face. */
.hz-btn--google { background: var(--hz-surface); color: var(--hz-google-text); border-color: var(--hz-google-border); }
.hz-btn--google:hover, .hz-btn--google[data-hz-state="hover"] { background: var(--hz-sunken); color: var(--hz-google-text); }
.hz-btn--google:active, .hz-btn--google[data-hz-state="active"] { background: var(--hz-border); }
.hz-btn--google svg { flex: none; width: var(--hz-icon-sm); height: var(--hz-icon-sm); }
.hz-btn--google[aria-busy="true"]:disabled { background: var(--hz-surface); color: var(--hz-google-text); border-color: var(--hz-google-border); }
.hz-btn--google[aria-busy="true"] > svg:not(.hz-spinner) { display: none; }


/* ---- Form fields ------------------------------------------------- */
.hz-field { display: grid; gap: var(--hz-space-2); min-width: 0; }
.hz-field + .hz-field { margin-top: var(--hz-space-4); }
.hz-label { font: 500 var(--hz-type-ui) var(--hz-font-body); color: var(--hz-text); }
.hz-label__optional { font-weight: 400; color: var(--hz-text-muted); }
.hz-help { font: 400 var(--hz-type-ui) var(--hz-font-body); color: var(--hz-text-muted); }
.hz-error {
  display: flex; align-items: center; gap: var(--hz-space-2);
  font: 500 var(--hz-type-ui) var(--hz-font-body); color: var(--hz-danger);
}
.hz-error .hz-icon { width: var(--hz-icon-sm); height: var(--hz-icon-sm); }

.hz-input, .hz-select, .hz-textarea {
  display: block; width: 100%; min-width: 0;
  height: var(--hz-control); padding: 0 var(--hz-space-3);
  border: 1px solid var(--hz-border-strong); border-radius: var(--hz-radius);
  background: var(--hz-surface); color: var(--hz-text);
  font: 400 var(--hz-type-ui) var(--hz-font-body);
  transition: border-color var(--hz-dur-fast) var(--hz-ease), background-color var(--hz-dur-fast) var(--hz-ease);
}
.hz-textarea { height: auto; min-height: calc(var(--hz-control) * 2.4); padding: var(--hz-space-2) var(--hz-space-3); resize: vertical; }
.hz-select {
  appearance: none; padding-right: var(--hz-space-7);
  background: var(--hz-surface) url('/assets/hz/select-chevron.svg') no-repeat right var(--hz-space-3) center;
}
.hz-input::placeholder, .hz-textarea::placeholder { color: var(--hz-text-muted); opacity: 1; }
.hz-input:hover, .hz-select:hover, .hz-textarea:hover, .hz-input[data-hz-state="hover"], .hz-select[data-hz-state="hover"], .hz-textarea[data-hz-state="hover"] { border-color: var(--hz-text-muted); }
.hz-input:focus-visible, .hz-select:focus-visible, .hz-textarea:focus-visible, .hz-input[data-hz-state="focus"], .hz-select[data-hz-state="focus"], .hz-textarea[data-hz-state="focus"] { border-color: var(--hz-accent); outline-offset: 0; }
.hz-input:disabled, .hz-select:disabled, .hz-textarea:disabled,
.hz-input[readonly] { background: var(--hz-sunken); color: var(--hz-text-muted); border-color: var(--hz-border); cursor: not-allowed; }
.hz-input[readonly] { cursor: default; }
.hz-input[aria-invalid="true"], .hz-select[aria-invalid="true"], .hz-textarea[aria-invalid="true"] { border-color: var(--hz-danger); }
.hz-input[aria-invalid="true"]:focus-visible, .hz-select[aria-invalid="true"]:focus-visible, .hz-textarea[aria-invalid="true"]:focus-visible, .hz-input[aria-invalid="true"][data-hz-state="focus"], .hz-select[aria-invalid="true"][data-hz-state="focus"], .hz-textarea[aria-invalid="true"][data-hz-state="focus"] { outline-color: var(--hz-danger); }
.hz-input[type="search"] { padding-left: var(--hz-space-7); background: var(--hz-surface) url('/assets/hz/search.svg') no-repeat var(--hz-space-3) center; }
.hz-input[type="date"], .hz-input[type="time"] { padding-right: var(--hz-space-2); }

/* The large field: Help search, 48px with body type. */
.hz-input--lg { height: var(--hz-control-lg); font-size: var(--hz-size-body); }

/* Inputs are 16px on phones, so iOS does not zoom into them. */
@media (max-width: 767px) {
  .hz-input, .hz-select, .hz-textarea { font-size: var(--hz-size-body); }
}

/* A control with something fixed beside it: the currency on a money
   field, or the show/hide button on a password. */
.hz-affix { position: relative; display: flex; align-items: stretch; }
.hz-affix > .hz-input { flex: 1 1 auto; }
.hz-affix__prefix {
  display: inline-flex; align-items: center; padding: 0 var(--hz-space-3);
  border: 1px solid var(--hz-border-strong); border-right: 0;
  border-radius: var(--hz-radius) 0 0 var(--hz-radius);
  background: var(--hz-sunken); color: var(--hz-text-muted);
  font: 500 var(--hz-type-ui) var(--hz-font-body);
}
.hz-affix__prefix + .hz-input { border-top-left-radius: 0; border-bottom-left-radius: 0; font-variant-numeric: tabular-nums; }
.hz-affix--reveal > .hz-input { padding-right: var(--hz-space-8); }
.hz-reveal {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: var(--hz-space-1); padding: 0 var(--hz-space-3);
  border: 0; border-radius: 0 var(--hz-radius) var(--hz-radius) 0;
  background: transparent; color: var(--hz-accent);
  font: 500 var(--hz-type-ui) var(--hz-font-body); cursor: pointer;
}
.hz-reveal:hover, .hz-reveal[data-hz-state="hover"] { color: var(--hz-accent-strong); text-decoration: underline; text-underline-offset: var(--hz-underline-offset); }

/* Checkbox and radio: the browser's own control, in the accent. */
.hz-check {
  display: flex; align-items: center; gap: var(--hz-space-2);
  font: 400 var(--hz-type-ui) var(--hz-font-body); cursor: pointer;
}
.hz-check input:not(.hz-switch) { flex: none; width: var(--hz-icon-sm); height: var(--hz-icon-sm); margin: 0; accent-color: var(--hz-accent); cursor: pointer; }
.hz-check input:disabled, .hz-check input:disabled + span { cursor: not-allowed; color: var(--hz-text-muted); }

/* A checkbox or radio beside more than one line of text sits at the
   first line. */
.hz-check--top { align-items: flex-start; }
.hz-check--top input { margin-top: 2px; }
/* A short row of options: the billing cycle, a yes or no. */
.hz-options { display: flex; flex-wrap: wrap; gap: var(--hz-space-2) var(--hz-space-5); }
.hz-fieldset > * + * { margin-top: var(--hz-space-3); }

/* Choice cards: one option picked from a short list, as a radio inside a
   card (a plan, a setup answer) or as a link to the next step. */
.hz-choices { display: grid; gap: var(--hz-space-3); }
.hz-choice {
  display: flex; align-items: flex-start; gap: var(--hz-space-3);
  padding: var(--hz-space-4);
  border: 1px solid var(--hz-border-strong); border-radius: var(--hz-radius);
  background: var(--hz-surface); color: var(--hz-text);
  font: 400 var(--hz-type-ui) var(--hz-font-body); text-decoration: none; cursor: pointer;
  transition: border-color var(--hz-dur-fast) var(--hz-ease), background-color var(--hz-dur-fast) var(--hz-ease);
}
a.hz-choice { display: grid; gap: var(--hz-space-1); }
.hz-choice:hover, .hz-choice[data-hz-state="hover"] { border-color: var(--hz-text-muted); color: var(--hz-text); }
.hz-choice:has(> input:checked), .hz-choice[aria-current], .hz-choice[data-hz-state="checked"] { border-color: var(--hz-accent); background: var(--hz-accent-tint); }
.hz-choice:has(> input:focus-visible), .hz-choice[data-hz-state="focus"] { outline: var(--hz-focus-width) solid var(--hz-accent); outline-offset: var(--hz-focus-offset); }
.hz-choice:has(> input:disabled) { color: var(--hz-text-muted); cursor: not-allowed; }
.hz-choice > input { flex: none; width: var(--hz-icon-sm); height: var(--hz-icon-sm); margin: 2px 0 0; accent-color: var(--hz-accent); cursor: inherit; }
.hz-choice > input:focus-visible { outline: none; }
.hz-choice__body { display: grid; gap: var(--hz-space-1); min-width: 0; }
.hz-choice__name { font: 600 var(--hz-type-body) var(--hz-font-body); }
.hz-choice__price { font-variant-numeric: tabular-nums; }
.hz-choice__note, .hz-choice small { color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }
/* A plan to check out with: a card with its own button. */
.hz-pick { display: grid; gap: var(--hz-space-2); padding: var(--hz-space-4); border: 1px solid var(--hz-border); border-radius: var(--hz-radius); background: var(--hz-surface); }
.hz-pick.is-selected { border-color: var(--hz-accent); }
.hz-pick__name { font: 600 var(--hz-type-body) var(--hz-font-body); letter-spacing: 0; }
.hz-pick__price { font: 500 var(--hz-type-ui) var(--hz-font-body); font-variant-numeric: tabular-nums; }

/* Switch: a checkbox drawn as a track. */
.hz-switch {
  appearance: none; flex: none; position: relative;
  width: calc(var(--hz-badge) * 1.8); height: var(--hz-badge); margin: 0;
  border: 1px solid var(--hz-border-strong); border-radius: var(--hz-radius-round);
  background: var(--hz-sunken); cursor: pointer;
  transition: background-color var(--hz-dur-fast) var(--hz-ease), border-color var(--hz-dur-fast) var(--hz-ease);
}
.hz-switch::before {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: var(--hz-thumb); height: var(--hz-thumb);
  border-radius: var(--hz-radius-round); background: var(--hz-text-muted);
  transition: background-color var(--hz-dur-fast) var(--hz-ease);
}
.hz-switch:hover, .hz-switch[data-hz-state="hover"] { border-color: var(--hz-text-muted); }
.hz-switch:checked { background: var(--hz-accent); border-color: var(--hz-accent); }
.hz-switch:checked::before { translate: calc(var(--hz-badge) * .8) 0; background: var(--hz-surface); }
.hz-switch:disabled { opacity: .5; cursor: not-allowed; }

.hz-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.hz-fieldset > legend { padding: 0; margin-bottom: var(--hz-space-2); font: 500 var(--hz-type-ui) var(--hz-font-body); }
.hz-form { max-width: var(--hz-form-max); }
.hz-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hz-space-2); margin-top: var(--hz-space-5); }

/* ---- Cards and panels ------------------------------------------- */
.hz-card, .hz-panel {
  min-width: 0; padding: var(--hz-space-5);
  border: 1px solid var(--hz-border); border-radius: var(--hz-radius);
  background: var(--hz-surface);
}
.hz-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hz-space-3); margin-bottom: var(--hz-space-4); }
.hz-panel__title { font: 600 var(--hz-type-h4) var(--hz-font-display); }
.hz-card-grid { display: grid; gap: var(--hz-space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hz-col-md)), 1fr)); }
@media (max-width: 767px) {
  .hz-card, .hz-panel { padding: var(--hz-space-4); }
  .hz-card-grid { gap: var(--hz-space-4); }
}
/* A panel being refreshed keeps its content and shows a bar on top. */
.hz-panel { position: relative; }

/* ---- Tables ------------------------------------------------------ */
.hz-table-wrap {
  max-width: 100%; overflow: auto;
  border: 1px solid var(--hz-border); border-radius: var(--hz-radius);
  background: var(--hz-surface);
}
.hz-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-table caption { padding: var(--hz-space-3) var(--hz-space-4); text-align: left; font: 600 var(--hz-type-ui) var(--hz-font-body); }
.hz-table th {
  position: sticky; top: 0; z-index: 1;
  height: var(--hz-row-compact); padding: 0 var(--hz-space-3);
  border-bottom: 1px solid var(--hz-border);
  background: var(--hz-sunken); color: var(--hz-text-muted);
  font: 500 var(--hz-type-caption) var(--hz-font-body); text-align: left; white-space: nowrap;
}
.hz-table tbody th { position: static; background: var(--hz-surface); color: var(--hz-text); font: 500 var(--hz-type-ui) var(--hz-font-body); white-space: normal; }
.hz-table td { height: var(--hz-row); padding: 0 var(--hz-space-3); border-bottom: 1px solid var(--hz-border); vertical-align: middle; }
.hz-table tr:last-child > td, .hz-table tr:last-child > th { border-bottom: 0; }
.hz-table tbody tr:hover > td, .hz-table tbody tr:hover > th, .hz-table tbody tr[data-hz-state="hover"] > td, .hz-table tbody tr[data-hz-state="hover"] > th { background: var(--hz-sunken); }
.hz-table .hz-num, .hz-table td.num, .hz-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hz-table--compact td { height: var(--hz-row-compact); }

/* ---- Badges ------------------------------------------------------ */
.hz-badge {
  display: inline-flex; align-items: center; gap: var(--hz-space-1);
  height: var(--hz-badge); padding: 0 var(--hz-space-2);
  border-radius: var(--hz-radius);
  background: var(--hz-sunken); color: var(--hz-text-muted);
  font: 500 var(--hz-type-caption) var(--hz-font-body); white-space: nowrap;
}
.hz-badge--accent { background: var(--hz-accent-tint); color: var(--hz-accent); }
.hz-badge--success { background: var(--hz-success-tint); color: var(--hz-success); }
.hz-badge--warning { background: var(--hz-warning-tint); color: var(--hz-warning); }
.hz-badge--danger { background: var(--hz-danger-tint); color: var(--hz-danger); }
.hz-badge--night { background: var(--hz-night); color: var(--hz-on-night); }

/* ---- Tabs and segmented controls -------------------------------- */
.hz-tabs { position: relative; display: flex; gap: var(--hz-space-1); overflow-x: auto; scrollbar-width: none; }
.hz-tabs::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--hz-border); }
.hz-tab {
  appearance: none; flex: none; display: inline-flex; align-items: center; gap: var(--hz-space-2);
  position: relative; z-index: 1;
  height: var(--hz-control); padding: 0 var(--hz-space-4);
  border: 0; border-bottom: 2px solid transparent; border-radius: var(--hz-radius) var(--hz-radius) 0 0;
  background: transparent; color: var(--hz-text-muted);
  font: 500 var(--hz-type-ui) var(--hz-font-body); text-decoration: none; cursor: pointer;
  transition: color var(--hz-dur-fast) var(--hz-ease), border-color var(--hz-dur-fast) var(--hz-ease), background-color var(--hz-dur-fast) var(--hz-ease);
}
.hz-tab:hover, .hz-tab[data-hz-state="hover"] { color: var(--hz-text); background: var(--hz-sunken); }
.hz-tab[aria-selected="true"], .hz-tab[aria-current="page"] { color: var(--hz-accent); border-bottom-color: var(--hz-accent); }
.hz-tab:disabled { color: var(--hz-text-muted); cursor: not-allowed; opacity: .6; }
.hz-tab:focus-visible, .hz-tab[data-hz-state="focus"] { outline-offset: calc(var(--hz-focus-offset) * -1); }

.hz-seg {
  display: inline-flex; gap: var(--hz-space-1); height: var(--hz-control); padding: var(--hz-space-1);
  width: fit-content; max-width: 100%; justify-self: start;
  overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--hz-border); border-radius: var(--hz-radius); background: var(--hz-sunken);
}
.hz-seg__option {
  appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--hz-space-2);
  padding: 0 var(--hz-space-4);
  border: 1px solid transparent; border-radius: var(--hz-radius);
  background: transparent; color: var(--hz-text-muted);
  font: 500 var(--hz-type-ui) var(--hz-font-body); cursor: pointer;
  transition: color var(--hz-dur-fast) var(--hz-ease), background-color var(--hz-dur-fast) var(--hz-ease);
}
.hz-seg__option:hover, .hz-seg__option[data-hz-state="hover"] { color: var(--hz-text); }
.hz-seg__option[aria-checked="true"], .hz-seg__option[aria-pressed="true"], .hz-seg__option[aria-selected="true"] {
  background: var(--hz-surface); color: var(--hz-text); border-color: var(--hz-border);
}
.hz-seg__option:disabled { cursor: not-allowed; opacity: .6; }
.hz-seg__option:focus-visible, .hz-seg__option[data-hz-state="focus"] { outline-offset: 0; }

/* ---- Overlays: menus, popovers, dropdowns ------------------------ */
.hz-menu {
  min-width: var(--hz-menu-min); padding: var(--hz-space-1);
  border: 1px solid var(--hz-border); border-radius: var(--hz-radius);
  background: var(--hz-surface); box-shadow: var(--hz-shadow-overlay);
}
.hz-menu__item {
  appearance: none; display: flex; align-items: center; gap: var(--hz-space-2); width: 100%;
  min-height: var(--hz-control); padding: 0 var(--hz-space-3);
  border: 0; border-radius: var(--hz-radius);
  background: transparent; color: var(--hz-text);
  font: 400 var(--hz-type-ui) var(--hz-font-body); text-align: left; text-decoration: none; cursor: pointer;
}
.hz-menu__item:hover, .hz-menu__item:focus-visible, .hz-menu__item[data-hz-state="hover"], .hz-menu__item[data-hz-state="focus"] { background: var(--hz-sunken); color: var(--hz-text); }
.hz-menu__item[aria-checked="true"], .hz-menu__item[aria-current] { background: var(--hz-accent-tint); color: var(--hz-accent); }
.hz-menu__item--danger { color: var(--hz-danger); }
.hz-menu__item:disabled { color: var(--hz-text-muted); cursor: not-allowed; }
.hz-menu__sep { height: 1px; margin: var(--hz-space-1) 0; background: var(--hz-border); }
.hz-popover {
  padding: var(--hz-space-4);
  border: 1px solid var(--hz-border); border-radius: var(--hz-radius);
  background: var(--hz-surface); box-shadow: var(--hz-shadow-overlay);
}
.hz-menu[data-state], .hz-popover[data-state] {
  transition: opacity var(--hz-dur-base) var(--hz-ease), translate var(--hz-dur-base) var(--hz-ease);
}
.hz-menu[data-state="closed"], .hz-popover[data-state="closed"] { opacity: 0; translate: 0 calc(var(--hz-shift) * -.5); pointer-events: none; }

/* ---- Modal ------------------------------------------------------- */
.hz-modal {
  width: min(var(--hz-modal), calc(100% - var(--hz-space-6))); max-height: calc(100dvh - var(--hz-space-7));
  margin: auto; padding: 0;
  border: 1px solid var(--hz-border); border-radius: var(--hz-radius);
  background: var(--hz-surface); color: var(--hz-text); box-shadow: var(--hz-shadow-overlay);
}
.hz-modal--sm { width: min(var(--hz-modal-sm), calc(100% - var(--hz-space-6))); }
.hz-modal--lg { width: min(var(--hz-modal-lg), calc(100% - var(--hz-space-6))); }
.hz-modal[open] { display: flex; flex-direction: column; animation: hz-enter var(--hz-dur-base) var(--hz-ease); }
.hz-modal::backdrop { background: var(--hz-scrim); }
.hz-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--hz-space-3); padding: var(--hz-space-4) var(--hz-space-5); border-bottom: 1px solid var(--hz-border); }
.hz-modal__title { font: 600 var(--hz-type-h4) var(--hz-font-display); }
.hz-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--hz-space-5); }
.hz-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--hz-space-2); padding: var(--hz-space-4) var(--hz-space-5); border-top: 1px solid var(--hz-border); }
@keyframes hz-enter { from { opacity: 0; translate: 0 var(--hz-shift); } }

/* ---- Drawer ------------------------------------------------------ */
.hz-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: var(--hz-z-overlay);
  display: flex; flex-direction: column;
  width: min(var(--hz-drawer), 100%); height: 100dvh; max-height: none; max-width: none;
  margin: 0 0 0 auto; padding: 0;
  border: 0; border-left: 1px solid var(--hz-border); border-radius: var(--hz-radius) 0 0 var(--hz-radius);
  background: var(--hz-surface); color: var(--hz-text); box-shadow: var(--hz-shadow-overlay);
}
.hz-drawer:not([open]) { display: none; }
.hz-drawer[open] { animation: hz-drawer-enter var(--hz-dur-base) var(--hz-ease); }
.hz-drawer::backdrop { background: var(--hz-scrim); }
@keyframes hz-drawer-enter { from { opacity: 0; translate: var(--hz-shift) 0; } }
@media (max-width: 767px) {
  .hz-drawer { width: 100%; border-left: 0; border-radius: 0; }
}

/* ---- Toasts ------------------------------------------------------ */
.hz-toasts {
  position: fixed; z-index: var(--hz-z-toast); right: var(--hz-space-5); bottom: var(--hz-space-5);
  display: grid; gap: var(--hz-space-2); width: min(var(--hz-toast-w), calc(100% - var(--hz-space-6)));
  pointer-events: none;
}
.hz-toast {
  display: flex; align-items: center; gap: var(--hz-space-3); padding: var(--hz-space-3) var(--hz-space-4);
  border: 1px solid var(--hz-night-border); border-radius: var(--hz-radius);
  background: var(--hz-night); color: var(--hz-on-night); box-shadow: var(--hz-shadow-overlay);
  font: 400 var(--hz-type-ui) var(--hz-font-body); pointer-events: auto;
  animation: hz-enter var(--hz-dur-base) var(--hz-ease);
}
.hz-toast__text { flex: 1 1 auto; }
/* A toast is a night surface: its actions take the night colors. */
.hz-toast:not(.hz-toast--danger) .hz-btn--tertiary { color: var(--hz-mint); }
.hz-toast:not(.hz-toast--danger) .hz-btn--tertiary:hover { color: var(--hz-mint-hover); }
.hz-toast:not(.hz-toast--danger) :focus-visible { outline-color: var(--hz-mint); }
.hz-toast--danger { border-color: var(--hz-danger); background: var(--hz-danger-tint); color: var(--hz-text); }
.hz-toast--danger .hz-icon { color: var(--hz-danger); }
.hz-toast__close { margin-right: calc(var(--hz-space-2) * -1); }
@media (max-width: 767px) {
  .hz-toasts { right: var(--hz-space-4); left: var(--hz-space-4); bottom: calc(var(--hz-bottom-nav, 0px) + var(--hz-space-4)); width: auto; }
}

/* ---- Banners ----------------------------------------------------- */
.hz-banner {
  display: flex; align-items: flex-start; gap: var(--hz-space-3); padding: var(--hz-space-3) var(--hz-space-4);
  border: 1px solid var(--hz-accent); border-radius: var(--hz-radius);
  background: var(--hz-accent-tint); color: var(--hz-text);
  font: 400 var(--hz-type-ui) var(--hz-font-body);
}
.hz-banner > .hz-icon { color: var(--hz-accent); }
.hz-banner__body { flex: 1 1 auto; display: grid; gap: var(--hz-space-1); }
.hz-banner__title { font-weight: 600; }
.hz-banner--success { border-color: var(--hz-success); background: var(--hz-success-tint); }
.hz-banner--success > .hz-icon { color: var(--hz-success); }
.hz-banner--warning { border-color: var(--hz-warning); background: var(--hz-warning-tint); }
.hz-banner--warning > .hz-icon { color: var(--hz-warning); }
.hz-banner--danger { border-color: var(--hz-danger); background: var(--hz-danger-tint); }
.hz-banner--danger > .hz-icon { color: var(--hz-danger); }
/* On a public page a banner is read as body text, at 16px. */
.hz-banner--body { font: 400 var(--hz-type-body) var(--hz-font-body); }

/* ---- Empty states ------------------------------------------------ */
.hz-empty { display: grid; justify-items: start; gap: var(--hz-space-3); padding: var(--hz-space-6) var(--hz-space-5); }
.hz-empty__text { max-width: var(--hz-measure); color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }

/* ---- Skeletons and progress ------------------------------------- */
.hz-skeleton {
  display: block; min-height: var(--hz-space-4);
  border-radius: var(--hz-radius); background: var(--hz-sunken);
  animation: hz-pulse 1200ms var(--hz-ease) infinite alternate;
}
.hz-skeleton--text { height: var(--hz-space-3); margin: var(--hz-space-1) 0; }
.hz-skeleton--row { height: var(--hz-row); }
.hz-skeleton--title { width: 40%; height: var(--hz-space-5); color: transparent; overflow: hidden; }
.hz-skeleton + .hz-skeleton { margin-top: var(--hz-space-2); }
/* A loading placeholder that is also its own label: three lines of
   skeleton, the words kept for screen readers ("Loading the job…"). */
.hz-skeleton--lines {
  position: relative; width: 60%; height: var(--hz-space-3); min-height: 0;
  margin: var(--hz-space-2) 0 var(--hz-space-8); overflow: visible;
  color: transparent; font-size: var(--hz-size-caption); line-height: var(--hz-space-3); white-space: nowrap;
}
.hz-skeleton--lines::before, .hz-skeleton--lines::after {
  content: ''; position: absolute; left: 0; height: var(--hz-space-3);
  border-radius: var(--hz-radius); background: var(--hz-sunken);
}
.hz-skeleton--lines::before { top: var(--hz-space-5); width: 150%; }
.hz-skeleton--lines::after { top: var(--hz-space-7); width: 120%; }
@keyframes hz-pulse { from { opacity: 1; } to { opacity: .5; } }
.hz-loaded { animation: hz-fade var(--hz-dur-exit) var(--hz-ease); }
@keyframes hz-fade { from { opacity: 0; } }

.hz-progress { position: relative; height: 2px; overflow: hidden; background: var(--hz-accent-tint); }
.hz-progress__bar { position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--hz-accent); animation: hz-indeterminate 1100ms var(--hz-ease) infinite; }
.hz-progress--value .hz-progress__bar { animation: none; }
.hz-panel > .hz-progress { position: absolute; top: 0; left: 0; right: 0; border-radius: var(--hz-radius) var(--hz-radius) 0 0; }
@keyframes hz-indeterminate { from { translate: -100% 0; } to { translate: 250% 0; } }

/* ---- Avatars ----------------------------------------------------- */
.hz-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--hz-avatar); height: var(--hz-avatar);
  border-radius: var(--hz-radius-round); background: var(--hz-accent-tint); color: var(--hz-accent);
  font: 600 var(--hz-type-caption) var(--hz-font-body); text-transform: uppercase;
}
.hz-avatar--sm { width: var(--hz-avatar-sm); height: var(--hz-avatar-sm); }
.hz-avatar--lg { width: var(--hz-avatar-lg); height: var(--hz-avatar-lg); font: 600 var(--hz-type-ui) var(--hz-font-body); }

/* ---- Pagination and breadcrumbs --------------------------------- */
.hz-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hz-space-2); font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-pagination__status { margin: 0 var(--hz-space-2); color: var(--hz-text-muted); font-variant-numeric: tabular-nums; }
.hz-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hz-space-2); font: 400 var(--hz-type-ui) var(--hz-font-body); color: var(--hz-text-muted); }
.hz-crumbs ol { display: contents; list-style: none; }
.hz-crumbs li { display: inline-flex; align-items: center; gap: var(--hz-space-2); }
.hz-crumbs li + li::before { content: '/'; color: var(--hz-border-strong); }
.hz-crumbs a { color: var(--hz-text-muted); text-decoration: none; }
.hz-crumbs a:hover, .hz-crumbs a[data-hz-state="hover"] { color: var(--hz-text); text-decoration: underline; text-underline-offset: var(--hz-underline-offset); }
.hz-crumbs [aria-current] { color: var(--hz-text); }

/* ---- Accordion --------------------------------------------------- */
.hz-accordion { border-top: 1px solid var(--hz-border); }
.hz-accordion > details { border-bottom: 1px solid var(--hz-border); }
.hz-accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hz-space-4);
  min-height: var(--hz-control-lg); padding: var(--hz-space-3) 0;
  font: 600 var(--hz-type-body) var(--hz-font-body); color: var(--hz-text);
  list-style: none; cursor: pointer;
}
.hz-accordion summary::-webkit-details-marker { display: none; }
.hz-accordion summary:hover, .hz-accordion summary[data-hz-state="hover"] { color: var(--hz-accent); }
/* The chevron turns at once: only color is ever animated. */
.hz-accordion summary .hz-icon { color: var(--hz-text-muted); }
.hz-accordion details[open] > summary .hz-icon { rotate: 180deg; }
.hz-accordion summary:focus-visible, .hz-accordion summary[data-hz-state="focus"] { outline-offset: 0; }
.hz-accordion__body { padding: 0 0 var(--hz-space-5); color: var(--hz-text-muted); max-width: var(--hz-measure); }
.hz-accordion__body > * + * { margin-top: var(--hz-space-4); }

/* ---- Tooltip: icon-only buttons only ---------------------------- */
[data-hz-tooltip] { position: relative; }
[data-hz-tooltip]::after {
  content: attr(data-hz-tooltip);
  position: absolute; z-index: var(--hz-z-toast); bottom: calc(100% + var(--hz-space-2)); left: 50%;
  translate: -50% 0;
  padding: var(--hz-space-1) var(--hz-space-2);
  border-radius: var(--hz-radius); background: var(--hz-night); color: var(--hz-on-night); box-shadow: var(--hz-shadow-overlay);
  font: 500 var(--hz-type-caption) var(--hz-font-body); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--hz-dur-fast) var(--hz-ease);
}
[data-hz-tooltip]:hover::after, [data-hz-tooltip]:focus-visible::after, [data-hz-tooltip][data-hz-state="hover"]::after, [data-hz-tooltip][data-hz-state="focus"]::after { opacity: 1; }

/* ---- The legal line in the app ---------------------------------- */
.app-legal { margin: var(--hz-space-6) 0 0; color: var(--hz-text-muted); font: 400 var(--hz-type-caption) var(--hz-font-body); }
.app-legal--night { margin: 0; padding: var(--hz-space-3) var(--hz-space-5) 0; color: var(--hz-on-night-muted); }

/* ---- Lists ------------------------------------------------------- */
.hz-list { display: grid; gap: var(--hz-space-2); padding-left: var(--hz-space-5); }
.hz-list--plain { padding: 0; list-style: none; }
.hz-checklist { display: grid; align-content: start; gap: var(--hz-space-2); padding: 0; list-style: none; }
.hz-checklist li { display: flex; align-items: flex-start; gap: var(--hz-space-2); }
.hz-checklist .hz-icon { width: var(--hz-icon-sm); height: var(--hz-icon-sm); margin-top: var(--hz-space-1); color: var(--hz-accent); }

/* ---- Figures: real product screens ------------------------------ */
.hz-shot { display: grid; gap: var(--hz-space-2); }
.hz-shot img, .hz-shot picture {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hz-border); border-radius: var(--hz-radius); background: var(--hz-surface);
}
.hz-shot figcaption { font: 500 var(--hz-type-caption) var(--hz-font-body); color: var(--hz-text-muted); }

/* ---- Touch ------------------------------------------------------
   A finger needs 44px: buttons, controls, tabs and segments grow to it
   on coarse pointers (links inside running text are exempt). Last, so
   it wins over each component's own size. */
@media (pointer: coarse) {
  .hz-btn, .hz-btn--sm { min-height: var(--hz-touch); }
  .hz-btn--icon, .hz-btn--icon.hz-btn--sm { min-width: var(--hz-touch); }
  .hz-input, .hz-select { height: var(--hz-touch); }
  .hz-tab { height: var(--hz-touch); }
  .hz-seg { height: auto; }
  .hz-seg__option { min-height: var(--hz-touch); }
  .hz-check { min-height: var(--hz-touch); }
  /* The app's older controls too. !important: this is an accessibility
     floor, and those controls carry class and id rules of their own. */
  button, select, summary,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) { min-height: var(--hz-touch) !important; }
  button { min-width: var(--hz-touch) !important; }
  a { min-height: var(--hz-touch); }
}
/* On a phone every field is 16px, so the browser does not zoom into it
   (!important for the same reason as above). */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: var(--hz-size-body) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .hz-spinner { animation: hz-spin 1400ms linear infinite !important; }
}