/*
  Ghost Zero Sports H1 component styles.

  Source: docs/design/H1-STYLE-GUIDE.md and the reviewed boards. Reference for builders:
  docs/design/H1-DESIGN-SYSTEM.md (every class, the JSX that emits it, and where it came from).

  Rules this file keeps (checked by test/h1-css-lint.test.ts):
  - Every selector starts with .h1-, .h- or .checker. Nothing styles a bare element or a v1
    class, so loading this file next to app.css changes nothing on a page that uses no H1 class.
  - Square. No border-radius above 0. No blur shadows: only inset rules and the two hard shapes
    from guide section 3 (live-dot ring, popup menu offset). No filter, no blend modes.
  - Nothing under 12px. Every interactive class sets min-height 44px or more.
  - Phone first. Desktop at min-width 1024px.

  Surfaces. A component takes its colors from the surface it sits in, through the --h1-*
  custom properties below. .h1-public (night page) and .h1-admin (paper page) are body
  classes. .h1-night and .h1-paper are sections or panels inside a page. Every H1 component
  must sit inside one of the four. Values only ever come from tokens.css (--gzs-*).
*/

/* ------------------------------------------------------------------------------------------
   1. Surfaces
   ------------------------------------------------------------------------------------------ */

.h1-night,
.h1-public,
.h1-needs-card,
.h1-header,
.h1-appheader,
.h1-backheader,
.h1-gzfoot {
  --h1-fg: var(--gzs-text-on-night);
  --h1-fg-strong: var(--gzs-text-headline-night);
  --h1-fg-bright: var(--gzs-text-bright);
  --h1-fg-body: var(--gzs-text-bright);
  --h1-fg-soft: var(--gzs-text-soft-night);
  --h1-fg-2: var(--gzs-text-secondary-night);
  --h1-line: var(--gzs-hairline);
  --h1-row-line: var(--gzs-hairline);
  --h1-line-strong: var(--gzs-border-strong);
  --h1-control: var(--gzs-control);
  --h1-card-bg: var(--gzs-raised);
  --h1-card-border: var(--gzs-hairline);
  --h1-input-bg: var(--gzs-night);
  --h1-input-fg: var(--gzs-text-on-night);
  --h1-input-border: var(--gzs-control);
  --h1-placeholder: var(--gzs-text-secondary-night);
  --h1-outline: var(--gzs-text-on-night);
  --h1-btn-bg: transparent;
  --h1-btn-hover-bg: var(--gzs-raised);
  --h1-quiet-border: var(--gzs-control);
  --h1-solid-bg: var(--gzs-text-on-night);
  --h1-solid-fg: var(--gzs-ink);
  --h1-solid-hover: var(--gzs-text-soft-night);
  --h1-box-bg: var(--gzs-night);
  --h1-box-on: var(--gzs-text-on-night);
  --h1-box-check: var(--gzs-ink);
  --h1-track: var(--gzs-hairline);
  --h1-disabled-fg: var(--gzs-text-secondary-night);
  --h1-selected-bg: var(--gzs-raised);
  --h1-waiting-fg: var(--gzs-waiting);
  --h1-chip-problem-bg: transparent;
  --h1-chip-problem-fg: var(--gzs-waiting);
  --h1-warning-icon: var(--gzs-waiting);
  --h1-ok: var(--gzs-ok-night);
  --h1-error: var(--gzs-error-night);
  --h1-focus: var(--gzs-waiting);
  --h1-link: var(--gzs-text-on-night);
  --h1-link-soft: var(--gzs-text-soft-night);
  --h1-link-hover: var(--gzs-text-soft-night);
  --h1-link-weight: 400;
  --h1-notice-size: 15px;
  --h1-notice-line: 22px;
  --h1-empty-border: 1.5px dashed var(--gzs-control);
  --h1-empty-bg: transparent;
  --h1-bar-bg: var(--gzs-night);
  --h1-bar-rule: 1px solid var(--gzs-hairline);
  --h1-tabbar-bg: var(--gzs-night);
  --h1-tabbar-rule: var(--gzs-hairline);
  --h1-tab-fg: var(--gzs-text-secondary-night);
  --h1-tab-on: var(--gzs-text-headline-night);
}

.h1-paper,
.h1-admin,
.h1-checklist,
.h1-sheet,
.h1-inline-confirm,
.h1-rail,
.h1-subtabs {
  --h1-fg: var(--gzs-ink);
  --h1-fg-strong: var(--gzs-ink);
  --h1-fg-bright: var(--gzs-text-lead-paper);
  --h1-fg-body: var(--gzs-text-body);
  --h1-fg-soft: var(--gzs-text-secondary);
  --h1-fg-2: var(--gzs-text-secondary);
  --h1-line: var(--gzs-card-border);
  --h1-row-line: var(--gzs-row-line);
  --h1-line-strong: var(--gzs-input-border);
  --h1-control: var(--gzs-control);
  --h1-card-bg: var(--gzs-surface);
  --h1-card-border: var(--gzs-card-border);
  --h1-input-bg: var(--gzs-surface);
  --h1-input-fg: var(--gzs-ink);
  --h1-input-border: var(--gzs-input-border);
  --h1-placeholder: var(--gzs-text-secondary);
  --h1-outline: var(--gzs-ink);
  --h1-btn-bg: var(--gzs-surface);
  --h1-btn-hover-bg: var(--gzs-paper);
  --h1-quiet-border: var(--gzs-input-border);
  --h1-solid-bg: var(--gzs-ink);
  --h1-solid-fg: var(--gzs-surface);
  --h1-solid-hover: var(--gzs-ink-hover);
  --h1-box-bg: var(--gzs-surface);
  --h1-box-on: var(--gzs-ink);
  --h1-box-check: var(--gzs-surface);
  --h1-track: var(--gzs-track);
  --h1-disabled-fg: var(--gzs-text-secondary);
  --h1-selected-bg: var(--gzs-paper);
  --h1-waiting-fg: var(--gzs-waiting-text);
  --h1-chip-problem-bg: var(--gzs-chip-amber-bg);
  --h1-chip-problem-fg: var(--gzs-chip-amber-text);
  --h1-warning-icon: var(--gzs-ink);
  --h1-ok: var(--gzs-ok-paper);
  --h1-error: var(--gzs-error-paper);
  --h1-focus: var(--gzs-ink);
  --h1-link: var(--gzs-ink);
  --h1-link-soft: var(--gzs-ink);
  --h1-link-hover: var(--gzs-ink-hover);
  --h1-link-weight: 600;
  --h1-notice-size: 14px;
  --h1-notice-line: 20px;
  --h1-empty-border: 2px dashed var(--gzs-ink);
  --h1-empty-bg: var(--gzs-surface-alt);
  --h1-bar-bg: var(--gzs-surface);
  --h1-bar-rule: 2px solid var(--gzs-ink);
  --h1-tabbar-bg: var(--gzs-surface);
  --h1-tabbar-rule: var(--gzs-card-border);
  --h1-tab-fg: var(--gzs-text-secondary);
  --h1-tab-on: var(--gzs-ink);
}

/* Section and panel grounds. */
.h1-night {
  background-color: var(--gzs-night);
  color: var(--gzs-text-on-night);
}

.h1-paper {
  background-color: var(--gzs-paper);
  color: var(--gzs-ink);
}

/* Body classes. .h1-public is a full H1 page. .h1-admin only sets the paper ground, so admin
   page bodies that are still v1 markup keep their own text color and font (P0.2). */
.h1-public {
  background-color: var(--gzs-night);
  color: var(--gzs-text-on-night);
  font-family: var(--gzs-font-body);
  -webkit-font-smoothing: antialiased;
}

.h1-admin {
  background-color: var(--gzs-paper);
}

/* Inline links and focus inside H1 scopes. :where() keeps the specificity at one class, so
   every component class below still wins. Not on .h1-admin, whose v1 bodies keep their look. */
.h1-public :where(a),
.h1-night :where(a),
.h1-paper :where(a),
.h1-card :where(a),
.h1-callout :where(a),
.h1-sheet :where(a),
.h1-inline-confirm :where(a),
.h1-checklist :where(a) {
  color: var(--h1-link);
  text-underline-offset: 3px;
}

.h1-public :where(a):hover,
.h1-night :where(a):hover,
.h1-paper :where(a):hover,
.h1-card :where(a):hover,
.h1-callout :where(a):hover,
.h1-sheet :where(a):hover,
.h1-inline-confirm :where(a):hover,
.h1-checklist :where(a):hover {
  color: var(--h1-link-hover);
}

.h1-public :where(:focus-visible),
.h1-night :where(:focus-visible),
.h1-paper :where(:focus-visible),
.h1-card :where(:focus-visible),
.h1-sheet :where(:focus-visible),
.h1-inline-confirm :where(:focus-visible),
.h1-checklist :where(:focus-visible) {
  outline: 3px solid var(--h1-focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------------
   2. Textures (guide 4.0, verbatim, plus the 32px desktop grid)
   ------------------------------------------------------------------------------------------ */

.h-grid {
  background-color: #0E0E12;
  background-image: linear-gradient(rgba(250, 250, 250, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(250, 250, 250, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
}

.h-grid-paper {
  background-color: #F4F1EA;
  background-image: linear-gradient(rgba(14, 14, 18, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 14, 18, 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
}

.h-shade {
  background-image: linear-gradient(180deg, rgba(14, 14, 18, 0) 0%, rgba(14, 14, 18, 0) 34%, rgba(14, 14, 18, 0.72) 62%, rgba(14, 14, 18, 0.95) 84%, #0E0E12 100%);
}

.h-shade-low {
  background-image: linear-gradient(180deg, rgba(14, 14, 18, 0) 0%, rgba(14, 14, 18, 0) 50%, rgba(14, 14, 18, 0.82) 78%, #0E0E12 100%);
}

/* Cuts a 2px night gap every 3.3333%, so a bar reads as 30 blocks. Night ground only. */
.h-cut {
  background-image: linear-gradient(90deg, transparent calc(100% - 2px), #0E0E12 calc(100% - 2px));
  background-size: 3.3333% 100%;
}

.h-hatch {
  background-color: #ECE7DD;
  background-image: repeating-linear-gradient(135deg, rgba(14, 14, 18, 0.18) 0 2px, transparent 2px 6px);
}

.h-credit {
  background-color: #FAFAFA;
  background-image: repeating-linear-gradient(135deg, rgba(14, 14, 18, 0.35) 0 2px, transparent 2px 6px);
}

.checker {
  background-color: #FFFFFF;
  background-image: repeating-conic-gradient(#F1EEE7 0% 25%, #FFFFFF 0% 50%);
  background-size: 20px 20px;
}

/* ------------------------------------------------------------------------------------------
   3. Utilities and layout
   ------------------------------------------------------------------------------------------ */

.h1-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.h1-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--gzs-content-max) + 2 * var(--gzs-gutter-desktop));
  margin: 0 auto;
  padding: 0 var(--gzs-gutter-public);
}

.h1-wrap-admin {
  box-sizing: border-box;
  width: 100%;
  padding: 0 var(--gzs-gutter-admin);
}

.h1-band {
  box-sizing: border-box;
  padding: 32px var(--gzs-gutter-public);
}

.h1-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.h1-stack-tight {
  gap: 8px;
}

.h1-icon {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

/* ------------------------------------------------------------------------------------------
   4. Type (guide 2.2 public, 2.3 admin)
   ------------------------------------------------------------------------------------------ */

.h1-display,
.h1-h2,
.h1-h2-sm,
.h1-page-title,
.h1-section-title,
.h1-callout-title,
.h1-item-title,
.h1-bignum,
.h1-bignum-admin,
.h1-of,
.h1-stat-num,
.h1-num {
  margin: 0;
  font-family: var(--gzs-font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--h1-fg-strong);
}

.h1-display {
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.h1-h2 {
  font-size: 40px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.h1-h2-sm {
  font-size: 28px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.h1-page-title {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.h1-section-title {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.h1-callout-title {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.h1-item-title {
  font-size: 20px;
  line-height: 1.1;
}

.h1-bignum {
  font-size: 76px;
  line-height: 0.84;
  letter-spacing: -0.045em;
}

.h1-bignum-admin {
  font-size: 60px;
  line-height: 50px;
  letter-spacing: -0.045em;
}

.h1-of {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--h1-fg-2);
}

.h1-stat-num {
  font-size: 24px;
  line-height: 26px;
}

.h1-numeral {
  font-family: var(--gzs-font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gzs-text-on-night);
}

.h1-eyebrow,
.h1-label {
  margin: 0;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.h1-label {
  font-weight: 700;
  letter-spacing: 0.12em;
}

.h1-eyebrow-square {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--h1-outline);
}

.h1-kicker {
  flex: none;
  width: 20px;
  height: 3px;
  background: var(--h1-outline);
}

.h1-lead {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--h1-fg-bright);
}

.h1-body {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--h1-fg);
}

.h1-text {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--h1-fg);
}

.h1-small,
.h1-hint {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

.h1-small {
  color: var(--h1-fg);
}

.h1-secondary {
  color: var(--h1-fg-2);
}

.h1-waiting-text {
  color: var(--h1-waiting-fg);
}

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

/* ------------------------------------------------------------------------------------------
   5. Buttons and links (guide 4.1, 4.2, 4.3)
   ------------------------------------------------------------------------------------------ */

/* The one red main action. Labels are 19px or larger and 800, the only reason white on
   #E63946 (4.17) passes. Never shrink the label. */
.h1-main {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  column-gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 0 0 20px;
  border: 0;
  border-radius: 0;
  background: var(--gzs-action);
  color: var(--gzs-on-action);
  font-family: var(--gzs-font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.h1-main:hover {
  background: var(--gzs-action-hover);
  color: var(--gzs-on-action);
}

.h1-main-admin {
  padding-left: 18px;
  letter-spacing: 0.03em;
  background: var(--gzs-action-admin);
}

.h1-main-admin:hover {
  background: var(--gzs-action-admin-hover);
}

.h1-main-label {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 8px 0;
  line-height: 1.05;
  text-transform: uppercase;
}

.h1-main-end {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.h1-main-price {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
}

.h1-main-end-pad {
  padding-right: 16px;
}

.h1-main-cell {
  flex: none;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--gzs-arrow-divider);
}

.h1-main-admin .h1-main-cell,
.h1-main-lg .h1-main-cell {
  width: 56px;
}

.h1-main-lg {
  min-height: 58px;
  font-size: 20px;
  letter-spacing: 0.04em;
}

.h1-main-xl {
  min-height: 60px;
  font-size: 20px;
  letter-spacing: 0.04em;
}

.h1-main-xl .h1-main-cell {
  width: 60px;
}

.h1-main-plain {
  justify-content: center;
  padding: 0 16px;
}

.h1-main-plain .h1-main-label {
  text-align: center;
}

.h1-main-inline {
  display: inline-flex;
  width: auto;
}

/* Black, outline and quiet buttons (Inter). */
.h1-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 6px 18px;
  border: 0;
  border-radius: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.h1-btn-sm {
  min-height: 44px;
  padding: 6px 14px;
  font-size: 14px;
}

.h1-btn-lg {
  min-height: 52px;
  padding: 6px 18px;
  font-size: 16px;
}

.h1-btn-block {
  display: flex;
  width: 100%;
}

.h1-btn-black {
  background: var(--h1-solid-bg);
  color: var(--h1-solid-fg);
}

.h1-btn-black:hover {
  background: var(--h1-solid-hover);
  color: var(--h1-solid-fg);
}

/* The one big save at the bottom of a settings form (guide 4.2, BOARD AS line 76). */
.h1-btn-display {
  min-height: 52px;
  font-family: var(--gzs-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.h1-btn-outline {
  padding-left: 14px;
  padding-right: 14px;
  background: var(--h1-btn-bg);
  color: var(--h1-outline);
  border: 2px solid var(--h1-outline);
}

.h1-btn-outline:hover {
  background: var(--h1-btn-hover-bg);
  color: var(--h1-outline);
}

.h1-btn-quiet {
  padding-left: 14px;
  padding-right: 14px;
  background: var(--h1-btn-bg);
  color: var(--h1-fg);
  border: 1px solid var(--h1-quiet-border);
  font-weight: 600;
}

.h1-btn-quiet:hover {
  background: var(--h1-btn-hover-bg);
  border-color: var(--h1-outline);
  color: var(--h1-fg);
}

.h1-btn:disabled {
  background: var(--h1-track);
  border-color: var(--h1-track);
  color: var(--h1-disabled-fg);
  cursor: not-allowed;
}

/* Disabled with the reason as its label (BOARD AM line 53). */
.h1-btn-disabled {
  min-height: 52px;
  background: var(--h1-track);
  color: var(--h1-disabled-fg);
  border: 0;
  font-family: var(--gzs-font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: not-allowed;
}

.h1-btn-disabled:hover,
.h1-btn:disabled:hover {
  background: var(--h1-track);
  color: var(--h1-disabled-fg);
}

.h1-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  font-weight: var(--h1-link-weight);
  color: var(--h1-link-soft);
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.h1-link:hover {
  color: var(--h1-link-hover);
}

.h1-link-strong {
  font-weight: 700;
  color: var(--h1-link);
}

.h1-link-quiet {
  font-size: 13px;
  font-weight: 400;
  color: var(--h1-fg-2);
}

.h1-link-sm {
  font-size: 14px;
}

.h1-mono-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.h1-mono-link:hover {
  color: var(--h1-link-hover);
}

/* Sticky bottom action bar (guide 4.3). Give the page bottom padding equal to its height. */
.h1-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--h1-bar-bg);
  border-top: var(--h1-bar-rule);
  color: var(--h1-fg);
}

/* Focus rings (guide 1.5 item 6): 3px amber on night, ink on paper, through --h1-focus. */
.h1-main:focus-visible,
.h1-btn:focus-visible,
.h1-link:focus-visible,
.h1-mono-link:focus-visible,
.h1-input:focus-visible,
.h1-select:focus-visible,
.h1-textarea:focus-visible,
.h1-check-input:focus-visible + .h1-box,
.h1-radio-card:has(.h1-check-input:focus-visible),
.h1-jobtile:focus-visible,
.h1-stat-link:focus-visible,
.h1-empty:focus-visible,
.h1-livelink:focus-visible,
.h1-seg:focus-visible,
.h1-more-summary:focus-visible,
.h1-nightrow-link:focus-visible,
.h1-paperrow-link:focus-visible,
.h1-checklist-action:focus-visible,
.h1-tab:focus-visible,
.h1-rail-link:focus-visible,
.h1-subtab:focus-visible,
.h1-header-brand:focus-visible,
.h1-header-club:focus-visible,
.h1-header-navlink:focus-visible,
.h1-appheader-gear:focus-visible,
.h1-backheader-link:focus-visible {
  outline: 3px solid var(--h1-focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------------
   6. Form fields (guide 4.9, error boards H1-Buy-Details-Error, H1-Player-Login)
   ------------------------------------------------------------------------------------------ */

.h1-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.h1-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.h1-field-label,
.h1-legend {
  margin: 0;
  padding: 0;
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--h1-fg-strong);
}

.h1-field-label-lg {
  font-size: 16px;
  line-height: 22px;
}

.h1-field-label-sub {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--h1-fg-2);
}

.h1-field-note {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--h1-fg-2);
}

.h1-field-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--h1-error);
}

.h1-field-error .h1-icon {
  margin-top: 1px;
}

.h1-input,
.h1-select,
.h1-textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--h1-input-border);
  border-radius: 0;
  background: var(--h1-input-bg);
  color: var(--h1-input-fg);
  font-family: var(--gzs-font-body);
  font-size: 16px;
  line-height: 22px;
  box-shadow: none;
}

.h1-input {
  height: 48px;
}

.h1-input-strong {
  border: 2px solid var(--h1-outline);
}

.h1-input::placeholder,
.h1-textarea::placeholder {
  color: var(--h1-placeholder);
  opacity: 1;
}

.h1-input[aria-invalid='true'],
.h1-select[aria-invalid='true'],
.h1-textarea[aria-invalid='true'] {
  border: 2px solid var(--h1-error);
}

.h1-input:disabled,
.h1-select:disabled,
.h1-textarea:disabled {
  background: var(--h1-track);
  color: var(--h1-disabled-fg);
  cursor: not-allowed;
}

.h1-select-wrap {
  position: relative;
  display: block;
}

.h1-select {
  height: 48px;
  padding: 0 44px 0 12px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.h1-select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -8px;
  color: var(--h1-input-fg);
  pointer-events: none;
}

.h1-textarea {
  min-height: 112px;
  padding: 10px 12px;
  resize: none;
}

.h1-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h1-legend {
  margin-bottom: 2px;
}

/* Square checkbox and square radio marker: a real input, visually hidden, plus a 22px box. */
.h1-check {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 13px 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--h1-fg);
  cursor: pointer;
}

.h1-check-ruled {
  border-top: 1px solid var(--h1-row-line);
}

.h1-check-changed {
  padding-left: 10px;
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--gzs-waiting);
}

.h1-check-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.h1-box {
  flex: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--h1-control);
  background: var(--h1-box-bg);
  color: var(--h1-box-check);
}

.h1-box .h1-icon {
  visibility: hidden;
}

.h1-check-input:checked + .h1-box {
  border-color: var(--h1-box-on);
  background: var(--h1-box-on);
}

.h1-check-input:checked + .h1-box .h1-icon {
  visibility: visible;
}

.h1-check-input:disabled + .h1-box {
  border-color: var(--h1-track);
  background: var(--h1-track);
}

.h1-check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.h1-check-text:has(.h1-check-hint) .h1-check-label {
  font-weight: 700;
}

.h1-check-hint {
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  color: var(--h1-fg-2);
}

.h1-radio-row {
  padding: 13px 12px;
  border-bottom: 1px solid var(--h1-row-line);
}

.h1-radio-row:has(.h1-check-input:checked) {
  font-weight: 700;
  background: var(--h1-selected-bg);
  box-shadow: inset 4px 0 0 var(--h1-outline);
}

/* Radio cards (guide 4.9, BOARD H1P lines 46 to 68, donate amounts H1-Pub-Donate). */
.h1-radio-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h1-radio-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.h1-radio-card {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 14px;
  background: var(--h1-card-bg);
  border: 1px solid var(--h1-card-border);
  color: var(--h1-fg);
  cursor: pointer;
}

.h1-radio-card:has(.h1-check-input:checked) {
  padding: 13px;
  border: 2px solid var(--h1-outline);
}

.h1-radio-card .h1-box {
  grid-column: 1;
}

.h1-radio-card .h1-check-input:focus-visible + .h1-box {
  outline: none;
}

.h1-radio-card-badge {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin: -14px -14px 0;
  padding: 0 14px;
  background: var(--h1-solid-bg);
  color: var(--h1-solid-fg);
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.h1-radio-card:has(.h1-check-input:checked) .h1-radio-card-badge {
  margin: -13px -13px 0;
}

.h1-radio-card-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--h1-solid-fg);
}

.h1-radio-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.h1-radio-card-eyebrow {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--h1-fg-2);
}

.h1-radio-card-title {
  font-family: var(--gzs-font-display);
  font-size: 16px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.h1-radio-card:has(.h1-check-input:checked) .h1-radio-card-title {
  font-size: 18px;
  line-height: 22px;
}

.h1-radio-card-sub {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--h1-fg-2);
}

.h1-radio-card-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.h1-radio-card-price {
  font-family: var(--gzs-font-display);
  font-size: 24px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.h1-radio-card:has(.h1-check-input:checked) .h1-radio-card-price {
  font-size: 48px;
  line-height: 0.86;
  letter-spacing: -0.05em;
}

.h1-radio-card-more {
  grid-column: 1 / -1;
  display: none;
  flex-direction: column;
  gap: 6px;
}

.h1-radio-card:has(.h1-check-input:checked) .h1-radio-card-more {
  display: flex;
}

/* Amount grid: just the square and a big number (donate). */
.h1-radio-cards-grid .h1-radio-card {
  grid-template-columns: 22px minmax(0, 1fr);
  padding: 0 14px;
}

.h1-radio-cards-grid .h1-radio-card:has(.h1-check-input:checked) {
  padding: 0 13px;
}

.h1-radio-cards-grid .h1-radio-card-title {
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.h1-radio-cards-grid .h1-radio-card:has(.h1-check-input:checked) .h1-radio-card-title {
  font-size: 30px;
  line-height: 1;
}

.h1-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h1-bullet {
  display: flex;
  gap: 10px;
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--h1-fg-body);
}

.h1-bullet .h1-icon {
  margin-top: 3px;
  color: var(--h1-fg);
}

.h1-date-selects {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px;
}

.h1-date-selects .h1-select {
  padding-right: 32px;
}

.h1-date-selects .h1-select-chevron {
  right: 10px;
}

/* ------------------------------------------------------------------------------------------
   7. Bars (guide 4.10, 4.18)
   ------------------------------------------------------------------------------------------ */

/* 30-block load bar. Night only, because .h-cut cuts in the night ground. */
.h1-loadbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h1-loadbar-track {
  position: relative;
  height: 14px;
  background: var(--gzs-hairline);
}

.h1-loadbar-panel .h1-loadbar-track {
  height: 16px;
}

.h1-loadbar-row .h1-loadbar-track {
  height: 10px;
}

.h1-loadbar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--gzs-waiting);
}

.h1-loadbar-cut {
  position: absolute;
  inset: 0;
}

.h1-loadbar-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gzs-text-secondary-night);
}

.h1-loadbar-pct {
  font-weight: 700;
  color: var(--gzs-waiting);
}

/* Segmented step bar on paper (setup checklist). */
.h1-segbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  height: 14px;
}

.h1-seg-step {
  background: var(--h1-track);
}

.h1-seg-step-on {
  background: var(--h1-outline);
}

/* Stacked split bar. */
.h1-splitbar {
  display: flex;
  gap: 2px;
  height: 14px;
}

.h1-splitbar-lg {
  gap: 3px;
  height: 28px;
}

.h1-split-seg {
  display: block;
  box-sizing: border-box;
  min-width: 2px;
}

.h1-split-league {
  background: var(--h1-outline);
}

.h1-split-credit {
  background: var(--gzs-swatch-credit);
}

.h1-split-waiting {
  background: var(--gzs-waiting);
}

.h1-split-held {
  background: var(--gzs-input-border);
}

.h1-split-fees-outline {
  border: 1px solid var(--h1-control);
}

.h1-splitbar-legend {
  display: grid;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--h1-fg);
}

.h1-splitbar-legend > span {
  min-width: 0;
  padding-right: 6px;
}

.h1-splitbar-legend-fees {
  color: var(--h1-fg-2);
}

/* ------------------------------------------------------------------------------------------
   8. Rows and lists (guide 4.6)
   ------------------------------------------------------------------------------------------ */

.h1-nightlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--h1-line);
}

.h1-nightrow {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 0;
  border-bottom: 1px solid var(--h1-line);
  color: var(--h1-fg);
  text-decoration: none;
}

.h1-nightrow-item {
  display: block;
}

.h1-nightrow-link:hover .h1-nightrow-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.h1-nightrow-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.h1-nightrow-title {
  font-family: var(--gzs-font-display);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--h1-fg);
}

.h1-nightrow-sub {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--h1-fg-2);
}

.h1-nightrow-meta {
  flex: none;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  color: var(--h1-fg-2);
}

.h1-paperlist {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--h1-card-bg);
  border: 1px solid var(--h1-card-border);
  color: var(--h1-fg);
}

.h1-paperrow {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 4px 4px 4px 12px;
  border-bottom: 1px solid var(--h1-row-line);
  font-family: var(--gzs-font-body);
  color: var(--h1-fg);
}

.h1-paperrow:last-child {
  border-bottom: 0;
}

.h1-paperrow-attention {
  background: var(--gzs-warm);
}

.h1-paperrow-num {
  flex: none;
  width: 26px;
  font-family: var(--gzs-font-display);
  font-size: 17px;
  font-weight: 800;
}

.h1-paperrow-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 18px;
}

.h1-paperrow-title {
  font-size: 15px;
  line-height: 19px;
  font-weight: 700;
}

.h1-paperrow-link {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--h1-fg);
  text-decoration: none;
}

.h1-paperrow-link:hover .h1-paperrow-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.h1-paperrow-sub {
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

.h1-paperrow-sub-mono {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--h1-fg);
}

.h1-paperrow-sub-waiting {
  font-weight: 600;
  color: var(--h1-waiting-fg);
}

.h1-paperrow-sub-error {
  font-weight: 600;
  color: var(--h1-error);
}

.h1-paperrow-amount {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 18px;
}

.h1-paperrow-amount-num {
  font-family: var(--gzs-font-display);
  font-size: 16px;
  font-weight: 800;
}

.h1-paperrow-amount-sub {
  font-size: 12px;
  color: var(--h1-waiting-fg);
}

.h1-paperrow-action {
  flex: none;
  display: flex;
  align-items: center;
}

.h1-jobtiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.h1-jobtile {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-height: 72px;
  padding: 10px 12px;
  background: var(--h1-card-bg);
  border: 1px solid var(--h1-card-border);
  color: var(--h1-fg);
  text-decoration: none;
}

.h1-jobtile:hover {
  border-color: var(--h1-outline);
}

.h1-jobtile-strong {
  padding: 9px 11px;
  border: 2px solid var(--h1-outline);
}

.h1-jobtile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.h1-jobtile-label {
  font-family: var(--gzs-font-display);
  font-size: 16px;
  line-height: 1.15;
  font-weight: 800;
}

/* ------------------------------------------------------------------------------------------
   9. Chips, count badge, live dot (guide 4.8)
   ------------------------------------------------------------------------------------------ */

.h1-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--gzs-font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  max-width: 100%;
  color: var(--h1-fg);
}

.h1-chip-clock {
  padding: 4px 8px;
}

.h1-chip-waiting {
  background: var(--gzs-waiting);
  border-color: var(--gzs-waiting);
  color: var(--gzs-ink);
  font-family: var(--gzs-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.h1-chip-ok,
.h1-chip-neutral {
  border-color: var(--h1-outline);
  color: var(--h1-fg);
}

.h1-chip-ok {
  padding: 3px 8px;
}

.h1-chip-soldout {
  background: var(--h1-track);
  border-color: var(--h1-track);
  color: var(--h1-fg);
}

.h1-chip-problem {
  padding: 3px 8px;
  background: var(--h1-chip-problem-bg);
  border-color: var(--gzs-waiting);
  color: var(--h1-chip-problem-fg);
}

.h1-chip-role {
  padding: 3px 8px;
  border-color: var(--h1-line-strong);
  color: var(--h1-fg-soft);
  font-family: var(--gzs-font-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.h1-count {
  flex: none;
  align-self: flex-start;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--gzs-waiting);
  color: var(--gzs-ink);
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

.h1-count-md {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
}

.h1-livedot {
  flex: none;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--gzs-waiting);
  box-shadow: 0 0 0 3px var(--gzs-waiting-ring);
}

.h1-livelink {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--h1-fg);
  text-decoration: none;
}

.h1-livelink:hover {
  color: var(--h1-link-hover);
}

/* Segmented filter links (BOARD APK lines 26 to 30). */
.h1-seg-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.h1-seg {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  background: var(--h1-card-bg);
  border: 1px solid var(--h1-card-border);
  color: var(--h1-fg);
  font-family: var(--gzs-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.h1-seg[aria-current='true'],
.h1-seg[aria-current='page'] {
  background: var(--h1-solid-bg);
  border-color: var(--h1-solid-bg);
  color: var(--h1-solid-fg);
  font-weight: 700;
}

/* ------------------------------------------------------------------------------------------
   10. Cards and callouts (guide 4.7)
   ------------------------------------------------------------------------------------------ */

.h1-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 16px;
  background: var(--h1-card-bg);
  border: 1px solid var(--h1-card-border);
  color: var(--h1-fg);
}

.h1-card-strong {
  padding: 15px;
  border: 2px solid var(--h1-outline);
}

.h1-night-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 20px;
}

.h1-night-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.h1-night-panel-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--h1-fg);
}

.h1-night-panel-date {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  color: var(--h1-fg-2);
}

.h1-needs-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 16px;
  background: var(--gzs-raised);
  border: 1px solid var(--gzs-hairline);
  border-top: 3px solid var(--gzs-waiting);
  color: var(--gzs-text-on-night);
}

.h1-needs-title {
  margin: 0;
  font-family: var(--gzs-font-display);
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--gzs-text-headline-night);
}

.h1-needs-text {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--gzs-text-bright);
}

.h1-callout {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  background: var(--h1-card-bg);
  border: 1px solid var(--h1-card-border);
  border-left: 4px solid var(--h1-outline);
  font-family: var(--gzs-font-body);
  font-size: var(--h1-notice-size);
  line-height: var(--h1-notice-line);
  color: var(--h1-fg);
}

.h1-callout > .h1-icon {
  margin-top: 1px;
}

.h1-callout-note,
.h1-callout-ok {
  border-left-color: var(--h1-outline);
}

.h1-callout-warning {
  border-left-color: var(--gzs-waiting);
}

.h1-callout-warning > .h1-icon {
  color: var(--h1-warning-icon);
}

.h1-callout-error {
  border-left-color: var(--h1-error);
}

.h1-callout-error > .h1-icon {
  color: var(--h1-error);
}

.h1-callout-ok > .h1-icon {
  color: var(--h1-ok);
}

.h1-callout-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.h1-callout-body > p {
  margin: 0;
}

.h1-callout-lead {
  font-weight: 700;
}

/* More options (guide 4.7 expander, built on <details> so it works with no JavaScript). */
.h1-more {
  border-top: 1px solid var(--h1-track);
}

.h1-more-summary {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 14px 20px;
  background: var(--h1-selected-bg);
  color: var(--h1-fg);
  font-family: var(--gzs-font-body);
  list-style: none;
  cursor: pointer;
}

.h1-more-summary::-webkit-details-marker {
  display: none;
}

.h1-more-summary > .h1-icon {
  margin-top: 2px;
}

.h1-more[open] > .h1-more-summary > .h1-icon {
  transform: rotate(90deg);
}

.h1-more-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.h1-more-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.h1-more-sub {
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

.h1-more-body {
  padding: 16px 20px;
}

/* ------------------------------------------------------------------------------------------
   11. Confirm sheet and inline confirm (guide 4.12)
   ------------------------------------------------------------------------------------------ */

.h1-sheet-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 56px;
  background: var(--gzs-scrim);
}

.h1-sheet {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--gzs-surface);
  border-top: 3px solid var(--gzs-ink);
  color: var(--gzs-ink);
  font-family: var(--gzs-font-body);
}

.h1-sheet-grab {
  align-self: center;
  width: 44px;
  height: 4px;
  background: var(--gzs-card-border);
}

.h1-sheet-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h1-sheet-title {
  margin: 0;
  font-family: var(--gzs-font-display);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--gzs-ink);
}

.h1-sheet-sub {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--gzs-text-secondary);
}

.h1-sheet-sum {
  margin: 0;
  padding: 14px;
  background: var(--gzs-paper);
  border-left: 4px solid var(--gzs-ink);
  font-size: 16px;
  line-height: 24px;
}

.h1-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.h1-sheet-actions > .h1-link {
  align-self: center;
  padding: 0 16px;
}

.h1-sheet-after {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 19px;
  color: var(--gzs-text-secondary);
}

.h1-inline-confirm {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  background: var(--gzs-paper);
  border: 2px solid var(--gzs-ink);
  color: var(--gzs-ink);
  font-family: var(--gzs-font-body);
}

.h1-inline-confirm-title {
  margin: 0;
  font-family: var(--gzs-font-body);
  letter-spacing: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}

.h1-inline-confirm-text {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
}

.h1-inline-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}

/* ------------------------------------------------------------------------------------------
   12. Money split list (guide 4.18, 4.12)
   ------------------------------------------------------------------------------------------ */

.h1-split {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.h1-split-list {
  list-style: none;
  margin: 0;
  padding: 0 14px;
  background: var(--h1-card-bg);
  border: 1px solid var(--h1-card-border);
  color: var(--h1-fg);
}

.h1-split-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--h1-row-line);
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 20px;
}

.h1-split-row:last-child {
  border-bottom: 0;
}

.h1-split-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.h1-split-amt {
  flex: none;
  font-family: var(--gzs-font-mono);
  font-weight: 700;
}

.h1-split-fee {
  min-height: 40px;
  font-size: 14px;
  color: var(--h1-fg-2);
}

.h1-split-fee .h1-split-name {
  padding-left: 22px;
  font-weight: 400;
}

.h1-split-fee .h1-split-amt {
  font-weight: 400;
}

.h1-split-closing {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

/* Detailed variant: the confirm sheet's share list. */
.h1-split-list-detailed {
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--h1-outline);
}

.h1-split-list-detailed .h1-split-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--h1-row-line);
}

.h1-split-list-detailed .h1-split-row:last-child {
  border-bottom: 1px solid var(--h1-row-line);
}

.h1-split-list-detailed .h1-split-who {
  font-size: 16px;
  font-weight: 700;
}

.h1-split-list-detailed .h1-split-amt {
  font-family: var(--gzs-font-display);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

.h1-split-list-detailed .h1-split-fee .h1-split-who {
  font-size: 15px;
  font-weight: 400;
  color: var(--h1-fg-2);
}

.h1-split-list-detailed .h1-split-fee .h1-split-amt {
  font-family: var(--gzs-font-mono);
  font-size: 15px;
  font-weight: 400;
  color: var(--h1-fg-2);
}

.h1-split-detail {
  grid-column: 2 / -1;
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

.h1-swatch {
  flex: none;
  display: inline-block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
}

.h1-swatch-league {
  background: var(--h1-outline);
}

.h1-swatch-credit {
  background: var(--gzs-swatch-credit);
}

.h1-swatch-fees {
  border: 1px solid var(--gzs-input-border);
}

.h1-swatch-lg {
  width: 14px;
  height: 14px;
}

/* ------------------------------------------------------------------------------------------
   13. Big number and stats (guide 4.10, 4.11)
   ------------------------------------------------------------------------------------------ */

.h1-bignum-block {
  display: flex;
  flex-direction: column;
}

.h1-bignum-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-bignum-pct {
  font-weight: 700;
  color: var(--h1-waiting-fg);
}

.h1-bignum-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 12px;
  margin-top: 6px;
}

.h1-bignum-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 2px;
}

.h1-bignum-count {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h1-fg);
}

.h1-statpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--h1-line);
}

.h1-stat {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px 10px 0;
  color: var(--h1-fg);
  text-decoration: none;
}

.h1-statpair > .h1-stat:first-child {
  border-right: 1px solid var(--h1-line);
}

.h1-statpair > .h1-stat + .h1-stat {
  padding-left: 16px;
}

.h1-stat-link {
  min-height: 44px;
}

.h1-stat-link:hover .h1-stat-label {
  text-decoration: underline;
}

.h1-stat-label {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--h1-fg-2);
}

.h1-stat-sub {
  font-family: var(--gzs-font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--h1-fg-2);
}

.h1-stat-waiting .h1-stat-num {
  color: var(--h1-waiting-fg);
}

/* ------------------------------------------------------------------------------------------
   14. Empty state (guide 4.13)
   ------------------------------------------------------------------------------------------ */

.h1-empty {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border: var(--h1-empty-border);
  border-radius: 0;
  background: var(--h1-empty-bg);
  color: var(--h1-fg);
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 20px;
  text-decoration: none;
}

.h1-empty-sub {
  color: var(--h1-fg-2);
}

.h1-empty-slot {
  justify-content: space-between;
  min-height: 120px;
  padding: 16px 20px;
}

.h1-empty-slot-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h1-empty-slot-title {
  font-family: var(--gzs-font-display);
  font-size: 28px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.h1-empty-link:hover {
  border-style: solid;
}

/* ------------------------------------------------------------------------------------------
   15. Identity: tiles, club badge, swatch, stripe, photo (guide 1.4, 4.16)
   ------------------------------------------------------------------------------------------ */

.h1-tile {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--h1-line-strong);
  background: var(--h1-card-bg);
  color: var(--h1-fg);
  font-family: var(--gzs-font-display);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.h1-tile-28 {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.h1-tile-32 {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.h1-tile-64 {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.h1-tile-club {
  border-width: 2px;
}

.h1-badge {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid;
  font-family: var(--gzs-font-display);
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

.h1-badge-36 {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

.h1-club-swatch {
  flex: none;
  display: inline-block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid;
}

.h1-club-swatch-14 {
  width: 14px;
  height: 14px;
}

.h1-stripe {
  flex: none;
  display: flex;
  flex-direction: column;
  height: 6px;
}

.h1-stripe-thick {
  display: block;
  height: 4px;
}

.h1-stripe-thin {
  display: block;
  height: 2px;
}

.h1-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--gzs-raised);
}

.h1-photo-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.h1-photo-shade {
  position: absolute;
  inset: 0;
}

.h1-photo-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h1-photo-caption-eyebrow {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gzs-text-soft-night);
}

.h1-photo-caption-text {
  font-family: var(--gzs-font-display);
  font-size: 18px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gzs-text-headline-night);
}

/* ------------------------------------------------------------------------------------------
   16. Checklist (guide 4.17)
   ------------------------------------------------------------------------------------------ */

.h1-checklist {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--gzs-surface);
  border: 2px solid var(--gzs-ink);
  color: var(--gzs-ink);
  font-family: var(--gzs-font-body);
}

.h1-checklist-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--gzs-track);
}

.h1-checklist-title {
  margin: 0;
  font-family: var(--gzs-font-display);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.h1-checklist-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.h1-checklist-done {
  font-family: var(--gzs-font-display);
  font-size: 22px;
  font-weight: 800;
}

.h1-checklist-togo {
  font-size: 13px;
  color: var(--gzs-text-secondary);
}

.h1-checklist-items {
  list-style: none;
  margin: 0;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
}

.h1-checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--gzs-row-line);
}

.h1-checklist-item:last-child {
  border-bottom: 0;
}

.h1-checklist-item-active {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 0 16px;
}

.h1-checklist-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.h1-checklist-box {
  flex: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h1-checklist-box-done {
  background: var(--gzs-ink);
  color: var(--gzs-surface);
}

.h1-checklist-box-todo {
  border: 2px solid var(--gzs-control);
  background: var(--gzs-surface);
}

.h1-checklist-box-active {
  border: 2px solid var(--gzs-ink);
  background: var(--gzs-surface);
}

.h1-checklist-box-dot {
  width: 8px;
  height: 8px;
  background: var(--gzs-waiting);
}

.h1-checklist-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.h1-checklist-label {
  font-size: 15px;
  font-weight: 600;
}

.h1-checklist-item-done .h1-checklist-label {
  font-weight: 400;
  color: var(--gzs-text-secondary);
}

.h1-checklist-item-active .h1-checklist-label {
  font-size: 16px;
  font-weight: 700;
}

.h1-checklist-sub {
  font-size: 13px;
  color: var(--gzs-text-secondary);
}

.h1-checklist-meta {
  margin-left: auto;
  flex: none;
  font-size: 13px;
  color: var(--gzs-text-secondary);
  text-align: right;
}

.h1-checklist-action {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gzs-ink);
  white-space: nowrap;
}

.h1-checklist-item-active > .h1-btn,
.h1-checklist-item-active > .h1-main {
  width: auto;
  margin-left: 34px;
}

.h1-checklist-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 14px 16px 18px;
  background: var(--gzs-paper);
  border-top: 1px solid var(--gzs-track);
}

.h1-checklist-foot > .h1-link {
  align-self: flex-start;
}

.h1-checklist-foot > p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

/* ------------------------------------------------------------------------------------------
   17. Run on Ghost Zero footer (guide 4.14)
   ------------------------------------------------------------------------------------------ */

.h1-gzfoot {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px var(--gzs-gutter-public) calc(20px + env(safe-area-inset-bottom));
  background: var(--gzs-night-deep);
  border-top: 1px solid var(--gzs-hairline);
  color: var(--gzs-text-on-night);
}

.h1-gzfoot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.h1-gzfoot-mark {
  display: flex;
  align-items: center;
  gap: 12px;
}

.h1-gzfoot-square {
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--gzs-text-on-night);
}

.h1-gzfoot-square-dot {
  width: 8px;
  height: 8px;
  background: var(--gzs-text-on-night);
}

.h1-gzfoot-words {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.h1-gzfoot-runon {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gzs-text-secondary-night);
}

.h1-gzfoot-wordmark {
  display: flex;
  align-items: baseline;
  font-family: var(--gzs-font-display);
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gzs-text-on-night);
}

.h1-gzfoot-wordmark-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 5px 2px;
  background: var(--gzs-text-on-night);
}

.h1-gzfoot-text {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--gzs-text-secondary-night);
}

/* The quiet form (RunOnGhostZeroH1 quiet): admin pages, on paper. A small outlined mark and one
   underlined line of text that is the link. 13px secondary ink, 44px tall to tap. */
.h1-gzfoot-quiet {
  display: flex;
  align-items: center;
  padding: 0 var(--gzs-gutter-admin) 8px;
}

.h1-gzfoot-quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--gzs-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.h1-gzfoot-quiet-link:hover {
  color: var(--gzs-ink);
}

.h1-gzfoot-quiet-link:focus-visible {
  outline: 3px solid var(--gzs-ink);
  outline-offset: 2px;
}

.h1-gzfoot-quiet-square {
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
}

.h1-gzfoot-quiet-dot {
  width: 4px;
  height: 4px;
  background: currentColor;
}

/* In the desktop rail foot it lines up with the text above it and takes no side padding of its own. */
.h1-rail-foot .h1-gzfoot-quiet {
  padding: 0;
}

/* ------------------------------------------------------------------------------------------
   18. Shell parts (guide 4.4, 4.5). The JSX lives with the shells (P0.2) and nav.tsx.
   ------------------------------------------------------------------------------------------ */

/* Public header, night, 56px phone, 72px desktop. */
.h1-header {
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--gzs-header-public);
  padding: 0 16px 0 var(--gzs-gutter-public);
  background: var(--gzs-night);
  border-bottom: 1px solid var(--gzs-hairline);
  color: var(--gzs-text-on-night);
}

.h1-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 0;
  color: var(--gzs-text-on-night);
  text-decoration: none;
  font-family: var(--gzs-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.h1-header-club {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--gzs-text-on-night);
  text-decoration: none;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.h1-header-nav {
  display: none;
}

.h1-header-navlink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  color: var(--gzs-text-secondary-night);
  text-decoration: none;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.h1-header-navlink[aria-current='page'] {
  color: var(--gzs-text-headline-night);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--gzs-text-headline-night);
}

/* A step inside a flow (registration, BOARDS H1-P2-RegisterInfo and -RegisterExtras): the way back at
   the left, the league name as plain text at the right. */
.h1-header-has-back {
  padding-left: 4px;
}

.h1-header-back {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px 0 8px;
  color: var(--gzs-text-on-night);
  text-decoration: none;
  font-family: var(--gzs-font-body);
  font-size: 16px;
  font-weight: 600;
}

.h1-header-back:focus-visible,
.h1-header-end:focus-visible {
  outline: 3px solid var(--h1-focus);
  outline-offset: 2px;
}

/* One short link at the right ("Player sign in"). */
.h1-header-end {
  flex: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--gzs-text-on-night);
  text-decoration: none;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Admin app header, night. Phone stacks rows, desktop is one 64px row. */
.h1-appheader {
  flex: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px var(--gzs-gutter-admin) 8px;
  background: var(--gzs-night);
  border-bottom: 1px solid var(--gzs-hairline);
  color: var(--gzs-text-on-night);
}

.h1-appheader-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}

.h1-appheader-season {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gzs-text-secondary-night);
}

/* Header control border is #6E6E78, not the boards' #3A3A48 (guide 1.5 item 1). */
.h1-appheader-gear {
  flex: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 72px;
  min-height: 44px;
  border: 1px solid var(--gzs-control);
  color: var(--gzs-text-on-night);
  text-decoration: none;
  font-family: var(--gzs-font-body);
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
}

/* Back-link header (BOARD AA lines 4 to 7). */
.h1-backheader {
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 8px 0 4px;
  background: var(--gzs-night);
  border-bottom: 1px solid var(--gzs-hairline);
  color: var(--gzs-text-on-night);
}

.h1-backheader-link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px 0 8px;
  color: var(--gzs-text-on-night);
  text-decoration: none;
  font-family: var(--gzs-font-body);
  font-size: 16px;
  font-weight: 600;
}

/* Bottom tab bar. The column count follows the number of tabs (4 admin, 5 with Games or in
   the player area), so the tab list stays data-driven. */
.h1-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: calc(var(--gzs-tabbar) + env(safe-area-inset-bottom));
  margin: 0;
  padding: 0 0 calc(8px + env(safe-area-inset-bottom));
  background: var(--h1-tabbar-bg);
  border-top: 1px solid var(--h1-tabbar-rule);
}

.h1-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 2px;
  color: var(--h1-tab-fg);
  text-decoration: none;
  font-family: var(--gzs-font-body);
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  text-align: center;
}

.h1-tab[aria-current='page'] {
  color: var(--h1-tab-on);
  font-weight: 700;
  box-shadow: inset 0 3px 0 var(--h1-tab-on);
}

.h1-tab[aria-current='page'] .h1-icon {
  stroke-width: 2.2;
}

.h1-tab .h1-count {
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: 6px;
}

/* A long label ("Who to ask" on a 360px phone) wraps to a second line rather than being cut. */
.h1-tab-label {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Put on <body> (or the page wrapper) when a tab bar is shown, so nothing hides under it.
   Use .h1-with-tabbar-phone with .h1-tabbar-phone (admin, where the rail takes over on desktop). */
.h1-with-tabbar,
.h1-with-tabbar-phone {
  padding-bottom: calc(var(--gzs-tabbar) + env(safe-area-inset-bottom));
}

/* Desktop admin rail (BOARD AHD lines 18 to 27). Hidden on phones. */
.h1-rail {
  display: none;
}

.h1-rail-link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 12px;
  color: var(--gzs-ink);
  text-decoration: none;
  font-family: var(--gzs-font-body);
  font-size: 16px;
  font-weight: 600;
}

.h1-rail-link:hover {
  background: var(--gzs-paper);
}

.h1-rail-link[aria-current='page'] {
  background: var(--gzs-ink);
  color: var(--gzs-surface);
  font-weight: 700;
}

.h1-rail-link .h1-count {
  align-self: center;
  margin-left: auto;
}

.h1-rail-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 16px 12px 0;
  border-top: 1px solid var(--gzs-track);
}

.h1-demo-note {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

/* Sub-tabs under the header (BOARD APK lines 15 to 21). Scrolls sideways on narrow phones. */
.h1-subtabs {
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  min-height: 48px;
  padding: 0 8px;
  overflow-x: auto;
  background: var(--gzs-surface);
  border-bottom: 1px solid var(--gzs-card-border);
  scrollbar-width: none;
}

.h1-subtab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 8px;
  color: var(--gzs-text-secondary);
  text-decoration: none;
  font-family: var(--gzs-font-body);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.h1-subtab[aria-current='page'] {
  color: var(--gzs-ink);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--gzs-ink);
}

/* Phone-only and desktop-only content. Hiding is all these classes do, so they never fight a
   component's own display value. */
@media (max-width: 1023.98px) {
  .h1-desktop-only {
    display: none;
  }
}

/* ------------------------------------------------------------------------------------------
   19. Desktop, 1024px and up
   ------------------------------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .h1-phone-only {
    display: none;
  }

  .h-grid,
  .h-grid-paper {
    background-size: 32px 32px;
  }

  .h1-wrap {
    padding: 0 var(--gzs-gutter-desktop);
  }

  .h1-wrap-admin {
    padding: 28px 40px 32px;
  }

  .h1-band {
    padding: 64px var(--gzs-gutter-desktop);
  }

  .h1-display {
    font-size: 184px;
    line-height: 0.8;
    letter-spacing: -0.045em;
  }

  .h1-h2 {
    font-size: 64px;
    line-height: 0.9;
    letter-spacing: -0.04em;
  }

  .h1-h2-sm {
    font-size: 44px;
    line-height: 0.92;
    letter-spacing: -0.035em;
  }

  .h1-page-title {
    font-size: 44px;
    line-height: 0.95;
  }

  .h1-section-title {
    font-size: 28px;
  }

  .h1-item-title {
    font-size: 18px;
  }

  .h1-bignum {
    font-size: 104px;
    line-height: 0.82;
  }

  .h1-bignum-admin {
    font-size: 88px;
    line-height: 0.84;
  }

  .h1-of {
    font-size: 28px;
  }

  .h1-stat-num {
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .h1-eyebrow {
    font-size: 13px;
  }

  .h1-lead {
    font-size: 18px;
    line-height: 28px;
  }

  .h1-lead-hero {
    font-size: 24px;
    line-height: 32px;
  }

  .h1-body {
    font-size: 16px;
  }

  .h1-small {
    font-size: 14px;
    line-height: 20px;
  }

  .h1-bullet {
    font-size: 16px;
    line-height: 22px;
  }

  .h1-main:not(.h1-main-admin) {
    min-height: 64px;
    padding-left: 24px;
    font-size: 20px;
    letter-spacing: 0.03em;
  }

  .h1-main:not(.h1-main-admin) .h1-main-cell {
    width: 64px;
  }

  .h1-main-hero:not(.h1-main-admin) {
    font-size: 22px;
  }

  .h1-main-plain:not(.h1-main-admin) {
    padding: 0 24px;
  }

  .h1-link {
    font-size: 16px;
  }

  .h1-link-quiet {
    font-size: 13px;
  }

  .h1-link-sm {
    font-size: 14px;
  }

  .h1-mono-link {
    font-size: 13px;
    text-underline-offset: 6px;
  }

  .h1-input,
  .h1-select {
    height: 44px;
    min-height: 44px;
    font-size: 15px;
  }

  .h1-textarea {
    font-size: 15px;
  }

  .h1-card {
    padding: 20px;
  }

  .h1-card-strong {
    padding: 19px;
  }

  .h1-loadbar-legend {
    font-size: 12px;
  }

  .h1-empty-slot {
    padding: 0 32px;
  }

  .h1-empty-slot-title {
    font-size: 40px;
  }

  .h1-jobtiles {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .h1-checklist-head {
    padding: 20px 20px 16px;
  }

  .h1-checklist-title {
    font-size: 28px;
  }

  .h1-checklist-items {
    padding: 0 20px;
  }

  .h1-checklist-foot {
    padding: 14px 20px 18px;
  }

  .h1-sheet-page {
    justify-content: center;
    align-items: center;
    padding: 48px 24px;
  }

  .h1-sheet {
    max-width: 560px;
    padding: 24px 32px 32px;
  }

  .h1-sheet-grab {
    display: none;
  }

  .h1-gzfoot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    min-height: 120px;
    padding: 24px var(--gzs-gutter-desktop);
  }

  .h1-gzfoot-row {
    display: contents;
  }

  .h1-gzfoot-mark {
    gap: 16px;
    order: 1;
  }

  .h1-gzfoot-square {
    width: 44px;
    height: 44px;
    border-width: 2.5px;
  }

  .h1-gzfoot-square-dot {
    width: 11px;
    height: 11px;
  }

  .h1-gzfoot-words {
    gap: 6px;
  }

  .h1-gzfoot-wordmark {
    font-size: 28px;
  }

  .h1-gzfoot-wordmark-dot {
    width: 8px;
    height: 8px;
    margin: 0 6px 3px;
  }

  .h1-gzfoot-text {
    order: 2;
    flex: 1;
    max-width: 560px;
    font-size: 15px;
    line-height: 23px;
  }

  .h1-gzfoot-link {
    order: 3;
  }

  .h1-header {
    height: var(--gzs-header-public-desktop);
    padding: 0 var(--gzs-gutter-desktop);
  }

  .h1-header-brand {
    gap: 12px;
    font-size: 16px;
  }

  .h1-header-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
  }

  .h1-appheader {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--gzs-header-admin-desktop);
    padding: 0 24px 0 28px;
  }

  .h1-appheader-gear {
    flex-direction: row;
    gap: 8px;
    width: auto;
    padding: 0 14px;
    font-size: 14px;
  }

  .h1-tabbar-phone {
    display: none;
  }

  .h1-with-tabbar-phone {
    padding-bottom: 0;
  }

  .h1-rail {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: none;
    width: var(--gzs-rail);
    padding: 24px 16px;
    background: var(--gzs-surface);
    border-right: 1px solid var(--gzs-card-border);
  }
}

/* ------------------------------------------------------------------------------------------
   20. Page frames (P0.2). src/views/h1/shell-admin.tsx and shell-public.tsx.
   ------------------------------------------------------------------------------------------ */

/* Below the admin header: the page alone on a phone, the rail beside it on desktop. */
.h1-appbody {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.h1-appcol {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Brand block in the admin header: shield (or a coach's club badge), the name, and under it the
   season (or the league for a coach). Stacked on a phone, one line on desktop. */
.h1-appheader-brand {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--gzs-text-on-night);
  text-decoration: none;
}

.h1-appheader-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.h1-appheader-league {
  font-family: var(--gzs-font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.h1-appheader-sub {
  font-family: var(--gzs-font-body);
  font-size: 12px;
  color: var(--gzs-text-secondary-night);
}

.h1-appheader-brand-club .h1-appheader-league {
  font-size: 17px;
  letter-spacing: 0.06em;
}

.h1-appheader-end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A game-day helper has no account, so the header names them: first name after the Helper chip (P3.2). */
.h1-appheader-person {
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--gzs-text-on-night);
}

.h1-appheader-find {
  display: flex;
  gap: 8px;
}

/* The Settings page lights the gear: filled, ink text (BOARD AS). */
.h1-appheader-gear[aria-current='page'] {
  background: var(--gzs-text-on-night);
  color: var(--gzs-ink);
  font-weight: 700;
}

/* The count on a sub-tab sits in the middle of the tab, not at the top (the base badge is top-aligned). */
.h1-subtab .h1-count {
  align-self: center;
}

/* Saved / could not save, above the page body. */
.h1-flash {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

/* The demo or test league line (BOARD H1P). Under the header on a public page, under the
   sub-tabs on an admin phone (the desktop admin shows it in the rail). */
.h1-demo-bar {
  box-sizing: border-box;
  padding: 12px var(--gzs-gutter-public);
  background: var(--gzs-paper);
  color: var(--gzs-ink);
  border-bottom: 1px solid var(--gzs-card-border);
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
}

.h1-demo-bar-admin {
  padding: 10px var(--gzs-gutter-admin);
}

/* <main> of an H1 public page: fills the page, and unlike the v1 main it adds no bottom space
   (the last band meets the footer). */
.h1-pubmain {
  flex: 1 0 auto;
  padding-bottom: 0;
}

@media (min-width: 1024px) {
  .h1-appbody {
    flex-direction: row;
  }

  .h1-appheader-row {
    flex: 1;
    min-width: 0;
  }

  .h1-appheader-name {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }

  .h1-appheader-league {
    font-size: 16px;
  }

  .h1-appheader-brand-club .h1-appheader-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /* Sub-tabs sit in the page column as a boxed strip lined up with the page body (BOARD AAS). */
  .h1-appcol .h1-subtabs {
    width: min(calc(100% - 80px), 1020px);
    min-height: 52px;
    margin: 24px auto 0;
    padding: 0 8px;
    border: 1px solid var(--gzs-card-border);
    overflow-x: visible;
  }

  .h1-appcol .h1-subtab {
    min-height: 50px;
    padding: 0 16px;
    font-size: 15px;
  }

  .h1-demo-bar {
    padding: 12px var(--gzs-gutter-desktop);
  }
}